/* ==========================================================================
   PROSPEE — blog.css
   BOÎTE À OUTILS de composition éditoriale du blog (PAS un template).
   Chaque billet compose SA propre mise en page avec ces éléments réutilisables ;
   deux billets ne doivent jamais se ressembler structurellement (règle « design
   custom par page » — charte features). Charte « Noir sur blanc » : sobre, riche
   par la composition. Tokens uniquement, aucun hex, aucune durée en dur, aucun
   dégradé, accent bleu ≤ 3 %, une seule section sombre par page (le CTA de fin).
   Illustrations = SVG vectoriel (helpers .viz), jamais d'image générée.
   Animations = .reveal (marketing.js) + count-up, no-motion-first.
   Chargé APRÈS marketing.css — il complète, ne redéfinit rien.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Index /blog — en-tête de la liste. La mesure de lecture est bornée MAIS la
   colonne reste calée à gauche : .page-lecture (marketing.css) centre sa colonne,
   ce qui décrochait le h1 de 268 px du bord gauche de la grille de cartes (elle,
   pleine largeur). Ici le titre tombe pile sur le bord de la première carte.
   -------------------------------------------------------------------------- */
.blog-liste-tete { max-width: var(--largeur-lecture); }

/* --------------------------------------------------------------------------
   Barre de progression de lecture (chrome — 2 px accent, fixée en haut).
   -------------------------------------------------------------------------- */
.lecture-progres { position: fixed; inset: 0 0 auto 0; z-index: 60; height: 2px; pointer-events: none; }
.lecture-progres > span { display: block; height: 100%; width: 0; background: var(--color-accent); transition: width var(--duree-ui-retour) linear; }

/* --------------------------------------------------------------------------
   Masthead (chrome minimal) — kicker + h1 + filet d'agenda. Le hero VISUEL de
   chaque page vit dans son body, pas ici : ce bandeau reste neutre.
   -------------------------------------------------------------------------- */
.billet-tete { padding-top: var(--space-16); padding-bottom: var(--space-8); }
.billet-tete-inner { max-width: 44rem; margin-inline: auto; }
.billet-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); }
.billet-cluster {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--badge-pad-x); border-radius: var(--rayon-xs);
  background: var(--color-surface-accent); color: var(--color-accent);
  font-weight: var(--graisse-ui); font-size: var(--text-xs);
  letter-spacing: var(--tracking-xs); text-transform: uppercase; line-height: var(--leading-xs);
}
.billet-cluster::before { content: ""; width: var(--space-2); height: var(--space-2); flex: none; border-radius: 50%; background: currentColor; }
.billet-meta { color: var(--color-encre-2); }
.billet-tete h1 { max-width: 20ch; }

/* Filet d'agenda pleine largeur (motif signature §6.2), avec libellé d'heure. */
.billet-filet { position: relative; height: 0; width: 100vw; margin-left: calc(50% - 50vw); border-top: var(--filet-epaisseur) solid var(--color-bordure); }
.billet-filet .trame-heure { position: absolute; bottom: var(--space-1); left: max(var(--space-8), calc((100% - var(--largeur-contenu)) / 2 + var(--space-8))); color: var(--color-encre-2); }
@media (max-width: 767px) { .billet-filet .trame-heure { display: none; } }

/* --------------------------------------------------------------------------
   Colonne de lecture. Mesure ~640 px ; les blocs « larges » débordent la mesure
   de façon maîtrisée (illustrations, comparatifs) pour respirer.
   -------------------------------------------------------------------------- */
.billet { max-width: 44rem; margin-inline: auto; color: var(--color-encre); padding-top: var(--space-12); }
.billet > * { margin-block: var(--space-5); }
.billet > :first-child { margin-top: 0; }
.billet p { font-size: var(--text-base); line-height: var(--leading-base); }
.billet strong { font-weight: var(--graisse-ui); }
.billet a:not(.btn) {
  color: var(--color-encre); font-weight: var(--graisse-ui);
  text-decoration: underline; text-decoration-thickness: var(--filet-epaisseur);
  text-underline-offset: var(--souligne-decalage); text-decoration-color: var(--color-bordure-forte);
  transition: text-decoration-color var(--duree-ui) var(--ease-ui);
}
.billet a:not(.btn):hover { text-decoration-color: var(--color-accent); }

/* Bloc « large » : déborde symétriquement la mesure (illus, comparatif, chiffres). */
.large { width: min(56rem, 100%); margin-inline: auto; }
@media (max-width: 1023px) { .large { width: 100%; } }

