/* GC ONE · Google Car SAS · Groupe ZEE */
/* Layout : une seule nuit urbaine, bandes pleine largeur, contenu sur une colonne de 1180 px, instruments en grilles 2 colonnes qui s'empilent sur mobile */
:root{
  color-scheme: dark;
  --void:#07090c;        /* fond nuit */
  --panel:#0d1117;       /* instruments */
  --panel-2:#121821;
  --line:#1f2832;        /* filets */
  --ink:#e9edf1;         /* texte */
  --mute:#8b97a4;        /* texte secondaire */
  --copper:#d38a6c;      /* accent GC ONE, issu des planches de design */
  --amber:#f2c230;       /* signalisation */
  --neutrino:#7cd3ff;    /* données NEUTRINO */
  --danger:#ff6b57;
  --f-display:"Syncopate","Eurostile","Arial Black",sans-serif;
  --f-body:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --wrap:1180px;
  --gut:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--ink);font:400 16px/1.6 var(--f-body);overflow-x:hidden;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:var(--f-mono)}
.eyebrow{font:500 11px/1.4 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--copper)}
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:.02em;text-wrap:balance;margin:0}
h2{font-size:clamp(24px,3.6vw,40px);line-height:1.12;text-transform:uppercase}
h3{font-size:14px;letter-spacing:.08em;text-transform:uppercase}
p{margin:0}
.lede{color:var(--mute);max-width:62ch;font-size:17px}
section{padding-block:clamp(64px,9vw,120px);border-top:1px solid var(--line);position:relative}
.sec-head{display:grid;gap:14px;margin-bottom:clamp(28px,4vw,48px)}

/* ---------- barre de navigation ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;padding-top:env(safe-area-inset-top,0px);
  background:color-mix(in srgb,var(--void) 78%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:58px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand b{font:700 17px var(--f-display);letter-spacing:.08em}
.brand span{font:400 10px/1.2 var(--f-mono);color:var(--mute);letter-spacing:.14em;text-transform:uppercase}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0}
.nav ul a{font:500 11px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--mute);transition:color .2s}
.nav ul a:hover{color:var(--ink)}
.nav .live{display:flex;align-items:center;gap:8px;font:500 11px var(--f-mono);color:var(--neutrino);letter-spacing:.1em}
.dot{width:7px;height:7px;border-radius:50%;background:var(--neutrino);box-shadow:0 0 10px var(--neutrino);animation:blink 1.6s infinite}
@keyframes blink{50%{opacity:.25}}
@media (max-width:860px){.nav ul{display:none}}

/* ---------- démarrage NEUTRINO ---------- */
#boot{position:fixed;inset:0;z-index:100;background:var(--void);display:grid;place-items:center;transition:opacity .6s ease,visibility .6s}
#boot.off{opacity:0;visibility:hidden;pointer-events:none}
#boot .term{width:min(520px,calc(100% - 32px));font:400 12px/1.9 var(--f-mono);color:var(--mute)}
#boot .term b{color:var(--neutrino);font-weight:500}
#boot .bar{height:2px;background:var(--line);margin-top:14px;overflow:hidden}
#boot .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--copper),var(--neutrino));animation:load 1.5s ease forwards}
@keyframes load{to{width:100%}}
#boot .logo{font:700 30px var(--f-display);color:var(--ink);letter-spacing:.12em;margin-bottom:18px}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:calc(58px + env(safe-area-inset-top,0px));border-top:0;padding-bottom:0;overflow:hidden}
#heroFx{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);align-items:center;padding-block:clamp(40px,7vw,90px) clamp(30px,5vw,60px)}
.hero h1{font-size:clamp(56px,9vw,132px);line-height:.86;letter-spacing:-.01em;margin:16px 0 18px;
  background:linear-gradient(180deg,var(--ink) 30%,color-mix(in srgb,var(--copper) 70%,var(--ink)));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .sub{font-size:clamp(17px,1.6vw,20px);color:var(--ink);max-width:30ch;line-height:1.45}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:13px 18px;font:500 12px var(--f-mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:1px solid var(--line);color:var(--ink);background:var(--panel);cursor:pointer;transition:border-color .2s,background .2s,transform .2s}
.btn:hover{border-color:var(--copper);transform:translateY(-1px)}
.btn.primary{background:var(--copper);color:#140c08;border-color:var(--copper)}
.btn.primary:hover{background:color-mix(in srgb,var(--copper) 85%,white)}
.bay{position:relative;aspect-ratio:865/530;max-width:100%;background:#d9dade;border-radius:2px;overflow:hidden;
  box-shadow:0 40px 120px -30px color-mix(in srgb,var(--copper) 45%,transparent),0 0 0 1px var(--line)}
.bay img{width:100%;height:100%;object-fit:cover}
.bay .scan{position:absolute;inset:0;background:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--neutrino) 35%,transparent) 50%,transparent 52%);
  background-size:40% 100%;background-repeat:no-repeat;animation:scan 4.5s linear infinite;mix-blend-mode:multiply;opacity:.9}
