/* ============================================================
   NIGHTSHIFT · design system v2 — TERMINAL CRT PHOSPHORE
   Monde : un vieux terminal cathodique dans une salle noire.
   Phosphore vert, ambre d'alerte, scanlines, lueur, glitch.
   ============================================================ */

:root{
  /* --- phosphore --- */
  --bg:#040704;                 /* le noir du tube */
  --bg-1:#060b07;
  --bg-2:#08110a;
  --panel:#070d08;
  --grid-line:rgba(51,255,120,.06);
  --scan:rgba(0,0,0,.30);

  --green:#39ff8a;              /* phosphore vif */
  --green-2:#22c96a;           /* phosphore moyen */
  --green-dim:#12351f;         /* phosphore éteint (ghost) */
  --green-deep:#0a1f13;
  --text:#a9f2c4;              /* corps, vert doux lisible */
  --text-2:#7fcfa0;
  --text-3:#4f8a68;
  --bright:#eafff3;            /* surbrillance */

  --amber:#ffb000;            /* alerte / reprise (ambre CRT) */
  --amber-2:#ffd166;
  --amber-dim:rgba(255,176,0,.14);
  --red:#ff3355;              /* danger / glitch */
  --cyan:#35e0ff;             /* accent secondaire rare */

  --edge:rgba(57,255,138,.30);
  --edge-soft:rgba(57,255,138,.16);
  --edge-hard:rgba(57,255,138,.55);

  --glow:0 0 6px rgba(57,255,138,.55), 0 0 18px rgba(57,255,138,.22);
  --glow-amber:0 0 6px rgba(255,176,0,.6), 0 0 18px rgba(255,176,0,.25);

  --ff-display:"VT323",monospace;                 /* gros chiffres / hero CRT */
  --ff-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;  /* UI + corps */
  --ff-read:"JetBrains Mono",ui-monospace,monospace;

  --ease:cubic-bezier(.16,1,.3,1);
  --t-fast:.14s; --t-med:.22s;
  --radius:3px;
}

/* ---------- reset & socle ---------- */
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--text);background:var(--bg);
  font-family:var(--ff-mono);font-size:15.5px;line-height:1.6;letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1200px 800px at 50% -10%, rgba(20,70,40,.35), transparent 60%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:auto, 44px 44px, 44px 44px;
  background-attachment:fixed;
}
/* scanlines + vignette CRT sur toute la page */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9000;
  background:
    repeating-linear-gradient(0deg, var(--scan) 0 1px, transparent 1px 3px),
    radial-gradient(120% 120% at 50% 50%, transparent 62%, rgba(0,0,0,.55) 100%);
  mix-blend-mode:multiply;opacity:.55;
}
/* léger flicker cathodique */
@media (prefers-reduced-motion:no-preference){
  body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9001;
    background:rgba(57,255,138,.02);animation:flicker 5s steps(60) infinite}
  @keyframes flicker{0%,100%{opacity:.35}47%{opacity:.5}48%{opacity:.2}62%{opacity:.55}63%{opacity:.3}}
}
::selection{background:var(--green);color:#022}
:focus-visible{outline:1px solid var(--amber);outline-offset:2px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg-1)}
::-webkit-scrollbar-thumb{background:var(--green-deep);border:2px solid var(--bg);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--green-dim)}
input{caret-color:var(--green)}

a{color:var(--green);text-decoration:none;transition:color var(--t-fast) var(--ease),text-shadow var(--t-fast)}
a:hover{color:var(--bright);text-shadow:var(--glow)}
p a,li a{text-decoration:underline;text-underline-offset:.22em;text-decoration-color:var(--green-2)}

h1,h2,h3,h4{margin:0;font-family:var(--ff-mono);font-weight:800;line-height:1.08;letter-spacing:.01em;color:var(--bright)}
h1{font-size:clamp(2rem,4.5vw,3.4rem)}
h2{font-size:clamp(1.4rem,2.6vw,2rem)}
h3{font-size:1.15rem}
p{margin:.5rem 0;max-width:74ch}
strong{color:var(--bright)}
.mono{font-family:var(--ff-mono);font-variant-numeric:tabular-nums}
.dim{color:var(--text-3)}
.grn{color:var(--green)}
.amb{color:var(--amber)}
.wrap{width:min(1440px,100% - 2.4rem);margin-inline:auto}

code{font-family:var(--ff-mono);font-size:.88em;background:var(--green-deep);border:1px solid var(--edge-soft);
  border-radius:2px;padding:.06em .4em;color:var(--green)}
kbd{font-family:var(--ff-mono);font-size:.8em;border:1px solid var(--edge-soft);border-bottom-width:2px;
  border-radius:2px;padding:.06em .45em;background:var(--green-deep);color:var(--text)}
