/* ════════════════════════════════════════════════════════════════
   OBSIONIS — feuille de style
   DA « Trajectoire » v3.0. Aucune couleur en dur : tout vient de
   css/tokens.css.

   Deux règles structurent tout ce fichier.

   1. LA DOCTRINE DES DEUX COUCHES. La coque habille, l'instrument
      dit la vérité. Un écran mélange les deux, un composant jamais.
      Concrètement : une carte de la coque a un rayon de 16 px, un
      fond surélevé, une lueur possible ; une carte d'instrument a
      un rayon de 6 px, un fond en creux, aucune lueur, et son
      chiffre est mono, tabulaire, aligné à droite.

   2. LE TRANSFORM APPARTIENT À LOCOMOTIVE. Tout nœud portant un
      `data-scroll-speed` reçoit un `transform` en ligne. Ces nœuds
      ne reçoivent donc JAMAIS de transformation CSS — leurs
      révélations ne jouent que sur l'opacité. Les autres peuvent
      translater.
   ════════════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing:border-box; }

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(.95rem, .3vw + .88rem, 1.06rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior:none;
}

/* Grain : une seule texture, en overlay, au-dessus de tout sauf du
   seuil. Il casse le banding du halo et de la fissure — les deux
   seules nappes de la page. */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:40; pointer-events:none;
  opacity:.28; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img, svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1, h2, h3, p, figure, blockquote, ul, ol, figcaption{ margin:0; }
ul, ol{ list-style:none; padding:0; }
button, input{ font:inherit; color:inherit; }

::selection{ background:var(--accent); color:var(--ink); }

/* Cornflower et non Royal : sur le Vide, Royal tombe à 2,4:1 et un
   anneau de focus qu'on ne voit pas n'est pas un anneau de focus. */
:focus-visible{
  outline:2px solid var(--accent-2);
  outline-offset:3px;
  border-radius:var(--r-sm);
}

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

/* L'instrument, partout où il apparaît : tabulaire, sans exception. */
.mono{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

/* Un montant. Le symbole reste secondaire : le regard tombe sur le
   nombre, pas sur l'unité. Et le signe moins est typographique —
   « − », jamais un trait d'union, jamais des parenthèses. */
.montant{
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  font-weight:400;
  color:var(--ink);          /* un négatif n'est pas une faute :  */
                             /* il ne passe jamais en rouge       */
  text-align:right;
}
.montant i, .unite{
  font-style:normal;
  font-size:.82em;
  color:var(--faint);
}


/* ── Typographie ──────────────────────────────────────────────
   La display est Archivo resserrée (font-stretch 78 %), pas une
   seconde famille. L'accent des titres est en Lavande : 8,0:1 sur
   le Vide, quand Royal n'y est pas lisible.                     */
.titre-2, .hero__titre, .final__titre, .citation blockquote{
  font-family:var(--display);
  font-weight:700;
  font-stretch:78%;
  line-height:.94;
  letter-spacing:-.03em;
  text-wrap:balance;
}
.titre-2{ font-size:clamp(2.2rem, 5.4vw, 4.6rem); }
.titre-2 em, .hero__titre em, .final__titre em, .citation em{
  font-style:normal;
  font-stretch:100%;
  font-weight:400;
  color:var(--lavande);
}

.etiquette{
  display:block;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:var(--s5);
}

.chapo{
  font-size:clamp(1.25rem, 2.2vw, 1.9rem);
  line-height:1.34;
  letter-spacing:-.015em;
  text-wrap:pretty;
}

/* `ch` se mesure sur la fonte de l'élément qui le porte. Posé sur
   l'en-tête — qui hérite du corps à 16 px — `24ch` valait 200 px et
   cassait les titres en colonnes d'un mot. La limite de mesure vit
   donc sur le titre lui-même, où `ch` vaut la chasse du titre. */
.tete-section{ margin-bottom:clamp(3rem, 8vh, 6rem); max-width:52rem; }
.tete-section .titre-2{ max-width:15ch; }
.tete-section__sous{ color:var(--muted); margin-top:var(--s5); max-width:44ch; }


/* ── Boutons ──────────────────────────────────────────────────
   Aucun dégradé sur un bouton, jamais : le dégradé mono-teinte est
   réservé aux fonds immersifs et aux célébrations.              */
.btn{
  display:inline-flex; align-items:center; gap:var(--s2);
  padding:.78rem 1.5rem;
  border-radius:var(--r-pill);
  border:1px solid transparent;
  font-size:.9rem; font-weight:500;
  letter-spacing:-.005em;
  cursor:pointer;
  transition:background var(--t-base) var(--ease),
             color var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease);
}
.btn--sm{ padding:.5rem 1rem; font-size:.82rem; }

/* Usage 1 de la liste fermée du Royal : le CTA principal. Fond
   plein, texte blanc — 7,5:1. */
.btn--plein{
  background:var(--accent);
  color:var(--ink);
  font-weight:500;
}
.btn--plein:hover{
  box-shadow:0 0 0 4px rgba(var(--accent-rgb) / .24),
             0 0 28px rgba(var(--accent-2-rgb) / .22);
}

.btn--ghost{
  border-color:var(--line-2);
  color:var(--ink);
  background:transparent;
}
.btn--ghost:hover{ border-color:var(--accent-2); color:var(--accent-2); }


/* ══════════════════════════════════════════════════════════════
   ÉLÉMENTS FIXES — hors de [data-scroll-container]
   ══════════════════════════════════════════════════════════════ */

/* ── Le seuil ─────────────────────────────────────────────────
   Mise en route du cockpit. La fissure traverse le fond une fois,
   fixe : c'est un décor motivé, pas une boucle d'ambiance.     */
.seuil{
  position:fixed; inset:0; z-index:100;
  background:var(--bg);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:var(--s5);
  transition:opacity var(--t-imm) var(--ease-out), visibility var(--t-imm);
  overflow:hidden;
}
.seuil::before{
  content:""; position:absolute; inset:-30% -20%;
  background:var(--fissure);
  opacity:.7; pointer-events:none;
}
.seuil > *{ position:relative; z-index:1; }
.seuil.est-fini{ opacity:0; visibility:hidden; }
.seuil__row{
  display:flex; align-items:baseline; gap:var(--s4);
  font-family:var(--display); font-stretch:78%; font-weight:700;
  font-size:clamp(2rem, 8vw, 4.2rem);
  letter-spacing:-.04em;
}
/* Le mot « Obsionis » en texte courant est toujours plat : le
   dégradé du wordmark appartient au fichier de marque, il n'est
   jamais recréé en CSS. */
