/* ==========================================================================
   Prevoya — Couche UI v2
   Chargée après style.css et refinements.css : elle gagne à spécificité égale.

   Trois intentions, dans cet ordre :
   1. Hiérarchie — on doit voir en 2 secondes ce qui compte sur une page.
   2. Conversion — jamais plus d'un écran et demi sans une sortie possible.
   3. Crédibilité — la preuve (ORIAS, sources, dates) fait partie du design,
      pas d'une mention légale reléguée en pied de page.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS COMPLÉMENTAIRES
   ========================================================================== */
:root {
  /* --- Surfaces sombres : l'autorité, sans passer par le noir pur ---
     Un vert-encre très désaturé. Sur fond papier chaud, le noir pur fait
     tache ; cette teinte partage la famille de l'accent et se pose bien. */
  --ink-deep:      #0e1f1b;
  --ink-deep-2:    #16302a;
  --ink-deep-3:    #1e4038;
  --on-deep:       #f3f7f5;
  --on-deep-2:     #b9cdc7;
  --on-deep-3:     #8fa9a3;
  --deep-border:   #29514a;

  /* --- Laiton : le second signal, réservé à l'éditorial ---
     Il ne déclenche jamais une action (c'est le rôle du vert). Il marque
     un chiffre clé, un badge de méthode, un filet de citation. */
  --brass:         #8a6420;
  --brass-strong:  #6b4c14;
  --brass-soft:    #fbf3e3;
  --brass-border:  #e8d7ae;

  /* --- Échelle de données : tableaux, jauges, graphes ---
     Dérivée de l'accent pour rester dans la famille chromatique. */
  --data-1: #0b7a66;
  --data-2: #3f9b86;
  --data-3: #7fbcaa;
  --data-4: #bcdcd2;
  --data-void: #e2ddd2;   /* la part non couverte : neutre, pas rouge */

  /* --- Rythme vertical unifié --- */
  --flow: 1.15em;
  --stack-sm: 1.5rem;
  --stack:    2.5rem;
  --stack-lg: clamp(3.5rem, 2rem + 6vw, 6rem);

  /* --- Largeurs --- */
  --maxw-doc: 44rem;      /* colonne de lecture */
  --rail-w:   20.5rem;    /* rail latéral */
  --gutter:   clamp(1.1rem, 4vw, 2.5rem);

  /* --- Hauteur d'en-tête, utilisée par scroll-margin --- */
  --header-h: 4rem;
}

/* ==========================================================================
   2. BASE — rythme et lisibilité
   ========================================================================== */
body { background: var(--bg); }

/* Les contrôles de formulaire n'héritent pas de la police du document : sans
   cette ligne, le bouton « Menu » de l'en-tête mobile s'affichait en Arial
   au milieu d'une page en police système. */
button, input, select, textarea, optgroup { font-family: inherit; }

/* ---------- Rythme vertical ----------
   Valeurs absolues, pas en `em` : une marge en em varie avec la taille du
   titre, si bien que l'espace avant une section changeait d'une page à
   l'autre. Trois intervalles seulement : section, sous-section, paragraphe. */
.doc-main > h2,
.content > h2 { margin-top: clamp(2.6rem, 2rem + 1.6vw, 3.5rem); margin-bottom: .6rem; }
.doc-main > h3,
.content > h3,
.doc-main > section > h3 { margin-top: 2rem; margin-bottom: .45rem; }
.doc-main > h2:first-child,
.doc-main > .doc-head + h2 { margin-top: 0; }

.doc-main > p, .doc-main > ul, .doc-main > ol,
.content > p, .content > ul, .content > ol { margin-top: 0; margin-bottom: 1.05em; }
.doc-main > h2 + *, .doc-main > h3 + *,
.content > h2 + *, .content > h3 + * { margin-top: 0; }

/* Les objets (tableaux, encadrés, CTA) respirent plus que le texte courant. */
.doc-main > .table-wrap, .doc-main > .chart-wrap, .doc-main > .kpi-row,
.doc-main > .note, .doc-main > .warn, .doc-main > .danger-box,
.doc-main > .chiffre-cle, .doc-main > .gauge, .doc-main > .card-grid,
.doc-main > .toc, .doc-main > figure { margin-top: 1.6rem; margin-bottom: 1.6rem; }
.doc-main > h2 + .table-wrap, .doc-main > h2 + .kpi-row,
.doc-main > h2 + .chart-wrap, .doc-main > h3 + .table-wrap { margin-top: .8rem; }

/* ---------- Numérotation des sections ----------
   Sur un article de 7 000 px, l'espace blanc seul ne dit pas « nouvelle
   section ». Un numéro le dit, et il fait écho au sommaire du rail : le
   lecteur sait où il en est sans lever les yeux. Format 01, 02 — deux chiffres
   alignés, jamais un « 1 » perdu.
   La numérotation suit l'ordre du document et couvre les titres imbriqués
   d'un niveau (certaines pages enveloppent une section dans <section>), mais
   jamais ceux des blocs d'appel à l'action ni des sources. */
.doc-main { counter-reset: sec; }
.doc-main h2 {
  counter-increment: sec;
  position: relative; padding-top: 1.85rem;
}
.doc-main h2::before {
  content: counter(sec, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-size: .72rem; font-weight: 700; letter-spacing: .14em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--accent-strong);
  line-height: 1;
}
.doc-main h2::after {
  content: ""; position: absolute; top: .3rem; left: 2.15rem;
  width: 1.5rem; height: 2px; border-radius: 1px;
  background: color-mix(in oklch, var(--accent) 45%, transparent);
}
/* Les panneaux de conversion et les sources sortent du décompte. */
.doc-main :is(.cta-box, .cta-panel, .cta-final, .cta-mid, .sources, .aside-cta, .author-card) h2 {
  counter-increment: none; padding-top: 0;
}
.doc-main :is(.cta-box, .cta-panel, .cta-final, .cta-mid, .sources, .aside-cta, .author-card) h2::before,
.doc-main :is(.cta-box, .cta-panel, .cta-final, .cta-mid, .sources, .aside-cta, .author-card) h2::after {
  content: none;
}
/* Le hero d'une page hub vit hors de .doc-main : rien à numéroter non plus. */
.hero-lead h2::before, .hero-lead h2::after { content: none; }


/* Les ancres ne doivent pas finir sous l'en-tête collant. */
:where(h2, h3, h4, section, .faq details)[id] { scroll-margin-top: calc(var(--header-h) + 1.25rem); }

/* Liens de contenu : soulignés discrets, épaissis au survol. */
.doc-main a:not(.btn):not(.pc-cta):not(.tc-go),
.lede a, .content a:not(.btn) {
  color: var(--accent-strong);
  text-decoration-color: color-mix(in oklch, var(--accent) 38%, transparent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.doc-main a:not(.btn):hover, .lede a:hover, .content a:not(.btn):hover {
  color: var(--accent); text-decoration-color: currentColor;
}

/* ==========================================================================
   3. BARRE DE PROGRESSION DE LECTURE
   Une seule information : combien reste-t-il. Elle justifie sa place en
   haut d'écran parce que les articles font 1 400 mots de médiane.
   ========================================================================== */
.read-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60;
  background: transparent; pointer-events: none;
}
.read-progress > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), color-mix(in oklch, var(--accent) 55%, var(--brass)));
  transform-origin: 0 50%;
  transition: width 90ms linear;
}
@media (prefers-reduced-motion: reduce) { .read-progress > span { transition: none; } }

