/* =========================================================================
   HORECA COMPTA — DESIGN SYSTEM
   Direction hybride C+B « Chaleur du métier, rigueur du cockpit »
   (02-design-uiux §4). Mobile-first. Aucune valeur en dur hors tokens.
   ========================================================================= */

/* ---------- 0. POLICES AUTO-HÉBERGÉES ------------------------------------
   Aucune requête vers fonts.googleapis.com / fonts.gstatic.com : sur le site
   d'un cabinet comptable, faire transiter l'IP de chaque visiteur par un tiers
   pour une police est un angle RGPD gratuit.

   Fichiers `woff2` récupérés le 2026-08-31 depuis fonts.gstatic.com (source
   officielle Google Fonts), sous-ensembles `latin` et `latin-ext` uniquement.
   Les deux familles sont VARIABLES : un seul fichier par sous-ensemble couvre
   toute la plage de graisses utilisée (d'où `font-weight: 600 700`).

   `size-adjust` / `*-override` des familles de repli : valeurs MESURÉES sur
   les fichiers réels (fontTools), pas estimées. Méthode — largeur d'avance
   moyenne sur un échantillon de 194 glyphes du site, instance variable prise
   à la graisse réellement employée, rapportée à Arial (métriquement proche
   d'Helvetica et de Liberation Sans) :
     Bricolage Grotesque wght 600 → 96,7 % d'Arial · wght 700 → 98,4 %
     Source Sans 3       wght 400 → 93,3 % d'Arial
   Les overlays verticaux reprennent les métriques `hhea` de la webfont
   divisées par le `size-adjust`, ce qui aligne la hauteur de ligne du repli
   sur celle de la police finale → zéro décalage au moment du swap.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 600 700;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/source-sans-3-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
                 U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
                 U+2C60-2C7F, U+A720-A7FF;
}

/* Familles de repli calibrées — affichées pendant le `swap`. */
@font-face {
  font-family: "HC Heading Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Roboto");
  size-adjust: 98%;
  ascent-override: 94.9%;
  descent-override: 27.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "HC Body Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Roboto");
  size-adjust: 93.3%;
  ascent-override: 109.8%;
  descent-override: 42.9%;
  line-gap-override: 0%;
}

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  /* Couleurs — contrastes vérifiés AA (02-design §4.1) */
  --color-primary:        #C2410C;
  --color-primary-hover:  #9A3412;
  --color-primary-soft:   #FEF0E7;
  --color-ink:            #1C1917;
  --color-text:           #3F3A36;
  --color-text-muted:     #6B6259;
  --color-navy:           #10233F;
  --color-navy-soft:      #E9EEF6;
  --color-bg:             #FFFDF9;
  --color-bg-alt:         #FEF3E2;
  --color-surface:        #FFFFFF;
  --color-border:         #E7DFD6;
  --color-success:        #15803D;
  --color-error:          #B91C1C;
  --color-warning:        #B45309;
  --color-focus:          #1D4ED8;
  --color-cream:          #FEF3E2;

  /* Typographie */
  --font-heading: "Bricolage Grotesque", "HC Heading Fallback", "Segoe UI",
                  system-ui, sans-serif;
  --font-body:    "Source Sans 3", "HC Body Fallback", "Segoe UI",
                  system-ui, sans-serif;

  --fs-display: 2.125rem;  /* 34px */
  --fs-h2:      1.625rem;  /* 26px */
  --fs-h3:      1.25rem;   /* 20px */
  --fs-h4:      1.0625rem;
  --fs-body-lg: 1.125rem;
  --fs-body:    1rem;
  --fs-small:   .875rem;
  --fs-label:   .9375rem;
  --fs-eyebrow: .8125rem;

  /* Espacements — échelle 4px */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section-y: var(--s8);

  /* Rayons & ombres */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --shadow-card:   0 1px 2px rgba(28,25,23,.04), 0 6px 16px rgba(28,25,23,.06);
  --shadow-raised: 0 12px 32px rgba(28,25,23,.10);

  --wrap: 1140px;
  --gutter: 20px;
  --dur: 200ms;
}

@media (min-width: 768px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) {
  :root {
    --fs-display: 3.25rem; --fs-h2: 2.25rem; --fs-h3: 1.5rem;
    --fs-h4: 1.1875rem; --fs-body-lg: 1.25rem; --fs-body: 1.0625rem;
    --section-y: var(--s9);
  }
}

/* ---------- 2. BASE ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* L'attribut `hidden` doit gagner contre TOUTE règle de composant.
   Sans ce garde-fou, `.btn { display: inline-flex }` écrase la règle
   `[hidden] { display: none }` du navigateur : l'attribut devient inerte et
   un bouton masqué en JavaScript reste affiché. C'est exactement ce qui
   laissait « Continuer » visible au step 4 du formulaire, et « Retour »
   visible au step 1 (bug relevé en recette, 2026-08-31).
   La règle vaut pour tous les composants, pas seulement pour les boutons. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: hidden;           /* garde-fou : aucun débordement horizontal */
  padding-bottom: 84px;         /* place réservée au sticky dès le 1er paint */
}
@media (min-width: 768px) { body { padding-bottom: 0; } }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-ink);
  line-height: 1.2;
  margin: 0 0 var(--s4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); font-weight: 700; line-height: 1.12; }
h2 { font-size: var(--fs-h2);      font-weight: 700; }
h3 { font-size: var(--fs-h3);      font-weight: 600; line-height: 1.3; }
h4 { font-size: var(--fs-h4);      font-weight: 600; }

p, ul, ol, table { margin: 0 0 var(--s4); }
img, svg, video { max-width: 100%; height: auto; }

a { color: var(--color-primary); text-underline-offset: .18em; }
a:hover { color: var(--color-primary-hover); }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: 2px;
}