.seuil__mark{ color:var(--ink); }
.seuil__num{
  font-family:var(--mono); font-weight:400;
  font-size:.9rem; color:var(--lavande);
}
.seuil__num::after{ content:"\00A0%"; color:var(--faint); }
.seuil__rail{
  width:min(320px, 60vw); height:2px;
  background:var(--line-2);
  border-radius:var(--r-inst);
  overflow:hidden;
}
/* Usage 2 de la liste fermée : le remplissage d'une progression.
   Plat, jamais dégradé. */
.seuil__rail i{
  display:block; height:100%; width:0;
  background:var(--accent);
  box-shadow:0 0 14px rgba(var(--accent-rgb) / .8);
}
.seuil__legend{
  font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}

/* ── Jauge de progression de page ─────────────────────────────
   Royal sur un rail visible : sur le Vide seul, Royal tombe à
   2,4:1 et la jauge disparaît. */
.jauge{
  position:fixed; top:0; left:0; right:0; height:2px;
  z-index:52; pointer-events:none;
  background:rgba(245,248,253,.06);
}
.jauge i{
  display:block; height:100%; width:100%;
  background:var(--accent);
  box-shadow:0 0 12px rgba(var(--accent-rgb) / .75);
  transform:scaleX(0); transform-origin:0 50%;
}

/* ── Halo de curseur ──────────────────────────────────────────
   Un anneau, comme celui du logo. Le pointeur système est conservé :
   c'est un accompagnement, pas un remplacement. Sa position est
   pilotée en rAF via transform, donc l'état « survol » passe par
   width/height/margin.                                          */
.halo-curseur{
  position:fixed; top:0; left:0; z-index:45;
  width:26px; height:26px; margin:-13px 0 0 -13px;
  border:1px solid var(--line-2);
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  transition:width var(--t-base) var(--ease),
             height var(--t-base) var(--ease),
             margin var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),
             background var(--t-base) var(--ease),
             opacity var(--t-base) linear;
}
.halo-curseur.est-actif{ opacity:1; }
.halo-curseur.est-large{
  width:64px; height:64px; margin:-32px 0 0 -32px;
  border-color:var(--accent-2);
  background:rgba(var(--accent-rgb) / .16);
}
@media (hover:none){ .halo-curseur{ display:none; } }

/* ── Navigation ───────────────────────────────────────────────*/
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--s5);
  padding:var(--s4) var(--pad);
  transition:background var(--t-imm) var(--ease),
             border-color var(--t-imm) var(--ease),
             padding var(--t-imm) var(--ease);
  border-bottom:1px solid transparent;
  isolation:isolate;
}
/* Écran de protection. Le titre du hero passe sous la navigation
   dès le premier pixel de défilement : sans ce dégradé, du blanc
   se superpose à du blanc et le nom de marque devient illisible.
   Il n'apparaît qu'au défilement — au repos le hero reste net. */
.nav::before{
  content:""; position:absolute; inset:-1px 0 -1px 0; z-index:-1;
  background:linear-gradient(to bottom,
    rgb(var(--bg-rgb) / .96) 0%,
    rgb(var(--bg-rgb) / .72) 55%,
    rgb(var(--bg-rgb) / 0) 100%);
  opacity:0; pointer-events:none;
  transition:opacity var(--t-base) var(--ease);
}
.nav.est-posee::before{ opacity:1; }
.nav.est-posee{
  background:var(--glass);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--line);
  padding-top:var(--s3); padding-bottom:var(--s3);
}
.nav__mark{
  display:flex; align-items:center; gap:var(--s3);
  font-family:var(--display); font-stretch:82%; font-weight:700;
  font-size:1.15rem; letter-spacing:-.02em;
  color:var(--ink);          /* wordmark en texte plat, jamais    */
}                            /* un dégradé recréé en CSS          */

/* Le signal : l'anneau du logo, incomplet, coupé sur la diagonale.
   C'est le vocabulaire graphique du symbole, pas le symbole. */
.nav__signal{
  width:14px; height:14px; border-radius:50%;
  border:1.5px solid var(--lavande);
  border-right-color:transparent;   /* l'anneau ne se referme pas */
  transform:rotate(-45deg);         /* la coupure est à 45°       */
  box-shadow:0 0 0 0 rgba(var(--accent-2-rgb) / .6);
  animation:signal 3.2s var(--ease) infinite;
}
@keyframes signal{
  0%   { box-shadow:0 0 0 0 rgba(var(--accent-2-rgb) / .45); }
  70%  { box-shadow:0 0 0 10px rgba(var(--accent-2-rgb) / 0); }
  100% { box-shadow:0 0 0 0 rgba(var(--accent-2-rgb) / 0); }
}

.nav__links{ display:flex; gap:clamp(1rem, 2.2vw, 2.2rem); }
.nav__links a{
  font-size:.84rem; color:var(--muted);
  position:relative; padding-bottom:2px;
  transition:color var(--t-base) var(--ease);
}
/* Usage 3 de la liste fermée : l'indicateur de navigation active. */
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:1.5px; background:var(--accent-2);
  transform:scaleX(0); transform-origin:100% 50%;
  transition:transform var(--t-slow) var(--ease-out);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:0 50%; }

.nav__end{ display:flex; align-items:center; gap:var(--s4); }