/* ==========================================================================
   4. EN-TÊTE — collant, condensé au défilement, état actif
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklch, var(--surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.site-header.is-condensed {
  background: color-mix(in oklch, var(--surface) 94%, transparent);
  border-bottom-color: var(--border);
  box-shadow: 0 1px 0 rgb(255 255 255 / .6), 0 8px 24px -18px hsl(var(--sh-hue) / .5);
}
.site-header .container { min-height: var(--header-h); gap: .75rem; }

.logo { font-size: 1.22rem; letter-spacing: -.03em; gap: .55rem; }
.logo svg { transition: transform var(--dur-base) var(--ease-out-soft); }
.logo:hover svg { transform: rotate(-6deg) scale(1.06); }

/* Lien courant : un point, pas un fond. Discret et lisible. */
.site-nav a[aria-current="page"],
.site-nav a.is-active {
  color: var(--accent-strong); font-weight: 650;
}
@media (min-width: 1080px) {
  .site-nav a.is-active { position: relative; }
  .site-nav a.is-active::after {
    content: ""; position: absolute; left: 50%; bottom: .28rem;
    width: 4px; height: 4px; margin-left: -2px; border-radius: 50%;
    background: var(--accent);
  }
}
.site-nav a.nav-cta {
  border-radius: var(--r-full); padding-inline: 1.05rem;
  box-shadow: var(--sh-2), var(--sh-inset-light);
  letter-spacing: -.005em;
}
.site-nav a.nav-cta:hover { box-shadow: var(--sh-3), var(--sh-inset-light); }

/* Menu mobile : un tiroir plein écran plutôt qu'une liste qui pousse la page. */
.nav-toggle {
  display: inline-flex; align-items: center; gap: .45rem; margin-left: auto;
  min-height: 42px; border-radius: var(--r-full);
  font-weight: 600; font-size: .92rem;
  background: var(--surface-2); border-color: var(--border);
  transition: background var(--dur-fast) var(--ease-out);
}
.nav-toggle:hover { background: var(--surface-3); }
.nav-toggle .nt-bars { display: block; width: 15px; height: 10px; position: relative; }
.nav-toggle .nt-bars::before, .nav-toggle .nt-bars::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.75px;
  border-radius: 2px; background: currentColor;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
}
.nav-toggle .nt-bars::before { top: 0; }
.nav-toggle .nt-bars::after  { bottom: 0; }
.nav-toggle[aria-expanded="true"] .nt-bars::before { transform: translateY(4.1px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nt-bars::after  { transform: translateY(-4.1px) rotate(-45deg); }

@media (max-width: 1079.98px) {
  .site-nav.open { padding-bottom: 1rem; border-top: 1px solid var(--border); margin-top: .35rem; }
  .site-nav.open ul { gap: .1rem; padding-top: .55rem; }
  .site-nav a { font-size: 1.02rem; border-radius: var(--r-sm); }
  .site-nav a.nav-cta { margin-top: .5rem; justify-content: center; min-height: 48px; }
}
/* Au-delà du point de bascule la navigation complète est affichée : le
   bouton de menu doit disparaître, sinon l'en-tête déborde de 70 px. */
@media (min-width: 1080px) {
  .nav-toggle { display: none; }
  /* Sept entrées plus un bouton d'action : entre 1080 et 1280 px, la barre
     ne tient que si l'on resserre les gouttières. */
  .site-nav a { padding-inline: .58rem; font-size: .95rem; }
  .site-nav a.nav-cta { padding-inline: .95rem; }
}
@media (min-width: 1280px) {
  .site-nav a { padding-inline: .75rem; font-size: .98rem; }
  .site-nav a.nav-cta { padding-inline: 1.05rem; }
}

/* ==========================================================================
   5. LAYOUT DOCUMENT — colonne de lecture + rail collant
   Le rail est la réponse au vrai problème du site : un article de 1 400 mots
   n'offrait qu'une seule sortie, tout en bas.
   ========================================================================== */
.doc-grid { display: block; }
.doc-main { min-width: 0; max-width: var(--maxw-doc); }

@media (min-width: 68rem) {
  .doc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--rail-w);
    gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: start;
  }
  .doc-main { max-width: none; }
  /* La colonne de lecture reste à ~68 signes ; seuls les objets de données
     occupent toute la largeur de la colonne. Même bord gauche pour tous :
     c'est le décalage des bords, pas la largeur, qui trahit l'amateurisme. */
  .doc-main > p,
  .doc-main > ul,
  .doc-main > ol,
  .doc-main > dl,
  .doc-main > blockquote,
  .doc-main > h2,
  .doc-main > h3,
  .doc-main > h4,
  .doc-main > .lede,
  .doc-main > .note,
  .doc-main > .warn,
  .doc-main > .danger-box,
  .doc-main > .chiffre-cle,
  .doc-main > .toc,
  .doc-main > .cta-early,
  .doc-main > section > p,
  .doc-main > section > ul,
  .doc-main > section > ol { max-width: 40rem; }
  .doc-main > .faq details { max-width: 44rem; }
}

.doc-rail { display: none; }
@media (min-width: 68rem) {
  .doc-rail {
    display: block; position: sticky;
    top: calc(var(--header-h) + 1.25rem);
    max-height: calc(100vh - var(--header-h) - 2.5rem);
    overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin;
    padding-bottom: .5rem;
  }
  .doc-rail::-webkit-scrollbar { width: 6px; }
  .doc-rail::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
}

/* ---------- Sommaire du rail, avec suivi de lecture ---------- */
.rail-toc { margin-bottom: 1.25rem; }
.rail-toc-t {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 .7rem;
}
/* Certaines pages alignent treize sections. Le sommaire prend alors son
   propre ascenseur pour que la carte de conversion reste sous les yeux. */