@keyframes scan{from{background-position:-60% 0}to{background-position:160% 0}}
.corner{position:absolute;width:26px;height:26px;border-color:var(--copper);border-style:solid;border-width:0}
.c1{top:10px;left:10px;border-top-width:3px;border-left-width:3px}.c2{top:10px;right:10px;border-top-width:3px;border-right-width:3px}
.c3{bottom:10px;left:10px;border-bottom-width:3px;border-left-width:3px}.c4{bottom:10px;right:10px;border-bottom-width:3px;border-right-width:3px}
.tag{position:absolute;display:flex;align-items:center;gap:6px;font:500 10px var(--f-mono);letter-spacing:.1em;color:#0b0f14;text-transform:uppercase;white-space:nowrap}
.tag i{width:9px;height:9px;border-radius:50%;background:var(--copper);box-shadow:0 0 0 4px color-mix(in srgb,var(--copper) 30%,transparent);animation:ping 2.2s infinite}
.tag span{background:rgba(255,255,255,.82);padding:3px 6px}
@keyframes ping{50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--copper) 0%,transparent)}}
.specs{position:relative;z-index:1;border-top:1px solid var(--line);background:color-mix(in srgb,var(--void) 70%,transparent)}
.specs .wrap{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-block:0}
.spec{padding:18px 18px 18px 0;display:grid;gap:4px;border-right:1px solid var(--line);padding-left:18px}
.spec:first-child{padding-left:0}.spec:last-child{border-right:0}
.spec small{font:500 10px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.spec strong{font:700 clamp(15px,1.6vw,20px) var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:.02em}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .specs .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}
  .spec{padding-left:0;border-right:0;border-bottom:1px solid var(--line)}
  .tag span{display:none}
}

/* ---------- concept ---------- */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.trio article{background:var(--void);padding:clamp(22px,3vw,34px);display:grid;gap:12px;align-content:start;min-width:0}
.trio .glyph{height:64px}
.trio p{color:var(--mute)}
@media (max-width:860px){.trio{grid-template-columns:minmax(0,1fr)}}