.nav__burger{
  display:none;
  width:40px; height:40px;
  background:none; border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  position:relative; cursor:pointer;
}
.nav__burger span:not(.sr-only){
  position:absolute; left:11px; width:18px; height:1px;
  background:var(--ink);
  transition:transform var(--t-base) var(--ease), opacity var(--t-fast);
}
.nav__burger span:not(.sr-only):nth-of-type(1){ top:17px; }
.nav__burger span:not(.sr-only):nth-of-type(2){ top:22px; }
.nav__burger[aria-expanded="true"] span:nth-of-type(1){ transform:translateY(2.5px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-of-type(2){ transform:translateY(-2.5px) rotate(-45deg); }

/* ── Panneau de navigation (mobile) ───────────────────────────*/
.panneau{
  position:fixed; inset:0; z-index:49;
  background:var(--bg);
  display:flex; flex-direction:column;
  justify-content:center; gap:var(--s7);
  padding:var(--s9) var(--pad) var(--s7);
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--t-imm) var(--ease-out);
  overflow:hidden;
}
/* Fond immersif : la fissure, à faible opacité. Le motif n'existe
   qu'ici et sur le seuil — jamais dans la lecture courante. */
.panneau::before{
  content:""; position:absolute; inset:-30% -20%;
  background:var(--fissure);
  opacity:.55; pointer-events:none;
}
.panneau > *{ position:relative; z-index:1; }
.panneau.est-ouvert{ clip-path:inset(0 0 0 0); }
.panneau__links{ display:flex; flex-direction:column; gap:var(--s5); }
.panneau__links a{
  display:flex; align-items:baseline; gap:var(--s4);
  font-family:var(--display); font-stretch:82%; font-weight:700;
  font-size:clamp(1.8rem, 8vw, 2.6rem);
  letter-spacing:-.03em;
  opacity:0; transform:translateY(18px);
  transition:opacity var(--t-imm) var(--ease-out),
             transform var(--t-imm) var(--ease-out);
}
.panneau.est-ouvert .panneau__links a{ opacity:1; transform:none; }
.panneau.est-ouvert .panneau__links a:nth-child(1){ transition-delay:.10s; }
.panneau.est-ouvert .panneau__links a:nth-child(2){ transition-delay:.16s; }
.panneau.est-ouvert .panneau__links a:nth-child(3){ transition-delay:.22s; }
.panneau.est-ouvert .panneau__links a:nth-child(4){ transition-delay:.28s; }
.panneau.est-ouvert .panneau__links a:nth-child(5){ transition-delay:.34s; }
.panneau__links a span{
  font-size:.7rem; font-weight:400; font-stretch:100%;
  color:var(--lavande);
}
.panneau__pied{ font-size:.75rem; color:var(--muted); }


/* ══════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════ */
.s{ position:relative; padding:var(--rythme) var(--pad); }


/* ── Hero ─────────────────────────────────────────────────────*/
/* `justify-content: flex-start` et non `center` : la répartition est
   déjà assurée par le `margin-bottom:auto` du bandeau de méta. Avec
   `center`, un contenu plus haut que la fenêtre déborde des deux
   côtés — et la première ligne passe sous la navigation. */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column;
  justify-content:flex-start;
  /* La réserve du haut doit tenir la navigation (73 px) plus l'air
     nécessaire pour que la parallaxe ne ramène jamais la première
     ligne du titre dedans. */
  padding-top:clamp(7rem, 14vh, 9.5rem);
  padding-bottom:var(--s6);
  overflow:hidden;
}
/* LA FISSURE. Un trait de lumière qui coupe l'écran à 45°, pas une
   ambiance qui flotte. Elle est fixe : le mouvement viendrait la
   transformer en boucle décorative. */
.hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:-30% -20%;
  background:var(--fissure);
  opacity:.9;
}
/* LE HALO. La source de lumière unique de cet écran. Centrée par
   margin-inline, jamais par translate — Locomotive possède le
   transform de ce nœud. */
.hero__lampe{
  position:absolute; z-index:0; pointer-events:none;
  top:-24%; left:0; right:0; margin-inline:auto;
  width:min(1280px, 135vw); aspect-ratio:1.1;
  background:var(--halo);
  filter:blur(18px);
}
.hero__grille{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--whisper) 1px, transparent 1px),
    linear-gradient(to bottom, var(--whisper) 1px, transparent 1px);
  background-size:clamp(64px, 8vw, 108px) clamp(64px, 8vw, 108px);
  mask-image:radial-gradient(ellipse 90% 60% at 50% 30%, #000 10%, transparent 72%);
  -webkit-mask-image:radial-gradient(ellipse 90% 60% at 50% 30%, #000 10%, transparent 72%);
  opacity:.5;
}
/* L'ANNEAU. Incomplet, avec le nœud du logo là où la trajectoire
   croise l'orbite. Un anneau = un cycle. */
.hero__grille::after{
  content:""; position:absolute;
  left:50%; top:4%;
  width:min(760px, 86vw); aspect-ratio:1;
  transform:translateX(-50%);
  border:1px solid rgba(167,155,240,.46);
  border-radius:50%;
  mask-image:conic-gradient(from 205deg, #000 0 72%, transparent 72%);
  -webkit-mask-image:conic-gradient(from 205deg, #000 0 72%, transparent 72%);
}
.hero > *:not(.hero__lampe):not(.hero__grille){ position:relative; z-index:1; }

.hero__meta{
  display:flex; gap:clamp(1rem, 3vw, 2.5rem); flex-wrap:wrap;
  font-size:.74rem; letter-spacing:.05em;
  color:var(--muted);
  margin-bottom:auto;
}
.hero__meta span{ display:flex; align-items:center; gap:var(--s2); }
.pastille{
  width:6px; height:6px; border-radius:50%;
  background:var(--pass);
  animation:pastille 2.6s var(--ease) infinite;
}
@keyframes pastille{ 0%,100%{opacity:1} 50%{opacity:.25} }

/* La taille du titre est bornée par la hauteur autant que par la
   largeur : sur un écran 16:9 court, seule la hauteur décide si la
   ligne d'appel reste au-dessus du pli. */
.hero__titre{
  font-size:clamp(2.6rem, min(10vw, 14.5vh), 9rem);
  margin:clamp(1.2rem, 3.5vh, 2.5rem) 0 clamp(1.75rem, 4.5vh, 3rem);
}
.hero__titre .ligne{ display:block; }
.hero__titre .ligne--decal{ padding-left:clamp(0rem, 12vw, 12rem); }
.hero__titre .ligne--faible{
  font-size:.34em; font-stretch:100%; font-weight:400;
  line-height:1.2; letter-spacing:-.01em;
  color:var(--muted);
  margin-top:clamp(.5rem, 1.6vh, 1rem);
  max-width:34ch;
}

.hero__bas{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(0, 26rem);
  gap:clamp(2rem, 5vw, 5rem);
  align-items:end;
}
.hero__chapo{ color:var(--muted); max-width:42ch; }
.hero__actions{
  display:flex; flex-wrap:wrap; gap:var(--s4);
  margin:var(--s5) 0 var(--s3);
}
.hero__note{ font-size:.72rem; color:var(--muted); }

.hero__cue{
  display:flex; align-items:center; gap:var(--s4);
  margin-top:clamp(1.25rem, 3vh, 2.5rem);
  font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted);
}
.hero__cue i{
  display:block; width:84px; height:1px;
  background:var(--line-2);
  position:relative; overflow:hidden;
}
.hero__cue i::after{
  content:""; position:absolute; inset:0;
  background:var(--accent-2);
  animation:glisse 2.6s var(--ease) infinite;
}
@keyframes glisse{
  0%{ transform:translateX(-100%) } 55%,100%{ transform:translateX(100%) }
}

/* ── Le cockpit du hero ───────────────────────────────────────
   La démonstration littérale de la doctrine : un cadre de coque
   (rayon 16 px, fond surélevé) qui contient un puits d'instrument
   (rayon 3 px, fond en creux) où vivent les chiffres.          */
.convoi{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--e1);
  padding:var(--s4) var(--s5) var(--s5);
  font-size:.82rem;
}
.convoi__tete{
  display:flex; justify-content:space-between; align-items:center;
  font-size:.7rem; color:var(--muted);
  letter-spacing:.06em;
  padding-bottom:var(--s4);
  border-bottom:1px solid var(--line);
}
.convoi__etat{ color:var(--lavande); }
.convoi__etat[data-fini]{ color:var(--pass); }

.convoi__voie{
  display:flex; flex-direction:column;
  margin:var(--s4) 0;
}
.poste{
  display:grid;
  grid-template-columns:2.2rem 1fr auto;
  align-items:center; gap:var(--s3);
  padding:var(--s2) 0;
  color:var(--faint);
  transition:color var(--t-base) var(--ease);
  position:relative;
}
/* La trajectoire entre deux manœuvres : un segment, jamais un trou. */
.poste + .poste::before{
  content:""; position:absolute;
  left:.55rem; top:0; width:1px; height:var(--s2);
  background:var(--line-2);
  transform:translateY(-100%);
}
.poste b{ font-size:.68rem; }
/* Chaque jalon est un anneau qui se remplit. */
.poste i{
  width:10px; height:10px; border-radius:50%;
  border:1.5px solid var(--line-2);
  transition:background var(--t-base) var(--ease),
             border-color var(--t-base) var(--ease),
             box-shadow var(--t-base) var(--ease);
}
.poste.est-actif{ color:var(--ink); }
.poste.est-actif i{
  border-color:var(--accent-2);
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(var(--accent-rgb) / .28);
}
.poste.est-passe{ color:var(--muted); }
.poste.est-passe i{ border-color:var(--pass); background:var(--pass); }

/* Le puits d'instrument. Aucun dégradé n'entre ici, aucune lueur :
   c'est le seul endroit de la carte où un chiffre est écrit. */
.convoi__pied{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s4);
  font-size:.68rem; color:var(--muted);
  background:var(--bg-inst);
  border:1px solid var(--line);
  border-radius:var(--r-inst);
  padding:var(--s3) var(--s4);
}
.convoi__pied b{ color:var(--ink); font-weight:400; }