pre{background:#020402;border:1px solid var(--edge-soft);border-left:2px solid var(--green-2);
  border-radius:2px;padding:.9rem 1.1rem;overflow-x:auto;font-family:var(--ff-mono);font-size:.85rem;
  line-height:1.6;color:var(--text);position:relative}
pre code{background:none;border:0;padding:0}

/* ---------- prompt utilitaire (préfixe terminal) ---------- */
.prompt::before{content:"> ";color:var(--green-2)}
.cursor{display:inline-block;width:.6ch;height:1.05em;background:var(--green);
  margin-left:.15ch;vertical-align:-.15em;animation:blink 1.05s steps(1) infinite;box-shadow:var(--glow)}
@keyframes blink{0%,50%{opacity:1}50.01%,100%{opacity:0}}

/* ============================================================
   EN-TÊTE
   ============================================================ */
.top{position:sticky;top:0;z-index:100;background:rgba(4,7,4,.82);
  backdrop-filter:blur(2px);border-bottom:1px solid var(--edge)}
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--green),transparent);opacity:.5}
.top .wrap{display:flex;align-items:center;gap:1.4rem;height:56px}
.brand{display:flex;align-items:center;gap:.6rem;font-family:var(--ff-mono);font-weight:800;
  font-size:1.02rem;letter-spacing:.18em;color:var(--bright);text-shadow:var(--glow);white-space:nowrap}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:var(--glow);
  animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.brand small{font-family:var(--ff-mono);font-weight:400;font-size:.6rem;letter-spacing:.1em;color:var(--text-3);text-shadow:none}
.mainnav{display:flex;gap:.1rem;margin-left:auto}
.mainnav a{position:relative;font-family:var(--ff-mono);font-weight:600;font-size:.8rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2);padding:.5rem .8rem;border:1px solid transparent}
.mainnav a::before{content:"[";opacity:0;margin-right:.2ch;transition:opacity var(--t-fast)}
.mainnav a::after{content:"]";opacity:0;margin-left:.2ch;transition:opacity var(--t-fast)}
.mainnav a:hover{color:var(--green);text-shadow:var(--glow)}
.mainnav a:hover::before,.mainnav a:hover::after{opacity:1}
.mainnav a[aria-current="page"]{color:var(--amber);text-shadow:var(--glow-amber)}
.mainnav a[aria-current="page"]::before,.mainnav a[aria-current="page"]::after{opacity:1;color:var(--amber)}
.searchbox{display:flex;align-items:center;gap:.5rem;border:1px solid var(--edge-soft);
  padding:.4rem .65rem;background:var(--green-deep);min-width:220px;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.searchbox:focus-within{border-color:var(--green);box-shadow:var(--glow)}
.searchbox input{background:none;border:0;outline:0;color:var(--green);font-family:var(--ff-mono);font-size:.85rem;width:100%}
.searchbox input::placeholder{color:var(--text-3)}
.searchbox svg{flex:none;stroke:var(--green-2)}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ff-mono);font-weight:700;
  font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;position:relative;
  padding:.68rem 1.2rem;border:1px solid var(--edge-hard);color:var(--green);background:var(--green-deep);
  border-radius:2px;transition:all var(--t-fast) var(--ease);text-shadow:0 0 4px rgba(57,255,138,.4)}
