/* ==========================================================================
   Blog (Journal) : /blog/ et ses 11 articles, dans le build depuis le 28/09/2026.
   S'appuie sur les jetons et composants de site.css (palette Héritage, Instrument Serif, Hanken Grotesk).
   Les classes des articles sont celles de l'ancien blog (eyebrow, lead, card, note, quiz, faq-section...) :
   toutes sont bornées à .billet pour ne rien toucher ailleurs. Préfixe b- : socle, fil d'Ariane et index.
   ========================================================================== */

/* ---------- Socle : en-tête fixe au-dessus du crème ---------- */
.b-page{padding-top:var(--tete-h)}
.b-ariane{padding-top:clamp(20px, 4vh, 40px);color:var(--encre-doux)}
.b-ariane ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px}
.b-ariane li{display:inline-flex;align-items:center;gap:10px}
.b-ariane li + li::before{content:"/";color:var(--brun);font-weight:400}
.b-ariane a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.b-ariane a:hover{color:var(--encre);text-decoration:underline;text-underline-offset:4px}
.b-ariane [aria-current]{color:var(--encre)}

/* ==========================================================================
   Index /blog/ : la liste du Journal
   ========================================================================== */
.b-tete{
  display:grid;grid-template-columns:minmax(0, 1.3fr) minmax(0, 1fr);gap:clamp(32px, 6vw, 110px);align-items:end;
  padding-top:clamp(32px, 7vh, 88px);padding-bottom:clamp(48px, 9vh, 104px);
}
.b-tete > div > .label{color:var(--brun);display:block;margin-bottom:22px}
.b-titre{font-family:var(--serif);font-weight:400;color:var(--canard);font-size:clamp(64px, 10vw, 176px);line-height:.88;letter-spacing:-.03em}
.b-titre em{font-style:italic;color:var(--brun)}
.b-chapo{font-size:19px;font-weight:300;line-height:1.6;max-width:40ch;color:var(--encre-doux)}
@media (max-width:899px){
  .b-tete{grid-template-columns:1fr;gap:24px}
  .b-chapo{font-size:17.5px}
}

.b-compte{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--encre-doux);padding-bottom:16px;border-bottom:1px solid var(--encre)}
.b-items{counter-reset:billet}
.b-item{
  position:relative;display:grid;grid-template-columns:minmax(150px, 1fr) minmax(0, 3.2fr) 48px;gap:10px clamp(24px, 4vw, 64px);
  align-items:start;padding:clamp(26px, 4vh, 40px) 0;border-bottom:1px solid var(--filet);
}
.b-item-date{display:flex;flex-direction:column;gap:6px;color:var(--encre-doux);padding-top:10px}
.b-item-date span + span{color:var(--brun)}
.b-item-tag{color:var(--brun);margin-bottom:10px}
.b-item-titre{font-family:var(--serif);font-weight:400;font-size:clamp(30px, 3.3vw, 52px);line-height:1.02;letter-spacing:-.015em;color:var(--encre);max-width:24ch;text-wrap:balance}
.b-item-titre a{text-decoration:none;color:inherit}
/* Toute la ligne est cliquable (un seul lien, le titre) */
.b-item-titre a::after{content:"";position:absolute;inset:0}
.b-item-chapo{margin-top:14px;font-size:16.5px;font-weight:300;line-height:1.6;color:var(--encre-doux);max-width:62ch}
.b-item-fleche{align-self:center;justify-self:end;width:44px;height:44px;border:1px solid var(--filet-fort);border-radius:50%;display:grid;place-items:center;color:var(--canard);transition:background-color .25s ease, color .25s ease, transform .3s var(--ease-out)}
.b-item-fleche svg{width:18px;height:18px}
.b-item-titre a:focus-visible{outline:none}
.b-item:has(a:focus-visible){outline:2px solid var(--brun);outline-offset:6px}
@media (hover:hover) and (pointer:fine){
  .b-item:hover .b-item-titre{color:var(--canard);font-style:italic}
  .b-item:hover .b-item-fleche{background:var(--canard);color:var(--creme);border-color:var(--canard);transform:translateX(4px)}
}
@media (max-width:760px){
  .b-item{grid-template-columns:minmax(0, 1fr)}
  .b-item-date{flex-direction:row;gap:14px;padding-top:0;order:-1}
  .b-item-fleche{display:none}
}
.b-fin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-top:clamp(56px, 9vh, 96px);padding-bottom:clamp(72px, 12vh, 136px)}
.b-fin-texte{font-family:var(--serif);font-size:clamp(28px, 3vw, 44px);line-height:1.1;color:var(--canard);max-width:24ch}