/* ── Bandeau ──────────────────────────────────────────────────*/
.bandeau{
  padding:clamp(2rem, 5vh, 3.5rem) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.bandeau__rang{
  display:flex; align-items:center; gap:clamp(1.5rem, 3vw, 3rem);
  width:max-content; white-space:nowrap;
  /* Débord à gauche : la dérive horizontale ne doit jamais
     découvrir le bord du bandeau. */
  margin-left:-22vw;
  font-family:var(--display); font-stretch:78%; font-weight:700;
  font-size:clamp(1.8rem, 5vw, 3.6rem);
  letter-spacing:-.03em;
  color:var(--ink);
}
/* Le séparateur est une fissure : une diagonale, en Lavande. */
.bandeau__rang b{
  color:var(--lavande); font-weight:400; font-stretch:100%;
  font-size:.5em;
}


/* ── Manifeste ────────────────────────────────────────────────*/
.manifeste__grille{
  display:grid;
  grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
  gap:clamp(2rem, 6vw, 7rem);
}
.manifeste__sous{
  color:var(--muted); font-size:.94rem;
  margin-top:var(--s5); max-width:32ch;
}
.filet{
  height:1px; background:var(--line-2);
  margin:clamp(2.5rem, 6vh, 4rem) 0;
  transform:scaleX(0); transform-origin:0 50%;
  transition:transform var(--t-imm) var(--ease-out);
}
.filet.is-inview{ transform:scaleX(1); }

/* Mise en lumière : chaque mot part de --faint et rejoint --ink
   quand la ligne franchit la mi-hauteur. */
.lumiere{
  font-size:clamp(1.05rem, 1.5vw, 1.3rem);
  line-height:1.65;
  color:var(--faint);
  max-width:52ch;
}
.lumiere .mot{ transition:color var(--t-slow) var(--ease); }
.lumiere .mot.est-lu{ color:var(--ink); }

.colonnes{
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(2rem, 4vw, 3.5rem);
  margin-top:clamp(3rem, 8vh, 5rem);
}
.colonnes h3{
  font-family:var(--display); font-stretch:88%; font-weight:700;
  font-size:1.18rem; letter-spacing:-.02em;
  margin-bottom:var(--s3);
}
.colonnes p{ color:var(--muted); font-size:.92rem; max-width:36ch; }


/* ══════════════════════════════════════════════════════════════
   LA TRAJECTOIRE — rail horizontal
   ══════════════════════════════════════════════════════════════ */
.rail{ padding-left:0; padding-right:0; }
.rail__pin{
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(1.5rem, 4vh, 3rem);
  padding:var(--s7) 0;
  overflow:hidden;
}
/* Même correction de `ch` que pour .tete-section : le titre du rail
   tombait sur cinq lignes, ce qui poussait les cartes hors du champ. */
.rail__tete{ padding:0 var(--pad); max-width:52rem; }
.rail__tete .titre-2{ max-width:16ch; font-size:clamp(2rem, 4.4vw, 3.6rem); }
.rail__aide{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); margin-top:var(--s5);
  display:flex; align-items:center; gap:var(--s3);
}
.rail__aide::after{
  content:"→"; color:var(--lavande);
  animation:pousse 2.2s var(--ease) infinite;
}
@keyframes pousse{ 0%,100%{transform:translateX(0)} 50%{transform:translateX(6px)} }

