@font-face{font-family:"Fira";src:url(assets-071135/fonts/fira-sans-300.woff2) format("woff2");font-weight:300}
@font-face{font-family:"Fira";src:url(assets-071135/fonts/fira-sans.woff2) format("woff2");font-weight:400}
@font-face{font-family:"Fira";src:url(assets-071135/fonts/fira-sans-500.woff2) format("woff2");font-weight:500}
@font-face{font-family:"Fira";src:url(assets-071135/fonts/fira-sans-600.woff2) format("woff2");font-weight:600}
@font-face{font-family:"Fira";src:url(assets-071135/fonts/fira-sans-700.woff2) format("woff2");font-weight:700}
@font-face{font-family:"Archivo N";src:url(assets-071135/fonts/archivo-narrow-500.woff2) format("woff2");font-weight:500}
@font-face{font-family:"Archivo N";src:url(assets-071135/fonts/archivo-narrow-700.woff2) format("woff2");font-weight:700}
@font-face{font-family:"Plex";src:url(assets-071135/fonts/plex-mono-400.woff2) format("woff2");font-weight:400}
@font-face{font-family:"Plex";src:url(assets-071135/fonts/plex-mono-500.woff2) format("woff2");font-weight:500}

:root{
  --void:#061A24;--s1:#08222E;--s2:#0E2C3A;--s3:#123544;
  --marine:#004463;--bleu:#678BB4;--turq:#39B5AA;--corail:#DA5061;
  --violet:#AC60A2;--orange:#E86A15;--ambre:#F0A24A;
  --lum:#F3F7F6;--lum2:#C3D2D6;--lum3:#9DB2BA;--encre:#12242C;--encre2:#4A5C63;
  --filet:rgba(180,200,205,.15);
  --gris:#707680;--ivoire:#F2EDE2;
  --k0:#050505;--k1:#0B0B0C;--k2:#151515;--cuivre:#D85F32;--cuivre2:#F08A58;--champ:#D8CCB8;--creme:#F3EFE8;--taupe:#9A938A;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:#000;overflow:hidden}
body{font-family:"Fira",system-ui,sans-serif;color:var(--lum);-webkit-font-smoothing:antialiased}
body.idle{cursor:none}

#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;overflow:hidden;
  background:var(--void);transform-origin:center center}
.layer{position:absolute;inset:0;pointer-events:none}
.scene{position:absolute;inset:0;visibility:hidden}

/* ---------- Fond ---------- */
#bg{background:
  radial-gradient(900px 700px at var(--gx,30%) var(--gy,20%),rgba(0,68,99,.55),transparent 70%),
  radial-gradient(800px 600px at var(--hx,80%) var(--hy,90%),rgba(18,53,68,.8),transparent 70%),
  var(--void)}