.sr, .skip:not(:focus) {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip:focus {
  position: fixed; top: var(--s2); left: var(--s2); z-index: 200;
  background: var(--color-ink); color: #fff; padding: var(--s3) var(--s4);
  border-radius: var(--radius-sm);
}
.sprite { display: none; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: -.2em; }
.icon--ok { color: var(--color-success); }

/* Trait de craie — élément graphique issu du logo « Ardoise » */
.chalk {
  position: relative;
  display: inline;
  background-image: linear-gradient(transparent 62%, var(--color-primary-soft) 62%);
  padding-inline: .08em;
}
.chalk::after {
  content: ""; position: absolute; left: 0; right: -.12em; bottom: -.06em;
  height: 3px; border-radius: 3px;
  background: var(--color-primary);
  transform: rotate(-.5deg);
  transform-origin: left;
}

/* ---------- 3. BOUTONS --------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s2);
  min-height: 52px; padding: 0 var(--s5);
  font: 600 1.0625rem/1 var(--font-body);
  border: 0; border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none;
  touch-action: manipulation;
  transition: background-color var(--dur) ease-out, transform 150ms ease-out;
}
.btn--primary   { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-hover); color: #fff;
                      transform: translateY(-1px); }
.btn--secondary { background: transparent; color: var(--color-ink);
                  box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.btn--secondary:hover { background: var(--color-ink); color: #fff; }
.btn--ghost     { background: transparent; color: var(--color-primary);
                  padding-inline: var(--s2); min-height: 44px; }
.btn--ondark    { background: #fff; color: var(--color-navy); }
.btn--ondark:hover { background: var(--color-cream); color: var(--color-navy); }
.btn--sm        { min-height: 44px; padding: 0 var(--s4); font-size: 1rem; }
.btn--block     { width: 100%; }
.btn:active     { transform: scale(.98); }
.btn[disabled]  { opacity: .45; cursor: not-allowed; transform: none; }

.link-arrow { font-weight: 600; text-decoration: none; }
.link-arrow::after { content: " →"; }
.link-arrow:hover { text-decoration: underline; }

/* ---------- 4. EN-TÊTE / NAVIGATION -------------------------------------- */
.stagingbar {
  margin: 0; padding: var(--s2) var(--gutter);
  background: var(--color-warning); color: #fff;
  font-size: var(--fs-small); font-weight: 600; text-align: center;
}

.site-head {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.site-head__in {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 64px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: var(--s2);
         text-decoration: none; color: var(--color-ink); margin-right: auto; }
.brand__name { font: 600 1.125rem/1 var(--font-heading); letter-spacing: -.01em; }
.brand__be { color: var(--color-primary); }
.logo-mark { display: block; }

.burger {
  display: inline-flex; flex-direction: column; justify-content: center;
  gap: 5px; width: 48px; height: 48px; padding: 0 12px;
  background: transparent; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); cursor: pointer;
}
.burger span { display: block; height: 2px; background: var(--color-ink);
               border-radius: 2px; }
.site-nav { display: none; width: 100%; }
.site-nav[data-open] { display: block; }
.site-nav ul { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.site-nav a {
  display: block; padding: var(--s3) 0; min-height: 48px;
  color: var(--color-ink); text-decoration: none; font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}
.site-nav a:hover { color: var(--color-primary); }
/* Le CTA reste hors du burger (08 §D3) */
.site-head__cta .btn { min-height: 44px; }

/* D9a (05-10-2026) : 6 entrées + CTA ne tiennent sur une ligne qu'à partir
   de ≈ 1100 px (mesuré : à 1024 px le CTA passait sur une 2e ligne). Le menu
   horizontal s'affiche donc dès 1200 px ; en dessous, burger + CTA visible. */
@media (min-width: 1200px) {
  .burger { display: none; }
  .site-nav { display: block; width: auto; margin-right: var(--s4); }
  .site-nav ul { display: flex; gap: var(--s5); margin: 0; }
  .site-nav a { border: 0; padding: 0; }
}

/* ---------- 5. FIL D'ARIANE ---------------------------------------------- */
.crumbs { border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.crumbs ol {
  display: flex; flex-wrap: wrap; gap: var(--s2);
  list-style: none; margin: 0; padding: var(--s3) 0;
  font-size: var(--fs-small); color: var(--color-text-muted);
}
.crumbs li + li::before { content: "› "; color: var(--color-border); }
.crumbs a { color: var(--color-text-muted); }

/* ---------- 6. SECTIONS -------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section--alt   { background: var(--color-bg-alt); }
.section--proof { background: var(--color-surface); padding-block: var(--s5);
                  border-block: 1px solid var(--color-border); }
.section--navy  { background: var(--color-navy); color: #E4EAF3; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy a:not(.btn) { color: #fff; }
.section--form  { padding-block: var(--s6) var(--s8); }

.lede { font-size: var(--fs-body-lg); color: var(--color-ink); }
.note { font-size: var(--fs-small); color: var(--color-text-muted); }

/* Faits communaux sourcés (pages locales). La source est en retrait typographique
   sans être illisible : c'est elle qui rend le fait vérifiable, et donc elle qui
   distingue ces pages d'une page satellite écrite de mémoire. */
.faits li { margin-bottom: var(--s3); }
.src {
  display: block; margin-top: .35em;
  font-size: var(--fs-small); color: var(--color-text-muted);
}
.src a { color: inherit; }
.src a:hover, .src a:focus-visible { color: var(--color-primary); }
.eyebrow {
  font: 700 var(--fs-eyebrow)/1.3 var(--font-body);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-primary); margin-bottom: var(--s3);
}
.geo {
  font-size: var(--fs-small); color: var(--color-text-muted);
  margin-block: var(--s5); max-width: 74ch;
}
.updated { font-size: var(--fs-small); color: var(--color-text-muted); }

/* ---------- 7. HERO ------------------------------------------------------ */
.hero { padding-block: var(--s7) var(--s6); }
.hero__in { display: grid; gap: var(--s6); }
.hero__lead { font-size: var(--fs-body-lg); max-width: 60ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.hero__actions .btn { flex: 1 1 auto; }

.reassure {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5);
  list-style: none; padding: 0; margin-top: var(--s5);
  font-size: var(--fs-small); color: var(--color-text-muted);
}
.reassure li { display: flex; align-items: center; gap: var(--s2); }

@media (min-width: 1024px) {
  .hero__in { grid-template-columns: 1.05fr .95fr; align-items: start; gap: var(--s8); }
  .hero__actions .btn { flex: 0 0 auto; }
}

/* ---------- 8. AMORCE DE FORMULAIRE (inline, 08 §D4) --------------------- */
.amorce {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  box-shadow: var(--shadow-card);
}
.amorce__title { font: 600 var(--fs-h3)/1.3 var(--font-heading);
                 color: var(--color-ink); margin-bottom: var(--s4); }
.amorce__cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.amorce__card {
  display: flex; align-items: center; min-height: 60px;
  padding: var(--s3); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm); background: var(--color-bg);
  color: var(--color-ink); font-weight: 600; font-size: var(--fs-small);
  text-decoration: none; transition: border-color var(--dur), background var(--dur);
}
.amorce__card:hover {
  border-color: var(--color-primary); background: var(--color-primary-soft);
  color: var(--color-ink);
}
.amorce__foot {
  display: flex; align-items: center; gap: var(--s2);
  margin: var(--s4) 0 0; font-size: var(--fs-small);
  color: var(--color-text-muted);
}
@media (min-width: 480px) { .amorce__cards { grid-template-columns: 1fr 1fr; } }

/* ---------- 9. CARTES SEGMENTS ------------------------------------------- */
.segments { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.segment {
  display: grid; grid-template-areas: "i a" "l l" "m m";
  grid-template-columns: auto 1fr;
  gap: var(--s2);
  padding: var(--s4); min-height: 132px;
  background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  text-decoration: none; color: var(--color-ink);
  transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur);
}
.segment:hover {
  border-color: var(--color-primary); box-shadow: var(--shadow-raised);
  color: var(--color-ink); transform: translateY(-1px);
}
.segment--highlight { border: 2px solid var(--color-primary);
                      background: var(--color-primary-soft); }
.segment__icon  { grid-area: i; width: 26px; height: 26px; color: var(--color-primary); }
.segment__arrow { grid-area: a; width: 18px; height: 18px; justify-self: end;
                  color: var(--color-text-muted); }
.segment__label { grid-area: l; font: 600 var(--fs-h4)/1.25 var(--font-heading); }
.segment__micro { grid-area: m; font-size: var(--fs-small);
                  color: var(--color-text-muted); }
@media (min-width: 768px) { .segments { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .segments { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 10. BLOCS DE CONTENU ----------------------------------------- */
.pains { display: grid; gap: var(--s4); }
.pain {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md); padding: var(--s5);
}
.pain h3 { font-size: var(--fs-h3); margin-bottom: var(--s2); }
.pain p  { margin: 0; color: var(--color-text-muted); }
@media (min-width: 768px) { .pains { grid-template-columns: 1fr 1fr; } }

.diffs { list-style: none; padding: 0; display: grid; gap: var(--s4); }
.diffs li { display: flex; gap: var(--s3); align-items: flex-start; }
.diffs strong { color: #fff; display: block; }
.diffs .icon--ok { color: #6EE7A8; margin-top: .25em; }
@media (min-width: 768px) { .diffs { grid-template-columns: 1fr 1fr; gap: var(--s5); } }

.parcours { list-style: none; counter-reset: p; padding: 0; display: grid;
            gap: var(--s4); }
.parcours__step {
  counter-increment: p;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--s5);
}
.parcours__step h3::before {
  content: counter(p) ". "; color: var(--color-primary);
}
.parcours__step ul { padding-left: 1.1em; color: var(--color-text-muted);
                     font-size: var(--fs-small); }
@media (min-width: 768px) { .parcours { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .parcours { grid-template-columns: repeat(4, 1fr); } }

.numsteps { list-style: none; padding: 0; display: grid; gap: var(--s5); }
.numstep { display: flex; gap: var(--s4); align-items: flex-start; }
.numstep__n {
  flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
  font: 700 1.375rem/1 var(--font-heading); color: var(--color-primary);
  background: var(--color-primary-soft); border-radius: 50%;
}
@media (min-width: 768px) { .numsteps { grid-template-columns: repeat(3, 1fr); } }

.aparte {
  font-style: italic; color: var(--color-text-muted);
  border-left: 3px solid var(--color-border);
  padding-left: var(--s4); margin-left: 0; max-width: 70ch;
}

.zones { font-weight: 600; }

.magnet {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--s5);
}

.proofline { font-weight: 600; color: var(--color-ink); margin-bottom: var(--s2); }

.cards { display: grid; gap: var(--s4); }
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--s5);
  box-shadow: var(--shadow-card);
}
.card h3 { margin-bottom: var(--s2); }
@media (min-width: 768px) { .cards { grid-template-columns: 1fr 1fr; } }

.callout {
  background: var(--color-navy-soft); border-left: 4px solid var(--color-navy);
  border-radius: var(--radius-sm); padding: var(--s5); margin-block: var(--s6);
}
.callout h3 { margin-bottom: var(--s3); }
.callout ul { margin-bottom: 0; }

/* Liens sur fond navy-soft (#E9EEF6) : la braise standard n'y tient que
   4,44:1, sous le seuil AA de 4,5:1 pour du texte courant. La braise foncée
   remonte à 6,3:1. Règle posée sur la SURFACE, pas sur une page : tout
   nouveau bloc navy-soft en hérite au lieu de rejouer le défaut. */
.callout a, .ratio__bloc--piege a { color: var(--color-primary-hover); }

/* Variante « ce qui a changé, et qui coûte cher si vous l'ignorez ». Réservée
   à un fait daté et sourcé — pas à de l'emphase. Le liseré ambre suffit :
   un aplat rouge sur une page de cabinet comptable ne rassure personne. */
.callout--alert {
  background: #FEF6EC; border-left-color: var(--color-warning);
}
.callout--alert h2 {
  font-size: var(--fs-h3); margin-bottom: var(--s3); color: var(--color-ink);
}
.callout--alert a { color: var(--color-primary-hover); }

/* Encadré « outil » : renvoi vers un calculateur, placé dans le premier tiers
   d'un pilier. Le lien est la seule action du bloc : cible tactile de 44 px
   pleine largeur au pouce, retour à la ligne autorisé à 375 px. */
.callout--outil p:last-child { margin-bottom: 0; }
.callout--outil .link-arrow {
  display: inline-block; min-height: 44px; padding-block: 10px;
  overflow-wrap: anywhere;
}

/* Encadré de fraîcheur réglementaire (« À jour au … » + sources). Sur des
   pages qui décrivent du droit mouvant, la date de vérification EST du
   contenu : elle se distingue du corps, elle se lit, et elle ne crie pas. */
.maj {
  margin: var(--s8) 0 0;
  padding: var(--s5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-navy);
  border-radius: var(--radius-md);
}
.maj__h { font-size: var(--fs-h3); margin: 0 0 var(--s3); }
.maj p { font-size: var(--fs-small); color: var(--color-text-muted); }
.maj__list { list-style: none; padding-left: 0; margin: 0; }
.maj__list li { margin-bottom: var(--s3); font-size: var(--fs-small); }
.maj__list li:last-child { margin-bottom: 0; }
.maj__list .src { margin-top: .15em; }

/* Exemple illustratif. Volontairement DISTINCT d'un témoignage : pas de
   guillemets, pas de portrait, pas d'encadré valorisant. L'étiquette est en
   tête de bloc et lisible — un scénario pédagogique qui ressemblerait à une
   référence client serait exactement le contraire de ce qu'on veut. */
.exemple {
  margin: var(--s6) 0 0;
  padding: var(--s5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.exemple__tag {
  display: inline-block; margin-bottom: var(--s3);
  padding: var(--s1) var(--s3);
  border-radius: var(--radius-sm);
  background: var(--color-navy-soft); color: var(--color-navy);
  font: 700 var(--fs-eyebrow)/1.4 var(--font-body);
  letter-spacing: .04em; text-transform: uppercase;
}
.exemple__titre { font-size: var(--fs-h3); margin-bottom: var(--s3); }
.exemple__situation { font-size: var(--fs-body-lg); }
.exemple h4 {
  font-size: 1rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted); margin: var(--s5) 0 var(--s2);
}
.exemple__voir { margin-top: var(--s5); margin-bottom: 0; }

.chantier {
  background: #FFF7ED; border: 1px solid var(--color-warning);
  border-left: 5px solid var(--color-warning);
  border-radius: var(--radius-sm);
  padding: var(--s4) var(--gutter);
  margin: 0; color: #7C2D12; font-size: var(--fs-small);
}
.chantier p { margin: 0; max-width: var(--wrap); margin-inline: auto; }

.ctaband {
  background: var(--color-navy); color: #E4EAF3;
  border-radius: var(--radius-lg); padding: var(--s6) var(--s5);
  margin-block: var(--s7); text-align: center;
}
.ctaband__title { color: #fff; font-size: var(--fs-h2); margin-bottom: var(--s2); }
.ctaband__sub { color: #B9C6DA; }
.section--navy .ctaband { background: transparent; padding: 0; margin: 0; }

.cross {
  border-top: 1px solid var(--color-border); padding-top: var(--s5);
  margin-top: var(--s7);
}
.cross__title { font-size: var(--fs-h3); }
.cross__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap;
               gap: var(--s3); }
.cross__list a {
  display: inline-block; padding: var(--s2) var(--s4);
  border: 1px solid var(--color-border); border-radius: 999px;
  background: var(--color-surface); text-decoration: none; font-weight: 600;
  min-height: 44px; line-height: 28px;
}
.cross__note { font-size: var(--fs-small); color: var(--color-text-muted); }

.articles { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.articles li {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--s4);
}
.tag {
  display: inline-block; margin-left: var(--s2); padding: 2px var(--s2);
  font-size: .75rem; font-weight: 600; border-radius: 999px;
  background: var(--color-navy-soft); color: var(--color-navy);
}
.tag--wip { background: #FFF7ED; color: #7C2D12; }

.person { display: grid; gap: var(--s3); }
.person__photo-slot {
  display: grid; place-items: center; min-height: 160px;
  border: 2px dashed var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* Placeholders — délibérément visibles */
.ph {
  display: inline-block; padding: 1px var(--s2);
  font-size: .8125rem; font-weight: 600; font-family: var(--font-body);
  background: #FEF9C3; color: #713F12;
  border: 1px dashed #A16207; border-radius: 4px;
}
.ph--blocking { background: #FEE2E2; color: #7F1D1D; border-color: #B91C1C; }

/* Date JJ-MM-AAAA insécable (QA-007) : sans ceci, « 01-03-2026 » se coupe au
   tiret à 320 px. `.nd` est posé par build.py sur chaque date du texte. */
time, .nd { white-space: nowrap; }

.verif {
  display: inline-block; margin-left: var(--s2); padding: 1px var(--s2);
  font-size: .75rem; font-weight: 600; border-radius: 4px;
}
.verif--ok   { background: #DCFCE7; color: #14532D; }
.verif--todo { background: #FEF9C3; color: #713F12; }
.verif--stop { background: #FEE2E2; color: #7F1D1D; }

/* ---------- 11. PROSE ---------------------------------------------------- */
.prose { max-width: 74ch; }
/* Une URL brute (lien de source) n'a aucun point de coupure : sans ceci elle
   déborde à 320 px (QA-004, 2026-09-30). `break-word` ne touche pas au
   dimensionnement min-content des grilles, contrairement à `anywhere`. */
main { overflow-wrap: break-word; }
.prose h2 { margin-top: var(--s8); }
.prose h3 { margin-top: var(--s6); }
.prose > *:first-child { margin-top: 0; }
.prose--legal { max-width: 78ch; }

.list-arrow, .list-num, .list-plain { padding-left: 0; }
.list-arrow { list-style: none; }
.list-arrow li { position: relative; padding-left: 1.5em; margin-bottom: var(--s2); }
.list-arrow li::before {
  content: "→"; position: absolute; left: 0; color: var(--color-primary);
  font-weight: 700;
}
.list-num { padding-left: 1.3em; }
.list-num li { margin-bottom: var(--s3); }
.list-plain { list-style: none; }
.list-plain li { margin-bottom: var(--s2); }

.table-scroll { overflow-x: auto; margin-bottom: var(--s5);
                border: 1px solid var(--color-border); border-radius: var(--radius-md); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-small);
        font-variant-numeric: tabular-nums; margin: 0; }
caption { text-align: left; padding: var(--s3) var(--s4); font-weight: 600;
          color: var(--color-ink); }
th, td { padding: var(--s3) var(--s4); text-align: left;
         border-top: 1px solid var(--color-border); vertical-align: top; }
th { background: var(--color-bg-alt); color: var(--color-ink); font-weight: 600; }
/* Tableau empilé (.table-stack) : sous 560 px, chaque ligne devient une fiche
   « libellé : valeur » (libellé = data-label de la cellule). Un tableau de 3-4
   colonnes de texte ne se lit pas en défilement horizontal à 320 px. */
@media (max-width: 559px) {
  .table-stack thead { position: absolute; width: 1px; height: 1px;
                       overflow: hidden; clip: rect(0 0 0 0); }
  .table-stack tr { display: block; border-top: 1px solid var(--color-border);
                    padding: var(--s2) 0; }
  .table-stack td { display: block; border: 0; padding: var(--s1) var(--s4); }
  .table-stack td[data-label]::before { content: attr(data-label) " : ";
                                        font-weight: 600; color: var(--color-ink); }
  .table-stack td:first-child { font-weight: 600; color: var(--color-ink); }
  .table-stack td:first-child::before { content: none; }
}

/* ---------- 12. FAQ ------------------------------------------------------ */
.faq__item { border-bottom: 1px solid var(--color-border); }
.faq__q { margin: 0; font-size: inherit; }
.faq__btn {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  width: 100%; min-height: 56px; padding: var(--s3) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: 600 var(--fs-h4)/1.35 var(--font-heading); color: var(--color-ink);
}
.faq__chev { width: 20px; height: 20px; flex: 0 0 auto;
             transition: transform var(--dur) ease-out; }
.faq__btn[aria-expanded="true"] .faq__chev { transform: rotate(180deg); }
.faq__a { padding-bottom: var(--s4); max-width: 72ch; }
.faq__more { font-size: var(--fs-small); margin-bottom: 0; }

/* ---------- 13. FORMULAIRE ----------------------------------------------- */
.formwrap { max-width: 640px; }

.progress { margin-bottom: var(--s5); }
.progress__text { font-size: var(--fs-small); font-weight: 600;
                  color: var(--color-text-muted); margin-bottom: var(--s2); }
.progress__bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s1); }
.progress__bar span { height: 6px; border-radius: 3px; background: var(--color-border); }
.progress__bar span.is-done { background: var(--color-primary); }

.step { border: 0; margin: 0 0 var(--s5); padding: 0; min-width: 0; }
.step__title { font: 700 var(--fs-h2)/1.2 var(--font-heading);
               color: var(--color-ink); padding: 0; margin-bottom: var(--s2); }
.step__help  { font-size: var(--fs-small); color: var(--color-text-muted);
               margin-bottom: var(--s4); }
/* Réassurance de délai, au pied du formulaire entier (et non d'une étape) :
   visible dès l'ouverture, pas seulement une fois la dernière étape atteinte. */
.hcform__foot { font-size: var(--fs-small); color: var(--color-text-muted);
                margin: var(--s4) 0 0; padding-top: var(--s3);
                border-top: 1px solid var(--color-border); }

.q { border: 0; margin: 0 0 var(--s5); padding: 0; min-width: 0; }
.q__legend { font: 600 var(--fs-label)/1.4 var(--font-body);
             color: var(--color-ink); padding: 0; margin-bottom: var(--s3); }
/* CONV-S1 — repère « 2/5 » au-dessus de chaque question du step 3 (posé en JS,
   aria-hidden). Vide = question masquée : il ne prend aucune place. */
.q__count { display: block; font-size: var(--fs-small); font-weight: 700;
            color: var(--color-text-muted); margin-bottom: var(--s1); }
.q__count:empty { display: none; }

.choices { display: grid; gap: var(--s2); }
.choice { position: relative; }
.choice__input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.choice__label {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 60px; padding: var(--s3) var(--s4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color var(--dur), background var(--dur);
}
.choice__label:hover { border-color: var(--color-primary); }
.choice__text  { font-weight: 600; color: var(--color-ink); }
.choice__micro { display: block; font-size: var(--fs-small); font-weight: 400;
                 color: var(--color-text-muted); }
.choice__tick  { margin-left: auto; opacity: 0; color: var(--color-primary); }
/* La coche est un <svg> sans classe .icon : sans taille explicite, il prenait
   sa taille par défaut (300×150) et chaque carte mesurait ~185 px de haut sur
   mobile au lieu de 60 (constaté en ligne le 2026-09-30, CONV-S1). */
.choice__check { display: block; width: 20px; height: 20px; }
.choice__input:checked + .choice__label {
  border-color: var(--color-primary); border-width: 2px;
  background: var(--color-primary-soft);
}
.choice__input:checked + .choice__label .choice__tick { opacity: 1; }
.choice__input:focus-visible + .choice__label {
  outline: 3px solid var(--color-focus); outline-offset: 2px;
}
@media (min-width: 560px) {
  .choices[data-step-group="3"] { grid-template-columns: 1fr 1fr; }
}

.substep {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px dashed var(--color-border);
}
.substep fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.substep__legend { font: 600 var(--fs-label)/1.4 var(--font-body);
                   color: var(--color-ink); margin-bottom: var(--s3); padding: 0; }

.field { margin-bottom: var(--s4); }
.field label { display: block; font: 600 var(--fs-label)/1.4 var(--font-body);
               color: var(--color-ink); margin-bottom: 6px; }
.field input[type=text], .field input[type=email], .field input[type=tel],
.field select {
  width: 100%; min-height: 52px; padding: 0 14px;
  font-size: 16px; font-family: var(--font-body); color: var(--color-ink);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-sm);
}
.field input:focus, .field select:focus {
  border-color: var(--color-primary); border-width: 2px; outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus) 35%, transparent);
}
.field__help  { font-size: var(--fs-small); color: var(--color-text-muted);
                margin: 6px 0 0; }
.field__error { display: flex; gap: var(--s2); align-items: center;
                font-size: var(--fs-small); color: var(--color-error);
                font-weight: 600; margin: 6px 0 0; }
.field.is-error input { border-color: var(--color-error); }
/* CONV-S1 — échec d'envoi, au-dessus du bouton (et non sous un champ). */
.hcform__error { font-size: var(--fs-small); font-weight: 600; color: var(--color-error);
                 background: color-mix(in srgb, var(--color-error) 6%, var(--color-surface));
                 border: 1px solid var(--color-error);
                 border-radius: var(--radius-sm); padding: var(--s3);
                 margin: var(--s4) 0 var(--s3); }
.hcform__error[hidden] { display: none; }

.field--check { display: flex; gap: var(--s3); align-items: flex-start;
                flex-wrap: wrap; }
.field--check input { width: 24px; height: 24px; margin-top: 2px; flex: 0 0 auto;
                      accent-color: var(--color-primary); }
.field--check label { font-weight: 400; font-size: var(--fs-small); flex: 1;
                      margin: 0; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.stepnav { display: flex; gap: var(--s3); align-items: center;
           margin-top: var(--s5); }
.stepnav [data-form-next] { margin-left: auto; }

.hcform__done {
  background: var(--color-primary-soft); border: 1px solid var(--color-primary);
  border-radius: var(--radius-md); padding: var(--s5);
}
.turnstile-slot:empty { display: none; }

/* Progressive enhancement : sans JS toutes les étapes sont visibles */
.js .hcform .step[data-step]:not(.is-active) { display: none; }
.js .hcform .q[hidden] { display: none; }

/* ---------- 14. OVERLAY -------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(28,25,23,.55);
  display: grid; place-items: end center;
}
.overlay[hidden] { display: none; }
.overlay__panel {
  display: flex; flex-direction: column;
  width: 100%; max-width: 640px; max-height: 96dvh;
  background: var(--color-bg);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-raised);
}
.overlay__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--color-border);
}
.overlay__title { margin: 0; font: 600 var(--fs-h4)/1.3 var(--font-heading);
                  color: var(--color-ink); }
.overlay__close {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--color-ink);
}
.overlay__body { overflow-y: auto; padding: var(--s5);
                 padding-bottom: max(var(--s5), env(safe-area-inset-bottom)); }
@media (min-width: 768px) {
  .overlay { place-items: center; }
  .overlay__panel { border-radius: var(--radius-lg); max-height: 90dvh; }
}

/* ---------- 15. STICKY CTA MOBILE ---------------------------------------- */
.sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: var(--s3) var(--gutter);
  padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--color-bg) 95%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-raised);
}
.sticky[hidden] { display: none; }
@media (min-width: 768px) { .sticky { display: none !important; } }

/* ---------- 16. BANDEAU CONSENTEMENT (zéro CLS) -------------------------- */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--color-ink); color: #F5F0EA;
  padding: var(--s4) var(--gutter);
  padding-bottom: calc(var(--s4) + env(safe-area-inset-bottom));
}
.consent[hidden] { display: none; }
/* M-167 (14-10-2026) : formulaire ouvert = le bandeau s'efface (il masquait
   « Continuer » et l'envoi sur mobile). Rien n'est chargé sans choix (refus
   par défaut) ; le bandeau revient à la fermeture du formulaire. */
body.form-open .consent { display: none; }
.consent__in {
  max-width: var(--wrap); margin-inline: auto;
  display: grid; gap: var(--s3);
}
.consent__text { margin: 0; font-size: var(--fs-small); }
.consent__text a { color: #FFD9C2; }
.consent__actions { display: flex; gap: var(--s3); }
.consent__actions .btn { flex: 1; }
.consent .btn--secondary { color: #F5F0EA; box-shadow: inset 0 0 0 1.5px #F5F0EA; }
.consent .btn--secondary:hover { background: #F5F0EA; color: var(--color-ink); }
.consent__more { font-size: var(--fs-small); }
.consent__more summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  text-decoration: underline; color: #FFD9C2;
}
.consent__more summary:focus-visible { outline: 2px solid #FFD9C2; outline-offset: 2px; }
.consent__opts { display: grid; gap: var(--s3); padding-top: var(--s2); }
.consent__opt { display: flex; gap: var(--s2); align-items: flex-start; }
.consent__opt input { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 1px; }
@media (min-width: 768px) {
  .consent__in { grid-template-columns: 1fr auto; align-items: center; }
  .consent__more { grid-column: 1 / -1; grid-row: 2; }
  .consent__actions .btn { flex: 0 0 auto; }
  .consent__opts { justify-items: start; }
}

/* ---------- 17. OUTIL ---------------------------------------------------- */
.tool {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--s5); margin-bottom: var(--s6);
}
.tool__form { display: grid; gap: var(--s4); max-width: 420px; }
/* Les outils à plusieurs composantes ne tiennent pas dans 420 px sur grand
   écran sans devenir une colonne interminable. La contrainte mobile, elle,
   reste la même : une seule colonne sous 640 px, saisissable au pouce. */
.tool__form--wide { max-width: 620px; }
.tool__result:not(:empty) {
  display: block; margin-top: var(--s5); padding: var(--s4);
  background: var(--color-primary-soft); border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums;
}
.tool__rows {
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: var(--s4); margin: 0; display: grid; gap: var(--s4);
}
.tool__rows legend {
  font-family: var(--font-heading); font-weight: 600; padding-inline: var(--s2);
}
.tvrow {
  display: grid; gap: var(--s3);
  padding-bottom: var(--s4); border-bottom: 1px dashed var(--color-border);
}
.tvrow:last-of-type { border-bottom: 0; padding-bottom: 0; }
.tvrow .field { margin: 0; }
.btn--tiny {
  min-height: 44px; padding: 0 var(--s4);
  font-size: var(--fs-small); justify-self: start;
}
/* Résultat tabulaire : sur 375 px la table déborde, elle scrolle donc dans son
   propre conteneur — jamais le document (règle du site). */
.tool__result table { width: 100%; border-collapse: collapse; margin-top: var(--s3); }
.tool__result th, .tool__result td {
  padding: var(--s2) var(--s3); text-align: right; font-size: var(--fs-small);
  border-bottom: 1px solid rgba(28,25,23,.12);
}
.tool__result th:first-child, .tool__result td:first-child { text-align: left; }
.tool__result tfoot td, .tool__result tfoot th { font-weight: 700; border-bottom: 0; }
.tool__result .tool__note { font-size: var(--fs-small); color: var(--color-text-muted); }
.tool__result .btn { margin-top: var(--s4); }
@media (min-width: 640px) {
  .tvrow {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.4fr);
    align-items: start; gap: var(--s4);
  }
}

/* ---------- 18. PIED DE PAGE --------------------------------------------- */
.site-foot {
  background: var(--color-navy); color: #C6D2E4;
  padding-block: var(--s7) var(--s5); margin-top: var(--s8);
}
.site-foot__grid { display: grid; gap: var(--s6); }
.site-foot h2 { font-size: var(--fs-h4); color: #fff; margin-bottom: var(--s3); }
.site-foot ul { list-style: none; padding: 0; }
.site-foot li { margin-bottom: var(--s2); }
.site-foot a { color: #C6D2E4; text-decoration: none; }
.site-foot a:hover { color: #fff; text-decoration: underline; }
.site-foot__linkbtn { display: inline-flex; align-items: center; min-height: 44px;
  padding: 0; border: 0; background: none; font: inherit; color: #C6D2E4;
  cursor: pointer; text-align: left; }
.site-foot__linkbtn:hover { color: #fff; text-decoration: underline; }
.site-foot__baseline { color: #fff; font-family: var(--font-heading);
                       font-weight: 600; margin-block: var(--s3); }
.nap { font-size: var(--fs-small); line-height: 1.9; }
.site-foot__note, .site-foot__legal {
  font-size: var(--fs-small); color: #93A3BC;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: var(--s4); margin-top: var(--s5);
}
.site-foot__legal { border: 0; padding-top: 0; margin-top: var(--s3); }
@media (min-width: 768px) {
  .site-foot__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; }
}

/* ---------- 19. MOUVEMENT RÉDUIT ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .btn:hover { transform: none; }
  .segment:hover { transform: none; }
}

/* ---------- 20. LEAD MAGNET (bloc d'accueil) ----------------------------- */
.magnet { display: grid; gap: var(--s5); }
.magnet__texte p { margin-bottom: 0; }
.magnet-form { display: grid; gap: var(--s4); margin: 0; }
.magnet-form .field { margin: 0; }
.magnet-form .btn { width: 100%; }
.magnet-form .note { margin: 0; }
.magnet-form__done {
  background: var(--color-primary-soft); border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm); padding: var(--s4); margin: 0;
  font-weight: 600; color: var(--color-ink);
}
@media (min-width: 768px) {
  .magnet { grid-template-columns: 1.15fr 1fr; align-items: start; gap: var(--s7); }
  .magnet-form .btn { width: auto; }
}

/* ---------- 21. GUIDE (lead magnet — écran et papier) -------------------- */
.page-guide .guide { max-width: 76ch; margin: 0 auto; padding: var(--s6) var(--s4) 0; }
.guide__head { margin-bottom: var(--s8); }
.guide__head h1 { margin-block: var(--s2) var(--s4); }
.guide__actions { margin-top: var(--s5); }
/* Un bouton qui ne peut rien faire ne doit pas s'afficher. */
.no-js .guide__actions { display: none; }

.guide__regles { margin-bottom: var(--s8); }
.guide__regles ol { margin-top: var(--s4); }

.ratio {
  border-top: 3px solid var(--color-border);
  padding-top: var(--s6); margin-bottom: var(--s8);
  /* Ne jamais couper un ratio en deux à l'impression. */
  break-inside: avoid;
}
.ratio h2 { display: flex; align-items: baseline; gap: var(--s3); }
.ratio__num {
  flex: 0 0 auto; color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.ratio__def { font-size: var(--fs-body-lg); color: var(--color-ink); }

.ratio__formule {
  background: var(--color-navy); color: #fff;
  border-radius: var(--radius-md); padding: var(--s4) var(--s5);
  margin-block: var(--s5);
  /* Une formule longue doit défiler, pas déborder de la page sur 360 px. */
  overflow-x: auto;
}
.ratio__formule p { margin: 0; font-weight: 600; }
.ratio__k {
  display: block; font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: #A8BBD8; margin-bottom: var(--s2);
}

.ratio__bloc { margin-bottom: var(--s5); }
.ratio__bloc h3 { margin-bottom: var(--s2); }
.ratio__bloc p:last-child { margin-bottom: 0; }
.ratio__bloc--ordre  { border-left: 4px solid var(--color-border);
                       padding-left: var(--s4); }
.ratio__bloc--alerte { background: #FFF7ED; border-left: 4px solid var(--color-warning);
                       border-radius: var(--radius-sm); padding: var(--s4); }
.ratio__bloc--piege  { background: var(--color-navy-soft);
                       border-left: 4px solid var(--color-navy);
                       border-radius: var(--radius-sm); padding: var(--s4); }

.guide__recap { margin-bottom: var(--s8); break-inside: avoid; }
.guide__recap table { font-size: var(--fs-small); }
.guide__limites { margin-bottom: var(--s8); }
.guide__cta { border-radius: var(--radius-lg); padding: var(--s6) 0; }

/* ---------- 22. IMPRESSION ----------------------------------------------
   Le guide doit sortir correctement sur papier ET en « Enregistrer en PDF » :
   c'est la version téléchargeable tant qu'aucun PDF n'est servi.
   ------------------------------------------------------------------------- */
@media print {
  /* Tout ce qui ne sert qu'à l'écran ou à la conversion disparaît. */
  .site-head, .site-foot, .sticky, .consent, .crumbs, .stagingbar,
  .guide__actions, .guide__cta, .ctaband, .overlay { display: none !important; }

  html, body { background: #fff; color: #000; font-size: 11pt; }
  .page-guide .guide { max-width: none; padding: 0; }
  main { padding: 0; }

  h1 { font-size: 22pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 11.5pt; }
  h1, h2, h3 { break-after: avoid; }
  p, li { orphans: 3; widows: 3; }

  /* Aplats sombres : coûteux en encre et illisibles sur beaucoup
     d'imprimantes — on les repasse en encadré clair. */
  .ratio__formule { background: #fff; color: #000;
                    border: 1.5pt solid #000; padding: 6pt 8pt; }
  .ratio__k { color: #000; }
  .ratio__bloc--alerte, .ratio__bloc--piege, .ratio__bloc--ordre {
    background: #fff; border-left: 2pt solid #666; border-radius: 0; padding: 0 0 0 8pt;
  }
  .ratio { border-top: 1pt solid #000; }
  .table-scroll { overflow: visible; border: 0; }
  th { background: #fff; border-bottom: 1pt solid #000; }
  .chalk { background: none; }

  /* L'adresse d'un lien interne n'a aucun sens sur papier ; celle d'un lien
     externe, si. */
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ---------- 23. GROUPES DE CARTES EN ERREUR ------------------------------ */
/* Un groupe de radios n'a pas de bordure à colorer comme un champ texte :
   on marque la légende et on réserve la place du message. */
[data-group].is-error > .q__legend,
[data-group].is-error > .substep__legend { color: var(--color-error); }
[data-group].is-error .choice { border-color: var(--color-error); }
.field__opt { font-weight: 400; color: var(--color-text-muted); }

/* ---------- 24. ARTICLES ------------------------------------------------- */
/* « En bref » : le bloc que les moteurs génératifs extraient. Il doit se lire
   comme une réponse posée d'emblée, pas comme un sommaire — d'où le liseré
   braise et la position en tête de corps, avant le premier H2. */
.enbref {
  background: var(--color-primary-soft);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm);
  padding: var(--s5); margin-block: 0 var(--s7);
}
.enbref__h { font-size: var(--fs-h3); margin-bottom: var(--s3); }
.enbref ul { margin-bottom: 0; }
.enbref li { margin-bottom: var(--s2); }
.enbref a { color: var(--color-primary-hover); }

/* Signature de l'article. Ne s'affiche QUE si un signataire est réellement
   renseigné par le cabinet : sur une profession réglementée, une signature
   vide vaut mieux qu'une signature approximative. */
.byline {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  align-items: baseline;
  font-size: var(--fs-small); color: var(--color-text-muted);
  padding-block: var(--s3); border-block: 1px solid var(--color-border);
}
.byline__who { font-weight: 600; color: var(--color-ink); }

/* Avertissement de fin d'article. Discret mais présent sur tout contenu
   fiscal ou social : ce site informe, il ne conseille pas à distance. */
.disclaimer {
  font-size: var(--fs-small); color: var(--color-text-muted);
  border-top: 1px solid var(--color-border); padding-top: var(--s4);
  max-width: 74ch;
}

/* ---------- 25. DOSSIER DE RELECTURE (jamais publié) --------------------- */
/* Chrome interne du build `--drafts`. Volontairement voyant : un relecteur
   doit voir au premier coup d'œil qu'il lit un document de travail, et un
   lecteur qui recevrait ce fichier par erreur doit le comprendre aussi. */
.relecture {
  background: #FEF6EC; border: 2px dashed var(--color-warning);
  border-radius: var(--radius-md); padding: var(--s5); margin-bottom: var(--s6);
}
.relecture__tag {
  display: inline-block; margin: 0 0 var(--s3);
  padding: 2px var(--s3); border-radius: 999px;
  background: var(--color-warning); color: #fff;
  font-size: .75rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase;
}
.relecture__h { font-size: var(--fs-h3); margin: var(--s5) 0 var(--s3); }
.relecture__sig, .relecture__meta {
  font-size: var(--fs-small); color: var(--color-text-muted);
}
.relecture code { font-size: .85em; }

/* ---------- CONV-S2 — RÉASSURANCE FACTUELLE ------------------------------ */
/* Bandeau de confiance : une ligne, données réelles uniquement (build.py
   trust_strip). Séparateur posé en CSS : il suit les éléments masqués. */
.trust { font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-muted);
         margin: 0 0 var(--s4); }
.trust__item + .trust__item::before { content: " · "; }
.trust--overlay { margin: 2px 0 0; }
.overlay__heading { min-width: 0; }
/* Sous 400 px, l'overlay ne garde que le titre ITAA et le délai : les 9 cartes
   du step 1 doivent commencer au-dessus de la ligne de flottaison (320×568). */
@media (max-width: 399.98px) {
  .trust--overlay .trust__more { display: none; }
}

/* /commencer/ : formulaire ≈ 60 %, aside ≈ 40 % à partir de 960 px ;
   en dessous, l'aside passe SOUS le formulaire (ordre du HTML). */
.commencer { display: grid; gap: var(--s6); }
.avant { display: grid; gap: var(--s5); align-content: start;
         background: var(--color-surface); border: 1px solid var(--color-border);
         border-radius: var(--radius-lg); padding: var(--s5); }
.avant__titre { font: 600 var(--fs-h4)/1.3 var(--font-heading); color: var(--color-ink);
                margin: 0 0 var(--s2); }
.avant__bloc p, .avant__bloc li { font-size: var(--fs-small); }
.avant__bloc > :last-child { margin-bottom: 0; }
.avant__tarifs { list-style: none; padding: 0; margin: 0 0 var(--s2); }
.avant__tarifs li { display: flex; flex-wrap: wrap; justify-content: space-between;
                    gap: 0 var(--s3); padding: var(--s2) 0;
                    border-bottom: 1px solid var(--color-border); }
.avant__tarifs strong { color: var(--color-ink); white-space: nowrap; }
@media (min-width: 960px) {
  .commencer { grid-template-columns: 3fr 2fr; align-items: start; gap: var(--s7); }
  .avant { position: sticky; top: 1.5rem; }
}
.hcform__privacy { margin: 0 0 var(--s3); }

/* ---------- CONV-S3 — PREUVE + PRIX (pages métier), CTA D'ARTICLE -------- */
/* Sous l'amorce, dans .hero__aside : sur mobile il suit donc l'amorce et ne
   s'intercale jamais entre le H1 et les boutons du hero. */
.heroproof { margin-top: var(--s4); font-size: var(--fs-small); line-height: 1.5;
             color: var(--color-text-muted); }
.heroproof .trust { margin: 0 0 var(--s2); }
.heroproof__prix { margin: 0; color: var(--color-text); }
.heroproof__prix strong { color: var(--color-ink); white-space: nowrap; }

.ctabox {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary); border-radius: var(--radius-md);
  padding: var(--s5); margin-block: var(--s6); box-shadow: var(--shadow-card);
}
.ctabox__title { font: 700 var(--fs-h3)/1.3 var(--font-heading); color: var(--color-ink);
                 margin: 0 0 var(--s2); }
.ctabox__sub { font-size: var(--fs-small); color: var(--color-text-muted);
               margin: 0 0 var(--s4); }
.ctabox__actions { margin: 0; }
.prose .ctabox__actions a.btn { text-decoration: none; }
@media (max-width: 479.98px) { .ctabox__actions .btn { display: flex; width: 100%; } }
.ctabox .btn { line-height: 1.25; padding-block: var(--s2); text-align: center; }