.rail-toc ol {
  list-style: none; margin: 0; padding: 0;
  border-left: 2px solid var(--border);
  max-height: min(34vh, 20rem); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border-2) transparent;
  overscroll-behavior: contain;
}
.rail-toc ol::-webkit-scrollbar { width: 5px; }
.rail-toc ol::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 3px; }
.rail-toc li { margin: 0; }
.rail-toc a {
  display: block; padding: .42rem 0 .42rem .9rem; margin-left: -2px;
  border-left: 2px solid transparent;
  font-size: .875rem; line-height: 1.4; color: var(--ink-2);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.rail-toc a:hover { color: var(--ink); border-left-color: var(--border-2); }
.rail-toc a.is-current {
  color: var(--accent-strong); font-weight: 650; border-left-color: var(--accent);
}

/* ---------- Carte de conversion du rail ---------- */
.rail-cta {
  background: var(--ink-deep);
  color: var(--on-deep);
  border-radius: var(--r-lg);
  padding: 1.15rem 1.15rem 1.2rem;
  box-shadow: var(--sh-3);
  position: relative; overflow: hidden;
}
.rail-cta::after {
  content: ""; position: absolute; inset: auto -30% -55% auto;
  width: 15rem; height: 15rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--accent) 42%, transparent), transparent 68%);
  pointer-events: none;
}
.rail-cta > * { position: relative; }
.rail-cta-k {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in oklch, var(--accent) 55%, var(--on-deep));
  margin: 0 0 .4rem;
}
.rail-cta h3 { margin: 0 0 .4rem; font-size: 1.02rem; line-height: 1.3; color: var(--on-deep); letter-spacing: -.015em; }
.rail-cta p { margin: 0 0 .95rem; font-size: .86rem; line-height: 1.5; color: var(--on-deep-2); }
.rail-cta .btn { width: 100%; text-align: center; justify-content: center; font-size: .94rem; padding-block: .62rem; }
.rail-cta .btn-2 {
  display: block; text-align: center; margin-top: .5rem;
  font-size: .85rem; color: var(--on-deep-2); text-decoration: none;
  padding: .4rem; border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.rail-cta .btn-2:hover { color: var(--on-deep); background: rgb(255 255 255 / .07); }
.rail-cta-trust {
  margin: .85rem 0 0; padding-top: .75rem;
  border-top: 1px solid var(--deep-border);
  font-size: .74rem; line-height: 1.45; color: var(--on-deep-3);
  display: flex; gap: .4rem; align-items: flex-start;
}
.rail-cta-trust svg { flex: none; margin-top: .1rem; color: color-mix(in oklch, var(--accent) 60%, var(--on-deep)); }

/* ---------- Page de conversion ----------
   Le rail répond aux trois questions qui font abandonner un formulaire :
   qu'est-ce que j'obtiens, que faites-vous de mon numéro, à qui ai-je affaire.

   Deux réglages le distinguent du rail éditorial :
   1. il est plus étroit (16,5 rem contre 20,5) — il porte trois listes courtes,
      pas un sommaire de treize entrées ;
   2. le contenu de la colonne principale est centré dans sa colonne au lieu
      d'être ferré à gauche. Avec un rail à droite dans un conteneur centré, le
      centre optique du formulaire est décalé de (rail + gouttière) / 2 vers la
      gauche : réduire les deux et recentrer le bloc ramène le formulaire de
      294 px à 158 px du centre de l'écran, tout en l'élargissant. */
@media (min-width: 68rem) {
  .doc-grid-form {
    grid-template-columns: minmax(0, 1fr) 16.5rem;
    gap: clamp(1.75rem, 2.8vw, 3rem);
  }
  /* Même bord gauche pour tout le contenu de la colonne : titre, signature,
     chapô, formulaire et étapes partagent la même mesure, centrée. */
  .doc-grid-form .doc-main > * { max-width: 40rem; margin-inline: auto; }
  .doc-grid-form .doc-main > .doc-head { margin-inline: auto; }
  .doc-grid-form #lead-form { max-width: 40rem; }
  .doc-grid-form .doc-rail { top: calc(var(--header-h) + 1.75rem); }
}

/* En dessous du point de bascule, le rail se glisse sous le formulaire au lieu
   de disparaître : masquer la réassurance sur mobile, là où le doute sur le
   démarchage est le plus fort, coûterait des envois. */
@media (max-width: 67.99rem) {
  /* Colonne centrée dans le conteneur : sans cela le formulaire restait ferré
     à gauche d'un conteneur de 974 px, à 142 px du centre de l'écran. */
  .doc-grid-form .doc-main { margin-inline: auto; }
  .doc-grid-form .doc-rail {
    display: block; position: static; max-height: none; overflow: visible;
    max-width: var(--maxw-doc); margin: var(--stack) auto 0;
    padding-top: var(--stack-sm);
    border-top: 1px solid var(--border);
  }
}

/* Les options sont les vraies cibles de clic : elles gagnent à respirer. */
.doc-grid-form .msf-options { gap: .55rem; }
.doc-grid-form .msf-options button, .doc-grid-form .msf-multi button { padding: .85rem 1rem; }

/* Bouton utilitaire de page (impression), volontairement discret. */
.page-outils { margin: var(--stack) 0 0; }
.lien-outil {
  display: inline-flex; align-items: center; gap: .45rem;
  background: none; border: 0; padding: .35rem 0; cursor: pointer;
  font-size: .86rem; color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--border-2);
  text-underline-offset: 3px;
}
.lien-outil:hover { color: var(--accent-strong); text-decoration-color: currentColor; }
.lien-outil svg { flex: none; color: var(--ink-3); }
.lien-outil:hover svg { color: var(--accent); }
.rail-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.15rem 1.2rem;
  margin-bottom: 1rem; box-shadow: var(--sh-1);
}
.rail-panel > .rail-toc-t { margin-bottom: .85rem; }
.rail-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.rail-liste li { display: flex; gap: .55rem; align-items: flex-start; margin: 0; }
.rail-liste svg { flex: none; margin-top: .15rem; color: var(--accent); }
.rail-liste b { display: block; font-size: .88rem; color: var(--ink); font-weight: 650; line-height: 1.35; margin-bottom: .12rem; }
.rail-liste span > span,
.rail-liste li > span { font-size: .82rem; color: var(--ink-2); line-height: 1.45; display: block; }
.rail-panel-note { background: var(--surface-2); border-left: 3px solid var(--brass); }
.rail-panel-note p { margin: 0; font-size: .84rem; line-height: 1.55; color: var(--ink-2); }
.rail-panel-note strong { color: var(--ink); }

/* Étapes numérotées de la page de conversion */
.etapes { list-style: none; counter-reset: e; padding: 0; margin: 1rem 0 1.5rem; }
.etapes > li {
  counter-increment: e; position: relative;
  padding: 0 0 1.1rem 2.6rem; margin: 0;
  border-left: 2px solid var(--border); margin-left: .9rem;
  line-height: 1.6;
}
.etapes > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.etapes > li::before {
  content: counter(e); position: absolute; left: -.95rem; top: -.1rem;
  width: 1.85rem; height: 1.85rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-strong);
  border: 1px solid color-mix(in oklch, var(--accent) 28%, transparent);
  font-size: .82rem; font-weight: 700;
}

/* ---------- Bloc de confiance du rail ---------- */
.rail-trust {
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border);
  font-size: .78rem; line-height: 1.5; color: var(--ink-3);
}
.rail-trust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rail-trust li { margin: 0; display: flex; gap: .45rem; align-items: flex-start; }
.rail-trust svg { flex: none; margin-top: .15rem; color: var(--accent); }
.rail-trust a { color: var(--ink-2); }

/* ==========================================================================
   6. EN-TÊTE D'ARTICLE
   Le haut de page était l'endroit le plus dense du site : sept blocs se
   succédaient avant le premier mot. On en garde quatre — fil d'Ariane,
   sur-titre, titre, signature — et on leur donne de l'air.
   ========================================================================== */
.doc-head { padding: .9rem 0 0; margin-bottom: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
.breadcrumb { margin-bottom: 1.4rem; }

/* Le bandeau « barème en vigueur » redevient ce qu'il est : une confirmation,
   pas une alerte. Il tient dans la ligne de signature. L'état « périmé »,
   lui, garde son traitement pleine largeur — il doit arrêter le regard. */
.sign .bareme-etat.bareme-etat-vigueur {
  flex-basis: auto; margin: 0; padding: .2rem .6rem;
  border-radius: var(--r-full); font-size: .78rem;
  background: color-mix(in oklab, var(--ok) 10%, transparent);
  border-color: color-mix(in oklab, var(--ok) 26%, transparent);
}
.sign .bareme-etat.bareme-etat-perime { flex-basis: 100%; margin-top: .5rem; }
.doc-eyebrow {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--accent-strong);
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklch, var(--accent) 22%, transparent);
  border-radius: var(--r-full); padding: .3rem .75rem;
  margin: 0 0 .9rem;
}
/* Pas de max-width en `ch` sur un titre d'affichage : l'unité suit la taille
   de police du titre lui-même, si bien que 17ch valaient 408 px et cassaient
   les titres longs sur six lignes. La colonne de texte suffit à les borner. */
.doc-head h1 {
  font-size: clamp(1.95rem, 1.3rem + 2.6vw, 3rem);
  line-height: 1.07; letter-spacing: -.032em; margin: 0 0 .6rem;
  text-wrap: balance;
}

/* ---------- Signature : deux variantes, une seule grammaire ----------
   Une seule ligne. L'ancienne version en empilait deux (fonction + lien
   méthodologie, puis les deux dates), ce qui faisait six blocs avant le
   premier mot de contenu. La méthodologie est déjà citée dans le rail et
   dans le bloc Sources ; les deux dates ne diffèrent presque jamais. */
