/* ══════════════════════════════════════════════════════════════
   OSYNA — nameplate + console
   Points de réglage :
     · --signal    seule couleur de la page (touches 1-4)
     · --mono      "Kode Mono" | "DM Mono" | "Sometype Mono"
     · [data-host] le domaine, dans le HTML
     · SPINUP      dans assets/torus.js — cible et durée du régime
   ══════════════════════════════════════════════════════════════ */
:root{
  --void:#08090A;
  --ink:#EAEEF1;
  --dim:#6C7780;
  --faint:#333B42;
  --rule:#1B2026;
  --signal:#EAEEF1;

  --pixel:"Doto", ui-monospace, monospace;
  --mono:"Kode Mono", ui-monospace, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--void); color:var(--ink);
  font-family:var(--mono); font-size:13px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  text-align:center;
}
::selection{background:var(--signal); color:var(--void)}
:focus-visible{outline:1px solid var(--signal); outline-offset:3px}

.skip{
  position:fixed; left:-9999px; top:8px; z-index:60;
  background:var(--ink); color:var(--void); padding:6px 12px; font-size:11px;
}
.skip:focus{left:8px}

/* ── ambiance ──────────────────────────────────────────────── */
.grain,.scan{position:fixed; inset:0; pointer-events:none; z-index:9}
.grain{
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scan{
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,.30) 0 1px, transparent 1px 3px);
  mix-blend-mode:multiply; opacity:.55;
}
.halo{
  position:fixed; left:50%; top:42%; transform:translate(-50%,-50%);
  width:min(150vw,1180px); aspect-ratio:1; pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(234,238,241,.06) 0%, rgba(234,238,241,0) 62%);
}

/* ── grille ────────────────────────────────────────────────── */
.sheet{
  position:relative; z-index:1;
  min-height:100svh;
  display:grid; grid-template-rows:auto 1fr auto;
  padding:clamp(14px,2.6vw,28px);
  gap:clamp(14px,2.8vh,32px);
}

/* filet ──── texte ──── filet */
.edge{
  display:flex; align-items:center; gap:clamp(12px,2.4vw,26px);
  font-size:10px; letter-spacing:.17em; text-transform:uppercase; color:var(--dim);
}
.edge::before,.edge::after{content:''; flex:1; border-top:1px dashed var(--rule)}
.edge span{white-space:nowrap; text-indent:.17em}

/* ── centre ────────────────────────────────────────────────── */
.core{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(14px,2.6vh,30px);
}

/* ── tore ──────────────────────────────────────────────────── */
.torus{
  width:clamp(150px,28vmin,280px); aspect-ratio:1;
  margin-bottom:calc(clamp(14px,2.6vh,30px) * -.55);
  position:relative;
}
.torus canvas{display:block; width:100%; height:100%; cursor:crosshair}

.mark{
  font-family:var(--pixel);
  font-size:clamp(52px,13.5vw,184px);
  line-height:.84; letter-spacing:.05em; margin:0;
  display:flex; user-select:none;
  text-shadow:0 0 40px rgba(234,238,241,.16), 0 0 96px rgba(234,238,241,.06);
}
.mark span{display:inline-block; font-variation-settings:"wght" 560, "ROND" 12; will-change:font-variation-settings}
.mark span:last-child{margin-right:-.05em}

.disc{
  margin:0; font-size:clamp(9.5px,1.5vw,12px);
  letter-spacing:.42em; text-indent:.42em; text-transform:uppercase; color:var(--dim);
}

.say{
  margin:0; max-width:44ch;
  font-size:clamp(13px,1.55vw,16px); line-height:2;
}

/* ── rubriques ─────────────────────────────────────────────── */
.stages{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(8px,1.6vw,16px); flex-wrap:wrap; max-width:100%;
}
.stage{
  font-size:clamp(9.5px,1.35vw,11.5px); letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); transition:color .45s ease, text-shadow .45s ease; white-space:nowrap;
}
.stage.lit{color:var(--signal); text-shadow:0 0 14px var(--signal)}
.dots{display:flex; gap:4px; align-items:center}
.dots s{
  width:3px; height:3px; background:var(--rule); display:block; text-decoration:none;
  transition:background .3s ease, box-shadow .3s ease;
}
.dots.lit s{background:var(--signal); box-shadow:0 0 6px var(--signal)}
.dots.lit s:nth-child(2){transition-delay:.09s}
.dots.lit s:nth-child(3){transition-delay:.18s}

