/* =========================================================
   Ecurya — Landing page
   Design tokens distilled from the app design system
   (Figma slmXJB9LRbMv9S10wzACE1 / lib/core/design_system/tokens.dart)
   ========================================================= */

@font-face {
  font-family: "Geologica";
  src: url("../assets/fonts/Geologica-Variable.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Neutral scale — brand is a shade of black */
  --ink: #111111;
  --ink-2: #1E1E1E;
  --ink-3: #2C2C2C;
  --g700: #383838;
  --g600: #444444;   /* Gray/600 (brandMedium) : secondaire sur fond gris, 8,9:1 */
  --g500: #757575;
  --g400: #B3B3B3;
  --g300: #D9D9D9;
  --g200: #E6E6E6;
  --g100: #F5F5F5;
  --white: #FFFFFF;

  /* Accents */
  --blue: #3F81EA;
  --blue-bg: #F1F6FD;
  --green: #14AE5C;
  --green-bg: #EBFFEE;       /* Alert/Positive/Background */
  --green-text: #009951;     /* Common/Text color/text-green */
  --yellow: #E5A000;
  --red: #EC221F;
  --red-bg: #FEE9E7;         /* Alert/Negative/Background */
  --red-text: #C00F0C;
  --green-700: #008043;      /* Green/700 des primitives : texte vert lisible (4,8:1 sur green-bg) */

  /* Rôles de surface. Règle de contraste : le gris secondaire (--g500,
     4,6:1 sur blanc) ne se pose que sur du blanc, jamais sur --surface
     (4,2:1). Les sections grises portent donc des cartes blanches. */
  --surface: var(--g100);
  --text-2: var(--g500);
  --focus: var(--blue);
  /* Ombre portée unique de l'app (DESIGN.md, EcuryaShadows.dropShadow) */
  --shadow: 0 4px 24px rgba(0, 0, 0, .07);

  /* Radius */
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-3xl: 32px;
  --r-pill: 999px;

  /* Type */
  --font: "Geologica", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;

  /* Échelle typographique fluide (Geologica seule, comme l'app) */
  /* Le titre du hero suit aussi la hauteur d'écran : sur un écran bas, il
     rétrécit pour laisser voir l'app sous le formulaire. */
  --fs-display: clamp(44px, min(7.4vw, 10.5vh), 104px);
  --fs-h2: clamp(34px, 4.6vw, 60px);
  --fs-h3: clamp(20px, 1.8vw, 24px);
  --fs-lead: clamp(17px, 1.4vw, 20px);

  /* Motion : entrées sobres, micro-interactions courtes */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur: .8s;
  --dur-in: .65s;
  --dur-micro: .2s;
  --stagger: 70ms;

  --container: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --nav-h: 64px;

  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p { margin: 0; }
::selection { background: var(--ink); color: var(--white); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 1000; padding: 10px 16px; background: var(--ink); color: var(--white); border-radius: var(--r-pill); }
.skip:focus { top: 16px; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.container--narrow { max-width: 820px; }

/* Anneau de focus unique pour tout ce qui est interactif (bleu accent :
   3,8:1 sur blanc, 5:1 sur noir). */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
a, button, summary { -webkit-tap-highlight-color: transparent; }

/* ---------- Type ---------- */
.h2 {
  font-size: var(--fs-h2);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.h2--xl { font-size: clamp(38px, 6vw, 76px); }
.h3 {
  font-size: var(--fs-h3);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--text-2);
  max-width: 60ch;
  text-wrap: pretty;
}
.lead--light { color: var(--g400); }

/* Petit libellé au-dessus des titres de section (« 01 », catégorie…). */
.kicker { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.section--dark .kicker { color: var(--g400); }

.section { padding-block: clamp(80px, 10vw, 144px); }
.section--dark { background: var(--ink); color: var(--white); }
.section--grey { background: var(--surface); }
/* Texte secondaire posé directement sur le gris : --g600, pas --g500. */
.section--grey .section__head .lead { color: var(--g600); }
.section__head { text-align: center; margin-bottom: clamp(40px, 5.5vw, 80px); display: grid; justify-items: center; gap: 20px; }
.section__head--left { text-align: left; justify-items: start; }

/* Carte de base : blanche, ombre unique de l'app (voir --shadow). */
.surface { background: var(--white); border-radius: var(--r-3xl); box-shadow: var(--shadow); }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px;
  border-radius: var(--r-pill);
  font-weight: 600; font-size: 15px; line-height: 1;
  transition: transform .5s var(--ease-out), background-color var(--dur-micro), color var(--dur-micro), box-shadow var(--dur-micro);
  white-space: nowrap;
}
.btn:active { transform: scale(.98); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 14px; }
.btn--lg { height: 56px; padding: 0 28px; font-size: 16px; }
.btn--primary { background: var(--ink); color: var(--white); }
.btn--primary:hover { background: var(--ink-3); }
.btn--light { background: var(--white); color: var(--ink); }
.btn--light:hover { background: var(--g200); }
.btn--ghost { color: var(--ink); background: transparent; }
.btn--ghost:hover { background: rgba(17,17,17,.05); }
.btn--ghost .arrow { display: inline-block; transition: transform .4s var(--ease-out); }
.btn--ghost:hover .arrow { transform: translateY(3px); }

/* Bouton en attente : le libellé s'efface sur place (la largeur ne bouge pas)
   et un spinner prend le relais le temps de la requête. */
.btn__spinner {
  display: none;
  position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: btn-spin .7s linear infinite;
}
.btn.is-loading { cursor: progress; }
.btn.is-loading .btn__label { opacity: 0; }
.btn.is-loading .btn__spinner { display: block; }
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn__spinner { animation-duration: 1.6s; } }

/* ---------- Alert (Design System Library, node 1:47905) ---------- */
.alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px; border-radius: var(--r-xl);
  width: 100%; text-align: left;
  font-size: 15px; font-weight: 500; line-height: 20px; letter-spacing: 0;
}
.alert[hidden] { display: none; }
.alert__icon {
  flex: none; width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 2.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.alert__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* Texte vert du design system (#009951) à 3,5:1 sur son fond : on prend le
   cran au-dessus de la même rampe pour passer l'AA. */
.alert--positive { background: var(--green-bg); color: var(--green-700); }
.alert--negative { background: var(--red-bg); color: var(--red-text); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--nav-h);
  transition: background-color .4s, box-shadow .4s, transform .5s var(--ease-out);
}
.nav.is-scrolled {
  background: rgba(255,255,255,.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: inset 0 -1px 0 rgba(17,17,17,.08);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner {
  width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto;
  height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand__mark { width: 28px; height: 28px; fill: currentColor; }
.brand__word { font-weight: 800; letter-spacing: .12em; font-size: 15px; }
.nav__links { display: flex; gap: 32px; font-size: 14px; font-weight: 500; color: var(--g500); }
.nav__links a { position: relative; transition: color var(--dur-micro); padding: 12px 0; }
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1.5px;
  background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__actions { display: flex; align-items: center; gap: 12px; }
.nav__burger { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; border-radius: 50%; }
.nav__burger span { position: absolute; left: 50%; top: 50%; width: 18px; height: 1.5px; margin: -0.75px 0 0 -9px; background: var(--ink); transition: transform .45s var(--ease-out); }
.nav__burger span:first-child { transform: translateY(-4px); }
.nav__burger span:last-child { transform: translateY(4px); }
.nav__burger[aria-expanded="true"] span:first-child { transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: rotate(-45deg); }
.nav.is-open { background: var(--white); box-shadow: none; }
.mobile-menu {
  position: absolute; top: var(--nav-h); left: 0; right: 0;
  padding: 12px var(--gutter) 28px; display: grid; gap: 4px; align-content: start;
  background: var(--white);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.2), inset 0 1px 0 var(--g200);
  min-height: calc(100vh - var(--nav-h));
  animation: menuIn .4s var(--ease-out);
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a:not(.btn) { padding: 14px 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em; border-bottom: 1px solid var(--g200); }
.mobile-menu a:focus-visible { outline-offset: -2px; border-radius: 4px; }
.mobile-menu .btn { margin-top: 16px; }
@keyframes menuIn { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Hero ---------- */
.hero { position: relative; padding-top: calc(var(--nav-h) + clamp(12px, 2.5vh, 32px)); overflow: clip; }
.hero__inner { text-align: center; display: grid; justify-items: center; gap: clamp(16px, 2.4vh, 24px); position: relative; z-index: 2; }
.hero__form { margin-top: 4px; }

/* L'écran Home sous le formulaire, rogné à --crop de sa hauteur et fondu en
   bas : on voit l'app dès l'arrivée sans allonger le hero d'un téléphone
   entier. L'échelle --s est fixe ici (pas de fitPhone). */
.hero__device {
  --s: .74;
  --crop: .6;
  position: relative; z-index: 1;
  display: flex; justify-content: center;
  height: calc(868px * var(--s) * var(--crop));
  margin-top: clamp(28px, 4vh, 48px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
          mask-image: linear-gradient(#000 55%, transparent);
}
.hero__device .phone-frame { --s: inherit; flex: none; }
/* Au chargement, pas au scroll : il ne dépasse parfois que de quelques
   dizaines de pixels sous la ligne de flottaison. */
.hero__device .phone { animation: deviceIn 1s var(--ease-out) .45s both; }
@keyframes deviceIn { from { opacity: 0; transform: translateY(56px) scale(var(--s)); } }

/* ---------- Hero: passage de la voiture (vue de dessus) ---------- */
/* La voiture traverse la bande d'un bord à l'autre. Les traces sont un
   élément solidaire de la voiture (même translation), long de --trail et
   masqué par un dégradé : opaque sous les roues, de plus en plus transparent
   vers l'arrière. Visuellement, elles s'estompent derrière la voiture.
   Les traces s'arrêtent à --tuck de la longueur de la voiture depuis
   l'arrière : au-delà, la carrosserie est assez large pour les couvrir. Plus
   en arrière, le capot arrière se rétrécit et les traces dépasseraient sur
   les côtés au lieu de sortir de sous les roues. */
.hero__drive {
  --car-h: clamp(48px, min(6vw, 9vh), 88px);
  --car-w: calc(var(--car-h) * 1.931);      /* 1120 / 580 */
  --trail: 72vw;                             /* longueur des traces visibles */
  --tuck: .18;                               /* où les traces passent sous la voiture, part de la longueur depuis l'arrière */
  --drive-dur: 18s;                          /* cycle complet : traversée (52 %) puis attente hors champ */
  position: relative; width: 100%; height: var(--car-h);
  margin-bottom: clamp(14px, 2.4vh, 28px);
  pointer-events: none; user-select: none;
}
.drive__mover {
  position: absolute; left: 0; top: 0; height: 100%;
  width: calc(var(--trail) + var(--car-w) * (1 - var(--tuck)));
  transform: translateX(-100%);
  animation: drive var(--drive-dur) linear .9s infinite;
  will-change: transform;
}
.hero__drive.is-paused .drive__mover { animation-play-state: paused; }
@keyframes drive {
  0%        { transform: translateX(-100%); }
  52%, 100% { transform: translateX(100vw); }
}
.drive__tracks {
  position: absolute; left: 0; top: 0; bottom: 0; width: var(--trail);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 45%, #000 88%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 45%, #000 88%);
}
/* Deux bandes à la hauteur des roues (centres à 12 % et 88 % de la hauteur),
   en pourcentages purs pour que l'écart reste le même à toutes les tailles.
   Motif de sculptures de pneu sur une base plus douce. */
.drive__tracks::before, .drive__tracks::after {
  content: ""; position: absolute; left: 0; right: 0; height: 8%;
  border-radius: 2px;
  background:
    repeating-linear-gradient(90deg, rgba(17,17,17,.13) 0 3px, transparent 3px 5px),
    linear-gradient(rgba(17,17,17,.10), rgba(17,17,17,.10));
  filter: blur(.4px);
}
.drive__tracks::before { top: 8%; }
.drive__tracks::after  { bottom: 8%; }
.drive__car {
  position: absolute; top: 0; height: 100%; width: auto;
  left: calc(var(--trail) - var(--car-w) * var(--tuck));
  filter: drop-shadow(0 5px 7px rgba(17,17,17,.20));
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  height: 34px; padding: 0 14px 0 12px; border-radius: var(--r-pill);
  background: var(--g100); color: var(--g700); font-size: 13px; font-weight: 500;
}
.eyebrow__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(20,174,92,.5); animation: pulse 2.4s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(20,174,92,.45); } 70% { box-shadow: 0 0 0 9px rgba(20,174,92,0); } 100% { box-shadow: 0 0 0 0 rgba(20,174,92,0); } }

.hero__title {
  font-size: var(--fs-display);
  line-height: .98;
  font-weight: 600;
  letter-spacing: -0.045em;
  max-width: 14ch;
}
/* Masque de révélation : les mots montent depuis le dessous de la ligne.
   Avec line-height: .98, les jambages (g, p) et les accents débordent de la
   boîte de ligne, et overflow: hidden les rognerait. On masque donc au
   clip-path, dont les valeurs négatives élargissent la zone visible sans
   toucher au modèle de boîte : l'écart entre les lignes reste celui du
   line-height. Les mots partent à 160%, soit ~.6em sous la ligne, donc
   bien au-delà des .28em rendus visibles : ils restent cachés. */
.hero__title .line {
  display: block;
  clip-path: inset(-.28em -.1em);
}
.hero__title .word { display: inline-block; transform: translateY(160%); opacity: 0; }
/* --g500 et non --g400 : 4,6:1 sur blanc (le --g400 tombait à 2,1:1). */
.hero__title .word--muted { color: var(--text-2); }
.hero__title.is-ready .word { animation: wordIn .9s var(--ease-out) forwards; animation-delay: calc(var(--w, 0) * 70ms + 100ms); }
@keyframes wordIn { to { transform: translateY(0); opacity: 1; } }

.hero__lead { font-size: clamp(17px, 1.5vw, 21px); color: var(--text-2); max-width: 58ch; line-height: 1.5; text-wrap: pretty; }

/* ---------- Statement ---------- */
.statement { padding-block: clamp(64px, 9vw, 136px) clamp(80px, 11vw, 160px); }
.statement__text {
  font-size: clamp(26px, 3.4vw, 44px);
  line-height: 1.24;
  font-weight: 500;
  letter-spacing: -0.03em;
  text-align: center;
  text-wrap: balance;
}
/* Mots pas encore « lus » : assez visibles pour être lus si on va vite. */
.statement__text .w { color: var(--g400); transition: color .3s; }
.statement__text .w.is-on { color: var(--ink); }

/* Icônes d'intervention — rendus 3D exportés du Figma */
.mini-ico {
  flex: none; width: 40px; height: 40px; border-radius: 10px;
  object-fit: contain; background: var(--white);
}
.mini-ico--lg { width: 48px; height: 48px; border-radius: 14px; }
.projection .mini-ico { background: var(--white); }

/* ---------- Fonctionnalités : rangée courbe (« Tilted Grid Hero ») ----------
   Une rangée de cartes défile de droite à gauche sur la face intérieure d'un
   cylindre : à plat au centre, recourbées vers toi aux deux bouts, qui
   s'effacent dans la page. Une boîte CSS ne se plie pas : chaque carte est
   découpée en fines bandes verticales, chacune tournée de quelques degrés
   autour de l'axe du cylindre (voir « Rangée courbe » dans main.js).
   --u = hauteur d'une carte en px, posée par le JS ; tout le contenu de la
   carte en dépend, donc la carte garde ses proportions à toutes les tailles. */
.features { background: var(--white); }
.tgh {
  position: relative; overflow: hidden;
  min-height: clamp(640px, 100svh, 900px);
  display: flex; flex-direction: column; gap: 32px;
  padding: clamp(80px, 11vh, 128px) 0 clamp(40px, 6vh, 80px);
}
/* Même en-tête que les autres sections (.section__head) ; la rangée se
   centre dans l'espace libre en dessous (voir main.js). */
.tgh__head { position: relative; z-index: 1; margin-bottom: 0; padding-inline: var(--gutter); }
.tgh__band {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .8s var(--ease-out);
  /* Ombre « flottante » des cartes. Elle se pose sur le bandeau entier et
     non sur chaque carte : une carte est découpée en bandes qui rognent leur
     contenu (et donc une ombre). Le bandeau n'est pas lui-même en 3D, le
     filtre ne casse donc pas la perspective, et le masque estompe l'ombre
     avec les cartes aux deux bouts. */
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, .10));
}
.tgh.is-ready .tgh__band { opacity: 1; }
.tgh__tile { position: absolute; transform-style: preserve-3d; will-change: transform; }
.tgh__strip { position: absolute; top: 0; overflow: hidden; }
.tgh__strip > .tgh-card { position: absolute; top: 0; }
.tgh.is-off .tgh__tile { animation-play-state: paused !important; }

/* La carte : icône 3D de l'app dans un bloc gris, titre, une phrase. */
.tgh-card {
  width: calc(var(--u) * 1.25); height: var(--u);
  display: flex; flex-direction: column; gap: calc(var(--u) * .035);
  padding: calc(var(--u) * .07);
  background: var(--white); border-radius: calc(var(--u) * .09);
}
.tgh__list .tgh-card { box-shadow: 0 18px 28px rgba(0, 0, 0, .10); }
.tgh-card__well {
  flex: 1; min-height: 0; overflow: hidden; display: grid; place-items: center;
  background: var(--g100); border-radius: calc(var(--u) * .06);
}
.tgh-card__well img { width: calc(var(--u) * .56); height: calc(var(--u) * .56); object-fit: contain; }
.tgh-card__t {
  margin-top: calc(var(--u) * .015);
  font-size: calc(var(--u) * .084); font-weight: 600; line-height: 1.15; letter-spacing: -.02em;
}
.tgh-card__p { font-size: max(12px, calc(var(--u) * .056)); line-height: 1.4; color: var(--text-2); text-wrap: pretty; }

/* Sans JS : les cartes en grille, dans le flux. Avec : la rangée prend le
   relais et la liste ne sert plus qu'aux lecteurs d'écran (le bandeau est
   aria-hidden). */
.tgh__list {
  --u: 232px;
  position: relative; z-index: 1; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(0, max-content)); justify-content: center; gap: 16px;
  padding-inline: var(--gutter);
}
.tgh.is-ready .tgh__list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
@media (max-width: 1024px) { .tgh__list { grid-template-columns: repeat(2, max-content); } }
@media (max-width: 640px)  {
  .tgh { min-height: 660px; }
  .tgh__list { grid-template-columns: max-content; }
}

/* ---------- Scènes « garage » (sections Mon garage et Liste d'attente) ---------- */
/* Desktop : l'image 3:2 occupe toute la largeur et n'est jamais rognée. Si elle
   est plus haute que l'écran, la section s'allonge d'autant. Le contenu est posé
   dans l'ouverture de la porte ; --gt / --gh (position et hauteur de l'image en
   px) sont relevés en JS par fitScenes(). */
.scene {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--white); overflow: clip;
}
.scene__stage { position: relative; flex: none; width: 100%; aspect-ratio: 3 / 2; }
.scene__frame { position: absolute; inset: 0; }
.scene__bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Garage ---------- */
.garage { --garage-pb: clamp(56px, 9vh, 140px); padding-bottom: var(--garage-pb); }

.garage__copy {
  position: absolute; z-index: 2; left: 50%;
  top: calc(var(--gt, 0px) + var(--gh, 100svh) * .295);
  width: min(62vw, 980px);
  transform: translate(-50%, 18px); opacity: 0;
  text-align: center; display: grid; justify-items: center; gap: 12px;
  transition: opacity .9s var(--ease-out) .1s, transform 1.1s var(--ease-out) .1s;
}
.garage.in-view .garage__copy { opacity: 1; transform: translate(-50%, 0); padding-top: 24px; }
.garage__copy .h2 { font-size: clamp(30px, 3.3vw, 60px); }
.garage__copy .lead { font-size: clamp(15px, 1.15vw, 19px); max-width: 46ch; }

/* Voiture dans l'ouverture de la porte : coordonnées relatives à l'image.
   Rendu du composant Figma « Véhicule / Voiture » (cadre 1,6:1, marges
   comprises) : la largeur et le haut sont calés pour poser les pneus au
   même endroit du sol. */
.garage__car {
  position: absolute; left: 50%; top: 49.2%; width: 37.9%;
  transform: translateX(-50%); display: grid;
}
.garage__car-img {
  grid-area: 1 / 1; width: 100%; height: auto;
  opacity: 0; transform: translateX(-4%) scale(.97);
  transition: opacity .6s var(--ease-in-out), transform 1.1s var(--ease-out);
  pointer-events: none; user-select: none;
}
.garage__car-img.is-active { opacity: 1; transform: none; }
.garage.in-view .garage__car-img.is-active { animation: garageIn 1.4s var(--ease-out) both; }
@keyframes garageIn { from { opacity: 0; transform: translateX(-10%) scale(.96); } to { opacity: 1; transform: none; } }

.garage__picker {
  position: absolute; left: 50%; z-index: 3;
  bottom: calc(var(--garage-pb) + clamp(16px, 3vh, 32px));
  overflow: hidden; border-radius: var(--r-pill);
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px);
  box-shadow: 0 1px 0 rgba(17,17,17,.06), 0 16px 40px -20px rgba(17,17,17,.3);
  width: max-content; max-width: calc(100% - 2 * var(--gutter));
  opacity: 0; transform: translate(-50%, 24px);
  transition: opacity .8s var(--ease-out) .3s, transform 1s var(--ease-out) .3s;
}
.garage.in-view .garage__picker { opacity: 1; transform: translate(-50%, 0); }
.garage__picker[data-open="true"] { background: rgba(255,255,255,.95); border-radius: 22px; width: min(360px, calc(100vw - 2 * var(--gutter))); }

/* Sélecteur : pilule repliée qui se déplie en carte (UX 21st.dev) */
.vsel__trigger, .vsel__opt {
  display: flex; align-items: center; gap: 10px; text-align: left;
  color: var(--g500); transition: background-color var(--dur-micro);
}
.vsel__trigger { height: 56px; padding: 0 16px 0 12px; white-space: nowrap; border-radius: inherit; }
.vsel__trigger:active { transform: scale(.97); }
.garage__picker[data-open="true"] .vsel__trigger { display: none; }
.vsel__trigger img, .vsel__opt img { width: 48px; height: 30px; flex: none; }
.vsel__trigger span, .vsel__opt span { display: grid; line-height: 1.15; min-width: 0; flex: 1; }
.vsel__trigger b, .vsel__opt b { font-size: 14px; font-weight: 600; color: var(--ink); }
.vsel__trigger small, .vsel__opt small { font-size: 12px; }
.vsel__chev { flex: none; color: var(--ink); margin-left: 6px; }

.vsel__panel { padding: 8px 0; }
.vsel__head { display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 12px; }
.vsel__head strong { font-size: 15px; font-weight: 600; color: var(--ink); }
.vsel__close { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--g200); color: var(--ink); transition: background-color var(--dur-micro); }
.vsel__close:hover { background: var(--g300); }
.vsel__list { list-style: none; margin: 0; padding: 0; }
.vsel__opt { width: 100%; padding: 10px 18px; }
.vsel__opt:hover, .vsel__opt:focus-visible { background: rgba(17,17,17,.05); }
.vsel__opt:focus-visible { outline-offset: -2px; }
.vsel__check { flex: none; color: var(--ink); opacity: 0; }
.vsel__opt.is-active .vsel__check { opacity: 1; }
.vsel__opt.is-active b { color: var(--ink); }