/* Gouttière calibrée : la somme des éléments frôle la largeur de colonne
   (706 px d'éléments pour 781 px utiles). Une gouttière de .7rem faisait
   passer la ligne à deux sur les pages dont la date est la plus longue. */
.sign {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .58rem;
  font-size: .85rem; color: var(--ink-3); line-height: 1.4;
  margin: 0; padding: 0; border: 0;
}
.sign-photo {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  object-fit: cover; background: var(--surface-2);
  box-shadow: 0 0 0 1px var(--border), 0 1px 2px hsl(var(--sh-hue) / .12);
  margin-right: -.2rem;
}
.sign-auteur .sign-who {
  font-weight: 650; color: var(--ink); text-decoration: none;
}
.sign-auteur .sign-who:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.sign-date { color: var(--ink-3); font-variant-numeric: lining-nums; }

/* La fonction ne s'affiche que si la colonne peut la prendre. En dessous de
   68 rem la colonne plafonne à 704 px ; entre 68 et 82 rem le rail la ramène
   à ~700 px. Dans les deux cas la ligne passerait à deux. La fonction reste
   dans la carte auteur en pied d'article et dans le JSON-LD. */
@media (max-width: 81.99rem) {
  .sign-role, .sign-role + .sign-sep { display: none; }
  .sign { gap: .35rem .58rem; font-size: .82rem; }
}
@media (max-width: 34rem) {
  .sign { row-gap: .45rem; }
  .sign-photo { width: 26px; height: 26px; }
}
.sign > * { margin: 0; }
.sign-sep { color: var(--border-2); user-select: none; }
.sign a { color: var(--ink-2); text-decoration-color: var(--border-2); }
.sign a:hover { color: var(--accent-strong); }
.sign-who { font-weight: 650; color: var(--ink); }
.sign-mark { display: inline-flex; align-items: center; gap: .4rem; font-weight: 650; color: var(--ink); }
.sign-mark svg { flex: none; }
.sign-badge {
  display: inline-flex; align-items: center; gap: .32rem;
  font-size: .74rem; font-weight: 650;
  color: var(--accent-strong); background: var(--accent-soft);
  border-radius: var(--r-full); padding: .18rem .55rem;
  white-space: nowrap;
}
.sign-badge svg { flex: none; }

/* La byline historique conserve sa grammaire, sans la photo. */
.byline { font-size: .82rem; gap: .3rem .75rem; align-items: center; }
.byline-avatar { display: none; }
.byline .byline-author { font-weight: 650; color: var(--ink); }

/* ---------- Chapô : la réponse directe, traitée comme telle ---------- */
.lede {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm) var(--r-md) var(--r-md) var(--r-sm);
  padding: 1.15rem 1.3rem;
  margin: 0 0 var(--stack-sm);
  font-size: var(--step-1); line-height: 1.55; color: var(--ink);
  box-shadow: var(--sh-1);
}
.lede p { margin-bottom: .7em; }
.lede p:last-child { margin-bottom: 0; }
.lede strong { color: var(--ink); font-weight: 700; }

/* ---------- Nommer le bloc de réponse ----------
   L'étiquette est décorative (elle n'entre pas dans le DOM) mais elle signale
   d'un coup d'œil où se trouve la réponse à la question posée. Elle doit
   suivre la règle .lede ci-dessus, sans quoi son padding est écrasé. */
.lede { padding-top: 2.6rem; }
.lede::before {
  content: "En bref";
  position: absolute; top: 1.15rem; left: 1.3rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-strong); line-height: 1;
}

/* ---------- Écoute du résumé ----------
   Posé dans l'angle du bloc « En bref » : c'est exactement le texte lu, et
   la même zone que celle déclarée en `speakable` dans les données structurées.
   Le bouton n'existe que si le navigateur a une voix française. */
.lede .ecoute {
  position: absolute; top: .75rem; right: .8rem;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border-radius: var(--r-full);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--ink-2); font-size: .74rem; font-weight: 650;
  letter-spacing: .01em; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.lede .ecoute:hover { background: var(--accent-soft); color: var(--accent-strong); border-color: color-mix(in oklch, var(--accent) 40%, transparent); }
.lede .ecoute svg { flex: none; }
.lede .ecoute.est-en-lecture {
  background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
}
.lede .ecoute.est-en-lecture svg { animation: ecoute-pulse 1.6s var(--ease-out) infinite; }
.lede .ecoute[disabled] { opacity: var(--o-disabled); cursor: default; }
@keyframes ecoute-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .lede .ecoute.est-en-lecture svg { animation: none; } }
@media (max-width: 34rem) {
  .lede .ecoute { position: static; margin-top: .9rem; }
}
@media print { .lede .ecoute { display: none; } }

/* ---------- Sortie précoce : le premier CTA, juste sous le chapô ----------
   Discret par construction : une ligne, pas un pavé. Il capte le lecteur
   qui a eu sa réponse en trois phrases et ne lira pas la suite. */
.cta-early {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.1rem;
  margin: 0 0 var(--stack);
  padding: .85rem 1.1rem;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.cta-early-t { margin: 0; font-size: calc(var(--step-0) * .95); color: var(--ink-2); flex: 1 1 14rem; line-height: 1.5; }
.cta-early-t b { color: var(--ink); font-weight: 650; }
.cta-early .btn { font-size: .92rem; padding: .55rem 1.15rem; }

/* ==========================================================================
   7. SYSTÈME DE CTA
   Cinq emplacements, une seule hiérarchie visuelle :
   sombre = engagement principal · clair = étape intermédiaire · ligne = rappel
   ========================================================================== */

/* ---------- CTA de milieu d'article ---------- */
.cta-mid {
  margin: var(--stack) 0;
  padding: 1.35rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2), var(--sh-inset-light);
  position: relative; overflow: hidden;
}
.cta-mid::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), color-mix(in oklch, var(--accent) 45%, var(--brass)));
}
.cta-mid-k {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-strong); margin: 0 0 .35rem;
}
.cta-mid h3 { margin: 0 0 .4rem; font-size: 1.12rem; letter-spacing: -.018em; line-height: 1.3; }
.cta-mid p { margin: 0 0 1.1rem; font-size: calc(var(--step-0) * .97); color: var(--ink-2); line-height: 1.55; max-width: 42rem; }
.cta-mid-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.cta-mid .btn { font-size: .95rem; }
.cta-mid-note { font-size: .78rem; color: var(--ink-3); margin: .7rem 0 0; }

/* ---------- CTA final : un panneau sombre, une seule fois par page ---------- */
.cta-final,
.cta-box,
.cta-panel {
  position: relative; overflow: hidden;
  max-width: none;   /* .cta-box était borné à la largeur de texte */
  background: var(--ink-deep);
  border: 0;
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 1rem + 2.4vw, 2.6rem);
  margin: var(--stack-lg) 0 var(--stack);
  box-shadow: 0 2px 4px hsl(var(--sh-hue) / .08), 0 30px 60px -34px hsl(var(--sh-hue) / .55);
  color: var(--on-deep);
}
.cta-final::before,
.cta-box::before,
.cta-panel::before {
  content: ""; position: absolute; inset: -40% -20% auto auto;
  width: 26rem; height: 26rem; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklch, var(--accent) 40%, transparent), transparent 65%);
  pointer-events: none;
}
.cta-final > *, .cta-box > *, .cta-panel > * { position: relative; }

.cta-final h2, .cta-final h3,
.cta-box h2, .cta-box h3,
.cta-panel h2, .cta-panel h3 {
  margin: 0 0 .55rem; color: var(--on-deep);
  font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem);
  letter-spacing: -.025em; line-height: 1.18; max-width: 24ch;
}
.cta-final h2::before, .cta-box h2::before, .cta-panel h2::before { display: none; }
.cta-final p, .cta-box p, .cta-panel p {
  margin: 0 0 1.35rem; color: var(--on-deep-2); opacity: 1;
  font-size: var(--step-0); line-height: 1.55; max-width: 46ch;
}
.cta-final a:not(.btn), .cta-box a:not(.btn), .cta-panel a:not(.btn) { color: var(--on-deep); }