/* ---------- anatomie ---------- */
.anat{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(18px,3vw,36px);align-items:start}
.schem{background:var(--panel);border:1px solid var(--line);position:relative;overflow:hidden}
.schem svg{width:100%;height:auto;display:block}
.schem .legend{position:absolute;left:14px;top:12px;font:500 10px var(--f-mono);letter-spacing:.14em;color:var(--mute);text-transform:uppercase}
.hot{cursor:pointer}
.hot circle.r{fill:none;stroke:var(--copper);stroke-width:1.5;animation:ring 2s infinite;transform-box:fill-box;transform-origin:center}
.hot circle.c{fill:var(--copper);transition:r .2s}
.hot.on circle.c{fill:var(--neutrino)}
.hot.on circle.r{stroke:var(--neutrino)}
.hot text{font:500 11px var(--f-mono);fill:var(--ink);letter-spacing:.06em}
@keyframes ring{0%{transform:scale(.6);opacity:1}100%{transform:scale(1.9);opacity:0}}
.modlist{display:grid;gap:8px}
.mod{all:unset;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;padding:14px 16px;border:1px solid var(--line);background:var(--void);cursor:pointer;transition:border-color .2s,background .2s}
.mod:hover{border-color:color-mix(in srgb,var(--copper) 60%,var(--line))}
.mod:focus-visible{outline:2px solid var(--copper)}
.mod .k{font:500 10px var(--f-mono);color:var(--copper);letter-spacing:.12em;grid-row:span 2;padding-top:2px}
.mod b{font:600 15px var(--f-body)}
.mod p{color:var(--mute);font-size:14px;display:none;grid-column:2}
.mod.on{border-color:var(--neutrino);background:var(--panel)}
.mod.on .k{color:var(--neutrino)}
.mod.on p{display:block}
.dims{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,36px);align-items:end}
.dimrow{display:grid;gap:8px}
.dimrow .lab{display:flex;justify-content:space-between;font:500 11px var(--f-mono);letter-spacing:.1em;color:var(--mute);text-transform:uppercase}
.dimrow .lab b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.track{height:10px;background:var(--panel-2);position:relative;overflow:hidden}
.track i{position:absolute;inset:0 auto 0 0;background:var(--copper);transform-origin:left;animation:grow 1.4s cubic-bezier(.2,.8,.2,1) both}
.track i.ref{background:var(--mute)}
@keyframes grow{from{transform:scaleX(0)}}
@media (max-width:900px){.anat,.dims{grid-template-columns:minmax(0,1fr)}}

/* ---------- NEUTRINO ---------- */
.neutrino{background:radial-gradient(120% 80% at 80% 0%,color-mix(in srgb,var(--neutrino) 10%,var(--void)) 0%,var(--void) 60%)}
.neutrino .eyebrow{color:var(--neutrino)}
.nGrid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(18px,3vw,36px);align-items:stretch}
.nViz{position:relative;min-height:380px;border:1px solid color-mix(in srgb,var(--neutrino) 25%,var(--line));background:color-mix(in srgb,var(--panel) 80%,transparent);overflow:hidden}
#nFx{position:absolute;inset:0;width:100%;height:100%}
.omega{position:absolute;right:16px;bottom:16px;display:grid;place-items:center;width:132px;height:132px}
.omega svg{position:absolute;inset:0}
.omega div{text-align:center;font:500 10px var(--f-mono);letter-spacing:.14em;color:var(--mute)}
.omega strong{display:block;font:700 22px var(--f-display);color:var(--neutrino);font-variant-numeric:tabular-nums;letter-spacing:0}
.nViz .hud{position:absolute;left:16px;top:14px;font:500 10px/1.8 var(--f-mono);color:var(--mute);letter-spacing:.12em}
.nViz .hud b{color:var(--neutrino);font-weight:500}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:color-mix(in srgb,var(--neutrino) 18%,var(--line));border:1px solid color-mix(in srgb,var(--neutrino) 18%,var(--line));margin-top:clamp(24px,3vw,36px)}
.steps div{background:var(--void);padding:20px;display:grid;gap:8px;align-content:start;min-width:0}
.steps .n{font:500 11px var(--f-mono);color:var(--neutrino);letter-spacing:.14em}
.steps p{color:var(--mute);font-size:14px}
.console{border:1px solid var(--line);background:var(--panel);display:flex;flex-direction:column;min-width:0}
.console header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);font:500 10px var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.console ol{list-style:none;margin:0;padding:12px 16px;font:400 12px/1.65 var(--f-mono);color:var(--mute);display:grid;gap:8px;flex:1;overflow:hidden;align-content:start;min-height:320px}
.console li{border-left:2px solid var(--line);padding-left:10px;animation:feed .5s ease both;overflow-wrap:anywhere}
.console li b{color:var(--ink);font-weight:500}
.console li.y{border-color:var(--amber)} .console li.y em{color:var(--amber)}
.console li.g{border-color:var(--neutrino)} .console li.g em{color:var(--neutrino)}
.console li em{font-style:normal}
@keyframes feed{from{transform:translateY(-6px);opacity:.3}}
@media (max-width:900px){.nGrid{grid-template-columns:minmax(0,1fr)}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.steps{grid-template-columns:minmax(0,1fr)}}