/* ==========================================================================
   Article : colonne de lecture (700 px), interlignage 1,7
   ========================================================================== */
.billet{
  --col:700px;
  max-width:calc(var(--col) + 2 * var(--gutter));margin:0 auto;
  padding-top:clamp(28px, 6vh, 64px);padding-bottom:clamp(72px, 12vh, 136px);
}
.billet > .eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brun);margin-bottom:22px}
.billet h1{
  font-family:var(--serif);font-weight:400;color:var(--canard);
  font-size:clamp(44px, 6.6vw, 92px);line-height:.95;letter-spacing:-.025em;margin-bottom:36px;text-wrap:balance;
}
.billet h1 em,.billet h1 .pink{font-style:italic}

/* Chapeau, date */
.billet .lead{font-size:clamp(19px, 1.7vw, 22px);font-weight:300;line-height:1.55;color:var(--encre);margin:0 0 22px}
.billet .meta{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--encre-doux);margin-bottom:8px}
.billet hr.rule{border:0;border-top:1px solid var(--filet-fort);margin:34px 0 8px}

/* Illustration de tête : cadre de galerie, un peu plus large que la colonne */
.billet-hero{
  background:var(--blanc);padding:12px;margin:34px 0 34px;
  box-shadow:0 1px 0 rgba(14,13,11,.06), 0 24px 48px -32px rgba(14,13,11,.35);
}
@media (min-width:980px){ .billet-hero{margin-left:-80px;margin-right:-80px} }
.billet-hero img{width:100%;height:auto}
.billet-hero figcaption{padding:12px 2px 2px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-doux)}

/* ---------- Briques : barre IA, sommaire, TLDR ---------- */
.billet .ai-summary,.billet .utilbox.ai-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 10px;margin:0 0 18px;padding:14px 0;
  border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);
}
.billet .ai-label,.billet .ai-row .utilbox__label{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--encre-doux);margin:0 8px 0 0}
.billet .ai-btn{
  display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1px solid var(--filet-fort);border-radius:999px;
  font-size:13px;font-weight:600;letter-spacing:.04em;text-decoration:none;color:var(--encre);background:transparent;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
@media (hover:hover) and (pointer:fine){ .billet .ai-btn:hover{background:var(--canard);border-color:var(--canard);color:var(--creme)} }

.billet .utilbox:not(.ai-row){background:var(--blanc);padding:22px 24px 18px;margin:0 0 26px;border-left:3px solid var(--canard)}
.billet .utilbox:not(.ai-row) .utilbox__label{display:block;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brun);margin-bottom:10px}
.billet .toc-list{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;counter-reset:toc}
.billet .toc-list a{
  display:flex;gap:10px;align-items:baseline;min-height:44px;padding:9px 0;border-bottom:1px solid var(--filet);
  font-size:15px;line-height:1.4;text-decoration:none;color:var(--encre);counter-increment:toc;
}
.billet .toc-list a::before{content:counter(toc, decimal-leading-zero);font-family:var(--serif);font-size:16px;color:var(--brun);flex:none}
.billet .toc-list a:hover,.billet .toc-list a.actif{color:var(--canard)}
.billet .toc-list a.actif{font-weight:600}
@media (max-width:640px){ .billet .toc-list{grid-template-columns:1fr} }

.billet .tldr{
  font-family:var(--serif);font-size:clamp(22px, 2vw, 27px);line-height:1.35;color:var(--encre);
  padding:4px 0 4px 22px;border-left:2px solid var(--brun);margin:0 0 10px;
}
.billet .tldr strong{font-weight:400}
.billet .tldr-bloc{margin:0 0 10px}
.billet .tldr-titre{color:var(--brun);margin:0 0 12px}