/* Les boutons sur fond sombre sont définis avec le reste du système d'états,
   section 8 : les regrouper est le seul moyen de maîtriser la cascade. */
.cta-final :focus-visible, .cta-box :focus-visible, .cta-panel :focus-visible,
.rail-cta :focus-visible, .bande-accent :focus-visible, .site-footer :focus-visible {
  outline: 3px solid var(--on-deep); outline-offset: 3px;
}

.cta-actions, .cta-panel-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
/* Dans .cta-box les boutons sont des frères directs, sans conteneur flex :
   la marge basse tient lieu de gouttière quand ils passent à la ligne. */
.cta-box .btn { margin: 0 .6rem .55rem 0; }

/* ---------- Suite de lecture : une carte, pas un appel à l'action ----------
   Elle précède désormais le panneau final. Deux blocs verts consécutifs
   annulaient l'un l'autre ; celui-ci redevient ce qu'il est, un lien. */
.aside-cta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--brass);
  border-radius: var(--r-sm) var(--r-md) var(--r-md) var(--r-sm);
  padding: 1.15rem 1.3rem;
  margin: var(--stack) 0 0;
  box-shadow: var(--sh-1);
}
.aside-cta h3 {
  margin: 0 0 .4rem; font-size: 1.05rem; letter-spacing: -.018em;
}
.aside-cta h3::before {
  content: "Suite de lecture"; display: block;
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brass-strong); margin-bottom: .3rem;
}
.aside-cta p { margin: 0 0 .9rem; font-size: calc(var(--step-0) * .95); line-height: 1.58; }
.aside-cta .btn {
  background: transparent; color: var(--accent-strong);
  border: 1.5px solid color-mix(in oklch, var(--accent) 40%, transparent);
  box-shadow: none; font-size: .92rem; padding: .5rem 1.1rem;
}
.aside-cta .btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); }
.aside-cta .ac-trust { margin-top: .7rem; }

/* Rappel de confiance sous les boutons : trois faits vérifiables, jamais
   une promesse commerciale. */
.cta-trust, .cta-panel-trust {
  display: flex; flex-wrap: wrap; gap: .35rem 1.15rem;
  list-style: none; margin: 1.25rem 0 0; padding: 0;
  font-size: .82rem; color: var(--on-deep-3); opacity: 1;
}
.cta-trust li { display: flex; align-items: center; gap: .4rem; margin: 0; }
.cta-trust svg { flex: none; color: color-mix(in oklch, var(--accent) 62%, var(--on-deep)); }

/* ---------- Barre persistante : désormais aussi sur grand écran ---------- */
.sticky-cta {
  background: color-mix(in oklch, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  backdrop-filter: saturate(1.6) blur(14px);
  border-top: 1px solid var(--border);
  padding: .6rem var(--gutter) calc(.6rem + env(safe-area-inset-bottom));
  gap: .9rem;
}
.sticky-cta .btn { border-radius: var(--r-full); }
@media (min-width: 62rem) {
  /* Sur grand écran, la carte flottante de refinements.css reste en place —
     mais uniquement là où il n'y a pas de rail. Deux rappels d'action
     simultanés dans le même quart d'écran s'annulent. */
  body.has-rail .sticky-cta { display: none; }
  .sticky-cta .sc-close { position: absolute; top: .3rem; right: .35rem; }
  .sticky-cta { position: fixed; }
}
.sticky-cta .sc-close {
  flex: none; background: none; border: 0; cursor: pointer;
  color: var(--ink-3); font-size: 1.05rem; line-height: 1;
  padding: .35rem; border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.sticky-cta .sc-close:hover { color: var(--ink); background: var(--surface-2); }

/* ==========================================================================
   8. BOUTONS — la hiérarchie doit se lire sans lire le texte
   ========================================================================== */
/* Trois variantes, quatre états chacune, tous définis ici — dans la dernière
   feuille chargée. C'est la seule façon d'éviter qu'une règle générique
   `.btn:hover` n'écrase le survol d'une variante à spécificité égale : c'est
   exactement ce qui rendait le bouton secondaire vert sur vert (1,2:1). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border-radius: var(--r-full);
  font-weight: 650; letter-spacing: -.005em;
  /* justify-content centre le bloc de texte, pas ses lignes : sans ces deux
     règles, un libellé long revenait ferré à gauche dans une pilule centrée. */
  text-align: center; text-wrap: balance;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-instant) var(--ease-out);
}

/* --- Primaire : plein, texte blanc --- */
.btn:not(.btn-secondary):not(.btn-ghost) {
  background: linear-gradient(180deg, color-mix(in oklch, var(--accent) 92%, white), var(--accent));
  color: var(--accent-ink);
  border: 0;
}
.btn:not(.btn-secondary):not(.btn-ghost):hover {
  background: linear-gradient(180deg, var(--accent), var(--accent-strong));
  color: var(--accent-ink);
}

/* --- Secondaire : contour, texte accent. Au survol il s'éclaircit, il ne
       se remplit pas — sinon le texte accent disparaît dans le fond accent. --- */
.btn-secondary {
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--accent-strong);
  border: 1.5px solid color-mix(in oklch, var(--accent) 55%, transparent);
}
.btn.btn-secondary:hover {
  background: var(--accent-soft);
  color: var(--accent-strong);
  border-color: var(--accent);
}

/* --- Fantôme : neutre --- */
.btn-ghost {
  border-radius: var(--r-full);
  background: transparent; color: var(--ink);
  border: 1px solid var(--border-2);
}
.btn.btn-ghost:hover { background: var(--surface-2); color: var(--ink); border-color: var(--border-2); }

/* --- Sur surface sombre : le primaire s'inverse en clair, le secondaire
       devient un contour blanc. Sélecteurs assez spécifiques pour l'emporter
       sur les variantes ci-dessus, qui utilisent :not() (0,3,0). --- */
:is(.cta-final, .cta-box, .cta-panel, .rail-cta, .bande-accent) .btn:not(.btn-secondary):not(.btn-ghost) {
  background: var(--on-deep); color: var(--ink-deep);
  border: 0; font-weight: 700;
  box-shadow: 0 1px 2px rgb(0 0 0 / .28), 0 10px 22px -12px rgb(0 0 0 / .6);
}
:is(.cta-final, .cta-box, .cta-panel, .rail-cta, .bande-accent) .btn:not(.btn-secondary):not(.btn-ghost):hover {
  background: #fff; color: var(--ink-deep);
  box-shadow: 0 2px 4px rgb(0 0 0 / .3), 0 14px 30px -12px rgb(0 0 0 / .65);
}
:is(.cta-final, .cta-box, .cta-panel, .rail-cta, .bande-accent) .btn:is(.btn-secondary, .btn-ghost) {
  background: transparent; color: var(--on-deep);
  border: 1.5px solid color-mix(in oklch, var(--on-deep) 38%, transparent);
  box-shadow: none;
}
:is(.cta-final, .cta-box, .cta-panel, .rail-cta, .bande-accent) .btn:is(.btn-secondary, .btn-ghost):hover {
  background: rgb(255 255 255 / .12); color: var(--on-deep);
  border-color: color-mix(in oklch, var(--on-deep) 65%, transparent);
}

.btn:active { transform: translateY(1px); }
.btn-lg { padding: .9rem 1.75rem; font-size: 1.03rem; }
.btn svg { flex: none; }
.btn-arrow::after {
  content: "→"; font-size: 1.05em; line-height: 1;
  transition: transform var(--dur-base) var(--ease-out-soft);
}
.btn-arrow:hover::after { transform: translateX(3px); }

