/* ============================================================================
   REKOV — style.css
   ----------------------------------------------------------------------------
   Système visuel dérivé de `socle-identite-rekov.md`, sans écart :
     · 6 tons cœur + 4 utilitaires. Aucune autre couleur, aucun dégradé,
       aucune ombre (les seules rgba() sont l'encre ou le blanc chaud avec
       alpha — pas de teinte nouvelle introduite).
     · Mono-famille Manrope 400 / 500 / 800. Aucune seconde famille en V1.
     · Angles vifs : rayon 0 partout, 2 px maximum (jamais atteint ici).
     · La structure vient des FILETS (2 px encre/accent pour ouvrir,
       1 px hairline pour séparer) — aucun cadre, aucune carte à ombre.
     · font-variant-numeric: tabular-nums sur l'ensemble du document.

   Sommaire
     0.  Tokens
     1.  Reset & base
     2.  Utilitaires typographiques (marqueur, titres, filets)
     3.  Boutons
     4.  Header & navigations
     5.  Hero — le zéro tracé, la barre de faits
     6.  Odomètre (chiffres à rouleaux)
     7.  01 · Simulateur
     8.  02 · Le problème
     9.  03 · La méthode (filet scrubbé)
     10. 04 · Différenciation (tableau)
     11. 05 · FAQ
     12. 06 · Contact & formulaire
     13. Footer
     14. Pages secondaires (mentions légales / confidentialité)
     15. Révélations, responsive, motion réduit
   ============================================================================ */

/* ------------------------------------------------------------------ *
 * 0. TOKENS
 * ------------------------------------------------------------------ */
:root {
  /* --- Palette verrouillée --- */
  --ink:        #12100E;   /* Encre */
  --sig:        #C2410C;   /* Signature — terre brûlée · FOND CLAIR uniquement */
  --sig-d:      #9A3412;   /* Signature foncée — hover / pressé */
  --terre:      #F0906B;   /* Terre claire · FOND SOMBRE uniquement */
  --gris:       #5C554E;   /* Texte secondaire sur fond clair */
  --gris-inv:   #A8A29B;   /* Texte secondaire sur fond sombre */
  --hair:       #E6E2DD;   /* Hairline claire — 1 px */
  --hair-d:     #35302B;   /* Hairline sombre — 1 px */
  --clair-2:    #F6F4F1;   /* Ton clair 2 — fonds de section */
  --blanc:      #FBFAF9;   /* Blanc chaud */

  /* --- Type --- */
  --f: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Échelle issue du socle §3. Les graisses, l'interlettrage et l'interligne
     sont repris à l'identique ; les tailles sont fluides entre l'ancrage
     mobile et la borne haute de la bande verrouillée. Seul le titre de héro
     dépasse la bande (voir note de livraison). */
  --t-hero:    clamp(2rem, 3.6vw, 2.85rem);        /* 800 · −0.035em · 1.15 */
  --t-page:    clamp(1.75rem, 3.1vw, 2.5rem);      /* 800 · −0.035em · 1.15 */
  --t-sect:    clamp(1.2rem, 1.9vw, 1.45rem);      /* 800 · −0.025em · 1.25 */
  --t-body:    clamp(0.94rem, 0.9rem + 0.18vw, 1rem);
  --t-label:   clamp(0.56rem, 0.54rem + 0.1vw, 0.625rem);
  --t-num:     clamp(1.75rem, 3.9vw, 3.25rem);     /* 800 · −0.045em · 0.9 */

  /* --- Layout --- */
  --wrap: 1180px;
  --pad-x: clamp(1.25rem, 4vw, 3.25rem);
  --gut: clamp(1.5rem, 3vw, 2.75rem);

  /* --- Motion : une seule famille de courbes --- */
  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 0.18s;
  --t-med:  0.42s;

  /* --- Contexte chromatique par défaut : registre sombre dominant --- */
  --bg:     var(--ink);
  --fg:     var(--blanc);
  --fg-2:   var(--gris-inv);
  --accent: var(--terre);
  --rule:   var(--hair-d);
  --on-accent: var(--ink);
}

/* Inversion de contexte : chaque section clair·e redéfinit les 6 variables,
   ce qui garantit structurellement la règle « terre brûlée sur fond clair,
   terre claire sur fond sombre » — impossible de se tromper d'accent. */
.sect--light,
.sect--light-2 {
  --bg:     var(--blanc);
  --fg:     var(--ink);
  --fg-2:   var(--gris);
  --accent: var(--sig);
  --rule:   var(--hair);
  --on-accent: var(--blanc);
}
.sect--light-2 { --bg: var(--clair-2); }