/* --------------------------------------------------------------------------
   Éléments de texte réutilisables (opt-in — chaque billet choisit).
   -------------------------------------------------------------------------- */
/* Lead : chapô d'ouverture ou réponse « answer-first ». */
.billet .lead { font-size: var(--text-lead); line-height: var(--leading-lead); color: var(--color-encre); }
.billet .lead--accent { padding-left: var(--space-5); border-left: 2px solid var(--color-accent); }

/* Section : filet d'agenda + numéro Schibsted (posé par le billet, pas auto). */
.billet h2 { font-family: var(--font-titres); font-weight: var(--graisse-titre); font-size: var(--text-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); text-wrap: balance; margin-top: var(--space-24); padding-top: var(--space-6); border-top: var(--filet-epaisseur) solid var(--color-bordure); }
.billet h2 .sec-num { display: block; margin-bottom: var(--space-3); font-weight: var(--graisse-display-num); font-variant-numeric: tabular-nums; font-size: var(--text-sm); letter-spacing: var(--tracking-xs); color: var(--color-accent); }
.billet h3 { font-family: var(--font-titres); font-weight: var(--graisse-titre-doux); font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); margin-top: var(--space-8); margin-bottom: var(--space-3); }

/* Listes à coches (bénéfices). */
.coches { padding-left: 0 !important; }
.coches li { position: relative; padding-left: var(--space-8); }
.coches li::before {
  content: ""; position: absolute; left: 0; top: 0.1em; width: var(--space-5); height: var(--space-5);
  background: var(--color-surface-accent); border-radius: var(--rayon-xs);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l3.5 3.5L18 7.5' fill='none' stroke='%2315487A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: var(--space-4);
}
.billet ul:not(.coches) { padding-left: var(--space-6); list-style: disc; display: flex; flex-direction: column; gap: var(--space-2); }
.billet ul:not(.coches) li::marker { color: var(--color-bordure-forte); }
.billet ol { padding-left: var(--space-6); list-style: decimal; display: flex; flex-direction: column; gap: var(--space-3); }
.billet ol li::marker { color: var(--color-accent); font-variant-numeric: tabular-nums; font-weight: var(--graisse-ui); }

/* Citation (pull-quote). `margin-inline: 0` obligatoire : la marge par défaut du
   navigateur sur <blockquote> (40 px à gauche ET à droite) survivait au reset et
   rentrait la citation de 40 px par rapport au bord du texte (mesure écrasée en
   mobile : 246 px de texte utile contre 358 px pour un paragraphe à 390 px). */
.citation { margin-block: var(--space-16); margin-inline: 0; padding-left: var(--space-8); border-left: 3px solid var(--color-accent); font-family: var(--font-titres); font-weight: var(--graisse-titre-doux); font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); color: var(--color-encre); text-wrap: balance; }
.citation cite { display: block; margin-top: var(--space-4); font: inherit; font-size: var(--text-sm); font-style: normal; color: var(--color-encre-2); }

/* Encarts (callouts). */
.encart { border-radius: var(--rayon-m); padding: var(--space-6) var(--space-8); background: var(--color-surface); border: var(--filet-epaisseur) solid var(--color-bordure); display: flex; flex-direction: column; gap: var(--space-2); }
.encart-tete { display: flex; align-items: center; gap: var(--space-2); color: var(--color-encre-2); }
.encart-tete .picto { width: var(--space-5); height: var(--space-5); flex: none; }
.encart-label { font-weight: var(--graisse-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-xs); text-transform: uppercase; }
.encart p { font-size: var(--text-base); line-height: var(--leading-base); }
.encart--cle { background: var(--color-surface-accent); border-color: transparent; }
.encart--cle .encart-tete { color: var(--color-accent); }
.encart--loi { background: var(--color-surface-2); }
.encart--note { background: transparent; border: 0; border-top: var(--filet-epaisseur) solid var(--color-bordure); border-radius: 0; padding: var(--space-6) 0 0; margin-top: var(--space-16); }
.encart--note p { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-encre-2); }

/* --------------------------------------------------------------------------
   Figures / illustrations SVG (cadre + légende + helpers de dessin).
   -------------------------------------------------------------------------- */