/* ==========================================================================
   9. BLOCS ÉDITORIAUX — chiffre clé, KPI, encadrés
   ========================================================================== */
.chiffre-cle {
  background: var(--brass-soft);
  border: 1px solid var(--brass-border);
  border-left: 3px solid var(--brass);
  border-radius: var(--r-sm) var(--r-md) var(--r-md) var(--r-sm);
  padding: 1.05rem 1.25rem;
  margin: var(--stack-sm) 0;
}
.chiffre-cle .cc-label { color: var(--brass-strong); letter-spacing: .1em; font-size: .7rem; }
.chiffre-cle strong { color: var(--brass-strong); }
.chiffre-cle p { font-size: var(--step-0); line-height: 1.55; }
.chiffre-cle strong { font-size: 1.06em; font-weight: 750; }

.kpi-row { gap: .85rem; margin: var(--stack-sm) 0; }
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 1rem 1.1rem;
  position: relative; overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--accent); opacity: .8;
}
.kpi.kpi-danger::before { background: var(--danger); }
.kpi .kpi-value, .kpi > strong {
  font-size: clamp(1.5rem, 1.3rem + .9vw, 1.85rem);
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.kpi .kpi-label, .kpi > span { font-size: .83rem; margin-top: .25rem; }

.note, .warn, .danger-box {
  border-radius: var(--r-md);
  border-left-width: 3px;
  padding: 1rem 1.2rem;
  margin: var(--stack-sm) 0;
}
.note { border-left-color: var(--accent); background: var(--surface); }
.warn { border-left-color: var(--brass); }
.danger-box { border-left-color: var(--danger); }

/* ==========================================================================
   10. TABLEAUX — l'actif éditorial du site
   ========================================================================== */
/* overflow-x: auto, jamais hidden — un tableau de barème fait 34 rem de large
   minimum et doit rester intégralement atteignable sur un écran de 375 px.
   La valeur auto suffit à découper les angles arrondis. */
.table-wrap {
  border-radius: var(--r-lg);
  overflow-x: auto;
  border: 1px solid var(--border);
  box-shadow: var(--sh-2), var(--sh-inset-light);
  margin: var(--stack-sm) 0;
}
.table-wrap > table { border-radius: 0; }
caption {
  padding: .95rem 1.15rem .55rem; font-size: .88rem; font-weight: 650;
  color: var(--ink-2); background: var(--surface);
}
thead th {
  background: var(--surface-2);
  font-size: .74rem; font-weight: 700; letter-spacing: .09em;
  color: var(--ink-2);
  padding: .7rem .95rem;
  box-shadow: inset 0 -1px 0 var(--border-2);
}
th, td { padding: .72rem .95rem; }
tbody th[scope="row"] { font-weight: 650; color: var(--ink); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
.table-note {
  background: var(--surface-2); border-top: 1px solid var(--border);
  padding: .7rem 1.15rem; font-size: .81rem; margin: 0;
}
/* Barre de défilement discrète mais présente : sur un tableau plus large que
   l'écran, elle est le seul indice que le contenu continue à droite. */
.table-wrap { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; }
.table-wrap::-webkit-scrollbar { height: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.table-wrap::-webkit-scrollbar-track { background: var(--surface-2); }

/* ==========================================================================
   11. FAQ
   ========================================================================== */
.faq { max-width: none; margin: var(--stack) 0; }
.faq > h2 { margin-bottom: 1rem; }
.faq details {
  border-radius: var(--r-md);
  border-color: var(--border);
  margin-bottom: .5rem;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.faq details:hover { border-color: var(--border-2); }
.faq details[open] { border-color: color-mix(in oklch, var(--accent) 32%, var(--border)); }
.faq summary { padding: .95rem 1.15rem; font-weight: 650; font-size: var(--step-0); align-items: center; }
.faq summary::after {
  content: ""; flex: none; width: .8rem; height: .8rem;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-base) var(--ease-out-soft);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq .faq-a { padding: 0 1.15rem 1.05rem; font-size: calc(var(--step-0) * .96); line-height: 1.62; }

/* Relance après la FAQ : le lecteur qui a ouvert trois questions est chaud. */
.faq-relance {
  margin: 1.1rem 0 0; padding: .9rem 1.15rem;
  background: var(--accent-soft);
  border: 1px solid color-mix(in oklch, var(--accent) 24%, transparent);
  border-radius: var(--r-md);
  font-size: calc(var(--step-0) * .95); color: var(--ink-2); line-height: 1.5;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
}
.faq-relance p { margin: 0; flex: 1 1 15rem; }
.faq-relance strong { color: var(--ink); }
.faq-relance .btn { font-size: .9rem; padding: .5rem 1.05rem; }

/* ==========================================================================
   12. CARTES
   ========================================================================== */
.card-grid { gap: .9rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); margin: var(--stack-sm) 0; }
.card {
  border-radius: var(--r-md);
  padding: 1.05rem 1.15rem;
  display: flex; flex-direction: column; gap: .38rem;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-out-soft),
              box-shadow var(--dur-base) var(--ease-out);
}
.card:hover { border-color: color-mix(in oklch, var(--accent) 35%, var(--border)); }
.card .card-tag { font-size: .68rem; letter-spacing: .09em; color: var(--ink-3); }
.card h3 { font-size: 1rem; letter-spacing: -.015em; line-height: 1.32; }
.card p { font-size: .875rem; line-height: 1.45; }
/* Le chiffre porté par la carte doit se lire avant la phrase. */
.card p strong, .card p b { color: var(--accent-strong); font-variant-numeric: tabular-nums; }

.product-card { border-radius: var(--r-lg); padding: 1.5rem 1.4rem 1.4rem; }
.product-card .pc-icon {
  width: 2.6rem; height: 2.6rem; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-strong);
  margin-bottom: .9rem;
}
.product-card .pc-badge {
  border-radius: var(--r-full); font-size: .68rem; letter-spacing: .08em;
  padding: .22rem .6rem;
}
.product-card .pc-cta {
  display: inline-flex; align-items: center; gap: .35rem;
}
.product-card .pc-cta::after { transition: transform var(--dur-base) var(--ease-out-soft); }
.product-card:hover .pc-cta::after { transform: translateX(3px); }

.tool-card { border-radius: var(--r-lg); padding: 1.25rem 1.25rem 1.3rem; }
.tool-card .tc-icon { width: 2.35rem; height: 2.35rem; border-radius: var(--r-md); }
.tool-card .tc-go { display: inline-flex; align-items: center; gap: .35rem; }
.tool-card .tc-go::after { transition: transform var(--dur-base) var(--ease-out-soft); }
.tool-card:hover .tc-go::after { transform: translateX(3px); }

/* ==========================================================================
   13. ACCUEIL — hero et bandes
   ========================================================================== */
.hero-lead .container { padding-top: clamp(2.2rem, 1.4rem + 3vw, 3.6rem); padding-bottom: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); }

/* Le français est environ 15 % plus long que l'anglais : à 3,5 rem, un titre
   de 78 signes s'empilait sur cinq lignes. On plafonne un peu plus bas et on
   élargit la colonne de texte du hero — la carte n'a pas besoin de 500 px. */
.hero-title { font-size: clamp(2.05rem, 1.2rem + 2.5vw, 3.15rem); line-height: 1.05; letter-spacing: -.033em; }
/* Entre 56 et 68 rem, deux colonnes ne laissent au titre que ~525 px : il
   s'empile sur cinq lignes. Dans cette bande, le hero reste sur une colonne —
   la carte passe dessous, le titre récupère toute la largeur. */