.rail__piste{
  display:flex; align-items:stretch;
  gap:clamp(1rem, 2vw, 2rem);
  padding-left:var(--pad);
  width:max-content;
  position:relative;
}
/* La trajectoire elle-même : la ligne qui porte les segments. */
.rail__ligne{
  position:absolute; left:0; right:0; top:50%;
  height:1px; background:var(--line);
}

/* Carte de coque : rayon généreux, fond surélevé, lueur possible. */
.poste-carte{
  position:relative; isolation:isolate;
  width:clamp(260px, 30vw, 420px);
  display:flex; flex-direction:column; gap:var(--s4);
  padding:var(--s6);
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--e1);
  transition:border-color var(--t-slow) var(--ease),
             box-shadow var(--t-slow) var(--ease);
  /* Garde-fou : rien de ce qui dérive à l'intérieur ne sort. */
  overflow:hidden;
}
.poste-carte__num{
  font-size:.72rem; letter-spacing:.18em;
  color:var(--lavande);
}
.poste-carte h3{
  font-family:var(--display); font-stretch:82%; font-weight:700;
  font-size:clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing:-.03em; line-height:1;
}
.poste-carte p{ color:var(--muted); font-size:.92rem; }

/* Jalon atteint : la carte prend une lueur de bord discrète — état
   actif seulement, jamais neutre — et le dégradé mono-teinte la
   balaie une fois, 400 ms. C'est la célébration de la DA, à la
   lettre : Royal plat sur le segment, puis un balayage bref. */
.poste-carte__fond{
  position:absolute; inset:-15%; z-index:-1;
  background:var(--g-violet);
  opacity:0;
}
.poste-carte.est-visee{
  border-color:rgba(167,155,240,.30);
  box-shadow:var(--e1), var(--lueur);
}
.poste-carte.est-visee .poste-carte__fond{
  animation:balayage var(--t-slow) var(--ease-out) 1;
}
@keyframes balayage{
  0%   { opacity:0;   transform:translate3d(-40%, 12%, 0); }
  45%  { opacity:.45; }
  100% { opacity:0;   transform:translate3d(40%, -12%, 0); }
}
.poste-carte--fin{ justify-content:space-between; }
.poste-carte--fin .btn{ align-self:flex-start; margin-top:var(--s3); }

.menu{
  display:flex; flex-direction:column; gap:var(--s2);
  font-size:.75rem; color:var(--muted);
  margin-top:auto;
  padding-top:var(--s4);
  border-top:1px solid var(--line);
}
.menu li{ display:flex; align-items:center; gap:var(--s3); }
.p{ width:6px; height:6px; border-radius:50%; flex:none; }
.p--ok{ background:var(--pass); }
.p--warn{ background:var(--warn); }    /* seuil approché — jamais  */
.p--fail{ background:var(--fail); }    /* erreur d'application     */
.p--run{ background:var(--accent-2); animation:pastille 1.6s var(--ease) infinite; }

/* Usage 2 de la liste fermée : la progression d'une trajectoire. */
.rail__jauge{
  margin:0 var(--pad);
  height:2px; background:var(--line-2);
  border-radius:var(--r-inst);
  overflow:hidden;
}
.rail__jauge i{
  display:block; height:100%; width:100%;
  background:var(--accent);
  box-shadow:0 0 12px rgba(var(--accent-rgb) / .7);
  transform:scaleX(0); transform-origin:0 50%;
}


/* ══════════════════════════════════════════════════════════════
   L'INSTRUMENT
   Ici, la coque s'arrête. Fond en creux, rayons de 6 px, aucun
   dégradé, aucune lueur, chiffres alignés à droite.
   ══════════════════════════════════════════════════════════════ */
.instrument__grille{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(1rem, 2vw, 1.75rem);
}
.carte{
  background:var(--bg-inst);
  border:1px solid var(--line);
  border-radius:var(--r-inst-lg);
  padding:var(--s6);
  display:flex; flex-direction:column; gap:var(--s5);
}
.carte--large{ grid-column:span 2; }
/* Un titre de carte peut être en Archivo ; le chiffre juste en
   dessous est impérativement en mono. Le mélange dans un même bloc
   est la règle, pas l'exception. */
.carte figcaption h3{
  font-family:var(--display); font-stretch:86%; font-weight:700;
  font-size:clamp(1.25rem, 1.9vw, 1.7rem);
  letter-spacing:-.025em; line-height:1.05;
}
.carte figcaption p{
  color:var(--muted); font-size:.82rem;
  margin-top:var(--s3); max-width:46ch;
}
.carte figcaption .etiquette{ margin-bottom:var(--s3); }
.carte .graph{ margin-top:auto; }

.carte--chiffre{
  justify-content:center; align-items:flex-end;
  gap:var(--s3); text-align:right;
}
.carte--chiffre b{
  font-family:var(--mono); font-weight:500;
  font-variant-numeric:tabular-nums;
  font-size:clamp(2.4rem, 4.4vw, 3.4rem);
  line-height:1; letter-spacing:-.04em;
  color:var(--ink);
}
/* L'unité reste secondaire : le regard tombe sur le nombre. */
.carte--chiffre b::after{ content:"\00A0%"; font-size:.4em; color:var(--faint); }
.carte--chiffre span{ color:var(--muted); font-size:.9rem; max-width:24ch; }
.carte--chiffre p{ font-size:.72rem; color:var(--faint); }

/* Graphiques : tracés en SVG à partir de vraies séries.
   Le tableau de données existe pour les lecteurs d'écran.
   Les marques de données sont en Cornflower et Lavande : Royal
   n'est pas lisible sur le fond d'instrument. */
.graph svg{ width:100%; height:auto; overflow:visible; }
.graph .axe{ stroke:var(--line-2); stroke-width:1; }
.graph .repere{ fill:var(--faint); font-family:var(--mono); font-size:9px; }
.graph .barre{ fill:rgba(245,248,253,.16); transition:fill var(--t-inst) var(--ease); }
.graph .barre--haut{ fill:var(--accent-2); }
.graph .courbe{
  fill:none; stroke:var(--accent-2); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
}
.graph .point{ fill:var(--bg-inst); stroke:var(--lavande); stroke-width:1.4; }
.graph .zone-mediane{ stroke:var(--line-2); stroke-dasharray:2 4; }

