/* ═══════════════════════════════════════════════════════════
   NULL-OS · Piste A "OVERSEER" — terminal Pip-Boy / secteur oxyde
   Dominante : rouille structurelle. Accent unique : cyan phosphore.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* Monde rouillé (chaud, désaturé) */
  --void:      #0b0906;   /* noir cuit */
  --void-2:    #141009;
  --rust-deep: #3a2418;
  --rust:      #5c3a24;
  --rust-lit:  #8a5a3c;
  --amber:     #ff9e3d;   /* réservé warning / détails */

  /* Écran phosphore (froid) — la tech qui survit */
  --cy:        #36e0ff;
  --cy-lit:    #7ff0ff;
  --cy-dim:    color-mix(in oklab, var(--cy) 55%, var(--void));

  --ink:       #d8cbb8;   /* texte "papier bruni" hors écran */
  --ink-soft:  color-mix(in oklab, var(--ink) 62%, var(--void));

  --frame-w:   clamp(10px, 1.6vw, 22px);
  --ease:      cubic-bezier(.16,1,.3,1);
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
  --stencil: "Saira Stencil One", "JetBrains Mono", monospace;
  --brand: "Poppins", system-ui, sans-serif;
}

*{ box-sizing:border-box; margin:0; }
/* overflow-x:clip (pas hidden) : contient les débordements du scroll-scrub
   (translateX des .unit hors-champ) sans créer de conteneur de défilement,
   donc sans casser les ancres ni un futur sticky. body seul ne suffit pas. */