/* Tablette en portrait : l'image 3:2 ne fait qu'une moitié d'écran ; sans
   hauteur minimale, la scène ne laisse plus de grand vide au-dessus. */
@media (min-width: 641px) and (max-aspect-ratio: 1/1) {
  .scene { min-height: 0; }
}

/* Écrans intermédiaires : l'image est plus basse, on garde le titre seul dans la porte */
@media (min-width: 641px) and (max-width: 1200px) {
  .garage__copy .lead { display: none; }
  .garage__copy { top: calc(var(--gt, 0px) + var(--gh, 100svh) * .31); }
  .garage__car { width: 35.9%; top: 50.9%; }
  .cta__content { width: min(72vw, 900px); gap: 16px; }
  .cta .lead { display: none; }
  .stores { margin-top: 18px; }
  .store { height: 46px; }
}

/* ---------- Scrollytelling ---------- */
.story { padding-top: clamp(40px, 6vw, 96px); }
.story__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.story__steps { display: grid; gap: 0; }
.story__steps .section__head { margin-bottom: clamp(24px, 6vw, 80px); }
.step {
  position: relative;
  padding: clamp(28px, 6vw, 60px) 0;
  min-height: 60vh; display: grid; align-content: center; gap: 14px;
  border-top: 1px solid var(--g200);
  cursor: pointer;
}
/* Le filet du haut se remplit en noir sur l'étape affichée. Les étapes
   inactives restent lisibles (pas d'opacité réduite) : seul le titre passe
   en gris secondaire. */