/* ── Jalons ───────────────────────────────────────────────────
   Alignés à droite, comme tout chiffre. Ce sont des mesures, pas
   des montants : aucun euro ne s'anime sur cette page.         */
.jalons{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(1.5rem, 3vw, 3rem);
  margin-top:clamp(3rem, 8vh, 5rem);
  padding-top:clamp(2.5rem, 6vh, 4rem);
  border-top:1px solid var(--line);
}
.jalon{
  display:flex; flex-direction:column; align-items:flex-end;
  text-align:right;
}
.jalon b{
  display:block;
  font-family:var(--mono); font-weight:400;
  font-variant-numeric:tabular-nums;
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:1; letter-spacing:-.05em;
}
.jalon span{
  display:block; margin-top:var(--s3);
  font-size:.74rem; letter-spacing:.08em;
  color:var(--muted); max-width:20ch;
}


/* ── Mosaïque de fonctions ────────────────────────────────────*/
.mosaique{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.tuile{
  position:relative; isolation:isolate;
  background:var(--bg);
  padding:clamp(1.75rem, 3vw, 2.75rem);
  display:flex; flex-direction:column; gap:var(--s3);
  min-height:15rem;
  overflow:hidden;
  transition:background var(--t-base) var(--ease);
}
.tuile__num{
  font-size:.7rem; letter-spacing:.2em;
  color:var(--faint);
  transition:color var(--t-base) var(--ease);
}
.tuile h3{
  font-family:var(--display); font-stretch:86%; font-weight:700;
  font-size:1.25rem; letter-spacing:-.025em;
  margin-top:auto;
}
.tuile p{ color:var(--muted); font-size:.88rem; max-width:34ch; }
/* La fissure traverse la tuile en diagonale, 400 ms — le plafond
   de la micro-célébration. Une seule couche, pas de nappe. */
.tuile__masque{
  position:absolute; inset:-25%; z-index:-1;
  background:var(--fissure);
  opacity:0; transform:translate3d(-45%, 14%, 0);
  transition:transform var(--t-slow) var(--ease-out),
             opacity var(--t-slow) var(--ease-out);
}
.tuile:hover, .tuile:focus-within{ background:var(--bg-2); }
.tuile:hover .tuile__masque,
.tuile:focus-within .tuile__masque{ opacity:1; transform:translate3d(0,0,0); }
.tuile:hover .tuile__num,
.tuile:focus-within .tuile__num{ color:var(--lavande); }


/* ── La coupure ───────────────────────────────────────────────
   Aucune ambiance, aucune fissure, aucune parallaxe, aucune
   animation. C'est la seule section qui ne bouge pas — et c'est
   celle où sont écrits les garde-fous. Le silence visuel est le
   message. */
.coupure{
  background:var(--bg-cut);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.coupure__corps{ max-width:58ch; }
.coupure__liste{
  display:flex; flex-direction:column; gap:var(--s5);
  font-size:clamp(1.15rem, 2vw, 1.6rem);
  line-height:1.35; letter-spacing:-.015em;
}
.coupure__liste li{
  padding-left:var(--s6);
  position:relative;
}
.coupure__liste li::before{
  content:"—"; position:absolute; left:0;
  color:var(--faint);
}
.coupure__note{
  margin-top:clamp(2.5rem, 6vh, 4rem);
  padding-top:var(--s5);
  border-top:1px solid var(--line);
  color:var(--muted); font-size:.92rem; max-width:50ch;
}


/* ── Citation ─────────────────────────────────────────────────*/
.citation{
  text-align:center;
  padding-top:clamp(7rem, 18vh, 13rem);
  padding-bottom:clamp(7rem, 18vh, 13rem);
  overflow:hidden;
}
.citation__signe{
  font-family:var(--display); font-weight:700;
  font-size:clamp(9rem, 24vw, 22rem);
  line-height:.55; color:var(--whisper);
  pointer-events:none;
  margin-bottom:-.1em;
}
.citation blockquote{
  font-size:clamp(1.7rem, 5vw, 4rem);
  max-width:18ch; margin:0 auto;
  position:relative; z-index:1;
}
.citation__source{
  display:block; margin-top:clamp(2rem, 5vh, 3rem);
  font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
}


/* ── Tarifs ───────────────────────────────────────────────────*/
.offres{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(1rem, 2vw, 1.75rem);
  align-items:start;
}
.offre{
  position:relative; isolation:isolate;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s6);
  display:flex; flex-direction:column; gap:var(--s4);
  box-shadow:var(--e1);
  overflow:hidden;
}
/* Un seul objet éclairé par écran : c'est celui-ci. Le dégradé
   mono-teinte est admis ici — c'est une carte hero — mais il ne
   touche jamais le prix, qui vit dans son propre puits. */
.offre--phare{
  background:var(--bg-3);
  border-color:rgba(167,155,240,.32);
  box-shadow:var(--e2), var(--glow);
}
/* Opacité plafonnée à .22 : le dégradé passe derrière le texte de
   la carte, et sa borne claire (#7C8CFF) ferait tomber --muted à
   4,7:1 au bas de la carte. À .22, le pire cas remonte à 5,2:1. */
.offre--phare::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:var(--g-violet);
  opacity:.22;
}
/* Usage 4 de la liste fermée : le badge de jalon. */
.offre__badge{
  position:absolute; top:0; right:var(--s6);
  transform:translateY(-50%);
  background:var(--accent); color:var(--ink);
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.3rem .7rem; border-radius:var(--r-pill);
}
.offre h3{
  font-family:var(--display); font-stretch:82%; font-weight:700;
  font-size:1.6rem; letter-spacing:-.03em;
}
.offre__pour{ color:var(--muted); font-size:.8rem; margin-top:calc(var(--s3) * -1); }
/* Le puits de l'instrument, dans un cadre de coque. Le montant est
   aligné à droite, le symbole reste secondaire, et rien de la
   couche jeu n'entre dans ce rectangle. */