/* ---------- cartes ---------- */
.mapGrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}
.mapBox{position:relative;border:1px solid var(--line);background:var(--panel);overflow:hidden;min-width:0}
.mapBox canvas{display:block;width:100%;height:auto;touch-action:manipulation;cursor:crosshair}
.mapBox .toast{position:absolute;left:12px;bottom:12px;font:500 11px var(--f-mono);letter-spacing:.06em;background:color-mix(in srgb,var(--void) 85%,transparent);border:1px solid var(--line);padding:8px 10px;color:var(--ink);max-width:calc(100% - 24px)}
.side{display:grid;gap:12px;min-width:0}
.card{border:1px solid var(--line);background:var(--void);padding:16px;display:grid;gap:12px}
.card h3{font-size:11px;color:var(--mute);font-family:var(--f-mono);font-weight:500;letter-spacing:.16em}
.kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px}
.kpi small{display:block;font:500 10px var(--f-mono);letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.kpi strong{font:700 20px var(--f-display);font-variant-numeric:tabular-nums;letter-spacing:0}
.kpi strong.c{color:var(--copper)} .kpi strong.n{color:var(--neutrino)}
.toggles{display:grid;gap:8px}
.tg{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;cursor:pointer;user-select:none}
.tg input{appearance:none;-webkit-appearance:none;width:34px;height:18px;border:1px solid var(--line);background:var(--panel-2);position:relative;cursor:pointer;flex:none;margin:0;transition:background .2s,border-color .2s}
.tg input::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;background:var(--mute);transition:transform .2s,background .2s}
.tg input:checked{background:color-mix(in srgb,var(--neutrino) 25%,var(--panel-2));border-color:var(--neutrino)}
.tg input:checked::after{transform:translateX(16px);background:var(--neutrino)}
.rng{display:grid;gap:4px;font-size:14px}
.rng span{display:flex;justify-content:space-between}
.rng output{font:500 12px var(--f-mono);color:var(--copper);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--copper)}
.tele{display:grid;gap:6px;font:400 12px var(--f-mono)}
.tele div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed var(--line);padding-bottom:5px}
.tele div span{color:var(--mute)}
.tele .id{font:700 16px var(--f-display);color:var(--copper);border:0;padding:0}
.batt{height:6px;background:var(--panel-2)} .batt i{display:block;height:100%;background:var(--neutrino);transition:width .3s}
.pill{display:inline-block;padding:2px 7px;font:500 10px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid currentColor}
.legendRow{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font:400 12px var(--f-mono);color:var(--mute)}
.legendRow span{display:inline-flex;align-items:center;gap:7px}
.sw{width:14px;height:6px;display:inline-block}
@media (max-width:980px){.mapGrid{grid-template-columns:minmax(0,1fr)}.side{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.btnRow{display:flex;flex-wrap:wrap;gap:8px}
.btn.sm{padding:9px 12px;font-size:11px}
.btn.on{border-color:var(--neutrino);color:var(--neutrino)}
.decision{font:700 15px var(--f-display);letter-spacing:.04em}

/* ---------- galerie ---------- */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,620px);gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;scrollbar-color:var(--copper) var(--panel)}
.strip figure{margin:0;scroll-snap-align:start;display:grid;gap:10px}
.strip .frame{position:relative;background:#d9dade;aspect-ratio:1100/619;overflow:hidden;border:1px solid var(--line)}
.strip img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.strip figure:hover img{transform:scale(1.04)}
.strip figcaption{display:flex;justify-content:space-between;gap:12px;font:500 11px var(--f-mono);letter-spacing:.1em;color:var(--mute);text-transform:uppercase}
.strip figcaption b{color:var(--ink);font-weight:500}

/* ---------- pied ---------- */
footer{border-top:1px solid var(--line);padding-block:clamp(48px,7vw,80px) 40px}
.foot{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:32px}
.foot address{font-style:normal;color:var(--mute);line-height:1.8}
.foot address b{color:var(--ink);font-weight:600}
.big{font:700 clamp(40px,8vw,96px)/.9 var(--f-display);letter-spacing:.02em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--copper) 70%,transparent);margin-top:48px;white-space:nowrap;overflow:hidden}
.legal{margin-top:24px;font:400 11px/1.7 var(--f-mono);color:var(--mute);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
@media (max-width:860px){.foot{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important}
  #boot{display:none}
}
/* compléments : langues, carrières, investisseurs */
.lang{display:flex;gap:2px;flex:none}
.lang button{all:unset;cursor:pointer;font:500 11px var(--f-mono);letter-spacing:.1em;padding:6px 7px;color:var(--mute);border:1px solid transparent}
.lang button:hover{color:var(--ink)}
.lang button[aria-pressed="true"]{color:var(--ink);border-color:var(--copper)}
.lang button:focus-visible{outline:2px solid var(--copper)}
.navR{display:flex;align-items:center;gap:16px}
@media (max-width:1180px){.nav .live{display:none}}
@media (max-width:1040px){.nav ul{display:none}}
.jobs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.job{border:1px solid var(--line);background:var(--panel);padding:22px;display:grid;gap:10px;align-content:start;min-width:0;transition:border-color .2s}
.job:hover{border-color:color-mix(in srgb,var(--copper) 60%,var(--line))}
.job .team{font:500 10px var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--copper)}
.job h3{font:600 18px/1.3 var(--f-body);letter-spacing:0;text-transform:none}
.job p{color:var(--mute);font-size:14px}
.job .meta{font:400 12px var(--f-mono);color:var(--mute);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px;padding-top:12px;border-top:1px dashed var(--line)}
.job.open{background:var(--void);border-style:dashed;grid-column:1/-1}
@media (max-width:980px){.jobs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.jobs{grid-template-columns:minmax(0,1fr)}}
.inv{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(18px,3vw,40px);align-items:start}
.thesis{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}
.thesis div{background:var(--void);padding:22px;display:grid;gap:8px}
.thesis p{color:var(--mute);font-size:15px}
.road{border:1px solid var(--line);background:var(--panel);padding:22px;display:grid;gap:0}
.road h3{font:500 11px var(--f-mono);letter-spacing:.16em;color:var(--mute);margin-bottom:14px}
.road ol{list-style:none;margin:0;padding:0;display:grid}
.road li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 0;border-top:1px solid var(--line);position:relative}
.road li i{width:12px;height:12px;border:2px solid var(--mute);border-radius:50%;margin-top:4px}
.road li.done i{background:var(--copper);border-color:var(--copper);box-shadow:0 0 12px var(--copper)}
.road li.next i{border-color:var(--neutrino);animation:blink 1.6s infinite}
.road li b{font-weight:600;display:block}
.road li span.d{color:var(--mute);font-size:14px}
.road li .pill{white-space:nowrap}
.road .cta{margin-top:20px}
.road .mail{font:500 13px var(--f-mono);color:var(--ink);user-select:all;margin-top:12px}
@media (max-width:900px){.inv{grid-template-columns:minmax(0,1fr)}}