/* ==========================================================================
   GREEN DIGITAL — SITE
   Home. Construit sur les jetons du brand book. Aucune valeur de couleur,
   d'espacement ou de durée en dur : tout vient de tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
/* L'attribut hidden doit toujours gagner, y compris face à un display:flex/grid
   posé par une classe (.form, .demo__stage...) — sans ça, un élément masqué par
   JS via [hidden] reste visible dès qu'une classe lui donne un display propre. */
[hidden] { display: none !important; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--surface-0);
  color: var(--text-1);
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: var(--lh-base);
}

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

a { color: inherit; }
button { font-family: var(--font); }

/* --- BARRE FINE ----------------------------------------------------------
   Absente à l'arrivée. Apparaît au premier défilement. Jamais un menu. */

.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  height: 64px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-6);
  background: rgba(11,15,13,.86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  opacity: 0; transform: translateY(-8px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), border-color var(--dur-base) var(--ease);
  pointer-events: none;
}
.bar.is-visible { opacity: 1; transform: none; pointer-events: auto; border-bottom-color: var(--border); }
.bar__mark { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.bar__cta {
  font-size: var(--t-sm); color: var(--text-2); text-decoration: none;
  border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: 8px 16px; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.bar__cta:hover { color: var(--text-1); border-color: var(--gd-smoke); }

/* --- LAYOUT ---------------------------------------------------------------- */

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--space-6); }

@media (max-width: 720px) {
  .wrap { padding: 0 var(--space-5); }
}

/* --- BOUTONS ---------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-size: var(--t-sm); font-weight: 500;
  border-radius: var(--r-md); border: 1px solid transparent;
  padding: 13px 22px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  text-decoration: none;
}
.btn:active { transform: scale(.98); }

.btn--primary { background: var(--gd-forest); color: var(--gd-bone); }
.btn--primary:hover { background: #0E6C4C; }

.btn--secondary { background: transparent; color: var(--text-2); border-color: var(--border-strong); }
.btn--secondary:hover { color: var(--text-1); border-color: var(--gd-smoke); }

.btn--ghost {
  background: none; border: none; color: var(--text-3); font-size: var(--t-sm);
  padding: 8px 0; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
}
.btn--ghost:hover { color: var(--text-2); }

.btn--lg { padding: 16px 28px; font-size: var(--t-base); }

/* --- MOTIF D'APPARITION ----------------------------------------------------
   Sans JavaScript, tout reste visible : la classe .js-ready n'est posée que
   si le script tourne. */