.offre__prix{
  display:flex; align-items:baseline; justify-content:flex-end;
  gap:var(--s2);
  background:var(--bg-inst);
  border:1px solid var(--line);
  border-radius:var(--r-inst);
  padding:var(--s4) var(--s5);
}
.offre__prix b{
  font-family:var(--mono); font-weight:500;
  font-variant-numeric:tabular-nums;
  font-size:clamp(2rem, 3.4vw, 2.8rem);
  line-height:1; letter-spacing:-.04em;
}
.offre__prix span{ color:var(--faint); font-size:.82rem; }
.offre ul{ display:flex; flex-direction:column; gap:var(--s3); flex:1; }
.offre li{
  font-size:.88rem; color:var(--muted);
  padding-left:var(--s5); position:relative;
}
.offre li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:1px; background:var(--lavande);
}
.offre .btn{ justify-content:center; margin-top:var(--s3); }

.tarifs__note{
  margin-top:clamp(2rem, 5vh, 3rem);
  font-size:.72rem; color:var(--muted); max-width:64ch;
}


/* ── Appel final ──────────────────────────────────────────────*/
.final{ overflow:hidden; border-top:1px solid var(--line); }
/* Un seul halo sur cet écran, et pas de fissure : deux sources et
   la profondeur s'effondre en tapisserie. */
.final__lampe{
  position:absolute; z-index:0; pointer-events:none;
  bottom:-40%; left:0; right:0; margin-inline:auto;
  width:min(1200px, 130vw); aspect-ratio:1;
  background:var(--halo);
  filter:blur(20px); opacity:.8;
}
.final > *:not(.final__lampe){ position:relative; z-index:1; }
.final__titre{
  font-size:clamp(2.4rem, 8vw, 7rem);
  margin-bottom:clamp(2.5rem, 6vh, 4rem);
}

.form{ max-width:34rem; }
.form__champ{
  display:flex; gap:var(--s3);
  background:var(--bg-2);
  border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  padding:var(--s2);
  transition:border-color var(--t-base) var(--ease);
}
.form__champ:focus-within{ border-color:var(--accent-2); }
.form input{
  flex:1; min-width:0;
  background:none; border:0; outline:none;
  padding:0 var(--s5);
  font-size:.94rem;
}
.form input::placeholder{ color:var(--faint); }
.form__etat{
  min-height:1.4em; margin-top:var(--s3); padding-left:var(--s5);
  font-size:.74rem; color:var(--muted);
}
.form__etat[data-ok]{ color:var(--pass); }
/* Rouge : erreur de saisie. C'est le seul emploi autorisé. */
.form__etat[data-ko]{ color:var(--fail); }

.pied{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:var(--s6);
  margin-top:clamp(5rem, 14vh, 9rem);
  padding-top:clamp(2.5rem, 6vh, 4rem);
  border-top:1px solid var(--line);
}
.pied__col > span{
  display:block; margin-bottom:var(--s4);
  font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted);
}
.pied__col p{ font-size:.88rem; line-height:1.8; color:var(--muted); }
.pied__col a:hover{ color:var(--accent-2); }
.pied__col--fin{ text-align:right; }
.pied__haut{
  background:none; border:1px solid var(--line-2);
  border-radius:var(--r-pill);
  padding:.5rem 1rem; font-size:.8rem;
  cursor:pointer; margin-bottom:var(--s4);
  transition:border-color var(--t-base) var(--ease),
             color var(--t-base) var(--ease);
}
.pied__haut:hover{ border-color:var(--accent-2); color:var(--accent-2); }
.pied__col--fin p{ font-size:.72rem; color:var(--faint); }


/* ══════════════════════════════════════════════════════════════
   RÉVÉLATIONS
   Plafonnées à 600 ms — la transition immersive de la DA. Au-delà,
   ça ralentit la lecture.
   ══════════════════════════════════════════════════════════════ */

/* Découpe en mots : chaque mot est un masque + un <i> qui remonte.
   L'index sert de retard en cascade. */
.mot-masque{
  display:inline-block; overflow:hidden;
  vertical-align:top;
  /* Réserve la place des diacritiques : overflow:hidden sur une
     interligne < 1 rogne l'accent des capitales. */
  padding-top:.14em; margin-top:-.14em;
  padding-bottom:.08em;
}
.mot-masque > i{
  display:inline-block; font-style:inherit;
  transform:translateY(110%);
  transition:transform var(--t-imm) var(--ease-out);
  transition-delay:calc(var(--i) * .04s);
}
.is-inview .mot-masque > i{ transform:translateY(0); }

/* Nœuds porteurs d'un data-scroll-speed : opacité seule.
   Toute transformation CSS y serait écrasée par Locomotive. */
.hero__chapo, .colonnes article, .citation__source, .convoi{
  opacity:0;
  transition:opacity var(--t-imm) var(--ease-out);
}
.hero__chapo.is-inview, .colonnes article.is-inview,
.citation__source.is-inview, .convoi.is-inview{ opacity:1; }
/* La colonne du hero contient le chapô : elle est révélée par son
   propre parent, pas deux fois. */
.hero__col{ opacity:0; transition:opacity var(--t-imm) var(--ease-out); }
.hero__col.is-inview{ opacity:1; }
.hero__col .hero__chapo{ opacity:1; }

/* Nœuds sans parallaxe : translation + opacité. */
.etiquette, .carte, .offre, .tarifs__note{
  opacity:0; transform:translateY(26px);
  transition:opacity var(--t-imm) var(--ease-out),
             transform var(--t-imm) var(--ease-out);
}
.etiquette.is-inview, .carte.is-inview,
.offre.is-inview, .tarifs__note.is-inview{ opacity:1; transform:none; }

.jalon{ opacity:0; transform:translateY(26px);
  transition:opacity var(--t-imm) var(--ease-out),
             transform var(--t-imm) var(--ease-out); }
.jalons.is-inview .jalon{ opacity:1; transform:none; }
.jalons.is-inview .jalon:nth-child(2){ transition-delay:.08s; }
.jalons.is-inview .jalon:nth-child(3){ transition-delay:.16s; }
.jalons.is-inview .jalon:nth-child(4){ transition-delay:.24s; }

/* Seule révélation à porter un rebond : la mosaïque est de la
   coque pure — aucun chiffre dedans. L'élan est interdit partout
   où un montant est écrit. */
.tuile{ opacity:0; transform:translateY(26px); }
.tuile.est-entree{
  opacity:1; transform:none;
  transition:opacity var(--t-imm) var(--ease-out),
             transform var(--t-imm) var(--ease-elan),
             background var(--t-base) var(--ease);
}


/* ══════════════════════════════════════════════════════════════
   ADAPTATIONS
   ══════════════════════════════════════════════════════════════ */