#grid{background-image:
  linear-gradient(var(--filet) 1px,transparent 1px),
  linear-gradient(90deg,var(--filet) 1px,transparent 1px);
  background-size:120px 120px;background-position:center;opacity:.35;
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 30%,transparent 100%)}
#bgA{opacity:0;background:
  radial-gradient(1100px 700px at 50% 42%,rgba(216,95,50,.10),transparent 70%),
  radial-gradient(900px 600px at 15% 100%,rgba(216,204,184,.05),transparent 70%),
  linear-gradient(180deg,#0A0A0B,#050505 60%)}
#bgI{opacity:0;background:radial-gradient(1200px 800px at 50% 30%,#FBF8F1,var(--ivoire) 70%)}
#glow{background:radial-gradient(700px 500px at 50% 50%,rgba(240,162,74,.32),transparent 70%);opacity:0}
#vignette{background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
#grain{inset:-100px;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* Atmosphère WebGL active : elle remplace les fonds CSS et le grain */
#atmos{width:100%;height:100%}
.atmos-on #bg,.atmos-on #bgA,.atmos-on #bgI,.atmos-on #grain{display:none}
.atmos-on #grid{mix-blend-mode:soft-light}

/* Écran de chargement (masqué dès que tout est décodé) */
#boot{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;background:#050403;color:#c9b9a6;font:500 13px/1 "Plex",monospace;letter-spacing:.32em;text-transform:uppercase;transition:opacity .8s}
#boot div{width:220px;height:1px;background:rgba(216,204,184,.18);overflow:hidden}
#boot i{display:block;height:100%;background:#D85F32;transform-origin:left;transform:scaleX(0);transition:transform .2s}
#boot b{font-weight:400;font-size:11px;color:#8a7f73}
html[data-ready] #boot{opacity:0;pointer-events:none}

/* ---------- HUD ---------- */
#hud{z-index:50;font-size:15px;letter-spacing:.28em;text-transform:uppercase;color:var(--lum3);font-weight:500;transition:color .4s}
#hud .c{position:absolute;display:flex;align-items:center;gap:14px}
#hud .tl{left:64px;top:52px}#hud .tr{right:64px;top:52px}
#hud .bl{left:64px;bottom:52px;font-variant-numeric:tabular-nums}#hud .br{right:64px;bottom:52px}
#hud .dot{width:10px;height:10px;background:var(--ambre)}
#hud .brk{position:absolute;width:26px;height:26px;border-color:var(--lum3);border-style:solid;opacity:.5}
#hud .b1{left:32px;top:24px;border-width:1px 0 0 1px}#hud .b2{right:32px;top:24px;border-width:1px 1px 0 0}
#hud .b3{left:32px;bottom:24px;border-width:0 0 1px 1px}#hud .b4{right:32px;bottom:24px;border-width:0 1px 1px 0}
#ticks{position:absolute;left:0;right:0;bottom:0;height:9px}
#ticks i{position:absolute;bottom:0;width:1px;height:9px;background:currentColor;opacity:.55}
#pilotLbl{color:var(--ambre);border:1px solid currentColor;padding:4px 8px 3px;letter-spacing:.16em;font-size:12px;font-variant-numeric:tabular-nums}
#bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--ambre);transform-origin:left;transform:scaleX(0)}
#hud.light{color:var(--encre2)}#hud.light .brk{border-color:var(--encre2)}

/* ---------- Typo utilitaires ---------- */
.mask{display:inline-block;overflow:hidden;padding:.12em .04em .16em;margin:-.12em -.04em -.16em;vertical-align:top}
.ch,.w{display:inline-block;will-change:transform}
.eyebrow{font-size:20px;font-weight:500;letter-spacing:.34em;text-transform:uppercase;color:var(--lum3)}
.center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

/* ---------- S1 Signal ---------- */
.sq{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px}
.ln{position:absolute;left:50%;top:50%;height:1px;background:rgba(195,210,214,.45);transform-origin:left}
#s1 .sub{position:absolute;left:0;right:0;top:600px;text-align:center}

/* ---------- S2 Manifeste ---------- */
.flash{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:250px;letter-spacing:-.035em;line-height:1}
.flash.big{font-size:300px;color:var(--ambre);text-shadow:0 0 80px rgba(240,162,74,.45)}
#sentence{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-size:118px;font-weight:600;letter-spacing:-.03em;line-height:1.08}
#sentence .l1{font-weight:300;color:var(--lum2)}
#sentence .hl{color:var(--ambre)}

/* ---------- S3 Réseau ---------- */
#s3 .persp{position:absolute;inset:0;perspective:1600px;perspective-origin:50% 40%}
#cubes{position:absolute;left:50%;top:410px;width:0;height:0;transform-style:preserve-3d}
.cube{position:absolute;width:150px;height:150px;left:-75px;top:-75px;transform-style:preserve-3d}
.face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:92px;font-weight:600;color:#fff;backface-visibility:hidden;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.face::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.22),transparent 55%,rgba(0,0,0,.18))}
#s3 .txt{position:absolute;left:0;right:0;top:640px;text-align:center}
#s3 .l1{font-size:78px;font-weight:300;color:var(--lum2);letter-spacing:-.02em}
#s3 .l2{font-size:78px;font-weight:600;letter-spacing:-.02em;margin-top:6px}
#s3 .eyebrow{position:absolute;left:0;right:0;top:180px;text-align:center}
#rail{position:absolute;left:50%;top:410px;width:1400px;margin-left:-700px;height:1px;background:rgba(195,210,214,.35);transform-origin:center}

/* ---------- S4 Mission ---------- */
.pillar{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding-left:200px}
.pillar .lab{display:flex;align-items:center;gap:18px;margin-bottom:34px}
.pillar .lab i{width:18px;height:18px;display:block}
.pillar .big{position:relative;font-size:168px;font-weight:700;letter-spacing:-.035em;line-height:1;align-self:flex-start}
.pillar .wipe{position:absolute;left:-30px;right:-30px;top:-10px;bottom:-14px;transform:scaleX(0)}
.pillar .num{position:absolute;right:160px;bottom:120px;font-size:300px;font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(195,210,214,.22)}

/* ---------- S5 Histoire ---------- */
#s5 .center{gap:0}
#lbl{position:relative;height:40px;width:1200px}
#lbl .eyebrow{position:absolute;left:0;right:0;font-size:24px}
#year{font-size:360px;font-weight:700;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;margin:20px 0 40px}
#tline{position:relative;width:1100px;height:60px}
#tline .base{position:absolute;left:0;right:0;top:0;height:1px;background:rgba(195,210,214,.35);transform-origin:left}
#tline .fill{position:absolute;left:0;right:0;top:-1px;height:3px;background:var(--ambre);transform-origin:left;transform:scaleX(0)}
#tline .mk{position:absolute;top:-8px;width:16px;height:16px}
#tline .mk span{position:absolute;top:30px;left:50%;transform:translateX(-50%);font-size:20px;letter-spacing:.2em;color:var(--lum3);font-weight:500}
#s5 .desc{font-size:40px;font-weight:300;color:var(--lum2);max-width:1200px;line-height:1.35;margin-top:40px}
#s5 .desc b{font-weight:600;color:var(--lum)}

/* ---------- S6 Produit ---------- */
#s6 .left{position:absolute;left:140px;top:300px;width:640px}
#s6 h2{font-size:128px;font-weight:700;letter-spacing:-.035em;line-height:1.02;margin:28px 0 36px}
#s6 p{font-size:32px;font-weight:300;color:var(--lum2);line-height:1.4}
#s6 .persp{position:absolute;inset:0;perspective:2000px;perspective-origin:70% 50%}
.win{position:absolute;width:980px;background:var(--s2);overflow:hidden;border-radius:14px;box-shadow:0 0 0 1px rgba(195,210,214,.2),0 18px 36px -8px rgba(0,0,0,.45),0 70px 140px -20px rgba(0,0,0,.65)}
.win::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(155deg,rgba(255,255,255,.10),transparent 30%)}
.win .top{height:36px;display:flex;align-items:center;gap:8px;padding:0 16px;background:var(--s3)}
.win .top i{width:10px;height:10px;border-radius:50%;background:rgba(195,210,214,.35)}
.win .top span{margin-left:18px;font-size:14px;letter-spacing:.12em;color:var(--lum3)}
.win img{display:block;width:100%;height:auto}
.win .sweep{position:absolute;top:0;bottom:0;width:260px;left:0;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);mix-blend-mode:screen}
#w1{left:820px;top:190px}#w2{left:900px;top:380px}
.chip{position:absolute;display:flex;align-items:center;gap:12px;padding:16px 22px;background:var(--void);box-shadow:0 0 0 1px rgba(195,210,214,.25);font-size:20px;font-weight:500;letter-spacing:.06em;white-space:nowrap}
.chip i{width:12px;height:12px;display:block}

/* ---------- S7 Final ---------- */
#white{position:absolute;left:50%;top:50%;width:100px;height:100px;margin:-50px 0 0 -50px;background:#fff;transform:scale(0)}
#logo{position:absolute;left:50%;top:330px;width:1040px;margin-left:-520px}
#s7 .tag{position:absolute;left:0;right:0;top:700px;text-align:center;font-size:44px;font-weight:400;color:var(--encre);letter-spacing:-.01em}
#s7 .tag b{font-weight:600;color:var(--marine)}
#s7 .credit{position:absolute;left:0;right:0;bottom:120px;text-align:center;color:var(--encre2);font-size:18px}
#s7 .rule{position:absolute;left:50%;bottom:170px;width:80px;margin-left:-40px;height:2px;background:var(--marine);transform:scaleX(0)}

/* ---------- Aide ---------- */
#help{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:99;font:500 13px "Fira",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9DB2BA;background:rgba(6,26,36,.85);padding:10px 18px;opacity:0;transition:opacity .3s;pointer-events:none}
body.show-help #help{opacity:1}