figure.illus { margin-block: var(--space-12); }
figure.illus .illus-cadre { background: var(--color-surface); border: var(--filet-epaisseur) solid var(--color-bordure); border-radius: var(--rayon-l); padding: var(--space-8); box-shadow: var(--ombre-douce); }
figure.illus.sur-ivoire .illus-cadre { background: var(--color-surface-2); box-shadow: none; }
figure.illus svg { display: block; width: 100%; height: auto; }
figure.illus figcaption { margin-top: var(--space-4); color: var(--color-encre-2); font-size: var(--text-sm); line-height: var(--leading-sm); text-align: center; }
@media (max-width: 767px) {
  figure.illus .illus-cadre { padding: var(--space-5); }
  /* Un schéma est dessiné pour la mesure de lecture (viewBox de 640 px) : le laisser
     rétrécir avec son cadre écrasait ses libellés à 5,4 px (390) et 4,2 px (320),
     illisibles. On le garde donc à sa taille de dessin et on le fait DÉFILER dans son
     cadre, comme un tableau (.table-wrap). */
  figure.illus .illus-cadre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  figure.illus svg { min-width: var(--largeur-lecture); }
}

.viz text { font-family: var(--font-texte); fill: var(--color-encre); }
.viz .num { font-family: var(--font-titres); font-weight: var(--graisse-display-num); font-variant-numeric: tabular-nums; }
.viz .t-mut { fill: var(--color-encre-2); }
.viz .t-acc { fill: var(--color-accent); }
.viz .t-nuit { fill: var(--color-encre-nuit); }
.viz .stroke { fill: none; stroke: var(--color-encre); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.viz .stroke-mut { fill: none; stroke: var(--color-bordure-forte); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.viz .hair { fill: none; stroke: var(--color-bordure); stroke-width: 1; }
.viz .hair-dash { fill: none; stroke: var(--color-bordure-forte); stroke-width: 1.25; stroke-dasharray: 3 4; }
.viz .acc { fill: none; stroke: var(--color-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.viz .fill-eau { fill: var(--color-surface-accent); }
.viz .fill-soft { fill: var(--color-surface-2); }
.viz .fill-surface { fill: var(--color-surface); }
.viz .fill-acc { fill: var(--color-accent); }
.viz .fill-ink { fill: var(--color-encre); }
.viz .fill-nuit { fill: var(--color-fond-nuit); }
@media (prefers-reduced-motion: no-preference) {
  .js figure.illus .viz .trace { stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--len, 400); }
  .js figure.illus.est-visible .viz .trace { stroke-dashoffset: 0; transition: stroke-dashoffset var(--duree-compteur) var(--ease-pose) 150ms; }
}

/* --------------------------------------------------------------------------
   Blocs composables : chiffres (count-up), comparatif, tableau.
   -------------------------------------------------------------------------- */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--space-6); margin-block: var(--space-12); padding: var(--space-8); background: var(--color-surface-2); border-radius: var(--rayon-l); }
.chiffres-item { display: flex; flex-direction: column; gap: var(--space-2); }
.chiffres-item + .chiffres-item { border-left: var(--filet-epaisseur) solid var(--color-bordure); padding-left: var(--space-6); }
.chiffres-val { font-family: var(--font-titres); font-weight: var(--graisse-display-num); font-variant-numeric: tabular-nums; font-size: var(--text-h2); line-height: 1; color: var(--color-encre); }
.chiffres-val .u { color: var(--color-accent); }
.chiffres-lib { color: var(--color-encre-2); font-size: var(--text-sm); line-height: var(--leading-sm); }
@media (max-width: 599px) { .chiffres { grid-template-columns: 1fr; } .chiffres-item + .chiffres-item { border-left: 0; padding-left: 0; border-top: var(--filet-epaisseur) solid var(--color-bordure); padding-top: var(--space-6); } }
/* Le filet ne doit séparer que deux tuiles d'une MÊME rangée : `+` décorait aussi la
   première tuile de la rangée suivante (filet vertical orphelin dans le vide + nombre
   décalé de 25 px, donc désaligné de la tuile du dessus — cas de la 4e tuile). Au-delà
   de 599 px la grille auto-fit tient toujours 3 colonnes dans la mesure de lecture :
   on rend sa marge à chaque début de rangée. */
@media (min-width: 600px) { .chiffres-item:nth-child(3n+1) { border-left: 0; padding-left: 0; } }

.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-block: var(--space-12); align-items: start; }
.compare-col { border-radius: var(--rayon-l); padding: var(--space-6) var(--space-8); border: var(--filet-epaisseur) solid var(--color-bordure); background: var(--color-surface); display: flex; flex-direction: column; gap: var(--space-3); }
.compare-col--fort { background: var(--color-surface-accent); border-color: transparent; }
.compare-col h3 { margin: 0; }
.compare-col--fort h3 { color: var(--color-accent); }
.compare-col p { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--color-encre-2); }
@media (max-width: 599px) { .compare { grid-template-columns: 1fr; } }