/* ------------------------------------------------------------------ *
 * 1. RESET & BASE
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--f);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.65;
  background: var(--ink);
  color: var(--blanc);
  /* Chiffres tabulaires partout — socle §3, non négociable. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }
::selection { background: var(--sig); color: var(--blanc); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; top: 0; left: 0; z-index: 999;
  transform: translateY(-120%);
  background: var(--sig); color: var(--blanc);
  padding: 0.75rem 1.25rem;
  font-weight: 500; font-size: 0.85rem; letter-spacing: 0.04em;
  transition: transform var(--t-fast) var(--ease);
}
.skip:focus { transform: translateY(0); }

.wrap {
  width: 100%; max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad-x);
  position: relative;
}

.sect {
  background: var(--bg);
  color: var(--fg);
  padding-block: clamp(4.5rem, 9vw, 8rem);
  position: relative;
}
/* Le passage d'un registre à l'autre se lit par un filet, jamais par une
   ombre ou un arrondi. */
.sect + .sect { border-top: 1px solid var(--rule); }


/* ------------------------------------------------------------------ *
 * 2. UTILITAIRES TYPOGRAPHIQUES
 * ------------------------------------------------------------------ */

/* Marqueur de section : le filet 2 px qui ouvre, l'index à deux chiffres
   (le zéro comme marqueur, socle §6) puis l'étiquette. */
.marker {
  display: flex; align-items: baseline; gap: 0.9rem;
  padding-top: 0.85rem;
  position: relative;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.marker::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--fg);
  transform: scaleX(0); transform-origin: 0 50%;
  /* Pseudo-élément : hors de portée de GSAP. Le tracé se joue en CSS,
     déclenché par la classe .is-drawn posée au ScrollTrigger. */
  transition: transform 0.9s var(--ease-io);
}
.js .marker::before { transform: scaleX(0); }
.no-js .marker::before, .marker.is-drawn::before { transform: scaleX(1); }

.marker__idx {
  font-weight: 800; font-size: 0.8rem; letter-spacing: -0.02em;
  color: var(--accent); line-height: 1;
}
.marker__label {
  font-weight: 500; font-size: var(--t-label);
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1;
  color: var(--fg-2);
}

.eyebrow {
  display: inline-block;
  font-weight: 500; font-size: var(--t-label);
  letter-spacing: 0.2em; text-transform: uppercase; line-height: 1;
  color: var(--accent);
}

h1, h2, h3, h4 { font-weight: 800; }

.t-hero {
  font-size: var(--t-hero);
  letter-spacing: -0.035em;
  line-height: 1.15;
  max-width: 21ch;
}
.t-page {
  font-size: var(--t-page);
  letter-spacing: -0.035em;
  line-height: 1.15;
  max-width: 22ch;
}
.t-sect {
  font-size: var(--t-sect);
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.lead {
  font-size: clamp(0.98rem, 0.94rem + 0.25vw, 1.125rem);
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 56ch;
}
.small { font-size: 0.8125rem; line-height: 1.55; color: var(--fg-2); }
.accent { color: var(--accent); }
strong { font-weight: 800; color: var(--fg); }

/* Masque de révélation par ligne (voir initLineReveal) */
.line-mask { display: block; overflow: hidden; }
.line-mask > span { display: block; }

/* Filet de survol piloté par le point d'entrée du pointeur (--ox). */
.filet-row { position: relative; }
.filet-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: var(--ox, 0%) 50%;
  transition: transform 0.55s var(--ease);
}
.filet-row:hover::after,
.filet-row:focus-within::after { transform: scaleX(1); }


/* --- Le bloc-phrase de positionnement (socle §5) ---------------------
   « Deux lignes, la seconde en 800, précédées d'un filet court en couleur
   signature. » Reproduit littéralement : c'est un dispositif, pas une mise
   en page libre. */
.claim { position: relative; padding-top: 1.4rem; }
.claim::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 52px; height: 2px; background: var(--accent);
}
.claim span { display: block; }
.claim__a { font-weight: 500; color: var(--fg-2); }
.claim__b { font-weight: 800; color: var(--fg); }


/* ------------------------------------------------------------------ *
 * 3. BOUTONS
 * ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 0.75em;
  padding: 1.05rem 1.7rem;
  font-weight: 800; font-size: 0.9375rem; letter-spacing: -0.01em;
  border-radius: 0;
  position: relative; white-space: nowrap;
  transition: background var(--t-med) var(--ease), color var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.btn--sm { padding: 0.7rem 1.15rem; font-size: 0.8125rem; }
.btn--full { width: 100%; justify-content: center; }
/* Seul bouton en pleine largeur du site (le CTA du formulaire de contact) :
   sous ~330px de large, "Obtenir mon diagnostic gratuit" ne tient plus sur
   une ligne (293px de min-content) dans la carte du formulaire. Les autres
   CTA restent white-space: nowrap (règle .btn plus haut) — celui-ci seul
   peut passer sur deux lignes, l'icône 0€ et la flèche restant fixes de
   part et d'autre. */
.btn--full > span:not([class]) {
  white-space: normal; min-width: 0; flex: 1 1 auto; text-align: center;
}

/* Primaire : la terre brûlée en APLAT désigne l'action — usage conforme
   (le ton clair reste réservé au texte sur fond sombre). */
.btn--primary { background: var(--sig); color: var(--blanc); }
.btn--primary:hover { background: var(--sig-d); }

