/* ============================================================
   IzenRide — Site immersif
   Tokens alignés sur le design system de l'app (packages/ui,
   apps/mobile/lib/theme/colors.ts) : canon sombre + brand slate.
   ============================================================ */

:root{
  /* Surfaces */
  --bg:        #08090E;
  --bg-2:      #0b0d14;
  --panel:     #131622;
  --panel-2:   #161a25;
  --steel:     #2A2F38;
  --line:      #1c2231;
  --line-2:    #2A3545;

  /* Encre */
  --ink:       #E8EBF2;
  --ink-label: #d8dde6;
  --ink-dim:   #a8b0c0;
  --ink-mute:  #8E96A8;

  /* Marque */
  --izen:        #4D6284;
  --izen-bright: #7a92b8;
  --izen-light:  #b8c5dd;
  --izen-deep:   #2c3a52;
  --izen-darker: #1a2740;
  --izen-darkest:#0f1628;

  /* Accent interactif */
  --neon:        #4d8fff;
  --neon-bright: #7eb0ff;
  --neon-deep:   #2563eb;

  --silver:       #AAB1BC;
  --silver-light: #CDD2D9;
  --silver-bright:#eef1f6;

  /* Sémantique */
  --ok:    #5DCAA5;
  --warn:  #FAC775;
  --err:   #E24B4A;
  --pink:  #F66E97;

  --sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --rad:   16px;
  --rad-l: 24px;
  --wrap:  1180px;
  --ease:  cubic-bezier(.22,.61,.36,1);
}

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

html{
  scroll-behavior:smooth;
  background:var(--bg);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-booting{ overflow:hidden; height:100vh; }

img,svg,canvas{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select{ font:inherit; color:inherit; }
::selection{ background:rgba(77,143,255,.32); }

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

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px; }

/* ────────────── Marque ────────────── */
.mark{ width:34px; height:34px; flex:0 0 auto; }
.mark--xl{ width:74px; height:74px; }
/* L'ecran d'allumage respirait par les traits internes de l'ancienne marque
   vectorielle. Le logo officiel est une image : la pulsation porte donc sur
   elle, en CSS — le site n'autorise aucun script (CSP script-src 'self'). */
.mark--xl{ animation:markFlow 1.8s var(--ease) infinite; }
@keyframes markFlow{ 0%,100%{opacity:.55; transform:scale(.985)} 45%{opacity:1; transform:scale(1)} }
@media (prefers-reduced-motion:reduce){ .mark--xl{ animation:none; } }

/* ══════════════════════════════ BOOT ══════════════════════════════ */
.boot{
  position:fixed; inset:0; z-index:200;
  display:grid; place-items:center;
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(45,70,120,.28), transparent 62%),
    var(--bg);
  text-align:center;
  transition:opacity .9s var(--ease), visibility .9s;
}
.boot.is-gone{ opacity:0; visibility:hidden; pointer-events:none; }
.boot__inner{ padding:32px; display:flex; flex-direction:column; align-items:center; gap:0; }
.boot__mark{ margin-bottom:22px; }
.boot__eyebrow{
  margin:0 0 10px; font-family:var(--mono); font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ink-mute);
}
.boot__title{
  margin:0; font-size:clamp(30px,6vw,46px); font-weight:700; letter-spacing:-.02em;
}
.boot__sub{ margin:10px 0 26px; color:var(--ink-dim); font-size:15px; }
.boot__gauge{
  width:min(300px,70vw); height:2px; background:var(--line); border-radius:2px; overflow:hidden;
}
.boot__gauge-fill{
  height:100%; width:0%;
  background:linear-gradient(90deg,var(--izen),var(--neon));
  transition:width .3s linear;
}
.boot__status{
  margin:12px 0 30px; font-family:var(--mono); font-size:11px;
  letter-spacing:.14em; color:var(--ink-mute); min-height:16px;
}