.billet table { width: 100%; border-collapse: collapse; margin-block: var(--space-12); font-variant-numeric: tabular-nums; }
.billet thead th { text-align: left; color: var(--color-encre-2); font-weight: var(--graisse-ui); font-size: var(--text-xs); letter-spacing: var(--tracking-xs); text-transform: uppercase; padding: var(--space-3) var(--space-4); border-bottom: var(--filet-epaisseur) solid var(--color-bordure-forte); }
.billet tbody td { font-size: var(--text-sm); line-height: var(--leading-sm); padding: var(--space-4); border-bottom: var(--filet-epaisseur) solid var(--color-bordure); vertical-align: top; }
.billet tbody td:first-child { font-weight: var(--graisse-ui); color: var(--color-encre); }
.billet tbody tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--filet-epaisseur) solid var(--color-bordure); border-radius: var(--rayon-l); }
.table-wrap table { margin: 0 !important; }
.table-wrap thead th, .table-wrap tbody td { padding-inline: var(--space-6); }

/* --------------------------------------------------------------------------
   FAQ — accordéons natifs <details>.
   -------------------------------------------------------------------------- */
/* .faq est d'abord la FAQ de la page marketing (max-width de lecture + flex avec un
   gap de 48 px, fait pour des .faq-item). Dans un billet, le bloc doit suivre la
   colonne de l'article (704 px, comme les p / h2 / encarts) et laisser blog.css régler
   seul le rythme des accordéons (24 px de part et d'autre de chaque filet, via le
   padding du summary) : on neutralise donc les deux réglages hérités. */
.billet .faq { max-width: none; display: block; }
.faq { border-top: var(--filet-epaisseur) solid var(--color-bordure); }
.faq-q { border-bottom: var(--filet-epaisseur) solid var(--color-bordure); }
.faq-q > summary { list-style: none; cursor: pointer; padding: var(--space-6) var(--space-8) var(--space-6) 0; position: relative; font-family: var(--font-titres); font-weight: var(--graisse-titre-doux); font-size: var(--text-h3); line-height: var(--leading-h3); letter-spacing: var(--tracking-h3); color: var(--color-encre); }
.faq-q > summary::-webkit-details-marker { display: none; }
.faq-q > summary::after { content: ""; position: absolute; right: var(--space-1); top: 50%; margin-top: -0.55rem; width: 1.1rem; height: 1.1rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='%2315487A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.faq-q[open] > summary::after { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='%2315487A' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.faq-q > summary:focus-visible { outline: var(--focus-epaisseur) solid var(--color-accent); outline-offset: var(--focus-decalage); border-radius: var(--rayon-xs); }
.faq-q-corps { padding: 0 0 var(--space-6); }
.faq-q-corps p { font-size: var(--text-base); line-height: var(--leading-base); }
@media (prefers-reduced-motion: no-preference) { .js .faq-q[open] .faq-q-corps { animation: ks-fondu var(--duree-ui) var(--ease-ui) both; } }

/* --------------------------------------------------------------------------
   CTA de fin (la seule section nuit de la page).
   -------------------------------------------------------------------------- */
.billet-fin { max-width: 44rem; margin: var(--space-24) auto var(--space-24); }
.article-cta { margin-top: 0; padding: var(--space-12); border-radius: var(--rayon-l); background: var(--color-fond-nuit); color: var(--color-encre-nuit); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.article-cta .t-caption { color: var(--color-accent-nuit); }
.article-cta .t-body, .article-cta p { color: var(--color-encre-nuit-2); }
.article-cta strong { color: var(--color-encre-nuit); }
.article-cta .btn { margin-top: var(--space-2); }
@media (max-width: 600px) { .article-cta { padding: var(--space-8); } }
/* Sous 360 px, un libellé long sur un .btn (nowrap par défaut, composants.css) devient
   plus large que la boîte de contenu de la carte et dépasse son bord arrondi : on
   autorise le libellé à passer à la ligne, la hauteur de bouton devient un plancher. */
@media (max-width: 359px) {
  .article-cta .btn { white-space: normal; height: auto; min-height: var(--bouton-h); padding-block: var(--space-3); text-align: center; }
}