@media (max-width:1080px){
  .instrument__grille{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .carte--large{ grid-column:span 2; }
  .mosaique{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .offres{ grid-template-columns:1fr; max-width:34rem; }
  .offre--phare{ order:-1; }
}

/* Sous 820 px : le rail n'est pas pinné et se remet en pile.
   La composition n'est pas la version desktop rétrécie. */
@media (max-width:820px){
  .hero__bas{ grid-template-columns:1fr; }
  .hero__titre .ligne--decal{ padding-left:0; }
  .manifeste__grille{ grid-template-columns:1fr; }
  .colonnes{ grid-template-columns:1fr; }

  .rail{ padding-left:var(--pad); padding-right:var(--pad); }
  .rail__pin{ min-height:0; padding:0; overflow:visible; }
  .rail__tete{ padding:0; }
  .rail__aide{ display:none; }
  .rail__piste{
    flex-direction:column; width:auto; padding-left:0;
    gap:var(--s4);
  }
  .rail__ligne, .rail__jauge{ display:none; }
  .poste-carte{ width:auto; }
  .menu{ margin-top:var(--s4); }

  .jalons{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pied{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pied__col--fin{ text-align:left; }
}

@media (max-width:640px){
  .nav__links{ display:none; }
  .nav__end .btn{ display:none; }
  .nav__burger{ display:block; }
  .instrument__grille{ grid-template-columns:1fr; }
  .carte--large{ grid-column:span 1; }
  .mosaique{ grid-template-columns:1fr; }
  .form__champ{ flex-direction:column; border-radius:var(--r-lg); padding:var(--s4); }
  .form input{ padding:var(--s3) var(--s2); }
  .form .btn{ justify-content:center; }
  .hero__meta{ flex-direction:column; gap:var(--s2); }
  .convoi__pied{ flex-direction:column; gap:var(--s2); align-items:stretch; }
  /* Le repère de défilement disparaît : sur un écran de téléphone
     la suite du contenu est déjà visible sous le pli, et le repère
     ne fait que repousser le cockpit hors de l'écran. */
  .hero__cue{ display:none; }
}


/* ══════════════════════════════════════════════════════════════
   DÉGRADATIONS
   ══════════════════════════════════════════════════════════════ */

/* Le rail en pile : le même état que sous 820 px, appliqué chaque
   fois que GSAP ne prend pas la main sur la piste — mouvement
   réduit, absence de JavaScript. Sans cette bascule, la piste
   resterait en ligne, plus large que la fenêtre et coupée par
   l'`overflow:hidden` du bloc épinglé. */
.est-calme .rail, .no-js .rail{ padding-left:var(--pad); padding-right:var(--pad); }
.est-calme .rail__pin, .no-js .rail__pin{ min-height:0; padding:0; overflow:visible; }
.est-calme .rail__tete, .no-js .rail__tete{ padding:0; }
.est-calme .rail__aide, .no-js .rail__aide,
.est-calme .rail__ligne, .no-js .rail__ligne,
.est-calme .rail__jauge, .no-js .rail__jauge{ display:none; }
.est-calme .rail__piste, .no-js .rail__piste{
  flex-direction:column; width:auto; padding-left:0; gap:var(--s4);
}
.est-calme .poste-carte, .no-js .poste-carte{ width:auto; }

/* Sans JavaScript : tout le contenu reste en flux normal. Le seuil
   ne doit pas rester posé devant une page qu'il ne libérera jamais. */
.no-js .seuil{ display:none; }
.no-js .mot-masque > i{ transform:none; }
.no-js .hero__chapo, .no-js .hero__col, .no-js .colonnes article,
.no-js .citation__source, .no-js .convoi, .no-js .etiquette,
.no-js .carte, .no-js .offre, .no-js .tarifs__note, .no-js .jalon,
.no-js .tuile{ opacity:1; transform:none; }
.no-js .filet{ transform:scaleX(1); }
.no-js .lumiere{ color:var(--ink); }

/* Mouvement réduit : les boucles d'ambiance sont coupées, les
   révélations deviennent des états finaux. Ce n'est pas une option —
   c'est ce qui rend la page utilisable pour quelqu'un que le
   défilement lissé rend malade.

   Règle de la DA appliquée telle quelle : une animation de
   célébration devient un simple changement d'état visuel, jamais
   une suppression silencieuse. L'information de réussite — la
   lueur de bord de .est-visee, la pastille verte d'un défi réussi —
   reste présente. Seul le mouvement disparaît. */
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .mot-masque > i{ transform:none; }
  .hero__chapo, .hero__col, .colonnes article, .citation__source,
  .convoi, .etiquette, .carte, .offre, .tarifs__note, .jalon, .tuile{
    opacity:1 !important; transform:none !important;
  }
  .filet{ transform:scaleX(1); }
  .lumiere{ color:var(--ink); }
  .lumiere .mot{ color:inherit; }
  .hero__cue i::after, .rail__aide::after{ display:none; }
  /* Le balayage de célébration disparaît ; la lueur de bord reste. */
  .poste-carte__fond{ display:none; }

  /* Filet de sécurité en CSS seul : même si le drapeau .est-calme
     n'était pas posé, la piste ne doit jamais rester en ligne. */
  .rail{ padding-left:var(--pad); padding-right:var(--pad); }
  .rail__pin{ min-height:0; padding:0; overflow:visible; }
  .rail__tete{ padding:0; }
  .rail__aide, .rail__ligne, .rail__jauge{ display:none; }
  .rail__piste{ flex-direction:column; width:auto; padding-left:0; gap:var(--s4); }
  .poste-carte{ width:auto; }
}

/* Transparence réduite : le verre de la nav devient opaque. */
@media (prefers-reduced-transparency:reduce){
  .nav.est-posee{
    background:var(--bg);
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
}

/* Couleurs forcées : on rend les traits au système et on retire
   les nappes — halo, fissure, anneau — qui ne sont plus lisibles. */
@media (forced-colors:active){
  .hero__lampe, .final__lampe, .hero__grille, .hero::before,
  .seuil::before, .panneau::before, .offre--phare::before,
  .poste-carte__fond, .tuile__masque{ display:none; }
  .carte, .offre, .poste-carte, .tuile, .convoi,
  .convoi__pied, .offre__prix{ border:1px solid CanvasText; }
  body::after{ display:none; }
}