.btn::before{content:"> ";color:var(--green-2)}
.btn:hover{background:var(--green);color:#021a0c;border-color:var(--green);box-shadow:var(--glow);text-shadow:none}
.btn:hover::before{color:#021a0c}
.btn:active{transform:translateY(1px)}
.btn.amber{border-color:var(--amber);color:var(--amber);background:var(--amber-dim);text-shadow:0 0 4px rgba(255,176,0,.4)}
.btn.amber::before{color:var(--amber)}
.btn.amber:hover{background:var(--amber);color:#201400;box-shadow:var(--glow-amber)}
.btn.amber:hover::before{color:#201400}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn svg{flex:none}

/* ============================================================
   PANNEAU TERMINAL (.glass conservé pour compat, réinterprété)
   ============================================================ */
.glass{position:relative;background:
    linear-gradient(180deg,rgba(57,255,138,.03),transparent 40%),var(--panel);
  border:1px solid var(--edge);border-radius:var(--radius);
  box-shadow:inset 0 0 30px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.4);}
/* coins en crochets ASCII */
.glass::before,.glass::after{content:"";position:absolute;width:11px;height:11px;pointer-events:none}
.glass::before{top:-1px;left:-1px;border-top:2px solid var(--green);border-left:2px solid var(--green);opacity:.7}
.glass::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--green);border-right:2px solid var(--green);opacity:.7}
.glass.lift{transition:border-color var(--t-med) var(--ease),transform var(--t-med) var(--ease),box-shadow var(--t-med)}
.glass.lift:hover{border-color:var(--edge-hard);transform:translateY(-3px);
  box-shadow:inset 0 0 30px rgba(0,0,0,.4), var(--glow)}
.glass .pad{padding:1.2rem 1.35rem}

/* barre de titre de fenêtre terminal */
.winbar{display:flex;align-items:center;gap:.6rem;padding:.5rem .85rem;border-bottom:1px solid var(--edge-soft);
  font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.08em;color:var(--text-3);background:rgba(57,255,138,.03)}
.winbar .dots{display:flex;gap:.3rem}
.winbar .dots i{width:8px;height:8px;border-radius:50%;border:1px solid var(--edge)}
.winbar .dots i:nth-child(1){background:var(--red);border-color:var(--red)}
.winbar .dots i:nth-child(2){background:var(--amber);border-color:var(--amber)}
.winbar .dots i:nth-child(3){background:var(--green);border-color:var(--green)}
.winbar .path{color:var(--green-2)}

/* ---------- étiquettes / valeurs ---------- */
.lbl{font-family:var(--ff-mono);font-weight:600;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--green-2);display:flex;align-items:center;gap:.5rem}
.lbl::before{content:"//";color:var(--text-3)}
.lbl::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--edge-soft),transparent)}
.big{font-family:var(--ff-display);font-weight:400;font-size:clamp(2.2rem,3.4vw,3.2rem);line-height:.85;
  color:var(--bright);text-shadow:var(--glow);letter-spacing:.02em}

/* ---------- barres de progression ---------- */
.bar{height:6px;background:var(--green-deep);border:1px solid var(--edge-soft);overflow:hidden;position:relative}
.bar i{display:block;height:100%;background:repeating-linear-gradient(90deg,var(--green) 0 6px,var(--green-2) 6px 10px);
  box-shadow:var(--glow);transition:width .6s var(--ease)}
.bar.amber i{background:repeating-linear-gradient(90deg,var(--amber) 0 6px,var(--amber-2) 6px 10px);box-shadow:var(--glow-amber)}

/* ---------- marques d'état ---------- */
.state{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--ff-mono);font-size:.7rem;color:var(--text-3)}
.state .m{width:14px;height:14px;flex:none;display:inline-block;position:relative}
.state.todo{color:var(--text-3)}
.state.todo .m::before{content:"[ ]";position:absolute;inset:0;font-size:.8rem;line-height:1}
.state.doing{color:var(--amber);text-shadow:var(--glow-amber)}
.state.done{color:var(--green);text-shadow:var(--glow)}
.flag,.cross{display:inline-block;width:14px;height:14px;position:relative}
.flag::before{content:"▸";color:currentColor}
.cross::before{content:"✓";color:currentColor;font-weight:700}

/* ============================================================
   GRILLE DE ROOMS
   ============================================================ */
.roomgrid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin:1.4rem 0 3rem}
.card-room{display:flex;flex-direction:column;overflow:hidden;color:var(--text)}
.card-room .thumb{aspect-ratio:16/9;background:#020402;position:relative;overflow:hidden;border-bottom:1px solid var(--edge-soft)}
.card-room .thumb img,.card-room .thumb video{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.7) brightness(.85) contrast(1.05)}
.card-room:hover .thumb img{filter:saturate(1) brightness(1)}
.card-room .thumb .dur{position:absolute;right:.5rem;bottom:.5rem;font-family:var(--ff-mono);font-size:.72rem;
  background:rgba(2,4,2,.85);border:1px solid var(--edge-soft);padding:.1em .4em;color:var(--green)}
.card-room .meta{padding:.8rem .95rem 1rem;display:flex;flex-direction:column;gap:.4rem;flex:1}
.card-room .meta h3{font-size:.98rem;line-height:1.25;color:var(--bright)}
.card-room .meta .sub{font-size:.7rem;color:var(--text-3);font-family:var(--ff-mono);display:flex;
  justify-content:space-between;gap:.6rem;margin-top:auto}

/* ============================================================
   BANDEAU DÉFILANT
   ============================================================ */
.ticker{border-top:1px solid var(--edge);background:rgba(2,4,2,.9);height:34px;overflow:hidden;
  font-family:var(--ff-mono);font-size:.72rem;color:var(--green-2);display:flex;align-items:center}
.ticker span{white-space:nowrap;padding-inline:2rem}
.ticker span::before{content:"● "}