/* ---------- Corps de l'article ---------- */
.billet .card{margin-top:40px;font-size:18px;line-height:1.7;color:var(--encre)}
.billet .card > * + *{margin-top:1.1em}
.billet .card h2{
  font-family:var(--serif);font-weight:400;color:var(--canard);
  font-size:clamp(32px, 3.3vw, 44px);line-height:1.08;letter-spacing:-.015em;margin-top:2.1em;margin-bottom:-.2em;text-wrap:balance;
}
.billet .card h2:first-child{margin-top:0}
.billet .card h3{font-family:var(--serif);font-weight:400;font-size:clamp(25px, 2.2vw, 30px);line-height:1.15;color:var(--encre);margin-top:1.6em;margin-bottom:-.35em}
.billet .card p strong,.billet .card li strong{font-weight:600}
.billet .card p em{font-style:italic}
.billet .card a{color:var(--brun);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.billet .card a:hover{color:var(--brun-fonce);text-decoration-thickness:2px}
.billet .card ul,.billet .card ol{padding-left:1.25em}
.billet .card ul > li{list-style:disc}
.billet .card ol > li{list-style:decimal}
.billet .card li + li{margin-top:.55em}
.billet .card li::marker{color:var(--brun)}
.billet .card blockquote{
  font-family:var(--serif);font-style:italic;font-size:clamp(27px, 2.6vw, 36px);line-height:1.2;color:var(--canard);
  margin:1.6em 0;padding:6px 0 6px 26px;border-left:2px solid var(--sable);
}

/* Encadrés */
.billet .note{background:var(--blanc);border-left:3px solid var(--sable);padding:18px 22px;font-size:16.5px;line-height:1.6}
.billet .sc-reminder{display:grid;grid-template-columns:40px minmax(0, 1fr);gap:16px;align-items:start;background:var(--blanc);padding:18px 22px;font-size:16.5px;line-height:1.6}
.billet .sc-reminder__icon{width:40px;height:40px;border-radius:50%;background:var(--canard);color:var(--creme);display:grid;place-items:center;font-size:18px}

/* Tableaux */
.billet .twrap{overflow-x:auto;margin-top:1.6em;margin-bottom:1.6em;-webkit-overflow-scrolling:touch}
.billet table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.45;background:var(--blanc)}
.billet table.data{min-width:420px}
.billet caption{caption-side:top;text-align:left;padding:0 0 10px;font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brun)}
.billet th{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-align:left;color:var(--encre-doux);padding:12px 14px;border-bottom:1px solid var(--encre)}
.billet td{padding:12px 14px;border-bottom:1px solid var(--filet);vertical-align:top}
.billet tr.highlight td{background:rgba(219,190,129,.28);font-weight:600}
.billet td.amount{font-family:var(--serif);font-size:20px;white-space:nowrap;color:var(--canard)}
@media (max-width:560px){
  .billet table.price,.billet table.price tbody,.billet table.price tr,.billet table.price td{display:block;width:100%}
  .billet table.price thead{display:none}
  .billet table.price tr{padding:10px 0;border-bottom:1px solid var(--filet)}
  .billet table.price td{border:0;padding:4px 14px}
}