.btn--line {
  border: 1px solid var(--rule);
  color: var(--fg);
  background: transparent;
}
.btn--line:hover { border-color: var(--accent); color: var(--accent); }

.btn__arrow {
  display: inline-block;
  transition: transform var(--t-med) var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(5px); }


/* ------------------------------------------------------------------ *
 * 4. HEADER & NAVIGATION
 * ------------------------------------------------------------------ */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 200;
  padding-block: 1.15rem;
  border-bottom: 1px solid transparent;
  transition: background 0.4s var(--ease), padding 0.4s var(--ease),
              border-color 0.4s var(--ease);
}
.header.is-scrolled {
  /* Encre à 88 % — la même teinte, pas une nouvelle. */
  background: rgba(18, 16, 14, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--hair-d);
  padding-block: 0.75rem;
}
.header__in { display: flex; align-items: center; gap: 1.5rem; }

.brand { display: inline-flex; flex-shrink: 0; }
.brand svg { width: clamp(88px, 9vw, 108px); height: auto; }
/* Le zéro du logotype réagit au survol : c'est le détail qui porte la marque. */
.brand .lg-zero { transition: fill var(--t-med) var(--ease); }
.brand:hover .lg-zero { fill: var(--sig); }

.nav { margin-left: auto; display: flex; align-items: center; gap: clamp(1.1rem, 2vw, 2rem); }
.nav__link {
  font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.02em;
  color: var(--gris-inv); position: relative; padding-block: 0.35rem;
  transition: color var(--t-med) var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--terre); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-med) var(--ease);
}
.nav__link:hover { color: var(--blanc); }
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--blanc); }

.burger {
  display: none; width: 42px; height: 42px; margin-left: auto;
  position: relative; flex-shrink: 0;
}
.burger i {
  position: absolute; left: 11px; width: 20px; height: 1.5px;
  background: var(--blanc);
  transition: transform 0.35s var(--ease), opacity 0.2s var(--ease);
}
.burger i:nth-child(1) { top: 16px; }
.burger i:nth-child(2) { top: 24px; }
body.menu-open .burger i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
body.menu-open .burger i:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