.starter{
  position:relative; width:132px; height:132px; border-radius:50%;
  border:1px solid var(--line-2); background:
    radial-gradient(circle at 50% 40%, rgba(77,143,255,.18), transparent 62%),
    linear-gradient(180deg,var(--panel-2),var(--bg-2));
  color:var(--silver-bright); cursor:pointer;
  font-family:var(--mono); font-size:12px; letter-spacing:.26em; text-transform:uppercase;
  transition:transform .25s var(--ease), border-color .25s, box-shadow .35s;
  opacity:0; transform:scale(.9);
}
.boot.is-ready .starter{ opacity:1; transform:scale(1); transition-delay:.05s; }
.starter:hover{ border-color:var(--neon); box-shadow:0 0 46px rgba(77,143,255,.28); transform:scale(1.04); }
.starter:active{ transform:scale(.97); }
.starter__ring{
  position:absolute; inset:-1px; border-radius:50%;
  border:1px solid rgba(77,143,255,.5);
  animation:pulseRing 2.4s var(--ease) infinite;
}
@keyframes pulseRing{
  0%{ transform:scale(1); opacity:.7 }
  70%{ transform:scale(1.28); opacity:0 }
  100%{ opacity:0 }
}
.starter__label{ position:relative; }
.boot__skip{
  margin-top:22px; background:none; border:0; cursor:pointer;
  color:var(--ink-mute); font-size:13px; text-decoration:underline;
  text-underline-offset:4px; opacity:0; transition:opacity .4s .3s, color .2s;
}
.boot.is-ready .boot__skip{ opacity:1; }
.boot__skip:hover{ color:var(--ink-dim); }

/* ══════════════════════════════ FX ══════════════════════════════ */
.fx-grain,.fx-scan,.fx-frame{ position:fixed; inset:0; pointer-events:none; z-index:120; }
.fx-grain{
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.fx-scan{
  opacity:.24;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);
}
.fx-frame__c{
  position:absolute; width:26px; height:26px;
  border:1px solid rgba(122,146,184,.34);
}
.fx-frame__c--tl{ top:16px; left:16px; border-right:0; border-bottom:0; }
.fx-frame__c--tr{ top:16px; right:16px; border-left:0; border-bottom:0; }
.fx-frame__c--bl{ bottom:16px; left:16px; border-right:0; border-top:0; }
.fx-frame__c--br{ bottom:16px; right:16px; border-left:0; border-top:0; }

body.no-fx .fx-grain,
body.no-fx .fx-scan{ display:none; }