html{ -webkit-text-size-adjust:100%; overflow-x:clip; scrollbar-gutter:stable; }
body{
  min-height:100svh;
  font-family:var(--mono);
  color:var(--ink);
  background:
    radial-gradient(120% 90% at 50% -10%, #1a1109 0%, var(--void) 55%, #060402 100%);
  overflow-x:hidden;
}

/* ── Cadre métal rouillé (bord d'écran) ───────────────────── */
.frame{
  /* Hauteur figée en lvh (unité STATIQUE = grande hauteur, barre d'URL repliée)
     plutôt qu'un ancrage bottom:0 : sur mobile, un fixed calé en bas suit la
     barre d'URL et son bord bas "saute" + laisse le contenu fuir en dessous
     quand la barre se replie/déplie au scroll. Une hauteur constante tue les deux. */
  position:fixed; top:0; left:0; right:0; height:100vh; height:100lvh;
  z-index:40; pointer-events:none;
  border:var(--frame-w) solid transparent;
  border-image:
    linear-gradient(135deg,#7a4a2b,#2e1c10 22%,#8a5a3c 48%,#26160c 74%,#6e3b1f) 1;
  box-shadow:
    inset 0 0 0 1px color-mix(in oklab, var(--rust-lit) 60%, transparent),
    inset 0 0 60px 8px rgba(0,0,0,.85),
    inset 0 0 160px 40px rgba(0,0,0,.55);
}
/* Rivets d'angle — position:absolute (pas fixed) pour s'ancrer au .frame
   à hauteur figée : sinon leur bottom:0 sauterait comme le cadre. */
.rivet{
  position:absolute; width:14px; height:14px; border-radius:50%; z-index:41; pointer-events:none;
  background:
    radial-gradient(circle at 35% 30%, #d7a878 0 18%, #7a4a2b 45%, #241209 100%);
  box-shadow:0 1px 2px rgba(0,0,0,.9), inset 0 0 3px rgba(0,0,0,.6);
}
.rivet--tl{ top:calc(var(--frame-w) * .38); left:calc(var(--frame-w) * .38); }
.rivet--tr{ top:calc(var(--frame-w) * .38); right:calc(var(--frame-w) * .38); }
.rivet--bl{ bottom:calc(var(--frame-w) * .38); left:calc(var(--frame-w) * .38); }
.rivet--br{ bottom:calc(var(--frame-w) * .38); right:calc(var(--frame-w) * .38); }

/* ── Overlays plein écran ─────────────────────────────────── */
/* Même logique que .frame : hauteur lvh figée, pas de bottom mouvant
   (sinon scanlines/vignette "respirent" au repli de la barre d'URL). */
.fx{ position:fixed; top:0; left:0; right:0; height:100vh; height:100lvh; pointer-events:none; }
.fx--scan{
  z-index:30; mix-blend-mode:overlay; opacity:.5;
  background:repeating-linear-gradient(
    0deg, rgba(0,0,0,.42) 0 1px, transparent 1px 3px);
}
.fx--vignette{
  z-index:31;
  background:radial-gradient(120% 100% at 50% 42%, transparent 52%, rgba(0,0,0,.72) 100%);
}
.fx--grain{ z-index:32; width:100%; height:100%; opacity:.05; mix-blend-mode:overlay; }
.fx--flicker{ z-index:33; background:var(--cy); mix-blend-mode:screen; opacity:0; }

/* ── Grille générale ──────────────────────────────────────── */
.shell{
  position:relative; z-index:10;
  padding-inline:clamp(20px,5vw,72px);
}
/* Premier écran plein viewport — reprend la grille validée du hero */
.hero-screen{
  min-height:100svh;
  padding-block:clamp(20px,4vw,46px);
  display:grid; grid-template-rows:auto 1fr auto; gap:clamp(18px,3vh,34px);
}

/* ── Barre système ────────────────────────────────────────── */
.sysbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-bottom:14px;
  border-bottom:1px solid color-mix(in oklab, var(--rust-lit) 40%, transparent);
}
.lockup{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.lockup__mark{ filter:drop-shadow(0 0 6px color-mix(in oklab,var(--cy) 45%, transparent)); }
.lockup__word{
  font-family:var(--brand); font-weight:700; font-size:clamp(16px,2vw,20px);
  color:#f4f7fb; letter-spacing:-.01em;
}
.lockup__word .dot{ color:var(--cy); text-shadow:0 0 12px color-mix(in oklab,var(--cy) 70%, transparent); }

.sysbar__meta{ display:flex; align-items:center; gap:10px; }

/* Switch de langue — style terminal [ FR · EN ] */
.langsw{
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 8px; border-radius:3px;
  border:1px solid color-mix(in oklab,var(--cy) 34%, transparent);
  background:color-mix(in oklab,#041012 55%, transparent);
}
.langsw__btn{
  font:inherit; font-size:11px; font-weight:700; letter-spacing:.12em;
  background:none; border:0; padding:2px 4px; cursor:pointer;
  color:var(--ink-soft); transition:color .2s var(--ease), text-shadow .2s var(--ease);
}
.langsw__btn:hover{ color:var(--cy-lit); }
.langsw__btn[aria-pressed="true"]{ color:var(--cy-lit); text-shadow:0 0 10px color-mix(in oklab,var(--cy) 70%, transparent); }
.langsw__btn:focus-visible{ outline:2px solid var(--cy-lit); outline-offset:2px; border-radius:2px; }
.langsw__sep{ color:color-mix(in oklab,var(--cy) 40%, var(--ink-soft)); font-size:11px; }

.chip{
  font-size:11px; letter-spacing:.14em; color:var(--ink-soft);
  padding:5px 9px; border:1px solid color-mix(in oklab,var(--rust-lit) 45%, transparent);
  border-radius:3px; background:color-mix(in oklab,var(--rust-deep) 40%, transparent);
  white-space:nowrap;
}
.chip--mono{ color:var(--cy-dim); }
.chip--live{ color:var(--cy-lit); display:inline-flex; align-items:center; gap:7px; border-color:color-mix(in oklab,var(--cy) 40%, transparent); }
.chip--live i{
  width:7px; height:7px; border-radius:50%; background:var(--cy);
  box-shadow:0 0 8px 1px var(--cy); animation:pulse 2s var(--ease) infinite;
}
@media (max-width:720px){ .chip--live span, .chip:not(.chip--live){ } .chip{ font-size:10px; padding:4px 7px; } }

/* ── Hero ─────────────────────────────────────────────────── */
.hero{
  align-self:center;
  display:grid; grid-template-columns:1.05fr .95fr; align-items:center;
  gap:clamp(28px,5vw,72px);
}
.overline{
  font-size:clamp(11px,1.2vw,13px); letter-spacing:.22em; color:var(--amber);
  margin-bottom:clamp(14px,2.4vh,22px);
  opacity:.9;
}
.title{
  font-family:var(--stencil); font-weight:400;
  line-height:.9; letter-spacing:.01em;
  font-size:clamp(46px,8.4vw,120px);
  text-transform:uppercase;
  color:#efe3d1;
  text-shadow:0 2px 0 rgba(0,0,0,.6), 0 0 30px rgba(0,0,0,.5);
}
.title > span{ display:block; }  /* enfants directs seulement — pas le .title__stop imbriqué */
.title__l2{ color:#f6ece0; }
.title__l3{ color:var(--cy-lit); white-space:nowrap; text-shadow:0 0 26px color-mix(in oklab,var(--cy) 55%, transparent); }
/* Le "." de Saira Stencil One est un énorme bloc carré → on le rend en mono, discret,
   comme un curseur-bloc de terminal cyan collé au mot. */
.title__stop{
  color:var(--cy); font-family:var(--mono); font-size:.5em; font-weight:700;
  margin-left:.06em; vertical-align:.06em;
  text-shadow:0 0 14px color-mix(in oklab,var(--cy) 70%, transparent);
}

.lede{
  margin:clamp(18px,3vh,26px) 0 clamp(26px,4vh,34px);
  max-width:46ch; min-height:4.2em;
  font-size:clamp(13px,1.35vw,15px); line-height:1.75;
  color:var(--cy-dim);
}
.lede .cursor{ color:var(--cy-lit); }

/* CTA */
.cta{ display:flex; flex-wrap:wrap; gap:14px; }
.btn{
  --pad:14px 22px;
  position:relative; display:inline-flex; align-items:center; gap:10px;
  padding:var(--pad); text-decoration:none;
  font-size:13px; letter-spacing:.1em; font-weight:500;
  border-radius:4px; transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.btn--primary{
  color:var(--void); background:var(--cy);
  box-shadow:0 0 0 1px color-mix(in oklab,var(--cy) 60%, transparent), 0 0 26px -4px var(--cy);
  font-weight:700;
}
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px var(--cy-lit), 0 0 40px -2px var(--cy); background:var(--cy-lit); }
.btn__caret{ opacity:.7; }
.btn__key{
  margin-left:4px; padding:1px 7px; border-radius:3px;
  background:color-mix(in oklab,var(--void) 25%, transparent); font-size:11px;
}
.btn--ghost{
  color:var(--ink); border:1px solid color-mix(in oklab,var(--rust-lit) 55%, transparent);
  background:color-mix(in oklab,var(--rust-deep) 30%, transparent);
}
.btn--ghost:hover{ transform:translateY(-2px); border-color:var(--cy); color:var(--cy-lit); }
.btn:focus-visible{ outline:2px solid var(--cy-lit); outline-offset:3px; }

/* ── CRT / le loup = écran allumé ─────────────────────────── */
.crt{ justify-self:center; width:min(100%,460px); }
.crt__bezel{
  position:relative; padding:clamp(16px,2.4vw,26px);
  border-radius:22px;
  background:
    linear-gradient(155deg,#6e3b1f,#241309 40%,#5c3a24 68%,#1a0f07);
  box-shadow:
    inset 0 2px 4px rgba(255,190,140,.18),
    inset 0 -6px 18px rgba(0,0,0,.7),
    0 30px 60px -20px rgba(0,0,0,.85);
}
/* Croûte de rouille sur le bezel */
.crt__bezel::before{
  content:""; position:absolute; inset:0; border-radius:22px; pointer-events:none;
  background:
    radial-gradient(40% 30% at 18% 12%, rgba(139,90,60,.55), transparent 60%),
    radial-gradient(50% 40% at 85% 80%, rgba(58,36,24,.7), transparent 60%),
    radial-gradient(30% 24% at 70% 20%, rgba(199,68,14,.22), transparent 60%);
  mix-blend-mode:overlay; opacity:.9;
}
.crt__screw{
  position:absolute; width:12px; height:12px; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 35% 30%,#e2b385 0 20%,#6e3b1f 55%,#1c0e06);
  box-shadow:inset 0 0 3px rgba(0,0,0,.7), 0 1px 1px rgba(0,0,0,.8);
}
.crt__screw::after{ /* fente de vis */
  content:""; position:absolute; inset:0; margin:auto; width:8px; height:1.6px;
  background:rgba(0,0,0,.55); border-radius:2px; transform:rotate(35deg);
}
.crt__screw--tl{ top:9px; left:9px } .crt__screw--tr{ top:9px; right:9px }
.crt__screw--bl{ bottom:9px; left:9px } .crt__screw--br{ bottom:9px; right:9px }

.crt__glass{
  position:relative; aspect-ratio:1/1; border-radius:14px; overflow:hidden;
  background:
    radial-gradient(90% 90% at 50% 42%, #08201f 0%, #041012 55%, #010708 100%);
  box-shadow:
    inset 0 0 0 1px rgba(54,224,255,.18),
    inset 0 0 70px 6px rgba(0,0,0,.9),
    inset 0 0 120px 30px rgba(0,0,0,.6); /* courbure/vignette écran */
}
/* Scanlines internes plus fines + halo phosphore */
.crt__scan{
  position:absolute; inset:0; z-index:3; pointer-events:none; mix-blend-mode:overlay;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 1px, transparent 1px 3px),
    radial-gradient(70% 60% at 50% 44%, rgba(54,224,255,.14), transparent 70%);
}
.crt__wolf{
  position:absolute; inset:0; margin:auto; width:74%; height:74%; z-index:2;
  filter:drop-shadow(0 0 2px rgba(54,224,255,.35));
  opacity:0; transform:scale(.94);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.crt__wolf .eye{
  filter:drop-shadow(0 0 6px var(--cy)) drop-shadow(0 0 14px color-mix(in oklab,var(--cy) 60%, transparent));
  animation:eyepulse 3.2s ease-in-out infinite;
}
.crt__hud{
  position:absolute; z-index:4; inset:auto 14px 12px; display:flex; justify-content:space-between;
  font-size:10px; letter-spacing:.12em; color:var(--cy-dim); opacity:.75;
}
.crt__boot{
  position:absolute; z-index:4; left:16px; top:14px; right:16px;
  font-size:11px; line-height:1.7; color:var(--cy-lit); white-space:pre-wrap;
  text-shadow:0 0 8px color-mix(in oklab,var(--cy) 55%, transparent);
}
.crt__cap{
  margin-top:14px; text-align:center; font-size:11px; letter-spacing:.08em;
  color:var(--ink-soft);
}
/* Révélation post-boot */
.booted .crt__wolf{ opacity:1; transform:scale(1); }
.booted .crt__boot{ opacity:0; transition:opacity .6s var(--ease); }

/* ── Pied ─────────────────────────────────────────────────── */
.footbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding-top:14px; border-top:1px solid color-mix(in oklab,var(--rust-lit) 40%, transparent);
  font-size:11px; letter-spacing:.12em; color:var(--ink-soft);
}
.footbar__mid{ color:var(--cy-dim); }

/* ═══════════════════════════════════════════════════════════
   SECTIONS SOUS LE HERO
   ═══════════════════════════════════════════════════════════ */
.sec{ padding-block:clamp(64px,11vh,140px); max-width:1180px; margin-inline:auto; width:100%; }
.sec__head{ max-width:70ch; margin-bottom:clamp(34px,5vh,60px); }
.sec__title{
  font-family:var(--stencil); font-weight:400; text-transform:uppercase;
  line-height:.92; letter-spacing:.01em; color:#efe3d1;
  font-size:clamp(34px,5.4vw,74px); margin:.35em 0 .4em;
}
.sec__title .hl{ color:var(--cy-lit); text-shadow:0 0 24px color-mix(in oklab,var(--cy) 50%, transparent); }
.sec__intro{ max-width:56ch; color:var(--ink-soft); font-size:clamp(13px,1.35vw,15px); line-height:1.75; }

/* ── 1 · Unités (fiches) ──────────────────────────────────── */
.units{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,1.6vw,22px); }
.unit{
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:clamp(18px,2vw,26px);
  border-radius:12px;
  background:
    linear-gradient(160deg, color-mix(in oklab,var(--rust) 26%, var(--void)) 0%, var(--void) 60%);
  border:1px solid color-mix(in oklab,var(--rust-lit) 40%, transparent);
  box-shadow:inset 0 1px 0 color-mix(in oklab,var(--rust-lit) 30%, transparent), 0 18px 40px -28px #000;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
  overflow:hidden;
}
.unit::before{ /* croûte de rouille d'angle */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background:radial-gradient(60% 50% at 100% 0%, rgba(199,68,14,.35), transparent 60%);
}
.unit:hover{
  transform:translateY(-4px);
  border-color:color-mix(in oklab,var(--cy) 45%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in oklab,var(--cy) 22%, transparent), 0 26px 50px -26px #000, 0 0 40px -18px var(--cy);
}
.unit__bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.unit__code{ font-size:11px; letter-spacing:.18em; color:var(--amber); font-weight:700; }
.chip--sm{ font-size:10px; padding:3px 7px; }
.unit__glyph{ width:52px; height:52px; }
.unit__glyph svg{ width:100%; height:100%; filter:drop-shadow(0 0 5px color-mix(in oklab,var(--cy) 40%, transparent)); }
.unit__name{ font-family:var(--stencil); font-weight:400; font-size:clamp(22px,2.6vw,30px); letter-spacing:.02em; color:#f2ead9; text-transform:uppercase; }
.unit__role{ font-size:11px; letter-spacing:.14em; color:var(--cy-dim); text-transform:uppercase; margin-top:-6px; }
.unit__desc{ font-size:13px; line-height:1.65; color:var(--ink-soft); }
.unit__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:auto; padding-top:14px;
  border-top:1px dashed color-mix(in oklab,var(--rust-lit) 35%, transparent); }
.unit__stats div{ display:flex; flex-direction:column; gap:2px; }
.unit__stats dt{ font-size:9.5px; letter-spacing:.12em; color:var(--ink-soft); }
.unit__stats dd{ margin:0; font-size:13px; font-weight:700; color:var(--cy-lit); }

/* ── 2 · Séquence (log système) ───────────────────────────── */
.log{
  border-radius:14px; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, #08201f 0%, #041012 60%, #010708 100%);
  box-shadow:inset 0 0 0 1px rgba(54,224,255,.14), inset 0 0 70px 6px rgba(0,0,0,.85);
}
.log__row{
  position:relative; display:grid; grid-template-columns:auto 1fr auto; gap:clamp(14px,2vw,28px);
  align-items:baseline; padding:clamp(18px,2.6vh,28px) clamp(18px,2.4vw,34px);
  border-bottom:1px solid color-mix(in oklab,var(--cy) 12%, transparent);
}
.log__row:last-child{ border-bottom:0; }
.log__idx{ font-size:13px; font-weight:700; color:var(--amber); letter-spacing:.06em; }
.log__title{ font-family:var(--mono); font-weight:700; font-size:clamp(15px,1.9vw,20px); letter-spacing:.04em; color:var(--cy-lit); text-transform:uppercase; text-shadow:0 0 12px color-mix(in oklab,var(--cy) 45%, transparent); }
.log__caret{ opacity:.6; margin-right:6px; }
.log__desc{ margin-top:8px; font-size:13px; line-height:1.7; color:var(--ink-soft); max-width:62ch; }
.log__t{ font-size:11px; letter-spacing:.1em; color:var(--cy-dim); white-space:nowrap; }

/* ── 3 · Contact (panneau CRT) ────────────────────────────── */
.sec--contact{ max-width:900px; }
.contact__panel{
  position:relative; padding:clamp(16px,2.2vw,24px); border-radius:22px;
  background:linear-gradient(155deg,#6e3b1f,#241309 40%,#5c3a24 68%,#1a0f07);
  box-shadow:inset 0 2px 4px rgba(255,190,140,.18), inset 0 -6px 18px rgba(0,0,0,.7), 0 30px 60px -20px rgba(0,0,0,.85);
}
.contact__panel::before{
  content:""; position:absolute; inset:0; border-radius:22px; pointer-events:none; mix-blend-mode:overlay; opacity:.85;
  background:radial-gradient(40% 30% at 16% 12%, rgba(139,90,60,.5), transparent 60%),
            radial-gradient(50% 40% at 86% 82%, rgba(58,36,24,.7), transparent 60%);
}
.contact__glass{
  position:relative; overflow:hidden; border-radius:14px;
  padding:clamp(30px,5vw,60px);
  background:radial-gradient(110% 90% at 50% 0%, #08201f 0%, #041012 60%, #010708 100%);
  box-shadow:inset 0 0 0 1px rgba(54,224,255,.16), inset 0 0 90px 10px rgba(0,0,0,.7);
}
.contact__title{ font-family:var(--stencil); font-weight:400; text-transform:uppercase; line-height:.92;
  font-size:clamp(30px,5vw,60px); color:#efe3d1; margin:.3em 0 .35em; }
.contact__title .hl{ color:var(--cy-lit); text-shadow:0 0 24px color-mix(in oklab,var(--cy) 55%, transparent); }
.contact__lede{ max-width:48ch; color:var(--ink-soft); font-size:clamp(13px,1.4vw,15px); line-height:1.7; margin-bottom:clamp(24px,4vh,34px); }

.term__label{ display:block; font-size:12px; letter-spacing:.1em; color:var(--cy-dim); margin-bottom:12px; }
.term__row{ display:flex; align-items:stretch; gap:10px; flex-wrap:wrap;
  border:1px solid color-mix(in oklab,var(--cy) 30%, transparent); border-radius:8px; padding:8px 8px 8px 14px;
  background:rgba(4,16,18,.6); }
.term__prompt{ align-self:center; color:var(--cy); font-weight:700; }
.term__input{
  flex:1 1 200px; min-width:0; background:transparent; border:0; outline:0;
  color:var(--cy-lit); font-family:var(--mono); font-size:15px; padding:8px 4px; caret-color:var(--cy);
}
.term__input::placeholder{ color:color-mix(in oklab,var(--cy) 40%, var(--ink-soft)); }
.term__input:focus-visible{ box-shadow:0 0 0 0; }
.term__row:focus-within{ border-color:var(--cy); box-shadow:0 0 26px -8px var(--cy); }
.term__send{ flex:0 0 auto; }
.term__note{ margin-top:14px; font-size:12px; letter-spacing:.04em; color:var(--ink-soft); }
.term__note a{ color:var(--cy-lit); text-decoration:none; border-bottom:1px solid color-mix(in oklab,var(--cy) 45%, transparent); }
.term__note a:hover{ color:#fff; }
.term__note[data-state="ok"]{ color:var(--cy-lit); }

/* ── 4 · Footer ───────────────────────────────────────────── */
.site-footer{
  max-width:1180px; margin:0 auto; width:100%;
  padding:clamp(34px,5vh,54px) 0 clamp(28px,4vh,40px);
  border-top:1px solid color-mix(in oklab,var(--rust-lit) 34%, transparent);
  display:flex; flex-direction:column; gap:clamp(18px,3vh,26px);
}
.site-footer__top{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.lockup--sm .lockup__word{ font-size:16px; }
.site-footer__nav{ display:flex; flex-wrap:wrap; gap:12px 20px; }
.site-footer__nav a{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none; transition:color .25s var(--ease); }
.site-footer__nav a:hover{ color:var(--cy-lit); }
.site-footer__slogan{ font-size:13px; letter-spacing:.08em; color:var(--cy-dim); }
.site-footer__legal{ display:flex; flex-wrap:wrap; gap:6px 22px; font-size:11px; letter-spacing:.08em; color:color-mix(in oklab,var(--ink-soft) 78%, var(--void)); }

/* ═══════════════════════════════════════════════════════════
   SCROLL-SCRUB (piloté en JS via rAF + getBoundingClientRect)
   Choix : JS plutôt que animation-timeline:view() — plus fiable,
   et surtout le contenu reste visible si le JS ne tourne pas
   (aucune opacité de base à 0 en CSS ; les transforms viennent du JS).
   ═══════════════════════════════════════════════════════════ */
.hero-screen{ position:relative; z-index:2; }
.sec, .site-footer{ position:relative; z-index:2; }
/* Le scroll-scrub décale les cartes/lignes horizontalement avant leur entrée
   en vue : on confine ce débordement transitoire à la section (clip X seul,
   Y reste visible) pour zéro overflow horizontal mesurable, à toute largeur. */
.sec--units, .sec--seq{ overflow-x:clip; }

/* Le CRT du hero "vit" avec le scroll : tilt 3D + lift */
.crt{ perspective:1200px; }
.crt__bezel{ transform-style:preserve-3d; will-change:transform; }
.unit{ will-change:transform, opacity; }
.contact__panel{ will-change:transform; }
.sec--contact{ perspective:1000px; }

/* Barre de scan qui balaie le panneau log */
.log{ position:relative; }
.log__scan{
  position:absolute; left:0; right:0; top:0; height:2px; z-index:5; pointer-events:none;
  opacity:0; will-change:transform, opacity;
  background:linear-gradient(90deg, transparent, var(--cy-lit) 22%, #fff 50%, var(--cy-lit) 78%, transparent);
  box-shadow:0 0 18px 2px color-mix(in oklab,var(--cy) 65%, transparent);
}

/* ── Animations ───────────────────────────────────────────── */
@keyframes pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@keyframes eyepulse{ 0%,100%{ opacity:1 } 45%{ opacity:.72 } }
@keyframes flick{
  0%,96%,100%{ opacity:0 } 97%{ opacity:.035 } 98%{ opacity:0 } 99%{ opacity:.05 }
}
.fx--flicker{ animation:flick 7s steps(1) infinite; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; gap:clamp(26px,6vh,44px); }
  .hero__copy{ order:2; }
  .crt{ order:1; width:min(78vw,360px); }
  /* 13vw rendait le min-content de "UN HUMAIN." (~9×fs de large en stencil)
     plus large que le viewport → toute la grille hero débordait. 9.5vw tient
     de 320 à 900px tout en restant imposant. */
  .title{ font-size:clamp(32px,9.5vw,74px); }
  .lede{ min-height:auto; }
}
@media (max-width:720px){
  .sysbar__meta{ gap:7px }
  .chip{ display:none }
  .chip--live{ display:inline-flex }
  .footbar__mid{ display:none }
  .units{ grid-template-columns:1fr; }
  .log__row{ grid-template-columns:auto 1fr; }
  .log__t{ grid-column:2; justify-self:start; margin-top:6px; }
  .term__send{ flex:1 1 100%; justify-content:center; }
}
@media (max-width:480px){
  /* Sous 480, logo + langsw + chip "SIGNAL" ne tiennent plus sur une ligne.
     On garde l'essentiel (marque + switch FR/EN) ; le badge signal saute.
     Scopé à .sysbar pour préserver les badges "EN LIGNE" des cartes. */
  .sysbar .chip--live{ display:none }
}
@media (max-width:420px){
  .footbar{ font-size:9.5px }
  .site-footer__legal{ font-size:10px }
}

/* ── Accessibilité : mouvement réduit ─────────────────────── */
@media (prefers-reduced-motion:reduce){
  .fx--flicker{ animation:none; display:none; }
  .chip--live i, .crt__wolf .eye{ animation:none; }
  .crt__wolf{ opacity:1; transform:none; transition:none; }
  .crt__boot{ display:none; }
  .unit, .log__row, .sec__head{ animation:none; opacity:1; transform:none; }
  .unit:hover{ transform:none; }
  /* Scroll-scrub neutralisé */
  .crt__bezel, .contact__panel, .unit, .hero__copy{ transform:none !important; opacity:1 !important; }
  .log__scan{ display:none; }
}

/* ═══════════════════════════════════════════════════════════
   TERMINAL CONVERSATIONNEL — amorce contact + bouton flottant + overlay
   Réutilise variables/idiome oxyde ; cyan = seul accent vivant.
   ═══════════════════════════════════════════════════════════ */

/* ── Amorce dans la section contact ───────────────────────── */
.contact__launch{ display:flex; flex-direction:column; gap:clamp(16px,3vh,22px); }
.contact__hint{ color:var(--ink-soft); font-size:clamp(13px,1.35vw,15px); line-height:1.7; max-width:52ch; }
.contact__signals{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.sig{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:8px 13px; border-radius:999px;
  font-family:var(--mono); font-size:12px; letter-spacing:.02em; color:var(--ink);
  border:1px solid color-mix(in oklab,var(--rust-lit) 45%, transparent);
  background:color-mix(in oklab,var(--rust-deep) 26%, transparent);
  transition:transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease);
}
.sig .btn__caret{ color:var(--cy); opacity:.7; }
.sig:hover{ transform:translateY(-2px); color:var(--cy-lit); border-color:var(--cy); box-shadow:0 0 22px -10px var(--cy); }
.sig:focus-visible{ outline:2px solid var(--cy-lit); outline-offset:2px; }
.contact__open{ align-self:flex-start; }
.term__note[data-state="err"]{ color:var(--amber); }

/* ── Bouton d'appel flottant (sticky) ─────────────────────── */
.hail{
  position:fixed; z-index:39;
  right:max(18px, env(safe-area-inset-right));
  bottom:max(18px, env(safe-area-inset-bottom));
  display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  padding:13px 20px; border:0; border-radius:999px;
  font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap;
  color:var(--void); background:var(--cy);
  box-shadow:0 0 0 1px color-mix(in oklab,var(--cy) 60%, transparent), 0 10px 30px -8px rgba(0,0,0,.75), 0 0 30px -6px var(--cy);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), opacity .3s var(--ease);
}
.hail__pulse{
  width:8px; height:8px; border-radius:50%; background:var(--void);
  animation:hailpulse 2.4s var(--ease) infinite;
}
.hail:hover{ transform:translateY(-2px); background:var(--cy-lit);
  box-shadow:0 0 0 1px var(--cy-lit), 0 14px 38px -8px rgba(0,0,0,.85), 0 0 46px -4px var(--cy); }
.hail:focus-visible{ outline:2px solid var(--cy-lit); outline-offset:3px; }
body.term-open .hail,
body.hail-hide .hail{ opacity:0; pointer-events:none; transform:translateY(8px); }
@keyframes hailpulse{
  0%{ box-shadow:0 0 0 0 rgba(11,9,6,.5) }
  70%{ box-shadow:0 0 0 8px rgba(11,9,6,0) }
  100%{ box-shadow:0 0 0 0 rgba(11,9,6,0) }
}

/* ── Overlay + fenêtre terminal ───────────────────────────── */
.tov{ position:fixed; inset:0; z-index:48; display:flex; align-items:center; justify-content:center; padding:20px; }
.tov[hidden]{ display:none; }
.tov__scrim{
  position:absolute; inset:0; background:rgba(3,6,7,.72);
  -webkit-backdrop-filter:blur(3px) saturate(.8); backdrop-filter:blur(3px) saturate(.8);
  opacity:0; transition:opacity .3s var(--ease);
}
.tov.is-open .tov__scrim{ opacity:1; }
.tov__win{
  position:relative; width:min(560px, 100%); max-height:min(88dvh, 760px);
  display:flex; flex-direction:column; overflow:hidden;
  border-radius:18px;
  background:linear-gradient(155deg,#6e3b1f,#241309 42%,#5c3a24 70%,#1a0f07);
  box-shadow:inset 0 2px 4px rgba(255,190,140,.18), inset 0 -6px 18px rgba(0,0,0,.7), 0 40px 90px -20px rgba(0,0,0,.9);
  transform:translateY(14px) scale(.98); opacity:0;
  transition:transform .34s var(--ease), opacity .34s var(--ease);
}
.tov.is-open .tov__win{ transform:none; opacity:1; }
/* Scanlines CRT sur toute la fenêtre (léger) */
.tov__win::after{
  content:""; position:absolute; inset:0; z-index:6; pointer-events:none;
  mix-blend-mode:overlay; opacity:.32; border-radius:inherit;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.5) 0 1px, transparent 1px 3px);
}

/* Barre de titre facon fenetre terminal */
.tov__bar{
  position:relative; z-index:7; flex:0 0 auto;
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:linear-gradient(180deg, rgba(20,12,7,.6), rgba(10,6,3,.25));
  border-bottom:1px solid color-mix(in oklab,var(--rust-lit) 45%, transparent);
}
.tov__dots{ display:inline-flex; gap:6px; flex:0 0 auto; }
.tov__dots i{ width:10px; height:10px; border-radius:50%; box-shadow:inset 0 0 2px rgba(0,0,0,.6); }
.tov__dots i:nth-child(1){ background:#c7440e; }
.tov__dots i:nth-child(2){ background:var(--amber); }
.tov__dots i:nth-child(3){ background:var(--cy); box-shadow:0 0 8px var(--cy); }
.tov__title{ flex:1; text-align:center; font-size:12px; letter-spacing:.14em; color:var(--cy-dim);
  text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tov__x{
  flex:0 0 auto; width:30px; height:30px; border-radius:6px; cursor:pointer; font-size:13px;
  color:var(--ink-soft); border:1px solid color-mix(in oklab,var(--rust-lit) 40%, transparent);
  background:color-mix(in oklab,var(--rust-deep) 40%, transparent);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.tov__x:hover{ color:var(--cy-lit); border-color:var(--cy); }
.tov__x:focus-visible{ outline:2px solid var(--cy-lit); outline-offset:2px; }

/* Fil d'étapes BESOIN › DÉTAIL › CONTACT */
.tov__steps{
  position:relative; z-index:7; flex:0 0 auto; list-style:none; margin:0;
  display:flex; align-items:center; gap:14px; padding:9px 16px; flex-wrap:wrap;
  background:rgba(4,16,18,.5); border-bottom:1px solid color-mix(in oklab,var(--cy) 12%, transparent);
  font-size:10.5px; letter-spacing:.14em;
}
.tov__step{ position:relative; padding-left:15px; color:var(--ink-soft); text-transform:uppercase; }
.tov__step::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:7px; height:7px; border-radius:50%;
  border:1px solid color-mix(in oklab,var(--rust-lit) 60%, transparent);
}
.tov__step[data-state="on"]{ color:var(--cy-lit); }
.tov__step[data-state="on"]::before{ background:var(--cy); border-color:var(--cy); box-shadow:0 0 8px var(--cy); }
.tov__step[data-state="done"]{ color:var(--cy-dim); }
.tov__step[data-state="done"]::before{ background:var(--cy-dim); border-color:var(--cy-dim); }

/* Journal de conversation (verre CRT) */
.tov__log{
  position:relative; z-index:7; flex:1 1 auto; min-height:130px; overflow-y:auto;
  display:flex; flex-direction:column; gap:14px; padding:18px 16px;
  background:radial-gradient(120% 80% at 50% 0%, #08201f 0%, #041012 60%, #010708 100%);
  scrollbar-width:thin; scrollbar-color:color-mix(in oklab,var(--cy) 40%, transparent) transparent;
}
.tov__log::-webkit-scrollbar{ width:8px; }
.tov__log::-webkit-scrollbar-thumb{ background:color-mix(in oklab,var(--cy) 35%, transparent); border-radius:8px; }
.tov__msg{ display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; font-size:13px; line-height:1.6; }
.tov__who{ font-size:10.5px; letter-spacing:.08em; padding-top:3px; white-space:nowrap; }
.tov__msg--bot .tov__who{ color:var(--cy-dim); }
.tov__msg--me .tov__who{ color:var(--amber); font-weight:700; }
.tov__t{ white-space:pre-wrap; overflow-wrap:anywhere; }
.tov__msg--bot .tov__t{ color:var(--cy-lit); text-shadow:0 0 10px color-mix(in oklab,var(--cy) 28%, transparent); }
.tov__msg--me .tov__t{ color:var(--ink); }

/* Zone de contrôles (choix ou saisie) */
.tov__dock{
  position:relative; z-index:7; flex:0 0 auto; padding:14px 16px 16px;
  background:rgba(4,16,18,.55); border-top:1px solid color-mix(in oklab,var(--cy) 12%, transparent);
}
.tov__choices{ display:flex; flex-direction:column; gap:8px; }
.tov__choice{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer;
  padding:12px 14px; border-radius:8px; font-family:var(--mono); font-size:13px; letter-spacing:.02em; color:var(--ink);
  border:1px solid color-mix(in oklab,var(--rust-lit) 45%, transparent);
  background:color-mix(in oklab,var(--rust-deep) 26%, transparent);
  transition:transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.tov__choice .tov__num{ color:var(--amber); font-weight:700; font-size:12px; }
.tov__choice .tov__caret{ color:var(--cy); opacity:.7; }
.tov__choice:hover{ transform:translateX(3px); color:var(--cy-lit); border-color:var(--cy);
  background:color-mix(in oklab,#041012 55%, transparent); box-shadow:0 0 26px -12px var(--cy); }
.tov__choice:focus-visible{ outline:2px solid var(--cy-lit); outline-offset:2px; }
.tov__form{ margin:0; }
.tov__ta{ resize:none; line-height:1.5; max-height:120px; min-height:4.4em; }
.tov__note{ margin-top:12px; }

/* Confirmation finale + récap */
.tov__done{ display:flex; flex-direction:column; gap:14px; }
.tov__recap{
  display:flex; flex-direction:column; gap:6px; padding:14px; border-radius:8px; font-size:12.5px; color:var(--ink-soft);
  border:1px dashed color-mix(in oklab,var(--cy) 30%, transparent); background:rgba(4,16,18,.5);
}
.tov__recap-h{ font-size:10.5px; letter-spacing:.16em; color:var(--cy-dim); }
.tov__recap b{ color:var(--amber); font-weight:700; letter-spacing:.06em; font-size:10.5px; margin-right:8px; }
.tov__mailto{ justify-content:center; }
.tov__again{
  align-self:flex-start; cursor:pointer; background:none; border:0; padding:4px 0;
  font-family:var(--mono); font-size:12px; letter-spacing:.06em; color:var(--cy-dim);
  border-bottom:1px solid color-mix(in oklab,var(--cy) 30%, transparent);
}
.tov__again:hover{ color:var(--cy-lit); }
.tov__again:focus-visible{ outline:2px solid var(--cy-lit); outline-offset:2px; }

/* Pied de fenêtre */
.tov__foot{
  position:relative; z-index:7; flex:0 0 auto;
  display:flex; flex-wrap:wrap; gap:6px 14px; justify-content:space-between; align-items:center;
  padding:10px 16px; font-size:10.5px; letter-spacing:.06em; color:var(--ink-soft);
  background:rgba(10,6,3,.4); border-top:1px solid color-mix(in oklab,var(--rust-lit) 30%, transparent);
}
.tov__foot a{ color:var(--cy-lit); text-decoration:none; border-bottom:1px solid color-mix(in oklab,var(--cy) 40%, transparent); }
.tov__foot a:hover{ color:#fff; }

/* Drawer plein-largeur sur mobile (slide depuis le bas) */
@media (max-width:640px){
  .tov{ align-items:flex-end; padding:0; }
  .tov__win{ width:100%; max-height:92dvh; border-radius:18px 18px 0 0; transform:translateY(100%); }
  .tov.is-open .tov__win{ transform:none; }
  .hail{ font-size:12px; padding:12px 17px; }
}
@media (max-width:380px){
  .hail{ font-size:11px; padding:11px 15px; right:12px; }
}

/* Mouvement réduit : pas de slide, pas de pulse, pas de typing (JS gère le reste) */
@media (prefers-reduced-motion:reduce){
  .hail{ transition:none; }
  .hail__pulse{ animation:none; }
  .tov__scrim, .tov__win, .tov__choice, .sig, .tov__x{ transition:none; }
  .tov__win{ transform:none; }
}

/* ═══════════════════════════════════════════════════════════
   PAGE MENTIONS LÉGALES — document terminal dans la DA oxyde
   ═══════════════════════════════════════════════════════════ */
.legal-body{ min-height:100svh; }
.legal-body .shell{ display:flex; flex-direction:column; min-height:100svh; padding-block:clamp(20px,4vw,46px); gap:clamp(28px,5vh,52px); }
/* Lien RETOUR : reste visible même <720px (les .chip sont masqués sur le site) */
.chip--back{ text-decoration:none; color:var(--cy-lit); border-color:color-mix(in oklab,var(--cy) 40%, transparent);
  display:inline-flex; align-items:center; transition:color .2s var(--ease), border-color .2s var(--ease); }
.chip--back:hover{ color:#fff; border-color:var(--cy); }
@media (max-width:720px){ .legal-body .chip--back{ display:inline-flex; } }

.doc{ width:100%; max-width:840px; margin-inline:auto; flex:1; }
.doc__title{ font-family:var(--stencil); font-weight:400; text-transform:uppercase; line-height:.92;
  font-size:clamp(34px,6vw,72px); color:#efe3d1; margin:.3em 0 .35em; }
.doc__title .hl{ color:var(--cy-lit); text-shadow:0 0 24px color-mix(in oklab,var(--cy) 55%, transparent); }
.doc__lede{ max-width:60ch; color:var(--ink-soft); font-size:clamp(13px,1.35vw,15px); line-height:1.7; margin-bottom:clamp(24px,4vh,36px); }
.doc__upd{ color:var(--amber); opacity:.9; }

/* Panneau CRT identique au contact */
.legal-panel{ position:relative; padding:clamp(14px,2vw,22px); border-radius:22px;
  background:linear-gradient(155deg,#6e3b1f,#241309 40%,#5c3a24 68%,#1a0f07);
  box-shadow:inset 0 2px 4px rgba(255,190,140,.18), inset 0 -6px 18px rgba(0,0,0,.7), 0 30px 60px -20px rgba(0,0,0,.85); }
.legal-glass{ position:relative; overflow:hidden; border-radius:14px; padding:clamp(24px,4vw,52px);
  background:radial-gradient(110% 70% at 50% 0%, #08201f 0%, #041012 60%, #010708 100%);
  box-shadow:inset 0 0 0 1px rgba(54,224,255,.16), inset 0 0 90px 10px rgba(0,0,0,.7); }

.legal-sec{ padding:clamp(20px,3vh,30px) 0; border-top:1px dashed color-mix(in oklab,var(--cy) 20%, transparent); }
.legal-sec:first-child{ border-top:0; padding-top:0; }
.legal-sec h2{ font-family:var(--mono); font-weight:700; font-size:clamp(14px,1.7vw,18px); letter-spacing:.04em;
  color:var(--cy-lit); text-transform:uppercase; margin-bottom:14px;
  text-shadow:0 0 12px color-mix(in oklab,var(--cy) 40%, transparent); }
.legal-idx{ color:var(--amber); margin-right:8px; font-weight:700; }
.legal-sec p{ color:var(--ink-soft); font-size:clamp(13px,1.3vw,14.5px); line-height:1.75; max-width:70ch; }
.legal-sec p + p{ margin-top:12px; }
.legal-sec b{ color:var(--ink); }
.legal-sec a{ color:var(--cy-lit); text-decoration:none; border-bottom:1px solid color-mix(in oklab,var(--cy) 45%, transparent); }
.legal-sec a:hover{ color:#fff; }

/* Fiche d'identité de l'éditeur */
.legal-id{ margin-top:6px; display:grid; gap:2px; }
.legal-id > div{ display:grid; grid-template-columns:minmax(120px,220px) 1fr; gap:6px 18px;
  padding:9px 0; border-bottom:1px solid color-mix(in oklab,var(--rust-lit) 22%, transparent); }
.legal-id > div:last-child{ border-bottom:0; }
.legal-id dt{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cy-dim); align-self:center; }
.legal-id dd{ margin:0; color:var(--ink-soft); font-size:13.5px; line-height:1.6; }
.legal-id dd b{ color:var(--cy-lit); }
@media (max-width:560px){
  .legal-id > div{ grid-template-columns:1fr; gap:2px; padding:10px 0; }
  .legal-id dt{ font-size:10px; }
}