.mnav {
  position: fixed; inset: 0; z-index: 190;
  background: var(--ink);
  padding: 6rem var(--pad-x) 2.5rem;
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
body.menu-open .mnav { opacity: 1; visibility: visible; }
.mnav__link {
  display: block; padding: 1.1rem 0;
  border-bottom: 1px solid var(--hair-d);
  font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em;
}
.mnav__link .mnav__idx {
  font-size: 0.7rem; color: var(--terre); margin-right: 0.9rem;
  letter-spacing: 0; vertical-align: 0.35em;
}
.mnav__cta { margin-top: auto; }


/* ------------------------------------------------------------------ *
 * 5. HERO — le zéro tracé + la barre de faits
 * ------------------------------------------------------------------ */
.hero {
  position: relative; overflow: hidden;
  background: var(--ink);
  padding-top: clamp(5.5rem, 11vh, 7rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
}

/* Le zéro : géométrie réelle du logotype (Manrope ExtraBold vectorisée),
   pas un cercle redessiné. Il se trace au chargement, puis dérive au
   pointeur et au scroll. */
.hero__zero {
  position: absolute;
  top: 50%; right: clamp(1rem, 4vw, 4.5rem);
  transform: translateY(-50%);
  height: clamp(240px, 52vh, 460px);
  pointer-events: none;
  z-index: 0;
}
.hero__zero svg { height: 100%; width: auto; overflow: visible; }
/* Pas de vector-effect ici : « non-scaling-stroke » calcule le trait (et donc
   les tirets) dans l'espace écran, alors que getTotalLength() rend une longueur
   en unités du viewBox. Les deux ne coïncident plus et le tracé apparaît en
   pointillés. Épaisseurs exprimées en unités de viewBox — le trait suit
   l'échelle du chiffre, ce qui est le comportement voulu. */
.hero__zero .z-stroke { fill: none; stroke: var(--hair-d); stroke-width: 0.22; }
.hero__zero .z-arc    { fill: none; stroke: var(--terre);  stroke-width: 0.34; }
.hero__zero .z-fill   { fill: rgba(240, 144, 107, 0.04); opacity: 0; }

.hero__in { position: relative; z-index: 2; width: 100%; }
.hero__eyebrow { margin-bottom: clamp(1.1rem, 2.2vw, 1.6rem); }
.hero h1 { margin-bottom: clamp(0.9rem, 1.6vw, 1.25rem); }
.hero h1 .hero__l2 { color: var(--terre); }
.hero__sub { max-width: 46ch; margin-bottom: clamp(1.4rem, 2.6vw, 2rem); }
.hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.hero__note { font-size: 0.78rem; color: var(--gris-inv); letter-spacing: 0.01em; }

/* --- Barre de faits — dispositif VERROUILLÉ : trois faits, cet ordre,
       filet 2 px au-dessus, 1 px en dessous. Se répète à l'identique. --- */
.facts {
  border-top: 2px solid var(--fg);
  border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.facts__i {
  padding: clamp(0.9rem, 1.9vw, 1.4rem) 0 clamp(0.8rem, 1.6vw, 1.15rem);
  padding-right: 1rem;
}
.facts__i + .facts__i {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1rem, 2.4vw, 2rem);
}
.facts__n {
  display: block;
  font-weight: 800; font-size: var(--t-num);
  letter-spacing: -0.045em; line-height: 0.9;
  color: var(--accent);
  margin-bottom: 0.55rem;
}
.facts__t {
  display: block;
  font-size: clamp(0.78rem, 0.74rem + 0.16vw, 0.875rem);
  line-height: 1.4; color: var(--fg-2);
  max-width: 20ch;
}
.hero .facts { margin-top: clamp(1.9rem, 3.8vw, 2.9rem); }


/* ------------------------------------------------------------------ *
 * 6. ODOMÈTRE — chiffres à rouleaux
 *    Chaque chiffre est une colonne 0→9 qui glisse. Les chiffres
 *    tabulaires garantissent que les colonnes ne bougent jamais.
 * ------------------------------------------------------------------ */
.od {
  display: inline-flex; align-items: stretch;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.od__d {
  display: inline-block; overflow: hidden;
  height: 1.12em;
}
.od__r { display: block; will-change: transform; }
.od__r i { display: block; height: 1.12em; line-height: 1.12; font-style: normal; }
.od__s { display: inline-block; height: 1.12em; line-height: 1.12; }


/* ------------------------------------------------------------------ *
 * 7. 01 · SIMULATEUR — le moment de singularité (registre clair)
 * ------------------------------------------------------------------ */
.sim__head { max-width: 62ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.sim__head .t-page { margin-bottom: 1rem; }

.sim__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* --- Entrée : le budget --- */
.sim-field { border-top: 2px solid var(--fg); padding-top: 1.1rem; }
.sim-field__label {
  display: block; font-weight: 500; font-size: var(--t-label);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-2);
  margin-bottom: 1.1rem;
}
.sim-input {
  display: flex; align-items: baseline; gap: 0.4rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.5rem;
  transition: border-color var(--t-med) var(--ease);
}
.sim-input:focus-within { border-bottom-color: var(--accent); }
.sim-input input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  font-weight: 800; font-size: clamp(1.6rem, 3.4vw, 2.35rem);
  letter-spacing: -0.045em; line-height: 1.1;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.sim-input__unit {
  font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.8rem);
  letter-spacing: -0.03em; color: var(--accent);
}

/* Piste : rail 1 px, remplissage 2 px, curseur rectangulaire. */
.sim-range { position: relative; margin-top: 1.9rem; height: 26px; }
.sim-range__rail {
  position: absolute; left: 0; right: 0; top: 12px; height: 1px;
  background: var(--rule);
}
.sim-range__fill {
  position: absolute; left: 0; right: 0; top: 11.5px; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
}
.sim-range input[type="range"] {
  position: relative; z-index: 2;
  width: 100%; height: 26px; margin: 0;
  background: none; -webkit-appearance: none; appearance: none;
  cursor: ew-resize;
}
.sim-range input[type="range"]::-webkit-slider-runnable-track {
  height: 26px; background: transparent;
}
.sim-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 26px; border: none; border-radius: 0;
  background: var(--accent); cursor: ew-resize;
}
.sim-range input[type="range"]::-moz-range-track { height: 26px; background: transparent; border: none; }
.sim-range input[type="range"]::-moz-range-thumb {
  width: 10px; height: 26px; border: none; border-radius: 0;
  background: var(--accent); cursor: ew-resize;
}
.sim-range__scale {
  display: flex; justify-content: space-between;
  margin-top: 0.6rem;
  font-size: 0.6875rem; letter-spacing: 0.08em; color: var(--fg-2);
}

/* --- Cases qualifiantes : des lignes à filet, jamais des cartes --- */
.sim-checks { margin-top: clamp(2.25rem, 4.5vw, 3rem); }
.sim-checks__label {
  display: block; font-weight: 500; font-size: var(--t-label);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-2);
  padding-top: 1.1rem; border-top: 2px solid var(--fg);
  margin-bottom: 0.5rem;
}
.sim-check {
  display: flex; align-items: flex-start; gap: 1rem;
  width: 100%; text-align: left;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--rule);
  color: var(--fg);
  transition: color var(--t-med) var(--ease);
}
.sim-check__box {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 0.15rem;
  border: 1px solid var(--rule); border-radius: 0;
  position: relative;
  transition: border-color var(--t-med) var(--ease), background var(--t-med) var(--ease);
}
.sim-check__box::after {
  content: ""; position: absolute; inset: 3px;
  background: var(--accent);
  transform: scale(0); transform-origin: center;
  transition: transform 0.3s var(--ease);
}
.sim-check[aria-pressed="true"] .sim-check__box { border-color: var(--accent); }
.sim-check[aria-pressed="true"] .sim-check__box::after { transform: scale(1); }
.sim-check__t { font-size: 0.9375rem; line-height: 1.45; }
.sim-check__t small { display: block; margin-top: 0.2rem; font-size: 0.8125rem; color: var(--fg-2); }
.sim-check:hover .sim-check__box { border-color: var(--accent); }