@media (min-width: 56rem) and (max-width: 67.99rem) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .hero-card { max-width: 34rem; }
  .hero-sub { max-width: 44rem; }
}
@media (min-width: 68rem) {
  .hero-grid {
    grid-template-columns: minmax(0, 1.42fr) minmax(19rem, 25.5rem);
    align-items: center;
  }
}
/* Surtout pas de white-space: nowrap ici — « meilleure assurance de prêt »
   mesure 700 px et sortait du titre, par-dessus la carte voisine. */
.hero-title em { color: var(--accent-strong); font-style: normal; }
.hero-sub { font-size: var(--step-1); line-height: 1.55; max-width: 34rem; }
.eyebrow {
  border-radius: var(--r-full);
  background: var(--surface);
  border: 1px solid var(--border-2);
  padding: .34rem .8rem;
  font-size: .76rem; letter-spacing: .07em;
  box-shadow: var(--sh-1);
}
.hero-actions { gap: .7rem; margin-bottom: 1.3rem; }
.hero-trust { gap: .5rem 1.4rem; font-size: .86rem; }

.hero-card {
  border-radius: var(--r-xl);
  padding: 1.5rem 1.4rem 1.4rem;
  border: 1px solid var(--border);
}
.hero-card-kicker { color: var(--accent-strong); }
.hero-card .btn { border-radius: var(--r-full); }
.hero-card-foot {
  border-top: 1px solid var(--border); padding-top: .75rem; margin-top: .95rem;
  font-size: .76rem; line-height: 1.45;
}

/* Statistiques du hero : une bande unifiée, pas quatre boîtes flottantes. */
.hero-stats {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: clamp(2rem, 1.4rem + 2vw, 3rem);
  box-shadow: var(--sh-2);
}
.hero-stats div { background: var(--surface); padding: 1.05rem 1.15rem; }
.hero-stats b {
  font-size: clamp(1.5rem, 1.3rem + .9vw, 1.9rem);
  letter-spacing: -.035em; font-variant-numeric: tabular-nums;
}
.hero-stats .stat-alert b { color: var(--danger); }
.hero-stats span { font-size: .81rem; line-height: 1.4; }

/* Bandes de section : alternance de fond pour découper une page longue. */
.bande { padding-block: var(--stack-lg); margin-block: 0; }
.bande-douce { background: var(--surface-2); border-block: 1px solid var(--border); }
.bande-accent {
  background: var(--ink-deep); border: 0; color: var(--on-deep);
}
.bande-accent h2 { color: var(--on-deep); }
.bande-accent p, .bande-accent li { color: var(--on-deep-2); }
.bande-accent strong { color: var(--on-deep); }
.bande-accent a { color: color-mix(in oklch, var(--accent) 45%, var(--on-deep)); }
.bande-accent a:hover { color: var(--on-deep); }
.bande-lede { font-size: var(--step-1); max-width: 44ch; margin-bottom: 2rem; }

/* Colonnes numérotées : le compteur remplace la puce, ce qui donne au bloc
   la lecture d'un argumentaire plutôt que celle d'une liste à cocher. */
.colonnes {
  list-style: none; counter-reset: c;
  display: grid; gap: 1.6rem 2.4rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0; padding: 0;
}
.colonnes > li { counter-increment: c; margin: 0; padding-top: 2.6rem; position: relative; }
.colonnes > li::before {
  content: counter(c, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  color: color-mix(in oklch, var(--accent) 55%, var(--on-deep));
  padding-bottom: .5rem;
}
.colonnes > li::after {
  content: ""; position: absolute; top: 1.55rem; left: 0; width: 1.9rem; height: 2px;
  background: color-mix(in oklch, var(--accent) 50%, transparent);
}
.colonnes h3 { margin: 0 0 .45rem; font-size: 1.12rem; letter-spacing: -.02em; color: var(--on-deep); }
.colonnes p { margin: 0; font-size: .93rem; line-height: 1.6; }

/* ==========================================================================
   14. BANDEAU DE PREUVE
   Trois faits vérifiables : immatriculation, méthode, engagement de délai.
   Aucun chiffre de notoriété inventé.
   ========================================================================== */
.proof-band {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: clamp(1.6rem, 1rem + 2vw, 2.6rem) 0 0;
  box-shadow: var(--sh-1);
}
.proof-item {
  background: var(--surface); padding: 1.2rem 1.3rem;
  display: flex; gap: .8rem; align-items: flex-start;
}
.proof-item svg { flex: none; color: var(--accent); margin-top: .12rem; }
.proof-item b { display: block; font-size: .92rem; color: var(--ink); font-weight: 650; line-height: 1.35; }
.proof-item span { display: block; font-size: .82rem; color: var(--ink-3); line-height: 1.45; margin-top: .15rem; }

/* ==========================================================================
   15. CARTE AUTEUR — la seule occurrence de la photo, en fin d'article
   ========================================================================== */
.author-card {
  display: grid; gap: 1.1rem;
  grid-template-columns: auto 1fr; align-items: start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 1.4rem;
  margin: var(--stack) 0 0;
  box-shadow: var(--sh-2), var(--sh-inset-light);
}
.author-photo {
  width: 74px; height: 74px; border-radius: 50%;
  object-fit: cover; flex: none;
  border: 2px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border), var(--sh-2);
}
@media (min-width: 40rem) { .author-photo { width: 92px; height: 92px; } }
/* L'ordre compte : `.author-body p` est plus spécifique que `.author-name`.
   Sans `> p` explicite en tête, le nom de l'auteur se retrouvait à 14,7 px
   en gris, sous la taille du texte courant. */
.author-body > p { font-size: .92rem; line-height: 1.55; color: var(--ink-2); margin: 0 0 .7rem; }
.author-body > p.author-k {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 .3rem;
}
.author-body > p.author-name {
  font-size: var(--step-1); font-weight: 750; letter-spacing: -.022em;
  color: var(--ink); margin: 0 0 .2rem; line-height: 1.25;
}
.author-body > p.author-role { font-size: .88rem; color: var(--ink-2); margin: 0 0 .7rem; line-height: 1.45; }
.author-meta {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem; list-style: none;
  margin: 0; padding: 0; font-size: .8rem; color: var(--ink-3);
}
.author-meta li { display: flex; align-items: center; gap: .35rem; margin: 0; }
.author-meta svg { flex: none; color: var(--accent); }
@media (max-width: 32rem) {
  .author-card { grid-template-columns: 1fr; }
  .author-photo { width: 62px; height: 62px; }
}

/* ==========================================================================
   16. SOURCES — la preuve mérite mieux qu'une note de bas de page
   ========================================================================== */
.sources {
  max-width: none;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.25rem 1.35rem;
  margin-top: var(--stack);
  font-size: .84rem;
}
.sources h2, .sources h3 {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 .7rem;
}
.sources h2::before { display: none; }
.sources ul { padding-left: 1.15em; }
.sources li { margin-bottom: .45em; line-height: 1.5; }
.sources .hint { margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--border); font-size: .8rem; }

/* ==========================================================================
   17. PIED DE PAGE
   ========================================================================== */
.site-footer {
  background: var(--ink-deep); color: var(--on-deep-2);
  border-top: 0; margin-top: 0; padding: clamp(2.6rem, 2rem + 2.5vw, 4rem) 0 2.4rem;
}
.site-footer h2 {
  color: var(--on-deep); font-size: .72rem; letter-spacing: .1em;
  margin-bottom: .8rem; opacity: .75;
}
.site-footer a { color: var(--on-deep-2); }
.site-footer a:hover { color: var(--on-deep); text-decoration: underline; text-underline-offset: 3px; }
.site-footer li { margin-bottom: .42rem; line-height: 1.4; }
.footer-grid { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.8rem 1.6rem; }
/* Cinq colonnes explicites au-delà de 62rem : la marque a besoin de deux
   fois la largeur d'une colonne de liens pour que son texte respire. */