.step::before {
  content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform .7s var(--ease-out);
}
.step.is-active::before { transform: scaleX(1); }
/* Pas de filet entre le titre de la section et la première étape. */
.story__steps .section__head + .step { border-top: 0; }
.story__steps .section__head + .step::before { display: none; }
.step p { color: var(--text-2); font-size: clamp(16px, 1.3vw, 19px); text-wrap: pretty; max-width: 48ch; }
.step__num { font-size: 13px; font-weight: 600; letter-spacing: .1em; color: var(--text-2); font-variant-numeric: tabular-nums; }
.step.is-active .step__num { color: var(--ink); }
.step__trigger { padding: 0; text-align: left; letter-spacing: inherit; line-height: inherit; color: var(--text-2); transition: color var(--dur-micro); border-radius: 4px; }
.step.is-active .step__trigger, .step__trigger:hover { color: var(--ink); }

.story__progress { display: flex; justify-content: center; gap: 6px; margin-top: 16px; }
.story__progress i { width: 24px; height: 4px; border-radius: 2px; background: var(--g200); transition: background-color .3s, width .5s var(--ease-out); }
.story__progress i.is-on { width: 40px; background: var(--ink); }
.step:last-child { padding-bottom: 20vh; }

/* =========================================================
   Mockups iPhone — reproduction pixel-exacte des écrans Figma
   (fichier slmXJB9LRbMv9S10wzACE1)
   Écran 390 x 844. Toutes les valeurs ci-dessous sont les
   coordonnées Figma, sans arrondi. Le tout est mis à l'échelle
   par --s (calculé en JS selon la place disponible).
   ========================================================= */