/* ══════════════════════════════ NAV ══════════════════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:110;
  display:flex; align-items:center; gap:24px;
  padding:16px 30px;
  transition:background .4s var(--ease), border-color .4s, padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(8,9,14,.82);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom-color:var(--line);
  padding:11px 30px;
}
.nav__brand{ display:flex; align-items:center; gap:11px; margin-right:auto; }
.nav__word{ font-size:19px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.nav__word b{ font-weight:700; color:var(--izen-light); }
.nav__links{ display:flex; gap:26px; }
.nav__links a{
  font-size:14px; color:var(--ink-dim); position:relative; padding:4px 0;
  transition:color .2s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--neon); transition:right .3s var(--ease);
}
.nav__links a:hover{ color:var(--ink); }
.nav__links a:hover::after{ right:0; }

/* ══════════════════════════════ BOUTONS ══════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 24px; border-radius:12px; border:1px solid transparent;
  font-size:15px; font-weight:600; letter-spacing:.01em; cursor:pointer;
  transition:transform .2s var(--ease), box-shadow .3s, background .3s, border-color .3s;
}
.btn:active{ transform:translateY(1px) scale(.99); }
.btn--sm{ padding:9px 16px; font-size:13.5px; border-radius:10px; }
.btn--lg{ padding:16px 34px; font-size:16px; }
.btn--primary{
  background:linear-gradient(180deg,var(--izen),var(--izen-deep));
  border-color:rgba(184,197,221,.24);
  color:var(--silver-bright);
  box-shadow:0 6px 22px rgba(20,32,56,.55), inset 0 1px 0 rgba(255,255,255,.09);
}
.btn--primary:hover{
  background:linear-gradient(180deg,var(--izen-bright),var(--izen));
  box-shadow:0 10px 34px rgba(77,143,255,.28), inset 0 1px 0 rgba(255,255,255,.14);
}
.btn--ghost{
  background:rgba(42,47,56,.4); border-color:var(--line-2); color:var(--silver-light);
}
.btn--ghost:hover{ border-color:var(--izen-bright); color:var(--silver-bright); background:rgba(42,47,56,.7); }

/* ══════════════════════════════ RAIL ══════════════════════════════ */
.rail{
  position:fixed; left:26px; top:50%; transform:translateY(-50%);
  z-index:105; display:flex; flex-direction:column; align-items:center; gap:14px;
  opacity:0; transition:opacity .6s var(--ease);
}
.rail.is-on{ opacity:1; }
.rail__odo{ font-family:var(--mono); font-size:13px; color:var(--izen-light); letter-spacing:.06em; }
.rail__odo small{ font-size:9px; color:var(--ink-mute); margin-left:3px; }
.rail__track{
  position:relative; width:2px; height:190px; background:var(--line); border-radius:2px;
}
.rail__fill{
  position:absolute; top:0; left:0; width:100%; height:0%;
  background:linear-gradient(180deg,var(--neon),var(--izen));
  border-radius:2px;
}
.rail__dot{
  position:absolute; left:50%; top:calc(var(--p) * 100%);
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%;
  background:var(--line-2);
}
.rail__leg{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-mute); writing-mode:vertical-rl; text-orientation:mixed;
  max-height:130px; overflow:hidden;
}

/* ══════════════════════════════ HERO ══════════════════════════════ */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  padding:0 0 clamp(60px,10vh,110px);
  overflow:hidden;
}
.hero__gl{ position:absolute; inset:0; width:100%; height:100%; z-index:0; }
/* Repli si WebGL indisponible : dégradé « route de nuit » statique */
.hero.no-gl .hero__gl{ display:none; }
.hero.no-gl{
  background:
    radial-gradient(50% 34% at 50% 46%, rgba(77,143,255,.16), transparent 62%),
    radial-gradient(90% 44% at 50% 44%, rgba(26,39,64,.9), transparent 72%),
    linear-gradient(180deg,#0a0d16 0%, #101726 42%, #070910 100%);
}
/* Le voile protège la lisibilité du texte sans éteindre la carte : il
   pèse à gauche, où se trouve la colonne de texte, et laisse respirer la
   droite, où le réseau de rues se déploie. */
.hero__veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(8,9,14,.86) 0%, rgba(8,9,14,.62) 34%, rgba(8,9,14,0) 62%),
    linear-gradient(180deg, rgba(8,9,14,.68) 0%, rgba(8,9,14,0) 24%, rgba(8,9,14,0) 58%, rgba(8,9,14,.62) 94%);
}
.hero__copy{ position:relative; z-index:3; width:100%; max-width:var(--wrap); margin:0 auto; padding:0 28px; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px; margin:0 0 20px;
  padding:6px 14px 6px 11px; border-radius:99px;
  border:1px solid rgba(122,146,184,.3); background:rgba(19,22,34,.6);
  backdrop-filter:blur(8px);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--izen-light);
}
.pip{
  width:6px; height:6px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 0 rgba(93,202,165,.6); animation:pip 2s infinite;
}
@keyframes pip{ 70%{ box-shadow:0 0 0 8px rgba(93,202,165,0) } 100%{ box-shadow:0 0 0 0 rgba(93,202,165,0) } }