.js-ready [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.js-ready [data-reveal].is-in { opacity: 1; transform: none; }
.js-ready [data-reveal-1].is-in { transition-delay: calc(var(--stagger) * 1); }
.js-ready [data-reveal-2].is-in { transition-delay: calc(var(--stagger) * 2); }
.js-ready [data-reveal-3].is-in { transition-delay: calc(var(--stagger) * 3); }
.js-ready [data-reveal-4].is-in { transition-delay: calc(var(--stagger) * 4); }
.js-ready [data-reveal-5].is-in { transition-delay: calc(var(--stagger) * 5); }

@media (prefers-reduced-motion: reduce) {
  .js-ready [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- INTERVALLES ------------------------------------------------------------
   Les sections ne se touchent jamais. Le vide est la transition. */

.gap-open  { height: var(--space-9); }
.gap-full  { height: 33vh; }
.gap-half  { height: 14vh; }

@media (max-width: 720px) {
  .gap-full { height: 22vh; }
  .gap-half { height: 10vh; }
}

/* ============================================================
   1 — HERO
   ============================================================ */

/* .hero est désormais scène ET conteneur. Les couches s'empilent dedans en
   position: absolute, sauf .hero__composition qui occupe l'espace flex. */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: var(--gd-ink); /* raccord parfait avec la page — voir assets/hero/README.md */
  display: flex;
  align-items: flex-end; /* le texte tombe naturellement dans le bas du cadre */
  padding: var(--space-9) 0 var(--space-10);
}

/* --- Couches empilées, du filet vers le réel -----------------------------
   Contrat inchangé : chaque niveau ne masque le précédent que s'il a
   quelque chose à montrer. Le SVG reste une icône centrée à taille fixe,
   pas une image plein cadre — d'où sa règle différente. */
.hero__ph {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1; width: min(34%, 220px); height: auto;
  transition: opacity var(--dur-base) var(--ease);
}
.hero__poster { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__poster img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hero__video {
  position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%;
  object-fit: cover;
  /* Finition : décalage très léger du sujet vers la droite pour dégager
     la colonne de texte à gauche, à la manière Apple. Chiffre volontairement
     petit — au-delà, on triche le cadrage. */
  object-position: 58% center;
  opacity: 0; transition: opacity var(--dur-slow) var(--ease);
  pointer-events: none;
}
.hero.hero__stage--live .hero__video { opacity: 1; }
.hero.hero__stage--live .hero__ph { opacity: 0; }

/* --- Voile ---------------------------------------------------------------
   Dégradé vertical très discret : lisibilité du texte sans trahir l'image.
   Concentré sur le bas où le texte se pose.

   Finition : le voile n'existe que parce que la vidéo a des zones claires
   à assombrir. Dans les 2 dernières secondes de la boucle, l'image se
   réduit à un carré vert dans le noir — le voile n'a plus rien à
   assombrir, sauf le vert lui-même. On le fait donc reculer très
   discrètement pour lui rendre son intensité nominale. Le texte ne bouge
   pas d'un pixel ; seule une aide devenue inutile se retire. */
.hero__veil {
  position: absolute; inset: 0; z-index: 4;
  pointer-events: none;
  opacity: 1;
  transition: opacity 1400ms cubic-bezier(.4, 0, .2, 1);
  background:
    linear-gradient(180deg,
      rgba(11,15,13,0.10) 0%,
      rgba(11,15,13,0.20) 45%,
      rgba(11,15,13,0.65) 80%,
      rgba(11,15,13,0.85) 100%);
}
.hero__stage--closing .hero__veil { opacity: 0.55; }

/* --- Composition ---------------------------------------------------------
   Posée au-dessus des couches image, dans le flux du .hero (flex end).
   Chaque cue commence caché ; site.js pose is-in au bon moment. */
.hero__composition {
  position: relative;
  z-index: 5;
  max-width: 780px;
  /* Finition : léger décalage vers la droite. Le texte cesse de vivre
     dans son coin et entre en dialogue avec le monolithe. Quelques dizaines
     de pixels seulement — pas un déplacement, une gravitation. */
  padding-left: 40px;
}

.hero__title {
  /* Finition : titre réduit d'environ 18 % (74 vs 88), puis −5 % supplémentaires
     (70 vs 74) pour laisser le regard découvrir la scène avant le titre.
     Le film reste le héros ; le texte l'accompagne. */
  font-size: clamp(38px, 6.2vw, 70px);
  font-weight: 500;
  letter-spacing: var(--tr-tight);
  line-height: 1.02;
  /* Finition : plus d'air entre le titre et le sous-titre. Le luxe respire. */
  margin: 0 0 var(--space-8);
  color: var(--gd-bone);
}
.hero__word {
  display: block;
  /* Léger contraste tirant l'œil : la première ligne blanc plein,
     la seconde légèrement plus retenue. Rien de coloré. */
}
.hero__word:nth-child(2) { color: rgba(245, 246, 243, 0.72); }

.hero__subs { margin: 0 0 var(--space-7); }
.hero__sub {
  font-size: var(--t-md);
  color: var(--text-2);
  /* Finition : interligne un peu plus généreux — lecture plus confortable
     sans jamais rendre les phrases lâches. */
  line-height: 1.65;
  max-width: 52ch;
  margin: 0 0 var(--space-3);
}
.hero__sub--lead { color: var(--gd-bone); font-size: clamp(20px, 1.5vw, 22px); }

.hero__ctas {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.hero__cta-primary { display: flex; flex-direction: column; gap: var(--space-2); }
.hero__meta {
  font-size: var(--t-xs);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0;
}
.hero__cta-secondary {
  font-size: var(--t-sm);
  /* Finition : contraste légèrement remonté. Le CTA doit rester secondaire —
     il ne concurrence jamais le principal — mais il doit être visible
     naturellement, pas cherché. Passage de text-2 (#8A948E) à gd-bone,
     compensé par un filet et un poids visuel plus discret ailleurs. */
  color: var(--gd-bone);
  text-decoration: none;
  border-bottom: 1px solid var(--gd-slate);
  padding: 4px 0;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.hero__cta-secondary:hover { color: var(--gd-bone); border-color: var(--gd-bone); }
.hero__cta-secondary span { margin-left: 4px; }

/* --- Cues d'apparition, pilotés par site.js -----------------------------
   État initial : caché, très léger décalage vers le bas.
   État posé : is-in — 700 ms, easing doux, jamais rejoué. */
.hero__composition [data-hero-cue] {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 750ms cubic-bezier(.22,.61,.36,1),
    transform 750ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.hero__composition [data-hero-cue].is-in {
  opacity: 1;
  transform: none;
}

/* Sans JS, le texte s'affiche immédiatement : jamais de contenu bloqué. */
html:not(.js-hero) .hero__composition [data-hero-cue] {
  opacity: 1;
  transform: none;
  transition: none;
}

.mono__frame { animation: monoBreath 7s ease-in-out infinite; }
.mono__win { animation: monoWin 7s ease-in-out infinite; }
@keyframes monoBreath { 0%, 100% { opacity: .9 } 50% { opacity: 1 } }
@keyframes monoWin { 0%, 100% { opacity: .88 } 50% { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  .mono__frame, .mono__win { animation: none; }
  /* Texte immédiat, aucun cue asynchrone. */
  .hero__composition [data-hero-cue] {
    opacity: 1; transform: none; transition: none;
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: 90vh;
    padding: var(--space-8) 0 var(--space-8);
  }
  /* Voile plus dense sur mobile : la vidéo est croppée, les zones claires
     tombent souvent derrière le texte. */
  .hero__veil {
    background:
      linear-gradient(180deg,
        rgba(11,15,13,0.20) 0%,
        rgba(11,15,13,0.35) 40%,
        rgba(11,15,13,0.75) 75%,
        rgba(11,15,13,0.90) 100%);
  }
  /* Finition mobile : le décalage à droite qu'on a introduit sur desktop
     mangerait trop de largeur en petit écran. On revient au bord de wrap. */
  .hero__composition { padding-left: 0; }
  /* Réduction cohérente avec desktop, mais sans casser la lisibilité mobile. */
  .hero__title { font-size: clamp(34px, 9vw, 50px); margin-bottom: var(--space-6); }
  .hero__sub--lead { font-size: 18px; }
  .hero__sub { font-size: 15px; }
  .hero__ctas { gap: var(--space-4); align-items: flex-start; }
  .hero__cta-primary .btn--lg { padding: 14px 22px; font-size: 15px; }

  /* Cadrage : on n'a qu'un fichier, on garde le centre. À remplacer
     dès qu'un rendu 4:5 dédié existera. */
  .hero__video, .hero__poster img { object-position: center; }
  .hero__ph { width: 46%; }
}

/* ============================================================
   2 — CONSTAT (défilement lié)
   ============================================================ */

.constat { position: relative; min-height: 190vh; } /* resserré : 6 phrases ne justifient pas 2,6 écrans de défilement pour un visiteur pressé */
.constat__sticky {
  position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
}
.constat__lines { margin: 0 0 var(--space-8); }
.constat__line {
  font-size: var(--t-xl); font-weight: 400; line-height: 1.4;
  color: var(--text-3); margin: 0 0 var(--space-3);
  opacity: .18; transition: opacity var(--dur-slow) var(--ease), color var(--dur-slow) var(--ease);
}
.constat__line.is-in { opacity: 1; color: var(--text-1); }

.constat__crest {
  font-size: var(--t-2xl); font-weight: 500; letter-spacing: var(--tr-tight);
  line-height: var(--lh-snug); max-width: 18ch; margin: 0 0 var(--space-6);
  opacity: 0; transform: translateY(14px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.constat__crest.is-in { opacity: 1; transform: none; }

.constat__sig {
  font-size: var(--t-base); color: var(--text-2); font-style: italic;
  opacity: 0; transition: opacity var(--dur-reveal) var(--ease);
}
.constat__sig.is-in { opacity: 1; }

@media (max-width: 720px) {
  .constat { min-height: 145vh; }
  .constat__line { font-size: var(--t-lg); }
}

/* ============================================================
   3 — DÉMONSTRATION
   ============================================================ */

.demo { background: var(--surface-1); padding: var(--space-9) 0; }
.demo__crest { font-size: var(--t-3xl); font-weight: 500; letter-spacing: var(--tr-tight); margin: 0 0 var(--space-3); }
.demo__meta { font-size: var(--t-sm); color: var(--text-3); margin: 0 0 var(--space-7); }

.demo__jobs { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-7); }
.job {
  font-family: var(--font); font-size: var(--t-sm); color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: 12px 20px; cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.job:hover { color: var(--text-1); border-color: var(--gd-smoke); }
.job[aria-pressed="true"] { color: var(--gd-bone); background: var(--gd-forest); border-color: var(--gd-forest); }

.demo__idle {
  font-size: var(--t-base); color: var(--text-3); line-height: 1.6; max-width: 52ch;
  padding: var(--space-5) 0 var(--space-4); border-top: 1px solid var(--border);
  transition: opacity var(--dur-base) var(--ease);
}
.demo.is-active .demo__idle { display: none; }

.demo__run { margin-bottom: var(--space-6); }
.demo__stage {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8);
  min-height: 360px;
}
.demo:not(.is-active) .demo__stage { min-height: 0; }

/* La demande entrante. L'heure est le premier signal du récit : elle dit
   déjà que personne n'était là pour répondre. */
.inbox {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--space-5); margin: 0 0 var(--space-5);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.inbox.is-in { opacity: 1; transform: none; }
.inbox__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-3);
}
.inbox__tag {
  font-size: var(--t-xs); letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--text-3);
}
.inbox__at {
  font-size: var(--t-xs); color: var(--text-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.inbox__body { font-size: var(--t-base); color: var(--text-2); line-height: 1.6; margin: 0; }

/* Ce que l'agent a compris. Chaque champ est une preuve de lecture —
   c'est ce qui sépare « il travaille » de « il affiche une animation ». */
.fields { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.fields:empty { display: none; }
.field {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  background: var(--surface-1); padding: 12px var(--space-4);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.field.is-in { opacity: 1; transform: none; }
.field__k { font-size: var(--t-xs); color: var(--text-3); flex-shrink: 0; }
.field__v { font-size: var(--t-sm); color: var(--text-1); text-align: right; }

.steps { list-style: none; margin: 0; padding: 0; }
.step {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--space-4);
  padding: 10px 0; opacity: 0;
  transition: opacity var(--dur-base) var(--ease);
}
/* Le trait relie le centre d'une pastille au centre de la suivante. Il est
   porté par chaque étape plutôt que par la liste : un libellé qui passe sur
   deux lignes (fréquent en mobile) ne le désaligne donc jamais. */
.step:not(:last-child)::after {
  content: ""; position: absolute; left: 6px; top: 23px; bottom: -23px;
  width: 1px; background: var(--border-strong); z-index: 0;
}
.step.is-queued { opacity: .32; }
.step.is-in { opacity: 1; }
.cell {
  position: relative; z-index: 1; margin-top: 6px;
  width: 14px; height: 14px; border-radius: var(--cell-r); flex-shrink: 0;
  border: 1.5px solid var(--border-strong); background: var(--surface-1);
  transition: background var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.step.is-in .cell { background: var(--gd-signal); border-color: var(--gd-signal); }
.step__label { font-size: var(--t-base); color: var(--text-2); }
.step.is-in .step__label { color: var(--text-1); }

/* Ce que le dirigeant n'a pas eu à écrire, et ce qu'il n'a pas eu à chiffrer.
   Les deux sorties du processus, côte à côte. */
.demo__out {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5);
  margin-top: var(--space-7);
}
/* Tant que rien n'a été lancé, les sorties n'existent pas — sinon deux cadres
   vides occupent l'écran avant même que le visiteur ait cliqué. */
.demo:not(.is-active) .demo__out,
.demo:not(.is-active) .demo__result { display: none; }

.reply, .doc {
  background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--space-5);
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.reply.is-in, .doc.is-in { opacity: 1; transform: none; }

.reply__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-4);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border);
}
.reply__tag {
  font-size: var(--t-xs); letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--gd-signal);
}
.reply__at { font-size: var(--t-xs); color: var(--text-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reply__line {
  font-size: var(--t-sm); color: var(--text-1); line-height: 1.65; margin: 0 0 var(--space-3);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.reply__line:last-child { margin-bottom: 0; }
.reply__line.is-in { opacity: 1; transform: none; }

.doc__head { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); }
.doc__label { font-size: var(--t-xs); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-3); }
.doc__title { font-size: var(--t-md); margin: 3px 0 0; }

.doc__lines { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.doc__line {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding: 9px 0; border-bottom: 1px solid var(--border);
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.doc__line.is-in { opacity: 1; transform: none; }
.doc__line-k { font-size: var(--t-sm); color: var(--text-2); }
.doc__line-v { font-size: var(--t-sm); color: var(--text-1); font-variant-numeric: tabular-nums; white-space: nowrap; }

.doc__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.doc__total-k { font-size: var(--t-xs); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-3); }
.doc__total-v {
  font-size: var(--t-2xl); font-weight: 500; font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-tight); white-space: nowrap;
}
.doc__total-v--text { font-size: var(--t-md); letter-spacing: var(--tr-normal); }

/* Le dernier plan. Sans lui, on a montré un outil. */
.demo__result {
  border-top: 1px solid var(--border); margin-top: var(--space-7); padding-top: var(--space-7);
  opacity: 0; transform: translateY(10px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.demo__result.is-in { opacity: 1; transform: none; }

.closing { margin-bottom: var(--space-7); }
.closing__line {
  font-size: var(--t-2xl); font-weight: 500; letter-spacing: var(--tr-tight);
  line-height: var(--lh-snug); margin: 0 0 var(--space-3);
  display: flex; align-items: baseline; gap: var(--space-4);
}
.closing__line::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  background: var(--gd-signal); flex-shrink: 0;
}
.closing__sub { font-size: var(--t-md); color: var(--text-2); line-height: 1.5; max-width: 44ch; margin: 0; }

.demo__exits {
  display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap;
  opacity: 0; transition: opacity var(--dur-reveal) var(--ease);
}
.demo__exits.is-in { opacity: 1; }

.demo__privacy { font-size: var(--t-xs); color: var(--text-3); margin-top: var(--space-7); }

@media (max-width: 900px) {
  .demo__stage { grid-template-columns: 1fr; gap: var(--space-6); }
  .demo__out { grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-6); }
  .demo__jobs { gap: 8px; }
  .job { flex: 1 1 calc(50% - 8px); text-align: center; padding: 14px 12px; }
  .closing__line { font-size: var(--t-xl); }
  .closing__sub { font-size: var(--t-base); }
  .field { flex-direction: column; align-items: flex-start; gap: 3px; }
  .field__v { text-align: left; }
}

/* ============================================================
   4 — MÉTHODE
   ============================================================ */

.methode { padding: var(--space-8) 0 var(--space-6); }
.methode__lead { font-size: var(--t-xl); font-weight: 400; max-width: 30ch; line-height: 1.4; margin: 0 0 var(--space-7); color: var(--text-2); }
.methode__crest { font-size: var(--t-3xl); font-weight: 500; letter-spacing: var(--tr-tight); margin: 0 0 var(--space-8); }

.timeline { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.tl-step { border-top: 1px solid var(--border-strong); padding-top: var(--space-4); }
.tl-step__n { font-size: var(--t-xs); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-3); }
.tl-step__t { font-size: var(--t-lg); font-weight: 500; margin: 8px 0 6px; }
.tl-step__d { font-size: var(--t-sm); color: var(--text-2); line-height: 1.6; }
.tl-step__when { font-size: var(--t-xs); color: var(--gd-signal); margin-top: var(--space-3); letter-spacing: var(--tr-label); text-transform: uppercase; }

@media (max-width: 900px) {
  .timeline { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ============================================================
   5 — POURQUOI NOUS
   ============================================================ */

.pourquoi { padding: var(--space-8) 0; }
.pourquoi__crest { font-size: var(--t-3xl); font-weight: 500; letter-spacing: var(--tr-tight); max-width: 16ch; margin: 0 0 var(--space-7); }

.pourquoi__lines { margin: 0 0 var(--space-7); }
.pourquoi__line { font-size: var(--t-xl); font-weight: 400; line-height: 1.4; color: var(--text-1); margin: 0 0 var(--space-2); }

.stats { display: flex; gap: var(--space-9); flex-wrap: wrap; margin: 0 0 var(--space-8); }
.stat__n { font-size: var(--t-3xl); font-weight: 500; letter-spacing: var(--tr-tight); font-variant-numeric: tabular-nums; }
.stat__l { font-size: var(--t-sm); color: var(--text-3); margin-top: 4px; }

.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); margin: 0 0 var(--space-9); }
.proj { border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--space-5); }
.proj__tag { display: inline-block; font-size: var(--t-xs); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-3); border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 3px 8px; margin-bottom: var(--space-3); }
.proj__t { font-size: var(--t-base); font-weight: 500; margin: 0 0 6px; }
.proj__d { font-size: var(--t-sm); color: var(--text-2); line-height: 1.6; margin: 0; }

.founder {
  border-left: 2px solid var(--gd-signal); border-radius: 0;
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  margin: 0 0 var(--space-8);
}
.founder__tag { font-size: var(--t-xs); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--gd-signal); }
.founder__t { font-size: var(--t-lg); font-weight: 400; line-height: 1.5; max-width: 44ch; margin: var(--space-2) 0 0; }

.limits { border-top: 1px solid var(--border); padding-top: var(--space-6); }
.limits__row { display: flex; gap: var(--space-6); padding: var(--space-4) 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.limits__q { font-size: var(--t-sm); color: var(--text-3); flex: 0 0 220px; }
.limits__a { font-size: var(--t-base); color: var(--text-1); flex: 1 1 300px; }

@media (max-width: 900px) {
  .projects { grid-template-columns: 1fr; }
}

/* ============================================================
   6 — AUDIT
   ============================================================ */

.audit { padding: var(--space-9) 0; }
.audit__crest { font-size: var(--t-3xl); font-weight: 500; letter-spacing: var(--tr-tight); margin: 0 0 var(--space-7); max-width: 16ch; }
.audit__lines { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.audit__line { border-top: 1px solid var(--border-strong); padding-top: var(--space-4); }
.audit__k { font-size: var(--t-xs); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.audit__v { font-size: var(--t-lg); font-weight: 500; }

@media (max-width: 900px) {
  .audit__lines { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* ============================================================
   7 — CTA
   ============================================================ */

.cta {
  min-height: 90vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: var(--space-9) 0;
}
.cta__crest { font-size: var(--t-3xl); font-weight: 500; letter-spacing: var(--tr-tight); margin: var(--space-7) 0 var(--space-3); }
.cta__sub { font-size: var(--t-md); color: var(--text-2); max-width: 34ch; margin: 0 0 var(--space-7); }
.cta__meta { font-size: var(--t-xs); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--text-3); margin: var(--space-4) 0 0; }
.cta__fallback { font-size: var(--t-sm); color: var(--text-3); margin: var(--space-3) 0 0; }
.cta__fallback a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.cta__fallback a:hover { color: var(--text-1); }

/* ============================================================
   PIED
   ============================================================ */

.foot {
  border-top: 1px solid var(--border); padding: var(--space-6) 0 var(--space-8);
  display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  font-size: var(--t-xs); color: var(--text-3);
}
.foot__links a {
  color: var(--text-3); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--border-strong);
}
.foot__links a:hover { color: var(--text-2); }

/* ============================================================
   PAGES LÉGALES
   Mentions légales, confidentialité — même langage que le reste du site,
   pas de nouveau composant : typographie et jetons déjà en place.
   ============================================================ */

.legal { padding: calc(64px + var(--space-9)) 0 var(--space-10); max-width: 720px; }
.legal__crest {
  font-size: var(--t-3xl); font-weight: 500; letter-spacing: var(--tr-tight);
  line-height: var(--lh-snug); margin: 0 0 var(--space-7);
}
.legal h2 {
  font-size: var(--t-md); font-weight: 500; margin: var(--space-8) 0 var(--space-3);
}
.legal h2:first-of-type { margin-top: 0; }
.legal p { font-size: var(--t-base); color: var(--text-2); line-height: 1.7; margin: 0 0 var(--space-3); }
.legal a { color: var(--text-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--border-strong); }
.legal a:hover { color: var(--gd-signal); }

@media (max-width: 720px) {
  .legal { padding: calc(64px + var(--space-7)) 0 var(--space-8); }
  .legal__crest { font-size: var(--t-2xl); }
}

/* ============================================================
   RYTHME MOBILE
   ============================================================
   Le desktop est inchangé : tout est enfermé sous 720 px. Deux causes au
   défilement à vide constatées en mesurant la page à 375 px —
   1. les titres de section restaient à 49 px et se repliaient sur quatre à
      cinq lignes (333 px pour un seul titre) ;
   2. les marges entre blocs gardaient leurs valeurs desktop (96 px).
   On applique donc la même logique que le hero, qui réduit déjà son titre
   en mobile : un cran plus bas dans l'échelle de marque, jamais une valeur
   hors échelle. La respiration entre grandes idées est conservée — ce sont
   les vides internes qui sont resserrés, pas les articulations du récit. */

@media (max-width: 720px) {

  /* Seule retouche apportée au Hero, verrouillé par ailleurs : la composition
     héritait des 24 px de .wrap en mobile, ce qui collait le titre au bord de
     l'écran. On repasse aux 32 px du cadre desktop. Rien d'autre ne bouge —
     ni la vidéo, ni les tailles de texte, ni les temps d'apparition. */
  .hero__composition { padding-left: var(--space-6); padding-right: var(--space-6); }

  /* Les titres descendent d'un cran (49 → 39 px) et reprennent un interligne
     de titre. Ils héritaient de --lh-base (1,7), prévu pour du texte courant :
     à 39 px cela faisait 66 px par ligne, sur des titres qui se replient tous
     en trois ou quatre lignes. */
  .demo__crest,
  .methode__crest,
  .pourquoi__crest,
  .audit__crest,
  .cta__crest { font-size: var(--t-2xl); line-height: var(--lh-snug); }

  /* Idem pour les listes de phrases longues, qui se replient toutes. */
  .methode__lead,
  .pourquoi__line { font-size: var(--t-lg); }

  /* Même correction d'interligne sur les réponses de l'Audit : ce sont des
     affirmations courtes en 25 px, pas des paragraphes. */
  .audit__v { line-height: var(--lh-snug); }

  /* Avant le premier clic, la scène de la Démonstration réservait près de
     400 px de blocs vides — le visiteur traversait un écran entier de rien.
     Sur desktop cette réserve évite un saut de mise en page ; empilée en
     mobile, elle ne fait que creuser un trou. */
  .demo:not(.is-active) .demo__stage { display: none; }

  /* Articulations entre sections : réduites, jamais supprimées. */
  .gap-full { height: 14vh; }
  .gap-half { height: 6vh; }
  .gap-open { height: var(--space-7); }

  /* Le Constat garde son défilement lié, sur une course plus courte. */
  .constat { min-height: 130vh; }

  /* Enveloppes de section. */
  .demo    { padding: var(--space-8) 0; }
  .methode { padding: var(--space-7) 0 var(--space-5); }
  .pourquoi { padding: var(--space-7) 0; }
  .audit   { padding: var(--space-8) 0; }
  .cta     { min-height: 72vh; padding: var(--space-8) 0; }
  .foot    { padding: var(--space-5) 0 var(--space-6); }

  /* Espaces internes : c'est là que se trouvait le plus gros du vide. */
  .demo__meta    { margin-bottom: var(--space-6); }
  .demo__jobs    { margin-bottom: var(--space-6); }
  .demo__idle    { padding: var(--space-4) 0 var(--space-3); }
  .demo__privacy { margin-top: var(--space-6); }

  .methode__lead  { margin-bottom: var(--space-5); }
  .methode__crest { margin-bottom: var(--space-6); }

  .pourquoi__crest { margin-bottom: var(--space-6); }
  .pourquoi__lines { margin-bottom: var(--space-6); }
  .stats    { margin-bottom: var(--space-6); }
  .projects { margin-bottom: var(--space-7); gap: var(--space-4); }
  .proj     { padding: var(--space-4); }
  .founder  { margin-bottom: var(--space-6); }

  /* Les trois lignes de « limites » passent en colonne sous 900 px : le gap
     de 32 px devient alors un écart vertical entre la question et sa réponse,
     ce qui n'était pas son rôle. */
  .limits      { padding-top: var(--space-5); }
  .limits__row { padding: var(--space-3) 0; gap: var(--space-2); }

  .audit__crest { margin-bottom: var(--space-6); }
  .audit__line,
  .tl-step { padding-top: var(--space-3); }

  .cta__crest { margin-top: var(--space-6); }
  .cta__sub   { margin-bottom: var(--space-6); }
}

/* ============================================================
   RYTHME TABLETTE — 721 à 900 px
   ============================================================
   Palier intermédiaire, borné des deux côtés : il ne redescend jamais sur
   le mobile (qui a ses propres valeurs, plus serrées) et ne remonte jamais
   au-delà de 900 px. Volontairement plus léger que le mobile — la taille
   des titres, l'échelle du texte et l'amplitude des articulations sont
   conservées ; seuls l'interligne des titres, les vides d'articulation et
   les enveloppes de section sont resserrés. */

@media (min-width: 721px) and (max-width: 900px) {

  /* Les titres gardent leurs 49 px. Seul l'interligne est corrigé : ils
     héritaient de --lh-base (1,7), soit 83 px par ligne sur des titres qui
     se replient en deux ou trois lignes une fois la page en colonne. */
  .demo__crest,
  .methode__crest,
  .pourquoi__crest,
  .audit__crest,
  .cta__crest { line-height: var(--lh-snug); }

  /* Articulations : environ 18 % plus courtes qu'en desktop, très au-dessus
     des valeurs mobiles (14vh / 6vh). */
  .gap-full { height: 27vh; }
  .gap-half { height: 11.5vh; }
  .gap-open { height: var(--space-8); }

  .constat { min-height: 160vh; }

  /* Enveloppes de section. */
  .demo     { padding: var(--space-8) 0; }
  .methode  { padding: var(--space-7) 0 var(--space-5); }
  .pourquoi { padding: var(--space-7) 0; }
  .audit    { padding: var(--space-8) 0; }
  .cta      { min-height: 78vh; padding: var(--space-8) 0; }

  /* Espaces internes : seuls les plus larges sont repris. */
  .demo__meta     { margin-bottom: var(--space-6); }
  .demo__jobs     { margin-bottom: var(--space-6); }
  .methode__crest { margin-bottom: var(--space-6); }
  .stats          { margin-bottom: var(--space-6); }
  .projects       { margin-bottom: var(--space-7); }
  .founder        { margin-bottom: var(--space-6); }

  /* La réserve de scène n'a plus d'utilité ici : sous 900 px la scène passe
     déjà sur une seule colonne, donc elle ne prévient plus le saut de mise
     en page à deux colonnes qu'elle protège en desktop — elle ne fait que
     rouvrir le vide de 378 px avant le premier clic. */
  .demo:not(.is-active) .demo__stage { display: none; }
}

/* ============================================================
   PAGE — OBTENIR MON AUDIT
   Page dédiée (audit.html / audit-merci.html), même feuille de style que
   la Home : mêmes jetons, mêmes composants .bar/.btn/.wrap/.closing.
   ============================================================ */

.audit-intro { padding: calc(64px + var(--space-9)) 0 var(--space-8); }
.audit-intro__crest {
  font-size: var(--t-4xl); font-weight: 500; letter-spacing: var(--tr-tight);
  line-height: var(--lh-snug); max-width: 18ch; margin: 0 0 var(--space-5);
}
.audit-intro__lead { font-size: var(--t-md); color: var(--text-2); line-height: 1.6; max-width: 56ch; margin: 0; }

.audit-form-wrap { padding: 0 0 var(--space-10); max-width: 640px; }

.form { display: flex; flex-direction: column; gap: var(--space-5); }
.form__honeypot { position: absolute; left: -9999px; top: -9999px; }

.field-group { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: var(--t-sm); color: var(--text-2); }
.field-label__tag {
  font-size: var(--t-xs); letter-spacing: var(--tr-label); text-transform: uppercase;
  color: var(--text-3); margin-left: 6px;
}

.field-input {
  font-family: var(--font); font-size: var(--t-base); color: var(--text-1);
  background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  padding: 13px var(--space-4); width: 100%;
  transition: border-color var(--dur-fast) var(--ease);
}
.field-input::placeholder { color: var(--text-3); }
.field-input:focus {
  outline: 2px solid var(--gd-signal); outline-offset: 2px; border-color: var(--gd-signal);
}
.field-textarea { min-height: 128px; line-height: 1.6; resize: vertical; }

.field-group.has-error .field-input { border-color: var(--sys-danger); }
.field-error {
  font-size: var(--t-xs); color: var(--sys-danger); margin: 0; min-height: 1em;
  display: none;
}
.field-group.has-error .field-error { display: block; }

/* Groupe de cases à cocher : un <fieldset> plutôt qu'un <div>, pour que la
   question reste lisible au lecteur d'écran comme une seule question à
   réponses multiples. Les défauts de navigateur (bordure, min-width) sont
   neutralisés pour retomber sur le même rythme que les autres champs. */
.checkbox-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.checkbox-group legend { padding: 0; width: 100%; }
.checkbox-row { display: flex; flex-direction: column; gap: 12px; }
.checkbox {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--t-base); color: var(--text-1); cursor: pointer;
}
.checkbox input[type="checkbox"] {
  width: 18px; height: 18px; flex-shrink: 0; cursor: pointer;
  accent-color: var(--gd-signal);
}
.checkbox input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--gd-signal); outline-offset: 2px;
}
/* Même logique d'erreur que .form__fail : un filet vertical en couleur
   danger, plutôt qu'une bordure autour de quatre cases indépendantes. */
.checkbox-group.has-error .checkbox-row {
  border-left: 2px solid var(--sys-danger); padding-left: var(--space-4);
}

.form__submit { align-self: flex-start; margin-top: var(--space-2); }
.form__note { font-size: var(--t-xs); color: var(--text-3); margin: 0; max-width: 52ch; }

.exits { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }

.form__fail {
  border-left: 2px solid var(--sys-danger); padding: var(--space-1) 0 var(--space-1) var(--space-5);
  margin-top: var(--space-6);
}
.form__fail-line { font-size: var(--t-base); color: var(--text-1); margin: 0 0 var(--space-4); }

@media (max-width: 720px) {
  .audit-intro { padding: calc(64px + var(--space-7)) 0 var(--space-6); }
  .audit-intro__crest { font-size: var(--t-3xl); }
  .audit-intro__lead { font-size: var(--t-base); }
  .audit-form-wrap { padding-bottom: var(--space-8); }
}