.story__phone-wrap {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  height: calc(100vh - var(--nav-h) - 48px);
  display: grid;
  place-items: center;
  align-content: center;
}

.phone-frame {
  --s: .82;
  position: relative;
  width: calc(414px * var(--s));
  height: calc(868px * var(--s));
}

.phone {
  position: absolute;
  top: 0; left: 0;
  width: 414px;   /* 390 + 2 x 12 de bordure */
  height: 868px;
  padding: 12px;
  background: #0A0A0A;
  border-radius: 56px;
  transform: scale(var(--s));
  transform-origin: top left;
  box-shadow:
    0 0 0 1.5px rgba(0,0,0,.55),
    0 50px 100px -40px rgba(17,17,17,.55),
    inset 0 0 0 1px rgba(255,255,255,.1);
}

.phone__screen {
  position: relative;
  width: 390px;
  height: 844px;
  overflow: hidden;
  border-radius: 44px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

/* Dynamic island */
.phone__screen::before {
  content: "";
  position: absolute;
  top: 11px; left: 50%;
  width: 125px; height: 36px;
  margin-left: -62.5px;
  background: #000;
  border-radius: 18px;
  z-index: 5;
}

/* ---------- Status bar (h 47) ---------- */
.ios-sb { position: absolute; inset: 0 0 auto 0; height: 47px; z-index: 4; }
.ios-sb__time {
  position: absolute; left: 33px; top: 14px;
  font: 600 17px/22px var(--font); letter-spacing: -.2px;
}
.ios-sb__signal { position: absolute; left: 292.5px; top: 17.4px; width: 19.2px; height: 12.2px; fill: var(--ink); }
.ios-sb__wifi   { position: absolute; left: 316px;   top: 17.2px; width: 17.1px; height: 12.3px; fill: var(--ink); }
.ios-sb__batt {
  position: absolute; left: 338.6px; top: 17px;
  width: 27.3px; height: 13px;
  background: var(--ink); border-radius: 4px;
  display: grid; place-items: center;
}
.ios-sb__batt::after {
  content: ""; position: absolute; left: 28.3px; top: 4.2px;
  width: 1.6px; height: 4.6px; border-radius: 0 2px 2px 0; background: var(--ink);
}
.ios-sb__batt i { font: 600 9px/9px var(--font); font-style: normal; color: var(--white); letter-spacing: -.2px; }

/* ---------- Écrans ---------- */
.scr {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  transform: translateX(22px);
  transition: opacity .5s var(--ease-in-out), transform .75s var(--ease-out);
}
.scr.is-active { opacity: 1; transform: none; }
.scr.is-leaving { transform: translateX(-22px); }

/* Icônes vectorielles des écrans (traits 2.5 du design system) */
.scr svg { display: block; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Badge (composant Figma « Badge ») */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 3px 6px 2px; border-radius: 4px;
  font: 600 11px/13px var(--font); letter-spacing: 0; text-transform: uppercase;
  color: var(--white); white-space: nowrap;
}
.badge--red { background: var(--red); }
.badge--yellow { background: var(--yellow); }
.badge--blue { background: var(--blue); }

/* =========================================================
   HOME / CARNET — Figma 924:2324
   Colonne « main » à y=47 : barre (84) + gap 8 + contenu.
   ========================================================= */
.h-bar {
  position: absolute; left: 0; top: 47px; width: 390px; height: 84px;
  padding: 32px 16px 4px;
  display: flex; align-items: center; justify-content: space-between;
}
.h-bar__t { font: 500 19px/28px var(--font); color: var(--ink); }
.h-bar__btn { width: 48px; height: 48px; display: grid; place-items: center; color: var(--ink); }
/* Icône « garage » de l'app : extrémités droites, pas arrondies */
.h-bar__btn svg { width: 24px; height: 24px; stroke-linecap: butt; stroke-linejoin: miter; }

.h-content {
  position: absolute; left: 0; top: 139px; width: 390px;
  padding: 8px 16px 16px;
  display: flex; flex-direction: column; gap: 32px;
}

/* Véhicule actuel : nom, kilométrage en grand, bouton jauge à droite */
.h-veh { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.h-veh__name { font: 600 24px/32px var(--font); letter-spacing: -1px; color: var(--ink); }
.h-veh__km { font: 600 40px/48px var(--font); letter-spacing: -1px; color: var(--ink); margin-top: -4px; }
.h-gauge { position: absolute; left: 310px; top: 36px; width: 48px; height: 48px; display: grid; place-items: center; color: var(--ink); }
.h-gauge svg { width: 24px; height: 24px; fill: currentColor; stroke: none; }
.h-gauge__dot { position: absolute; left: 33px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--red-text); }
/* Composant « Véhicule / Voiture » 256 x 160 : le rendu remplit le cadre */
.h-veh__car { width: 256px; height: 160px; }
.h-veh__car img { width: 100%; height: 100%; display: block; }

/* Cartes d'accès (Mon véhicule / Mes rappels / Mes dépenses) */
.h-hub { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.h-hub__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.h-hub__card {
  position: relative;
  height: 80px; padding: 24px 10px;
  display: flex; align-items: center; gap: 8px;
  background: var(--white); border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.h-hub__card img { width: 32px; height: 32px; flex: none; }
.h-hub__t { font: 500 15px/21px var(--font); color: var(--ink); white-space: nowrap; }
/* Compteurs sous « Mes rappels », hors du flux comme dans le Figma */
.h-hub__badges { position: absolute; left: 50px; top: 54px; display: flex; gap: 4px; }

/* Suivi de mon véhicule */
.h-suivi { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.h-suivi__head { display: flex; align-items: center; justify-content: space-between; }
.h-suivi__t { font: 600 15px/21px var(--font); color: var(--ink); }
.h-add {
  width: 48px; height: 48px; border-radius: 999px;
  background: var(--ink); color: var(--white);
  box-shadow: var(--shadow);
  display: grid; place-items: center;
}
.h-add svg { width: 24px; height: 24px; }

/* Liste de l'historique du véhicule (aussi dans Dépenses) */
.h-list { display: flex; flex-direction: column; gap: 8px; }
.h-row {
  display: flex; align-items: center; gap: 8px;
  padding: 24px 16px;
  background: var(--white); border-radius: 16px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.h-row__img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.h-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.h-row__p { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 600 16px/22px var(--font); color: var(--ink); }
.h-row__p span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.h-row__p span:last-child { flex: none; }
.h-row__s { display: flex; justify-content: space-between; gap: 8px; font: 500 11px/13px var(--font); color: var(--g500); white-space: nowrap; }

/* Barre d'onglets flottante — Figma « Floating TabBar » */
.tabbar {
  position: absolute; left: 0; bottom: 0; width: 390px;
  padding: 0 4px 32px;
  display: flex; justify-content: center;
  z-index: 3;
}
.tabbar__pill {
  display: flex; background: var(--ink); border-radius: 999px;
  box-shadow: var(--shadow);
}
.tabbar__i {
  width: 128px; padding: 10px;
  display: grid; justify-items: center; gap: 6px;
  font: 400 11px/14px var(--font); color: var(--g400);
}
.tabbar__i:first-child { width: 129px; }
.tabbar__i svg { width: 24px; height: 24px; color: var(--g400); }
.tabbar__i.is-on { color: var(--white); font-weight: 500; }
.tabbar__i.is-on svg { color: var(--white); }

/* =========================================================
   Sous-pages (Rappels, Dépenses) : flèche retour + sélecteur
   de véhicule, contenu en colonne à partir de y=47.
   ========================================================= */
.sub-content {
  position: absolute; left: 0; top: 47px; width: 390px;
  padding: 12px 16px 24px;
  display: flex; flex-direction: column; gap: 24px;
}
.sub-bar {
  height: 68px; padding: 16px 0 12px;
  display: flex; align-items: center; justify-content: space-between;
}
.sub-back { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); }
.sub-back svg { width: 24px; height: 24px; }
.sub-veh { display: flex; align-items: center; gap: 8px; }
.sub-veh img { width: 48px; height: 30px; }   /* « Véhicule / Voiture » 48 x 30 */
.sub-veh__t { font: 500 15px/21px var(--font); color: #000; }
.sub-veh__c { width: 16px; height: 16px; stroke-width: 2; color: var(--ink); margin-left: -4px; }
.sub-spacer { width: 44px; height: 44px; }

/* =========================================================
   RAPPELS — Figma 1299:2838 (section « Rappels — Parcours et
   états » 1320:4415) : À effectuer, À contrôler, À venir.
   ========================================================= */
/* Conteneurs rouge (à effectuer) et jaune (à contrôler) */
.r-box {
  width: 100%; padding: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  border-radius: 28px;
}
.r-box--red { background: var(--red-text); }
.r-box--yellow { background: var(--yellow); }
.r-box__t { display: flex; align-items: center; gap: 10px; font: 600 15px/21px var(--font); color: var(--white); text-transform: uppercase; }
.r-box__t svg { width: 24px; height: 24px; }
.r-box--red .r-card { box-shadow: none; }

.r-sec { width: 100%; display: flex; flex-direction: column; gap: 12px; }
.r-lab { font: 600 15px/21px var(--font); color: var(--g500); }
.r-list { display: flex; flex-direction: column; gap: 8px; }
.r-card {
  width: 100%; padding: 16px 16px 16px 12px;
  display: flex; align-items: center; gap: 12px;
  background: var(--white); border-radius: 16px;
  box-shadow: var(--shadow);
}
.r-img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.r-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.r-txt__t { font: 600 16px/22px var(--font); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Titre + loupe (pièce à vérifier) */
.r-txt__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.r-loupe { width: 20px; height: 20px; color: var(--g500); }
.r-st { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 500 14px/19px var(--font); color: var(--g500); white-space: nowrap; }

/* =========================================================
   DÉPENSES — Figma 75:477
   ========================================================= */
/* Carte « Par catégorie » : icône 3D, pas de chevron */
.d-nav {
  width: 100%; padding: 20px 16px 20px 24px;
  display: flex; align-items: center; gap: 8px;
  background: var(--white); border-radius: 16px;
  box-shadow: var(--shadow);
}
.d-nav__i { width: 32px; height: 32px; flex: none; }
.d-nav__t { flex: 1; font: 600 16px/22px var(--font); color: var(--ink); }

.d-filters { width: 100%; display: flex; flex-direction: column; gap: 8px; }
.d-tabs { display: flex; gap: 4px; padding: 4px; background: var(--g100); border-radius: 100px; }
.d-tabs span {
  flex: 1; padding: 8px 16px; border-radius: 100px; text-align: center;
  font: 600 13px/16px var(--font); color: #8E8E93;
}
.d-tabs .is-on { background: var(--white); color: var(--ink); box-shadow: var(--shadow); }

.d-total { padding: 24px; display: flex; flex-direction: column; gap: 16px; background: var(--g100); border-radius: 24px; }
.d-total__top { display: flex; align-items: center; justify-content: space-between; }
.d-total__lab { font: 500 15px/19px var(--font); color: #000; opacity: .6; }
.d-pill { display: flex; align-items: center; gap: 4px; padding: 4px 10px; font: 600 12px/15px var(--font); color: #000; }
.d-pill svg { width: 16px; height: 16px; stroke-width: 2; color: var(--ink); }
.d-amount { font: 700 40px/50px var(--font); color: #000; }
/* La liste des interventions reprend .h-list / .h-row de la Home. */

@media (max-width: 860px) {
  /* Collé tout en haut avec la hauteur de la nav en padding : quand la nav
     se masque au défilement, rien ne dépasse au-dessus du téléphone. */
  /* Le padding de nav du téléphone fait déjà l'espace avec le garage. */
  .story { padding-top: 0; }
  .story__phone-wrap {
    position: sticky; top: 0; height: auto; order: -1;
    /* Le padding bas garde l'ombre du téléphone dans la zone blanche : elle
       n'est plus tranchée net par le début du fondu. */
    padding: calc(var(--nav-h) + 10px) 0 40px; z-index: 5;
    background: var(--white);
  }
  /* Ombre plus courte sur mobile : elle s'éteint avant le bord du bloc. */
  .story__phone-wrap .phone {
    box-shadow:
      0 0 0 1.5px rgba(0,0,0,.55),
      0 30px 60px -36px rgba(17,17,17,.45),
      inset 0 0 0 1px rgba(255,255,255,.1);
  }
  /* fondu progressif sous le téléphone pour que le texte disparaisse proprement */
  .story__phone-wrap::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 64px;
    background: linear-gradient(to bottom,
      rgb(255 255 255 / 1) 0%, rgb(255 255 255 / .92) 20%, rgb(255 255 255 / .7) 42%,
      rgb(255 255 255 / .38) 65%, rgb(255 255 255 / .12) 85%, rgb(255 255 255 / 0) 100%);
    pointer-events: none;
  }
}

/* ---------- Anticipate ---------- */
.anticipate__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.anticipate .lead { margin-top: 22px; }
.checks { display: grid; gap: 14px; margin-top: 32px; color: var(--g300); font-size: 16px; }
.checks li { display: flex; gap: 12px; align-items: center; }
.checks li::before { content: ""; flex: none; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fff'/%3E%3Cpath d='M7 12.5l3 3 7-7' stroke='%23111' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

.projection {
  position: relative; border-radius: var(--r-3xl); padding: clamp(24px, 3vw, 36px);
  background: linear-gradient(160deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.8);
  display: grid; gap: 26px;
  overflow: hidden;
}
.projection::before {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: radial-gradient(40% 40% at var(--mx, 70%) var(--my, 20%), rgba(255,255,255,.10), transparent 60%);
  transition: opacity .4s;
}
.projection__head { display: flex; align-items: center; gap: 14px; }
.projection__head small { display: block; font-size: 12px; color: var(--g400); }
.projection__head b { font-size: 16px; font-weight: 600; }
.projection__km { display: grid; gap: 6px; }
.projection__km .count--big { font-size: clamp(44px, 5.5vw, 72px); font-weight: 600; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.projection__km small { font-size: 13px; color: var(--g400); }
.projection__bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.12); overflow: hidden; }
.projection__bar i { display: block; height: 100%; width: var(--p); background: var(--white); border-radius: 4px; transform: scaleX(0); transform-origin: left; transition: transform 1.2s var(--ease-out) .2s; }
.in-view .projection__bar i { transform: scaleX(1); }
.projection__meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.projection__meta small { display: block; font-size: 12px; color: var(--g400); margin-bottom: 4px; }
.projection__meta b { font-size: 14px; font-weight: 600; white-space: nowrap; }

/* ---------- How : trois étapes ---------- */
/* Trois cartes blanches côte à côte ; empilées sur tablette et mobile. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps__item { display: grid; }
.steps__card {
  background: var(--white); border-radius: var(--r-3xl); box-shadow: var(--shadow);
  padding: clamp(20px, 2.5vw, 32px);
  display: grid; gap: 10px; align-content: start;
}
/* Illustrations à fond blanc : posées directement sur la carte blanche. */
.steps__visual { aspect-ratio: 6 / 5; display: grid; place-items: center; margin: 0 0 8px; overflow: hidden; }
.steps__visual img { width: 82%; height: 82%; object-fit: contain; mix-blend-mode: multiply; transition: transform 1s var(--ease-out); }
@media (hover: hover) { .steps__item:hover .steps__visual img { transform: translateY(-6px) scale(1.03); } }
.steps__card p { color: var(--text-2); font-size: 16px; text-wrap: pretty; }

/* ---------- Security ---------- */
.auth-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.auth { background: var(--white); border-radius: var(--r-3xl); box-shadow: var(--shadow); padding: clamp(22px, 3vw, 36px); display: grid; gap: 10px; align-content: start; }
.auth__ico { width: 52px; height: 52px; border-radius: 16px; background: var(--ink); display: grid; place-items: center; margin-bottom: 10px; }
.auth__ico svg { width: 24px; height: 24px; fill: var(--white); }
.auth__ico svg.stroke { fill: none; stroke: var(--white); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth p { color: var(--text-2); font-size: 16px; }
/* Sur le fond gris : --g600 (8,9:1), le --g500 n'y fait que 4,2:1. */
.security__note { text-align: center; color: var(--g600); font-size: 15px; max-width: 62ch; margin: 48px auto 0; text-wrap: pretty; }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 920px; margin-inline: auto; }
/* Section blanche : la carte Gratuit est blanche, détachée par l'ombre de
   l'app et un filet ; Premium reste noire. */
.plan { border-radius: var(--r-3xl); padding: clamp(28px, 3.5vw, 44px); background: var(--white); box-shadow: var(--shadow); outline: 1px solid var(--g200); outline-offset: -1px; display: flex; flex-direction: column; gap: 22px; }
.plan--dark { background: var(--ink); color: var(--white); outline: 0; }
.plan__name { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 10px; }
.tag { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.14); }
.plan__price { display: grid; gap: 4px; }
.plan__price b { font-size: clamp(34px, 3.6vw, 48px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.plan__price span { font-size: 14px; color: var(--text-2); }
.plan--dark .plan__price span { color: var(--g400); }
.plan__list { display: grid; gap: 12px; font-size: 15.5px; padding-block: 6px; }
.plan__list li { display: flex; gap: 12px; align-items: center; }
.plan__list li::before { content: ""; flex: none; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23111'/%3E%3Cpath d='M7 12.5l3 3 7-7' stroke='%23fff' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.plan--dark .plan__list li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fff'/%3E%3Cpath d='M7 12.5l3 3 7-7' stroke='%23111' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.plan__list .is-soon { color: var(--text-2); }
/* --g500 sur noir ne fait que 4,1:1 : --g400 (9:1). */
.plan--dark .plan__list .is-soon { color: var(--g400); }
.plan__list .is-soon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23757575' stroke-width='2' stroke-dasharray='3 3'/%3E%3C/svg%3E"); }
/* Sur la carte noire, la coche blanche pleine écrasait le cercle pointillé :
   on le rétablit pour distinguer ce qui arrive de ce qui existe. */
.plan--dark .plan__list .is-soon::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='%23B3B3B3' stroke-width='2' stroke-dasharray='3 3'/%3E%3C/svg%3E"); }
/* `margin-top: auto` colle le bouton au bas de la carte : les deux CTA
   restent alignés même si les listes n'ont pas le même nombre de lignes. */
.plan .btn { align-self: start; margin-top: auto; }

/* ---------- FAQ ---------- */
/* L'accordéon est posé dans une carte blanche sur la section grise. */
.accordion {
  display: grid;
  background: var(--white); border-radius: var(--r-3xl); box-shadow: var(--shadow);
  padding: 8px clamp(20px, 3.5vw, 40px);
}
.accordion details { border-bottom: 1px solid var(--g200); }
.accordion details:last-child { border-bottom: 0; }
.accordion summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 0; min-height: 72px; font-size: clamp(17px, 1.5vw, 20px); font-weight: 600; letter-spacing: -.01em;
  border-radius: 4px;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after {
  content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--g100);
  -webkit-mask: none; mask: none;
  background-image: linear-gradient(var(--ink), var(--ink)), linear-gradient(var(--ink), var(--ink));
  background-size: 12px 1.5px, 1.5px 12px; background-position: center; background-repeat: no-repeat;
  background-color: var(--g100);
  transition: transform .5s var(--ease-out), background-color .3s;
}
.accordion details[open] summary::after { transform: rotate(135deg); }
.accordion summary:hover::after { background-color: var(--g200); }
.accordion__body { overflow: hidden; }
.accordion__body p { padding: 0 0 26px; color: var(--text-2); max-width: 62ch; text-wrap: pretty; font-size: 16.5px; }

/* ---------- CTA / liste d'attente (scène claire) ---------- */
.cta { --cta-pb: clamp(56px, 9vh, 140px); padding-bottom: var(--cta-pb); }
.cta__content {
  position: absolute; z-index: 2; left: 50%;
  top: calc(var(--gt, 0px) + var(--gh, 100svh) * .52);
  width: min(64vw, 900px);
  transform: translate(-50%, calc(-50% + 18px)); opacity: 0;
  display: grid; justify-items: center; gap: 20px; text-align: center;
  transition: opacity .9s var(--ease-out) .1s, transform 1.1s var(--ease-out) .1s;
}
.cta.in-view .cta__content { opacity: 1; transform: translate(-50%, -50%); }
.cta .h2 { font-size: clamp(30px, 3.6vw, 64px); }
.cta .lead { text-align: center; font-size: clamp(15px, 1.15vw, 19px); max-width: 46ch; }

.waitlist-form {
  display: grid; gap: 12px; justify-items: center;
  width: min(520px, 100%); margin-top: 4px;
}
/* Libellé visible (le placeholder seul ne suffit pas), aligné sur le texte
   du champ : 1 px de bordure + 6 px de padding + 20 px de retrait. */
.waitlist-form__label {
  justify-self: start; padding-left: 27px; margin-bottom: -4px;
  font-size: 14px; font-weight: 500; line-height: 20px; color: var(--g700);
}
.waitlist {
  display: flex; gap: 8px; padding: 6px; border-radius: var(--r-pill);
  background: var(--white); border: 1px solid var(--g200);
  box-shadow: 0 1px 2px rgba(17,17,17,.04), 0 18px 44px -26px rgba(17,17,17,.45);
  width: 100%;
}
.waitlist input {
  flex: 1; min-width: 0; height: 48px; min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink); font: inherit; font-size: 16px;
}
.waitlist input::placeholder { color: var(--g500); }
/* Le focus du champ s'affiche sur toute la pilule. Sans :has(), l'anneau
   revient sur le champ lui-même. */
.waitlist input:focus { outline: none; }
.waitlist:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
@supports not selector(:has(*)) {
  .waitlist input:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
}
.waitlist input[aria-invalid="true"] { color: var(--red-text); }
.waitlist-form.is-done input, .waitlist-form.is-done .btn { pointer-events: none; opacity: .55; }

.stores { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 26px; }
.store {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px;
  border-radius: 14px; border: 1px solid var(--g200); background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--ink);
}
.store svg { width: 22px; height: 22px; fill: currentColor; }
.store span { display: grid; text-align: left; line-height: 1.1; }
.store small { font-size: 12px; color: var(--g500); letter-spacing: 0; }
.store b { font-size: 15px; font-weight: 600; }

/* ---------- Footer ---------- */
/* Fond noir de marque pour clore la page ; logo inchangé, en blanc.
   Sur #111 : liens --g300 (13:1), titres et mentions --g400 (9:1). */
.footer { background: var(--ink); color: var(--g400); padding: clamp(56px, 7vw, 88px) 0 32px; font-size: 15px; }
.footer .brand { color: var(--white); }
.footer__inner { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.footer__tagline { margin-top: 18px; font-size: clamp(20px, 2vw, 24px); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--white); max-width: 16ch; }
.footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.footer__title { margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--g400); }
.footer__col ul { display: grid; gap: 2px; }
.footer__col a { display: inline-block; padding: 6px 0; color: var(--g300); transition: color var(--dur-micro); border-radius: 4px; }
.footer__col a:hover, .footer__col a[aria-current="page"] { color: var(--white); }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: clamp(40px, 6vw, 72px); padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 14px;
}

/* ---------- Pages légales (politique de confidentialité, mentions légales) ---------- */
.legal-nav { border-bottom: 1px solid var(--g200); }
.legal-nav__inner { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.legal-nav .back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--g500); transition: color .25s; }
.legal-nav .back:hover { color: var(--ink); }
.legal-nav .back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.legal-header { padding: 56px 0 40px; }
.legal-header .h2 { margin-bottom: 16px; }
.legal-header .lead { margin-bottom: 18px; }
.legal-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--g500); }

.legal-toc { margin-top: 36px; padding: 24px clamp(20px, 3vw, 32px); border: 1px solid var(--g200); border-radius: var(--r-xl); background: var(--g100); }
.legal-toc__title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--g600); margin-bottom: 16px; }
.legal-toc ol { display: grid; gap: 10px; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal-toc a { display: flex; gap: 10px; font-size: 15px; font-weight: 500; transition: color .25s; }
/* Sur le fond gris du sommaire : --g600 (8,9:1) au lieu de --g400 / --g500. */
.legal-toc a::before { content: counter(toc) "."; color: var(--g600); font-weight: 600; flex: none; }
.legal-toc a:hover { color: var(--g600); text-decoration: underline; text-underline-offset: 3px; }

.legal-body { padding-block: 12px 120px; }
.legal-section { padding-top: 44px; margin-top: 44px; border-top: 1px solid var(--g200); scroll-margin-top: calc(var(--nav-h) + 16px); }
.legal-section:first-child { padding-top: 0; margin-top: 0; border-top: 0; }
.legal-section h2 { font-size: clamp(21px, 2.2vw, 26px); font-weight: 600; letter-spacing: -.02em; margin-bottom: 16px; }
.legal-section h3 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; margin: 22px 0 10px; }
.legal-section h3:first-of-type { margin-top: 0; }
.legal-section p { color: var(--g700); max-width: 68ch; margin-bottom: 14px; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul, .legal-section ol.legal-list { display: grid; gap: 8px; margin: 4px 0 16px; padding-left: 22px; max-width: 68ch; }
.legal-section ul { list-style: disc; }
.legal-section ol.legal-list { list-style: decimal; }
.legal-section li { color: var(--g700); }
.legal-section li::marker { color: var(--g400); }
.legal-section li ul { margin: 8px 0 0; }
.legal-section strong { color: var(--ink); font-weight: 600; }
.legal-section a.link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--g300); transition: text-decoration-color .25s; }
.legal-section a.link:hover { text-decoration-color: var(--ink); }