/* --- Sortie : la fourchette posée sur un filet --- */
.sim-out { position: sticky; top: 6rem; }
.sim-out__label {
  display: block; font-weight: 500; font-size: var(--t-label);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-2);
  padding-top: 1.1rem; border-top: 2px solid var(--fg);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.5rem);
}
.sim-out__row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; }
.sim-out__cell { min-width: 0; }
.sim-out__cell--hi { text-align: right; }
.sim-out__cap {
  display: block; font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fg-2); margin-bottom: 0.7rem;
}
.sim-out__n {
  font-weight: 800; font-size: clamp(1.65rem, 4.2vw, 3.1rem);
  letter-spacing: -0.045em; line-height: 0.9; color: var(--accent);
}
.sim-out__pct {
  display: block; margin-top: 0.6rem;
  font-size: 0.8125rem; color: var(--fg-2);
}

/* Le filet de fourchette : rail 1 px, segment 2 px en accent. */
.sim-band { position: relative; height: 2px; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.sim-band__rail { position: absolute; inset: 0; background: var(--rule); }
.sim-band__seg {
  position: absolute; top: -0.5px; height: 3px;
  background: var(--accent);
  left: 0; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
}
.sim-band__ticks {
  display: flex; justify-content: space-between;
  margin-top: 0.65rem; font-size: 0.6875rem; color: var(--fg-2);
  letter-spacing: 0.06em;
}

.sim-foot {
  margin-top: clamp(2rem, 4vw, 2.75rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
}
.sim-note {
  margin-top: 1.5rem; font-size: 0.75rem; line-height: 1.55;
  color: var(--fg-2); max-width: 52ch;
}


/* ------------------------------------------------------------------ *
 * 8. 02 · LE PROBLÈME — les postes où l'écart se loge
 * ------------------------------------------------------------------ */
.pb__head { max-width: 62ch; margin-bottom: clamp(2.75rem, 5.5vw, 4.5rem); }
.pb__head .t-page { margin-bottom: 1rem; }

.pb-list { border-top: 2px solid var(--fg); }
.pb-item {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.4rem, 2.8vw, 2.1rem) 0;
  border-bottom: 1px solid var(--rule);
}
.pb-item__n {
  font-weight: 800; font-size: 0.8125rem; letter-spacing: -0.02em;
  color: var(--accent); line-height: 1.4;
}
.pb-item__t { font-size: var(--t-sect); letter-spacing: -0.025em; line-height: 1.25; }
.pb-item__d { font-size: 0.9375rem; line-height: 1.6; color: var(--fg-2); }
.pb-item__d em { font-style: normal; color: var(--fg); font-weight: 500; }

.pb-src {
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
  padding-top: 1.3rem; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.pb-src p { font-size: 0.8125rem; line-height: 1.6; color: var(--fg-2); }
.pb-src p strong { color: var(--fg); font-weight: 500; }


/* ------------------------------------------------------------------ *
 * 9. 03 · LA MÉTHODE — filet de progression scrubbé
 * ------------------------------------------------------------------ */
.mt__head { max-width: 60ch; margin-bottom: clamp(3rem, 6vw, 5rem); }
.mt__head .t-page { margin-bottom: 1rem; }

/* Le rail, ses nœuds et la disposition des étapes vivent dans css/meth.css :
   la section est passée d'un rail horizontal au-dessus de cinq colonnes à un
   rail vertical le long de cinq rangées. Les règles de l'ancienne disposition
   sont SUPPRIMÉES et non surchargées — laissées en place, chacune ressortait
   dès que meth.css cessait de la défaire par accident, quatre fois de suite. */
.mt-step__n {
  display: block; font-weight: 800; font-size: 0.8125rem;
  letter-spacing: -0.02em; color: var(--fg-2);
  margin-bottom: 0.9rem;
  transition: color 0.4s var(--ease);
}
.mt-step.is-on .mt-step__n { color: var(--accent); }
.mt-step__t {
  font-size: var(--t-sect); letter-spacing: -0.025em; line-height: 1.25;
  margin-bottom: 0.6rem;
  color: var(--fg-2);
  transition: color 0.4s var(--ease);
}
.mt-step.is-on .mt-step__t { color: var(--fg); }
.mt-step__d { font-size: 0.875rem; line-height: 1.55; color: var(--fg-2); }
.mt-step__tag {
  display: inline-block; margin-top: 0.9rem;
  font-weight: 500; font-size: 0.625rem; letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--rule); color: var(--fg-2);
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.mt-step.is-on .mt-step__tag { border-color: var(--accent); color: var(--accent); }

.mt-foot {
  margin-top: clamp(2.75rem, 5vw, 4rem);
  padding-top: 1.4rem; border-top: 1px solid var(--rule);
  font-size: 0.9375rem; color: var(--fg-2); max-width: 68ch;
}


/* ------------------------------------------------------------------ *
 * 10. 04 · DIFFÉRENCIATION — un vrai tableau, sur fond clair
 * ------------------------------------------------------------------ */
.df__head { max-width: 62ch; margin-bottom: clamp(2.75rem, 5.5vw, 4.5rem); }
.df__head .t-page { margin-bottom: 1rem; }

.df-table { width: 100%; overflow-x: auto; }
.df-table table {
  width: 100%; min-width: 720px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.df-table th, .df-table td {
  text-align: left; vertical-align: top;
  padding: clamp(1rem, 2.2vw, 1.5rem) clamp(0.9rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--rule);
}
.df-table th:first-child, .df-table td:first-child { padding-left: 0; }
.df-table thead th {
  border-bottom: 2px solid var(--fg);
  padding-bottom: 1rem;
  font-weight: 500; font-size: var(--t-label);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-2);
}
.df-table thead th.is-us { color: var(--accent); }
.df-table tbody th {
  font-weight: 800; font-size: 0.9375rem; letter-spacing: -0.015em;
  width: 24%;
}
.df-table td { font-size: 0.9375rem; line-height: 1.55; color: var(--fg-2); }
.df-table td.is-us { color: var(--fg); font-weight: 500; }
.df-table tbody tr { transition: background var(--t-med) var(--ease); }
.df-table tbody tr:hover { background: var(--clair-2); }
.sect--light-2 .df-table tbody tr:hover { background: var(--blanc); }

.df-verdict {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 2px solid var(--fg); padding-top: clamp(1.5rem, 3vw, 2.25rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem); align-items: center;
}
.df-verdict__q {
  font-weight: 800; font-size: clamp(1.15rem, 2.4vw, 1.65rem);
  letter-spacing: -0.03em; line-height: 1.3; max-width: 30ch;
}
.df-verdict__q .accent { color: var(--accent); }


/* ------------------------------------------------------------------ *
 * 11. 05 · FAQ — divulgations accessibles, filets seulement
 * ------------------------------------------------------------------ */
.faq__head { max-width: 58ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.faq__head .t-page { margin-bottom: 1rem; }

.faq-list { border-top: 2px solid var(--fg); }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-q {
  display: flex; align-items: flex-start; gap: 1.25rem;
  width: 100%; text-align: left;
  padding: clamp(1.3rem, 2.6vw, 1.9rem) 0;
  color: var(--fg);
}
.faq-q__idx {
  flex-shrink: 0; font-weight: 800; font-size: 0.75rem;
  letter-spacing: -0.02em; color: var(--accent); line-height: 1.9;
  width: 1.75rem;
}
.faq-q__t {
  flex: 1; font-weight: 800; font-size: var(--t-sect);
  letter-spacing: -0.025em; line-height: 1.35;
  transition: color var(--t-med) var(--ease);
}
.faq-q:hover .faq-q__t { color: var(--accent); }
/* Le signe : deux filets qui se croisent, l'un s'efface à l'ouverture. */
.faq-q__sign { flex-shrink: 0; position: relative; width: 14px; height: 14px; margin-top: 0.45rem; }
.faq-q__sign i {
  position: absolute; background: var(--fg-2);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.faq-q__sign i:nth-child(1) { top: 6.5px; left: 0; width: 14px; height: 1.5px; }
.faq-q__sign i:nth-child(2) { top: 0; left: 6.5px; width: 1.5px; height: 14px; }
.faq-item.is-open .faq-q__sign i { background: var(--accent); }
.faq-item.is-open .faq-q__sign i:nth-child(2) { transform: scaleY(0); }

.faq-a { overflow: hidden; height: 0; }
.faq-a__in {
  padding: 0 0 clamp(1.3rem, 2.6vw, 1.9rem) 3rem;
  max-width: 68ch;
  font-size: 0.9375rem; line-height: 1.65; color: var(--fg-2);
}
.faq-a__in p + p { margin-top: 0.9rem; }
.faq-a__in strong { color: var(--fg); }

/* ---- La chaîne de traitement d'un document ----
   Un argument commercial, pas une mention légale : ce qui rassure un DAF,
   c'est de voir le trajet exact d'une facture entre son envoi et sa
   suppression. Structure en filets, jamais en cartes — même grammaire que
   .ct-next et .esc. */
.faq-chain {
  margin-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.faq-chain__i {
  display: grid;
  grid-template-columns: 10.5rem minmax(0, 1fr);
  gap: 0 1.25rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
}
.faq-chain__k {
  font-weight: 500; font-size: 0.5625rem; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--fg-2);
  padding-top: 0.42em;
}
.faq-chain__v { font-size: 0.875rem; line-height: 1.6; }
.faq-chain__v b { color: var(--fg); font-weight: 500; }
/* Le paragraphe qui suit la chaîne reprend son souffle : sans cet écart, il
   se lit comme une sixième étape. */
.faq-chain + p { margin-top: 1.6rem; }

@media (max-width: 620px) {
  .faq-chain__i { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }
  .faq-chain__k { padding-top: 0; }
}


/* ------------------------------------------------------------------ *
 * 12. 06 · CONTACT & FORMULAIRE
 * ------------------------------------------------------------------ */
.ct__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.ct__head .t-page { margin-bottom: 1.1rem; }
.ct-steps { margin-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--rule); }
.ct-step {
  display: flex; gap: 1.1rem; align-items: baseline;
  padding: 1rem 0; border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem; line-height: 1.5; color: var(--fg-2);
}
.ct-step b { flex-shrink: 0; font-weight: 800; font-size: 0.75rem; color: var(--accent); }

.form { border-top: 2px solid var(--fg); padding-top: clamp(1.5rem, 3vw, 2.25rem); }
.field + .field { margin-top: clamp(1.5rem, 3vw, 2rem); }
.field label {
  display: block; font-weight: 500; font-size: var(--t-label);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-2);
  margin-bottom: 0.7rem;
}
.field input, .field textarea {
  width: 100%; display: block;
  background: none; border: none; border-bottom: 1px solid var(--rule);
  border-radius: 0; outline: none;
  padding: 0.55rem 0 0.7rem;
  font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em;
  color: var(--fg);
  transition: border-color var(--t-med) var(--ease);
}
.field textarea { resize: vertical; min-height: 4.5rem; line-height: 1.55; font-weight: 400; font-size: 0.9375rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--fg-2); opacity: 0.65; font-weight: 400; }
.field input:focus, .field textarea:focus { border-bottom-color: var(--accent); }
.field__hint { display: block; margin-top: 0.55rem; font-size: 0.75rem; color: var(--fg-2); }

.form__foot { margin-top: clamp(2rem, 4vw, 2.75rem); }
.form__legal { margin-top: 1.1rem; font-size: 0.72rem; line-height: 1.55; color: var(--fg-2); max-width: 46ch; }
.form__legal a { border-bottom: 1px solid var(--rule); }
.form__status { margin-top: 1rem; font-size: 0.875rem; color: var(--accent); font-weight: 500; }
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }


/* ------------------------------------------------------------------ *
 * 13. FOOTER — « le mot en pleine largeur »
 *    Aucun point de rupture : tout est fluide via les unités cqi
 *    (le footer est un conteneur). « Remboursé. » remplit exactement la
 *    largeur utile du wrap et tient lieu de filigrane.
 * ------------------------------------------------------------------ */
.footer {
  container-type: inline-size;
  background: var(--ink); color: var(--blanc);
  padding-top: clamp(1.5rem, 4cqi, 3rem);
}
/* 11 = 2 × 5.5 : le mot occupe la moitié de la largeur qu'il occupait
   avant (2026-09-23, tout le footer réduit de 50 % à la demande d'Ugo).
   Ajuster si le mot dépasse (augmenter) ou reste court (diminuer). */
.footer__n {
  display: block;
  font-weight: 800;
  font-size: calc((min(100cqi, var(--wrap)) - 2 * var(--pad-x)) / 11);
  letter-spacing: -0.045em; line-height: 0.8;
  margin-left: -0.04em;
  color: var(--terre);
  white-space: nowrap;
}
.footer__big {
  margin-top: clamp(0.875rem, 2cqi, 1.5rem);
  border-top: 2px solid var(--blanc);
  padding-top: clamp(0.75rem, 1.5cqi, 1.125rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: clamp(0.75rem, 2cqi, 1.5rem);
  align-items: start;
}
.footer__t {
  margin: 0; max-width: 34ch;
  /* Plancher à 0.8125rem (13px) plutôt qu'une moitié stricte de 1rem :
     en dessous, le texte devient difficile à lire — même contrainte que
     .footer__bot juste en dessous. */
  font-size: clamp(0.8125rem, 0.78rem + 0.22cqi, 1rem);
  line-height: 1.5; color: var(--gris-inv);
  text-wrap: pretty;
}
.footer__t b { color: var(--blanc); font-weight: 500; }
.footer__act { display: flex; justify-content: flex-end; }
.footer__act .btn--primary {
  /* Taille d'origine délibérément conservée (2026-09-23) : au contraire du
     reste du footer, un CTA réduit à 11rem/44px gardait un texte non
     réduit — « Obtenir mon diagnostic gratuit 0 € » débordait de son cadre
     orange, visible en capture. Le bouton reste donc à sa taille pleine. */
  flex: 1 1 auto; max-width: 22rem;
  justify-content: center; min-height: 56px;
}
.footer__bot {
  margin-top: clamp(1.5rem, 4cqi, 3rem);
  padding-block: 0.5rem 0.75rem;
  border-top: 1px solid var(--hair-d);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: center; column-gap: 2rem;
  font-size: 0.75rem; color: var(--gris-inv);
}
.footer__copy { padding-block: 0.4rem; color: var(--blanc); }
.footer__links { display: flex; flex-wrap: wrap; column-gap: clamp(0.75rem, 2cqi, 1.25rem); }
.footer__links a { padding-block: 0.4rem; transition: color var(--t-med) var(--ease); }
.footer__links a:hover { color: var(--terre); }
.footer__links .footer__ext { color: var(--blanc); }


/* ------------------------------------------------------------------ *
 * 14. PAGES SECONDAIRES
 * ------------------------------------------------------------------ */
.page { padding-top: clamp(8rem, 16vh, 11rem); padding-bottom: clamp(4rem, 8vw, 6rem); }
.page__head { border-bottom: 2px solid var(--blanc); padding-bottom: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.page__head h1 { font-size: var(--t-page); letter-spacing: -0.035em; line-height: 1.15; }
.page__head p { margin-top: 0.9rem; font-size: 0.875rem; color: var(--gris-inv); }
.prose { max-width: 72ch; }
.prose h2 {
  font-size: var(--t-sect); letter-spacing: -0.025em; line-height: 1.25;
  margin-top: clamp(2.25rem, 4.5vw, 3rem); margin-bottom: 0.9rem;
  padding-top: 1.1rem; border-top: 1px solid var(--hair-d);
}
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { font-size: 0.9375rem; line-height: 1.7; color: var(--gris-inv); }
.prose p + p, .prose ul { margin-top: 0.9rem; }
.prose ul { padding-left: 1.15rem; }
.prose li + li { margin-top: 0.45rem; }
.prose strong { color: var(--blanc); font-weight: 500; }
.prose a { color: var(--terre); border-bottom: 1px solid var(--hair-d); }
.prose a:hover { border-bottom-color: var(--terre); }
/* Marqueur des informations non confirmées — voir le brief §5. Volontairement
   visible : une mention légale incomplète ne doit pas pouvoir passer en ligne
   sans qu'on le voie. */
.todo {
  display: inline-block;
  padding: 0.1em 0.45em;
  border: 1px solid var(--terre); color: var(--terre);
  font-weight: 500; font-size: 0.8em; letter-spacing: 0.06em;
}


/* ------------------------------------------------------------------ *
 * 15. RÉVÉLATIONS · RESPONSIVE · MOTION RÉDUIT
 * ------------------------------------------------------------------ */

/* Anti-FOUC : masqué dès que le JS est là, pour éviter que le contenu ne soit
   peint puis retiré. Le masque n'est sûr QUE parce que initReveals() garantit
   trois issues de secours — voir js/main.js §3. */
.js [data-reveal] { opacity: 0; will-change: transform, opacity; }
/* État de départ des lignes masquées, posé AVANT que le JS ne tourne : sans
   lui, le titre s'affiche puis saute au moment où GSAP prend la main. */
.js [data-line] > .line-mask > span { transform: translateY(106%); will-change: transform; }

/* ---- ≤ 1080 px ---- */
@media (max-width: 1080px) {
  .sim__grid { grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 6vw, 3.5rem); }
  .sim-out { position: static; }
  .ct__grid { grid-template-columns: minmax(0, 1fr); }
  .pb-item { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .pb-item__d { grid-column: 2; }
}

/* ---- ≤ 900 px : bascule navigation ---- */
@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: block; }
  .df-verdict { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .pb-src { grid-template-columns: minmax(0, 1fr); }
}

/* ---- ≤ 700 px ---- */
@media (max-width: 700px) {
  .hero { min-height: auto; padding-top: clamp(6.5rem, 22vh, 9rem); }
  .hero__zero { height: clamp(180px, 27vh, 250px); right: -1.25rem; top: 31%; opacity: 0.8; }
  .t-hero { max-width: 14ch; }

  /* La barre de faits reste le même dispositif — trois faits, même ordre —
     mais empilée : à trois colonnes sous 700 px, les chiffres tombent
     sous la barre des 21 px du socle. */
  .facts { grid-template-columns: minmax(0, 1fr); }
  .facts__i { padding-right: 0; padding-block: 1.15rem; }
  .facts__i + .facts__i {
    border-left: none; border-top: 1px solid var(--rule); padding-left: 0;
  }
  .facts__n { font-size: clamp(2.2rem, 13vw, 3.2rem); margin-bottom: 0.3rem; }
  .facts__t { max-width: 32ch; }

  .sim-out__row { flex-direction: column; align-items: flex-start; gap: 1.75rem; }
  .sim-out__cell--hi { text-align: left; }
  .faq-a__in { padding-left: 0; }
  .faq-q__idx { width: 1.5rem; }
  .df-verdict__q { font-size: 1.15rem; }
}

/* ---- Motion réduit ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js [data-line] > .line-mask > span { transform: none !important; }
  .marker::before { transform: scaleX(1) !important; }
  /* Le zéro reste, tracé et figé — la composition ne change pas, seul le
     mouvement disparaît. */
  .hero__zero .z-fill { opacity: 1 !important; }
}

/* Mise en valeur ponctuelle dans un titre : l'accent du registre courant
   (terre claire sur sombre, terre brûlée sur clair). */
.t-page .hl { color: var(--accent); }