/* Lecteurs YouTube (playlist mariage) et SoundCloud */
.billet .player{background:var(--blanc);padding:16px;margin-top:1.6em;margin-bottom:1.6em}
.billet .player__tag{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--brun);margin-bottom:12px}
.billet .player--warn .player__tag{color:var(--brun-fonce)}
.billet .player__frame{position:relative;aspect-ratio:16/9;background:var(--encre)}
.billet .player__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.billet .card .player__list{list-style:none;padding:0;margin-top:12px;display:grid;gap:0}
.billet .card .player__list > li{list-style:none;margin:0}
.billet .player__track{
  display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:44px;padding:8px 12px;cursor:pointer;
  border-bottom:1px solid var(--filet);font-size:15px;line-height:1.35;transition:background-color .2s ease;
}
.billet .player__track .t-artist{font-weight:600}
.billet .player__track .t-title{color:var(--encre-doux);text-align:right}
.billet .player__track:hover{background:var(--creme)}
.billet .player__track.is-active{background:var(--canard);color:var(--creme)}
.billet .player__track.is-active .t-title{color:var(--sable-texte)}
.billet .player--warn .player__track.is-active{background:var(--brun);color:var(--blanc)}
.billet .player--warn .player__track.is-active .t-title{color:rgba(255,255,255,.85)}
.billet .player__track:focus-visible{outline:2px solid var(--brun);outline-offset:-2px}
.billet .player-box{background:var(--blanc);padding:12px}
.billet .player-box iframe{display:block;width:100%;border:0}
.billet .player-caption{padding:10px 2px 2px;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--encre-doux)}
.billet .card .bl-list{list-style:none;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.billet .card .bl-list > li{list-style:none;margin:0;padding:10px 0 10px 22px;border-bottom:1px solid var(--filet);position:relative;font-size:16.5px}
.billet .card .bl-list > li::before{content:"";position:absolute;left:0;top:50%;width:10px;height:1.5px;background:var(--brun)}
@media (max-width:560px){ .billet .card .bl-list{grid-template-columns:1fr} }

/* ---------- Auto-diagnostic (rendu par blog.js à partir du JSON du bloc) ---------- */
.billet .quiz{background:var(--canard);color:var(--creme);padding:clamp(24px, 4vw, 40px);margin-top:2em;margin-bottom:2em;position:relative;overflow:hidden}
.billet .quiz:empty,.billet .quiz:not(.pret){display:none}
.billet .quiz__eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--sable-texte);margin-bottom:10px}
.billet .quiz h3{font-family:var(--serif);font-weight:400;font-size:clamp(28px, 2.8vw, 38px);line-height:1.08;color:var(--creme);margin:0 0 8px}
.billet .quiz__sub{font-size:15.5px;color:rgba(243,235,221,.8);margin-bottom:26px}
.billet .quiz-question{margin:0 0 22px;padding:0;border:0}
.billet .quiz-question .q-label{display:block;font-weight:600;font-size:16.5px;margin-bottom:12px}
.billet .quiz-options{display:flex;flex-wrap:wrap;gap:8px}
.billet .quiz-opt{
  min-height:44px;padding:9px 18px;border-radius:999px;border:1px solid rgba(243,235,221,.45);background:transparent;color:var(--creme);
  font-size:14.5px;line-height:1.35;text-align:left;transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
@media (hover:hover) and (pointer:fine){ .billet .quiz-opt:hover{border-color:var(--sable)} }
.billet .quiz-opt[aria-pressed="true"]{background:var(--creme);color:var(--encre);border-color:var(--creme);font-weight:600}
.billet .quiz-opt:focus-visible,.billet .quiz-submit:focus-visible,.billet .quiz-result a:focus-visible{outline:2px solid var(--sable);outline-offset:3px}
.billet .quiz-submit{
  min-height:48px;padding:0 26px;margin-top:4px;border:0;background:var(--brun);color:var(--blanc);
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;transition:background-color .25s ease, opacity .2s ease;
}
.billet .quiz-submit:hover:not(:disabled){background:var(--brun-fonce)}
.billet .quiz-submit:disabled{opacity:.45;cursor:not-allowed}
.billet .quiz-result{display:none;margin-top:26px;padding:22px 24px;background:var(--creme);color:var(--encre)}
.billet .quiz-result.show{display:block}
@media (prefers-reduced-motion: no-preference){ .billet .quiz-result.show{animation:bQuiz .4s var(--ease-out)} }
@keyframes bQuiz{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.billet .quiz-result .r-title{font-family:var(--serif);font-size:clamp(24px, 2.2vw, 30px);line-height:1.15;color:var(--canard);margin-bottom:8px}
.billet .quiz-result p{font-size:16.5px;line-height:1.6;margin:0 0 16px}
.billet .card .quiz-result a.r-cta{
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;background:var(--canard);color:var(--creme);text-decoration:none;
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
}
.billet .card .quiz-result a.r-cta:hover{background:var(--canard-profond);color:var(--creme)}

/* ---------- FAQ ---------- */
.billet .faq-section{margin-top:2.4em;padding-top:8px}
.billet .faq-section h2{margin-top:0}
.billet .faq-section dl{margin:1.2em 0 0;border-top:1px solid var(--encre)}
.billet .faq-item{padding:20px 0;border-bottom:1px solid var(--filet)}
.billet .faq-item dt{font-family:var(--serif);font-size:clamp(22px, 2vw, 26px);line-height:1.2;color:var(--encre);margin-bottom:8px}
.billet .faq-item dd{margin:0;font-size:17px;line-height:1.65;color:var(--encre-doux)}

/* ---------- Fin d'article : relance, boutons, signature, retour ---------- */
.billet .endkick{font-family:var(--serif);font-style:italic;font-size:clamp(26px, 2.6vw, 34px);line-height:1.2;color:var(--canard);margin-top:1.8em}
.billet .cta-final,.billet .cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:1.8em}
.billet .card .cta-btn,.billet .card .cta a{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;
  font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.2;text-decoration:none;
  background:var(--brun);color:var(--blanc);border:1px solid var(--brun);transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}
.billet .card .cta-btn:hover,.billet .card .cta a:hover{background:var(--brun-fonce);border-color:var(--brun-fonce);color:var(--blanc)}
.billet .card .cta-btn--ghost{background:transparent;color:var(--encre);border-color:var(--filet-fort)}
.billet .card .cta-btn--ghost:hover{background:var(--blanc);color:var(--encre);border-color:var(--encre)}
.billet .billet-signature{margin-top:2.4em;padding-top:18px;border-top:1px solid var(--filet-fort);font-size:15px;line-height:1.6;color:var(--encre-doux)}
.billet .billet-signature strong{font-weight:600;color:var(--canard)}
.billet .backline{margin-top:48px}
.billet .backline a{
  display:inline-flex;align-items:center;min-height:44px;font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  text-decoration:none;color:var(--brun);border-bottom:1px solid currentColor;
}