.legal-table-wrap { overflow-x: auto; margin: 4px 0 16px; }
.legal-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14.5px; }
.legal-table th, .legal-table td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--g200); vertical-align: top; }
.legal-table th { color: var(--g500); font-weight: 600; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; }
.legal-table td { color: var(--g700); }

.todo { display: inline-block; background: var(--red-bg); color: var(--red-text); font-weight: 700; font-size: 12px; letter-spacing: .02em; padding: 1px 7px; border-radius: 5px; white-space: nowrap; }

/* ---------- Reveal system ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-in) var(--ease-out), transform calc(var(--dur-in) + .1s) var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.reveal.in-view { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  /* Cartes empilées, illustration en vignette à gauche. */
  .steps { grid-template-columns: 1fr; gap: 0; max-width: 720px; margin-inline: auto; }
  .steps__item:not(:last-child) { padding-bottom: 16px; }
  .steps__card { grid-template-columns: 120px 1fr; grid-template-areas: "vis title" "vis text"; column-gap: 20px; align-content: center; }
  .steps__visual { grid-area: vis; margin: 0; aspect-ratio: 1; }
  .steps__card .h3 { grid-area: title; align-self: end; }
  .steps__card p { grid-area: text; align-self: start; }
  .anticipate__grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .nav__actions .btn { display: none; }

  .story__grid { grid-template-columns: 1fr; }
  .step { min-height: 0; padding: 36px 0; }
  .step:last-child { padding-bottom: 40px; }
  .story__steps .section__head { margin-top: 20px; }

  .footer__inner { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  /* Garage mobile : texte et sélecteur dans le flux, scène en bas, plus large que l'écran */
  .garage { min-height: 0; height: auto; display: block; padding-bottom: 40px; }
  .garage__copy { position: relative; left: auto; top: auto; width: auto; padding: 72px var(--gutter) 24px; transform: translateY(18px); }
  .garage.in-view .garage__copy { transform: none; }
  .garage__copy .h2 { font-size: clamp(34px, 5vw, 60px); }
  .garage__copy .lead { font-size: 17px; }
  .garage__picker { position: relative; left: auto; bottom: auto; margin: 0 auto 26px; transform: translateY(16px); max-width: calc(100% - 32px); width: max-content; }
  .garage.in-view .garage__picker { transform: none; }

  /* CTA mobile : contenu dans le flux, scène en bas */
  .cta { min-height: 0; display: block; padding-bottom: 32px; }
  .cta__content { position: relative; left: auto; top: auto; width: auto; padding: 88px var(--gutter) 32px; transform: translateY(18px); }
  .cta.in-view .cta__content { transform: none; }
  .cta .h2 { font-size: clamp(34px, 8vw, 52px); }
  .cta .lead { font-size: 17px; }
  .plans { grid-template-columns: 1fr; }
  .auth-grid { grid-template-columns: 1fr; gap: 12px; }
  .auth { grid-template-columns: 48px 1fr; column-gap: 16px; row-gap: 4px; align-items: center; }
  .auth__ico { grid-row: span 2; width: 48px; height: 48px; margin: 0; align-self: start; }
  .hero__device { --s: .64; --crop: .62; margin-top: 32px; }
  .waitlist-form__label { padding-left: 29px; }
  /* La voiture est déjà à sa taille minimale (--car-h) alors que l'écran est
     bien plus étroit : elle couvre une part bien plus grande de la largeur et,
     à durée égale, paraît traîner. On raccourcit le cycle pour retrouver la
     même sensation de vitesse (longueurs de voiture parcourues par seconde). */
  .hero__drive { --drive-dur: 10.5s; }
  .waitlist-form { width: 100%; }
  .waitlist { flex-direction: column; border-radius: 24px; padding: 8px; }
  /* En colonne, le flex-basis:0 du `flex:1` s'applique à la hauteur et écrase
     le height:48px : on repasse l'input en taille intrinsèque. */
  .waitlist input { flex: 0 0 auto; width: 100%; }
  .waitlist .btn { width: 100%; }
  .projection__meta { grid-template-columns: 1fr 1fr; }
  .steps__card { grid-template-columns: 64px 1fr; grid-template-areas: "vis title" "text text"; column-gap: 14px; row-gap: 8px; padding: 18px; }
  .steps__card .h3 { align-self: center; }
  .steps__card p { font-size: 15px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero__title .word { transform: none; opacity: 1; }
  .hero__drive { display: none; }
  .reveal, .garage__car-img.is-active { opacity: 1; transform: none; }
  .statement__text .w { color: var(--ink); }
  .projection__bar i { transform: scaleX(1); }
}

/* ---------- Filet de sécurité : JS en échec ----------
   Une grande partie du contenu est en opacity: 0 et n'est révélée que par
   main.js. Si le script s'interrompt (erreur non rattrapée, fichier périmé
   servi par un cache), la page se vide. On révèle alors tout : l'animation
   est perdue, le contenu reste lisible. */
html.js-error .reveal,
html.js-error .hero__title .word,
html.js-error .garage__copy,
html.js-error .garage__picker,
html.js-error .cta__content,
html.js-error .garage__car-img.is-active,
html.js-error .scr.is-active {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
}