/* ============================================================
   LECTEURS
   ============================================================ */
.player-shell{position:relative;overflow:hidden;background:#000;border:1px solid var(--edge)}
.player-shell video{display:block;width:100%;height:auto;background:#000}
.player-shell audio{display:block;width:100%}
video::cue{background:rgba(2,6,3,.8);color:#eafff3;font-family:var(--ff-mono);font-size:1rem;
  line-height:1.4;text-shadow:0 0 6px rgba(57,255,138,.5)}

.karaoke{max-height:430px;overflow-y:auto;padding:1.05rem 1.25rem;font-size:.98rem;line-height:1.85}
.karaoke p{max-width:none;margin:0}
.karaoke .cue{color:var(--text-3);cursor:pointer;padding:.08em .28em;transition:color var(--t-med),background var(--t-med)}
.karaoke .cue:hover{color:var(--text-2);background:rgba(57,255,138,.06)}
.karaoke .cue.past{color:var(--text-2)}
.karaoke .cue.now{color:var(--bright);background:rgba(255,176,0,.14);box-shadow:inset 2px 0 0 var(--amber);text-shadow:var(--glow-amber)}

/* ============================================================
   TABLEAUX
   ============================================================ */
.tablewrap{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.86rem;background:var(--panel);border:1px solid var(--edge-soft)}
th,td{padding:.55rem .8rem;text-align:left;border-bottom:1px solid var(--edge-soft)}
th{font-family:var(--ff-mono);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--green-2)}
tr:last-child td{border-bottom:0}

/* ============================================================
   PIED
   ============================================================ */
footer.site{margin-top:4rem;padding:1.8rem 0 2.2rem;border-top:1px solid var(--edge-soft);
  font-family:var(--ff-mono);font-size:.72rem;color:var(--text-3)}
footer.site .wrap::before{content:"$ ";color:var(--green-2)}

/* ============================================================
   EFFETS : glitch, matrix, boot
   ============================================================ */
/* glitch RGB au survol : applique .glitch et data-text=texte */
.glitch{position:relative}
@media (prefers-reduced-motion:no-preference){
  .glitch:hover{animation:glitch-skew .3s var(--ease)}
  .glitch:hover::before,.glitch:hover::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;
    clip-path:inset(0);opacity:.85}
  .glitch:hover::before{color:var(--red);transform:translate(-2px,-1px);animation:glitch-a .3s steps(2) infinite}
  .glitch:hover::after{color:var(--cyan);transform:translate(2px,1px);animation:glitch-b .3s steps(2) infinite}
  @keyframes glitch-a{0%{clip-path:inset(0 0 70% 0)}50%{clip-path:inset(40% 0 20% 0)}100%{clip-path:inset(60% 0 0 0)}}
  @keyframes glitch-b{0%{clip-path:inset(60% 0 0 0)}50%{clip-path:inset(10% 0 60% 0)}100%{clip-path:inset(0 0 75% 0)}}
  @keyframes glitch-skew{0%,100%{transform:skewX(0)}30%{transform:skewX(1.5deg)}60%{transform:skewX(-1deg)}}
}

/* canvas matrix (posé par fx.js dans un conteneur .matrix-host) */
.matrix-host{position:relative;overflow:hidden}
.matrix-host>canvas.matrix{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.55;pointer-events:none}
.matrix-host>*:not(canvas.matrix){position:relative;z-index:1}

/* séquence de boot (overlay plein écran, retiré après) */
#boot{position:fixed;inset:0;z-index:9500;background:var(--bg);color:var(--green);
  font-family:var(--ff-mono);font-size:.9rem;line-height:1.55;padding:6vh 6vw;overflow:hidden;
  text-shadow:0 0 6px rgba(57,255,138,.4)}
#boot .ok{color:var(--green)}#boot .warn{color:var(--amber)}#boot .b{color:var(--bright)}
#boot.done{animation:boot-out .5s var(--ease) forwards}
@keyframes boot-out{to{opacity:0;visibility:hidden}}
#boot .skip{position:absolute;right:6vw;bottom:6vh;color:var(--text-3);font-size:.72rem}

/* révélation d'entrée */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(10px);animation:reveal .5s var(--ease) forwards}
  @keyframes reveal{to{opacity:1;transform:none}}
}

/* ---------- responsive ---------- */
@media (max-width:860px){
  body{font-size:15px}
  body::before,body::after{opacity:.4}
  .top .wrap{gap:.6rem}
  .brand small{display:none}
  .mainnav a{padding:.4rem .5rem;font-size:.72rem}
  .searchbox{min-width:0;flex:1}
  .karaoke{max-height:320px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  body::before{display:none}
}