/* ── appel au terminal ─────────────────────────────────────── */
.prompt-cta{
  appearance:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--dim); background:transparent;
  border:1px dashed var(--rule); border-radius:2px;
  padding:9px 15px;
  transition:color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .2s ease;
}
.prompt-cta:hover,.prompt-cta:focus-visible{
  color:var(--signal); border-color:var(--signal);
  box-shadow:0 0 22px -8px var(--signal); transform:translateY(-1px);
}
.prompt-cta .sig{color:var(--signal); letter-spacing:0}
kbd{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em;
  border:1px solid var(--rule); border-bottom-width:2px; border-radius:3px;
  padding:1px 5px; color:var(--dim);
}
.hint{margin:0; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.hint code{font-family:var(--mono); color:var(--dim)}

/* ── bas ───────────────────────────────────────────────────── */
.caret{
  display:inline-block; width:6px; height:10px; background:var(--signal);
  vertical-align:-1px; margin-left:7px; animation:blink 1.15s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}

/* ══ terminal ═════════════════════════════════════════════════ */
.term{
  position:fixed; inset:0; z-index:40;
  display:flex; align-items:flex-end; justify-content:center;
  padding:clamp(10px,3vw,40px);
  background:rgba(4,5,6,.72); backdrop-filter:blur(3px);
  animation:fade .18s ease both;
}
.term[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}

.term-card{
  width:min(880px,100%); height:min(560px,80svh);
  display:flex; flex-direction:column; text-align:left;
  background:rgba(8,9,10,.97);
  border:1px solid var(--rule);
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 40px 120px -30px rgba(0,0,0,.9),
             0 0 60px -30px var(--signal);
  animation:rise .22s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes rise{from{transform:translateY(14px); opacity:0}to{transform:none; opacity:1}}

.term-bar{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-bottom:1px dashed var(--rule);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
}
.term-dot{
  width:7px; height:7px; background:var(--signal); box-shadow:0 0 9px var(--signal);
  flex:none;
}
.term-title{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.term-x{
  appearance:none; background:transparent; border:1px solid var(--rule); border-radius:2px;
  color:var(--dim); font-family:var(--mono); font-size:9.5px; letter-spacing:.12em;
  padding:2px 7px; cursor:pointer; text-transform:uppercase;
}
.term-x:hover{color:var(--signal); border-color:var(--signal)}

.term-out{
  flex:1; overflow-y:auto; overscroll-behavior:contain;
  padding:14px clamp(12px,2vw,20px);
  font-size:12.5px; line-height:1.75;
  scrollbar-width:thin; scrollbar-color:var(--rule) transparent;
}
.term-out::-webkit-scrollbar{width:8px}
.term-out::-webkit-scrollbar-thumb{background:var(--rule)}

.term-out .l{white-space:pre-wrap; word-break:break-word; margin:0}
.term-out .l.dim{color:var(--dim)}
.term-out .l.sig{color:var(--signal)}
.term-out .l.err{color:#FF6B6B}
.term-out .l.echo{color:var(--ink)}
.term-out .l.echo b{color:var(--signal); font-weight:400}
.term-out .l.art{
  font-family:var(--mono); color:var(--signal); line-height:1.15;
  font-size:clamp(8px,2.4vw,13px); text-shadow:0 0 18px var(--signal);
  /* le lettrage est un dessin : il ne se replie pas, il défile */
  white-space:pre; overflow-x:auto; padding-bottom:2px;
}
.term-out a{color:var(--signal); text-underline-offset:3px}

.term-in{display:flex; align-items:center; gap:9px; padding:10px clamp(12px,2vw,20px); border-top:1px dashed var(--rule)}
.term-ps1{font-size:12.5px; color:var(--dim); white-space:nowrap}
.term-ps1 .sig{color:var(--signal)}
.term-field{
  flex:1; background:transparent; border:0; outline:0;
  font-family:var(--mono); font-size:12.5px; color:var(--ink); caret-color:var(--signal);
  padding:2px 0;
}
.term-field::placeholder{color:var(--faint)}

.noscript{max-width:52ch; margin:0 auto; padding:24px; color:var(--dim)}
.noscript a{color:var(--ink)}

/* ── 404 ───────────────────────────────────────────────────── */
.lost{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; min-height:100svh; position:relative; z-index:1; padding:24px;
}
.lost h1{font-family:var(--pixel); font-size:clamp(60px,16vw,180px); margin:0; line-height:.9}
.lost a{color:var(--signal); font-size:11px; letter-spacing:.18em; text-transform:uppercase; text-underline-offset:5px}

@media (max-width:600px){
  .dots{display:none}
  .stages{gap:9px}
  .stage::after{content:'·'; margin-left:9px; color:var(--rule)}
  .stage:last-child::after{content:''}
  .edge{font-size:9px; letter-spacing:.12em}
  .disc{letter-spacing:.3em; text-indent:.3em}
  .torus{width:clamp(150px,40vmin,240px)}
  .hint{display:none}
  .term{padding:0}
  .term-card{height:100svh; width:100%; border:0}
}
@media (prefers-reduced-motion:reduce){
  .caret{animation:none}
  .term,.term-card{animation:none}
}