@media (min-width: 62rem) {
  .footer-grid { grid-template-columns: 1.7fr repeat(4, 1fr); gap: 2rem; }
}
.footer-brand { grid-column: 1 / -1; margin-bottom: .6rem; }
@media (min-width: 62rem) { .footer-brand { grid-column: auto; margin-bottom: 0; padding-right: 1.5rem; } }
.footer-brand .logo { color: var(--on-deep); font-size: 1.3rem; }
.footer-brand p { font-size: .85rem; line-height: 1.55; color: var(--on-deep-3); margin: .7rem 0 0; }
.footer-orias {
  display: inline-flex; align-items: center; gap: .45rem;
  margin-top: .9rem; padding: .35rem .7rem;
  border: 1px solid var(--deep-border); border-radius: var(--r-full);
  font-size: .76rem; color: var(--on-deep-2);
}
.footer-orias svg { flex: none; color: color-mix(in oklch, var(--accent) 55%, var(--on-deep)); }

.footer-legal {
  border-top: 1px solid var(--deep-border);
  margin-top: 2.2rem; padding-top: 1.4rem;
  font-size: .78rem; color: var(--on-deep-3); line-height: 1.55;
}
.footer-legal a { color: var(--on-deep-2); }
.footer-legal strong { color: var(--on-deep-2); }

/* ==========================================================================
   18. FIL D'ARIANE
   ========================================================================== */
.breadcrumb { font-size: .8rem; margin: 1.1rem 0 0; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb li[aria-current="page"] { color: var(--ink-2); font-weight: 550; }

/* ==========================================================================
   19. OUTILS ET SIMULATEURS
   ========================================================================== */
.sim {
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--sh-2), var(--sh-inset-light);
  padding: clamp(1.2rem, 1rem + 1.2vw, 1.9rem);
}
.msf-progress { height: .4rem; background: var(--surface-3); }
.msf-progress-fill { background: linear-gradient(90deg, var(--accent), color-mix(in oklch, var(--accent) 60%, var(--brass))); }
.msf-options button, .msf-multi button, .canal-opt { border-radius: var(--r-md); }
.verdict { border-radius: var(--r-lg); }
.verdict-figure { letter-spacing: -.035em; font-variant-numeric: tabular-nums; }

input[type="text"], input[type="number"], input[type="email"], input[type="tel"], select, textarea {
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
input:focus, select:focus, textarea:focus { box-shadow: var(--sh-ring-accent); }

/* ==========================================================================
   20. MOUVEMENT — une seule animation, à l'entrée dans le viewport
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); }
  .reveal.is-in {
    opacity: 1; transform: none;
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out-soft);
  }
}

/* ==========================================================================
   21. DÉTAILS DE FINITION
   ========================================================================== */

/* Les chiffres sont l'actif du site : ils s'alignent en colonne, partout. */
table, .kpi, .hero-stats, .verdict, .wz-ligne, .chiffre-cle, .gauge-fill,
.doc-main td, .doc-main th { font-variant-numeric: tabular-nums lining-nums; }

/* Sélection : la teinte de marque, pas le bleu du système. */
::selection { background: color-mix(in oklch, var(--accent) 22%, transparent); color: var(--ink); }
.cta-final ::selection, .cta-box ::selection, .cta-panel ::selection,
.site-footer ::selection, .bande-accent ::selection, .rail-cta ::selection {
  background: color-mix(in oklch, var(--accent) 45%, transparent); color: var(--on-deep);
}

/* Un liseré clair au sommet du pied de page : sans lui, la bascule du fond
   clair au fond sombre se fait sur une arête nue. */
.site-footer { position: relative; }
.site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--accent) 40%, transparent) 30%,
              color-mix(in oklch, var(--accent) 40%, transparent) 70%, transparent);
}

/* Fiches de listing : une chevrone qui n'apparaît qu'au survol. */
.card { padding-right: 2rem; }
.card::after {
  content: ""; position: absolute; right: 1.05rem; top: 1.35rem;
  width: .42rem; height: .42rem;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg); opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out-soft);
}
.card:hover::after { opacity: 1; transform: rotate(-45deg) translate(2px, -2px); }
@media (prefers-reduced-motion: reduce) { .card:hover::after { transform: rotate(-45deg); } }

/* Apostrophes et guillemets français en début de ligne : léger débord optique. */
.doc-main blockquote, .lede { hanging-punctuation: first last; }

/* ==========================================================================
   22. IMPRESSION
   ========================================================================== */
@media print {
  .site-header, .doc-rail, .sticky-cta, .read-progress,
  .cta-mid, .cta-early, .cta-final, .cta-box, .cta-panel, .faq-relance { display: none !important; }
  .doc-grid { display: block; }
  .site-footer { background: none; color: #000; }
  .site-footer a, .site-footer h2 { color: #000; }
}

/* ===========================================================================
   Maillage interne contextuel — bloc de fin de page
   Généré par scripts/maillage.js. Ne pas éditer les blocs à la main.
   =========================================================================== */
.maillage {
  margin: var(--stack-lg, 4rem) 0 0;
  padding: 1.9rem 0 0;
  border-top: 1px solid var(--border);
}
.maillage-t {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3, var(--ink-2));
  margin: 0 0 1.35rem;
}
.maillage-cols {
  display: grid;
  gap: 1.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
.maillage-col.is-wide { grid-column: span 2; }
.maillage-col.is-wide ul { columns: 2; column-gap: 1.6rem; }
.maillage-k {
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 .55rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--border);
}
.maillage-col ul { list-style: none; margin: 0; padding: 0; }
.maillage-col li { margin: 0 0 .34rem; break-inside: avoid; }
.maillage-col a {
  font-size: .875rem;
  overflow-wrap: anywhere;
  line-height: 1.45;
  color: var(--ink-2);
  text-decoration: none;
  display: inline-block;
}
.maillage-col a:hover,
.maillage-col a:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 760px) {
  .maillage-cols { grid-template-columns: 1fr 1fr; gap: 1.35rem 1.4rem; }
  .maillage-col.is-wide { grid-column: span 2; }
  .maillage-col.is-wide ul { columns: 2; }
}
@media (max-width: 460px) {
  .maillage-cols { grid-template-columns: 1fr; }
  .maillage-col.is-wide, .maillage-col.is-wide ul { grid-column: auto; columns: 1; }
}

/* --- Pages hub (caisses, statuts) --- */
.hub-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); margin: 1.8rem 0 2.4rem; }
.hub-card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md, 12px); padding: 1.15rem 1.25rem;
  display: flex; flex-direction: column; gap: .35rem;
  transition: border-color .15s ease, transform .15s ease;
}
.hub-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.hub-card h2 { margin: 0; font-size: 1.08rem; line-height: 1.3; }
.hub-card h2 a { text-decoration: none; color: var(--ink); }
.hub-card h2 a::after { content: ""; position: absolute; inset: 0; }
.hub-card h2 a:hover { color: var(--accent); }
.hub-sub { margin: 0; font-size: .84rem; color: var(--ink-2); font-weight: 500; }
.hub-note { margin: .15rem 0 0; font-size: .86rem; color: var(--ink-2); line-height: 1.5; }
.hub-metiers { margin: .5rem 0 0; padding-top: .55rem; border-top: 1px solid var(--border); font-size: .8rem; line-height: 1.7; color: var(--ink-3, var(--ink-2)); }
.hub-metiers a { position: relative; z-index: 1; color: var(--ink-2); text-decoration: none; }
.hub-metiers a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hub-card:hover { transform: none; } }