.hero__title{
  margin:0; font-size:clamp(38px,7.4vw,86px); line-height:1.02;
  font-weight:700; letter-spacing:-.035em;
}
.hero__title .line{ display:block; }

/* Entrée du hero : les éléments montent une fois le contact mis */
.hero__copy > *{
  opacity:0; transform:translateY(24px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
body.is-live .hero__copy > *{ opacity:1; transform:none; }
body.is-live .hero__copy > *:nth-child(1){ transition-delay:.10s; }
body.is-live .hero__copy > *:nth-child(2){ transition-delay:.22s; }
body.is-live .hero__copy > *:nth-child(3){ transition-delay:.40s; }
body.is-live .hero__copy > *:nth-child(4){ transition-delay:.54s; }
.tele, .scrollcue{ opacity:0; transition:opacity 1s var(--ease) .7s; }
body.is-live .tele, body.is-live .scrollcue{ opacity:1; }
.hero__title .line--accent{
  background:linear-gradient(100deg,var(--silver-bright) 0%,var(--izen-light) 42%,var(--neon-bright) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__lede{
  margin:26px 0 0; max-width:52ch; font-size:clamp(15.5px,1.7vw,19px);
  color:var(--ink-dim); line-height:1.65;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }

.scrollcue{
  position:absolute; z-index:3; bottom:26px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-mute);
}
.scrollcue__bar{ width:1px; height:44px; background:var(--line-2); overflow:hidden; }
.scrollcue__bar i{
  display:block; width:100%; height:16px; background:var(--neon);
  animation:cue 2.1s var(--ease) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-18px) } 100%{ transform:translateY(46px) } }

/* Télémétrie */
.tele{
  position:absolute; z-index:3; right:clamp(22px,4vw,54px); top:50%; transform:translateY(-50%);
  width:210px; padding:18px; border-radius:var(--rad);
  border:1px solid var(--line-2); background:rgba(11,13,20,.55);
  backdrop-filter:blur(14px) saturate(130%); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.tele__speed{ display:flex; align-items:baseline; gap:6px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.tele__speed b{ font-size:44px; font-weight:700; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.tele__speed span{ font-family:var(--mono); font-size:11px; color:var(--ink-mute); }
.tele__grid{ display:grid; grid-template-columns:1fr 1fr; gap:13px 10px; margin-top:14px; }
.tele__grid i{
  display:block; font-style:normal; font-family:var(--mono); font-size:8.5px;
  letter-spacing:.2em; color:var(--ink-mute); margin-bottom:3px;
}
.tele__grid b{ font-size:13px; font-weight:600; color:var(--ink-label); font-variant-numeric:tabular-nums; }
.tele__grid b.ok{ color:var(--ok); font-size:11.5px; }

/* ══════════════════════════════ SECTIONS ══════════════════════════════ */
/* scroll-margin : la barre de nav fixe ne doit pas recouvrir le titre
   quand on arrive sur une ancre */
.sec{ position:relative; padding:clamp(90px,13vh,150px) 0; scroll-margin-top:72px; }
.sec--alt{ background:linear-gradient(180deg,transparent,rgba(15,22,40,.42),transparent); }

.kicker{
  margin:0 0 14px; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--izen-bright);
}
.h2{ margin:0 0 18px; font-size:clamp(30px,4.4vw,52px); font-weight:700; letter-spacing:-.03em; line-height:1.06; }
.big{
  margin:0 0 26px; font-size:clamp(30px,5.2vw,64px); font-weight:700;
  letter-spacing:-.035em; line-height:1.08;
}
.big em{
  font-style:normal;
  background:linear-gradient(100deg,var(--izen-light),var(--neon-bright));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lede{ margin:0 0 18px; font-size:clamp(16px,1.9vw,20px); color:var(--ink-dim); max-width:56ch; line-height:1.6; }
.body{ margin:0 0 22px; color:var(--ink-mute); max-width:54ch; }

/* Piliers */
.pillars{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; margin-top:56px; }
.pillar{
  position:relative; padding:28px 24px 26px; border-radius:var(--rad-l);
  background:linear-gradient(180deg,var(--panel),rgba(11,13,20,.6));
  border:1px solid var(--line);
  transition:transform .45s var(--ease), border-color .45s, box-shadow .45s;
}
.pillar:hover{
  transform:translateY(-5px); border-color:rgba(122,146,184,.4);
  box-shadow:0 22px 50px rgba(0,0,0,.5);
}
.pillar__n{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--neon);
}
.pillar h3{ margin:12px 0 9px; font-size:19px; font-weight:650; letter-spacing:-.01em; }
.pillar p{ margin:0; color:var(--ink-mute); font-size:15px; }

/* Split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(34px,5vw,74px); align-items:center; }
.split--rev .split__text{ order:2; }
.split--rev .split__stage{ order:1; }

.ticks{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:11px; }
.ticks li{ position:relative; padding-left:26px; color:var(--ink-dim); font-size:15px; }
.ticks li::before{
  content:""; position:absolute; left:0; top:9px; width:11px; height:6px;
  border-left:1.6px solid var(--ok); border-bottom:1.6px solid var(--ok);
  transform:rotate(-45deg);
}

.chips{ display:flex; flex-wrap:wrap; gap:9px; margin-top:22px; }
.chip{
  padding:6px 13px; border-radius:99px; border:1px solid var(--line-2);
  background:rgba(19,22,34,.7); font-size:13px; color:var(--ink-dim);
}
.chip--warn{ border-color:rgba(250,199,117,.4); color:var(--warn); }
.chip--err{ border-color:rgba(226,75,74,.4); color:var(--err); }

.metrics{ display:grid; grid-template-columns:repeat(3,auto); gap:26px; margin-top:28px; justify-content:start; }
.metrics b{ display:block; font-size:23px; font-weight:700; letter-spacing:-.02em; color:var(--izen-light); }
.metrics i{ font-style:normal; font-size:12.5px; color:var(--ink-mute); }

/* Scène canvas */
.stage{
  position:relative; aspect-ratio:1/1; border-radius:var(--rad-l); overflow:hidden;
  border:1px solid var(--line-2);
  background:radial-gradient(120% 90% at 50% 100%, var(--izen-darkest), var(--bg) 70%);
  box-shadow:0 30px 80px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
.stage__c{ position:absolute; inset:0; width:100%; height:100%; }
.stage__hud{
  position:absolute; inset:auto 0 0 0; z-index:2;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  padding:20px; background:linear-gradient(180deg,transparent,rgba(8,9,14,.8));
}
.stage__tag{
  display:inline-flex; align-items:center; gap:7px;
  padding:5px 11px; border-radius:99px; border:1px solid var(--line-2);
  background:rgba(8,9,14,.6); font-family:var(--mono);
  font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-dim);
}
.stage__tag::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--err);
  animation:pip 1.8s infinite;
}
.stage__tag--ok::before{ background:var(--ok); }
.stage__metric{ text-align:right; }
.stage__metric b{
  display:block; font-size:27px; font-weight:700; letter-spacing:-.02em;
  color:var(--silver-bright); font-variant-numeric:tabular-nums; line-height:1.1;
}
.stage__metric i{ font-style:normal; font-size:11.5px; color:var(--ink-mute); }
.stage__toast{
  position:absolute; top:18px; left:18px; z-index:3;
  padding:8px 13px; border-radius:10px; border:1px solid var(--line-2);
  background:rgba(11,13,20,.85); backdrop-filter:blur(8px);
  font-size:12.5px; color:var(--ink-label);
  opacity:0; transform:translateY(-8px); transition:opacity .4s, transform .4s var(--ease);
}
.stage__toast.is-on{ opacity:1; transform:translateY(0); }

/* ══════════════════════════════ COCKPIT ══════════════════════════════ */
.sec--cockpit{ text-align:center; }
.cockpit__head .lede{ margin-left:auto; margin-right:auto; }
.phone-wrap{ perspective:1400px; display:flex; justify-content:center; margin-top:46px; }
.phone{
  /* ratio calé sur les captures (540 × 1119) pour éviter tout recadrage */
  position:relative; width:300px; height:598px;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .16s linear;
}
.phone__glow{
  position:absolute; inset:-16% -30%; border-radius:50%;
  background:radial-gradient(circle, rgba(77,143,255,.20), transparent 62%);
  filter:blur(28px); transform:translateZ(-90px);
}
.phone__body{
  position:absolute; inset:0; border-radius:44px; padding:11px;
  background:linear-gradient(155deg,#2b313c,#12151d 44%,#0a0c11);
  box-shadow:
    0 46px 90px rgba(0,0,0,.66),
    inset 0 0 0 1px rgba(200,214,240,.13),
    inset 0 2px 1px rgba(255,255,255,.12);
}
.phone__screen{
  position:relative; width:100%; height:100%; border-radius:34px; overflow:hidden;
  background:var(--bg); text-align:left;
}
.phone__reflect{
  position:absolute; inset:0; border-radius:44px; pointer-events:none;
  background:linear-gradient(122deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 66%, rgba(255,255,255,.05) 100%);
  transform:translateZ(2px);
}

/* Écrans officiels affichés dans le châssis */
.scr{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:top center;
  opacity:0; visibility:hidden; transform:scale(1.03);
  transition:opacity .5s var(--ease), transform .6s var(--ease), visibility .5s;
}
.scr.is-on{ opacity:1; visibility:visible; transform:scale(1); }

.shot-cap{
  margin:26px auto 0; max-width:46ch; text-align:center;
  font-size:15px; color:var(--ink-mute); min-height:48px;
}
.shot-cap b{
  display:block; font-size:19px; font-weight:650; letter-spacing:-.01em;
  color:var(--silver-bright); margin-bottom:5px;
}

/* Sélecteur de vignettes */
.shots{
  display:flex; gap:12px; margin:30px auto 0; padding:6px 4px 16px;
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
  /* centré quand le rail tient, défilable sinon (sans rogner à gauche) */
  width:fit-content; max-width:100%;
}
.shots::-webkit-scrollbar{ height:6px; }
.shots::-webkit-scrollbar-thumb{ background:var(--line-2); border-radius:99px; }
.shot{
  flex:0 0 auto; scroll-snap-align:center; width:78px;
  padding:0; border:0; background:none; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  opacity:.5; transition:opacity .3s var(--ease), transform .3s var(--ease);
}
.shot img{
  width:78px; height:162px; object-fit:cover; object-position:top center;
  border-radius:11px; border:1px solid var(--line-2);
  transition:border-color .3s, box-shadow .3s;
}
.shot i{
  font-style:normal; font-family:var(--mono); font-size:9px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute);
}
.shot:hover{ opacity:.85; transform:translateY(-3px); }
.shot.is-on{ opacity:1; }
.shot.is-on img{ border-color:var(--neon); box-shadow:0 0 0 1px var(--neon), 0 10px 26px rgba(77,143,255,.28); }
.shot.is-on i{ color:var(--izen-light); }

/* Mur d'écrans défilant */
.wall{
  overflow:hidden; padding:6px 0 22px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
}
.wall__track{
  display:flex; gap:20px; width:max-content;
  animation:wallSlide 72s linear infinite;
}
.wall img{
  width:132px; height:274px; object-fit:cover; object-position:top center;
  border-radius:16px; border:1px solid var(--line);
  opacity:.42; filter:saturate(.8);
  transform:perspective(900px) rotateY(-11deg);
  box-shadow:0 18px 40px rgba(0,0,0,.5);
  transition:opacity .4s, filter .4s;
}
.wall:hover img{ opacity:.66; filter:saturate(1); }
@keyframes wallSlide{ to{ transform:translateX(-50%) } }
body.no-fx .wall__track{ animation:none; }
/* ══════════════════════════════ STATS ══════════════════════════════ */
.sec--stats{ text-align:center; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:22px; }
.stat{
  padding:32px 18px; border-radius:var(--rad-l);
  border:1px solid var(--line); background:linear-gradient(180deg,var(--panel),rgba(11,13,20,.5));
}
.stat b{
  display:block; font-size:clamp(32px,4.6vw,50px); font-weight:700; letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(160deg,var(--silver-bright),var(--izen-bright));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.stat i{ font-style:normal; font-size:13.5px; color:var(--ink-mute); }
.stats__note{ margin:26px 0 0; font-size:13px; color:var(--ink-mute); }

/* ══════════════════════════════ BETA ══════════════════════════════ */
.sec--beta{ position:relative; overflow:hidden; text-align:center; }
.beta__bg{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 60% at 50% 100%, rgba(77,143,255,.16), transparent 66%),
    radial-gradient(90% 70% at 50% 0%, rgba(26,39,64,.6), transparent 70%);
}
.beta{ position:relative; }
.beta .lede{ margin-left:auto; margin-right:auto; }

/* ── Téléchargement ─────────────────────────────────────────────────────
   A remplace le formulaire de liste d'attente le 2026-08-27 : l'app est
   publiee, il n'y a plus de file d'attente a rejoindre. `is-soon` porte
   l'App Store tant que la fiche Apple sert encore la 3.0.7 — voir le
   commentaire dans index.html. */
.stores{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:38px 0 0; }
.stores .btn{ flex:0 1 auto; }
.stores .is-soon{
  cursor:default; opacity:.55; border-style:dashed;
}
.stores .is-soon:hover{ border-color:var(--line-2); color:inherit; background:transparent; }
.stores__note{
  margin:18px auto 0; max-width:520px;
  font-size:13px; color:var(--ink-mute); line-height:1.7;
}
@media (max-width:560px){ .stores{ flex-direction:column; } .stores .btn{ width:100%; } }
.form{ max-width:620px; margin:38px auto 0; }
.form__row{ display:grid; grid-template-columns:1.4fr 1fr; gap:12px; margin-bottom:14px; }
.field{ display:block; text-align:left; }
.field span{
  display:block; margin-bottom:7px; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase; color:var(--ink-mute);
}
.field input,.field select{
  width:100%; padding:14px 15px; border-radius:12px;
  border:1px solid var(--line-2); background:var(--panel); color:var(--ink);
  transition:border-color .25s, box-shadow .25s;
}
.field input::placeholder{ color:#5c6478; }
.field input:focus,.field select:focus{
  outline:none; border-color:var(--neon); box-shadow:0 0 0 3px rgba(77,143,255,.16);
}
.field input.is-bad{ border-color:var(--err); }

/* Case de consentement RGPD. `.field span` est un libellé en petites
   capitales espacées, illisible sur une phrase entière : on le ramène ici à
   du texte courant. La case reste à 18 px — une cible tactile plus petite
   serait fautive sur mobile — et `flex-shrink:0` l'empêche d'être écrasée par
   le texte, piège déjà rencontré sur ce projet. */
.field--check{
  display:flex; align-items:flex-start; gap:10px; text-align:left;
  margin:2px 0 16px; cursor:pointer;
}
.field--check input{
  width:18px; height:18px; flex:0 0 18px; margin:1px 0 0;
  accent-color:var(--neon); cursor:pointer;
}
.field--check span{
  display:block; margin:0; font-family:inherit; font-size:13px;
  letter-spacing:normal; text-transform:none; line-height:1.55;
  color:var(--ink-mute);
}
.field--check input.is-bad{ outline:2px solid var(--err); outline-offset:2px; }

.form__legal{ margin:14px 0 0; font-size:12.5px; color:var(--ink-mute); line-height:1.7; }
.form__legal a{ color:var(--izen-light); text-decoration:underline; text-underline-offset:3px; }
.form__legal a:hover{ color:var(--neon-bright); }
.form__msg{ margin:12px 0 0; font-size:14px; min-height:20px; color:var(--ok); }
.form__msg.is-bad{ color:var(--err); }

/* ══════════════════════════════ FOOTER ══════════════════════════════ */
.foot{ border-top:1px solid var(--line); padding:38px 0; }
.foot__in{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.foot__brand{ display:flex; align-items:center; gap:10px; margin-right:auto; }
.foot__links{ display:flex; gap:20px; flex-wrap:wrap; }
.foot__links a{ font-size:13.5px; color:var(--ink-mute); transition:color .2s; }
.foot__links a:hover{ color:var(--ink-dim); }

/* Réseaux sociaux. Distingués des liens de pied de page ordinaires : ce sont
   les seuls liens SORTANTS du site. Sur mobile, la rangée passe à la ligne au
   lieu de comprimer les cibles tactiles.
   Les liens Play et App Store partageront cette rangée quand les fiches
   auront été reprises — voir le commentaire dans index.html. */
.foot__links--stores a{ color:var(--ink-dim); }
.foot__links--stores a:hover{ color:var(--izen-light); }
@media (max-width:820px){
  .foot__links--stores{ order:3; width:100%; }
}
.foot__copy{ margin:0; width:100%; font-size:12.5px; color:#5c6478; }
.foot__copy span{ display:block; margin-top:4px; color:var(--ink-mute); }

/* ══════════════════════════════ TOGGLE ══════════════════════════════ */
.motion-toggle{
  position:fixed; right:20px; bottom:20px; z-index:115;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:99px; cursor:pointer;
  border:1px solid var(--line-2); background:rgba(11,13,20,.8);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-dim); transition:border-color .25s, color .25s;
}
.motion-toggle:hover{ border-color:var(--izen-bright); color:var(--ink); }
.motion-toggle__dot{ width:7px; height:7px; border-radius:50%; background:var(--neon); transition:background .25s; }
body.no-fx .motion-toggle__dot{ background:var(--ink-mute); }

/* ══════════════════════════════ REVEAL ══════════════════════════════ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.pillars .reveal:nth-child(2),
.stats .reveal:nth-child(2){ transition-delay:.09s; }
.pillars .reveal:nth-child(3),
.stats .reveal:nth-child(3){ transition-delay:.18s; }
.stats .reveal:nth-child(4){ transition-delay:.27s; }

/* ══════════════════════════════ RESPONSIVE ══════════════════════════════ */
@media (max-width:1080px){
  .rail{ display:none; }
  .tele{ display:none; }
}
@media (max-width:860px){
  .nav__links{ display:none; }
  .split{ grid-template-columns:1fr; gap:38px; }
  .split--rev .split__text{ order:1; }
  .split--rev .split__stage{ order:2; }
  .form__row{ grid-template-columns:1fr; }
  .metrics{ grid-template-columns:repeat(2,auto); gap:18px; }
  .hero{ align-items:flex-end; padding-bottom:96px; }
  .fx-frame{ display:none; }
}
@media (max-width:520px){
  .wrap{ padding:0 20px; }
  .phone{ width:262px; height:522px; }
  .shot,.shot img{ width:66px; }
  .shot img{ height:137px; }
  .wall img{ width:106px; height:220px; }
  .nav{ padding:12px 18px; }
  .stage{ aspect-ratio:4/5; }
}

/* ══════════════════════════════ REDUCED MOTION ══════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
  .hero__copy > *,.tele,.scrollcue{ opacity:1; transform:none; }
  .fx-scan,.fx-grain{ display:none; }
}