@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Share+Tech+Mono&display=swap');

:root{
  --g:#4aff4a;        /* vert terminal — accent Système */
  --g2:#2a8a2a;
  --g3:#0f2a0f;
  --g4:#9aff9a;
  --b:#000;
  --border:#2a5a2a;
  --glow:rgba(74,255,74,0.35);
  --text-dim:#3a6a3a;
  --text-body:#9aaa9a;
}

*{box-sizing:border-box; margin:0; padding:0;}

html,body{
  background:var(--b);
  color:var(--text-body);
  font-family:'Share Tech Mono', monospace;
  min-height:100%;
}

body::before{
  content:'';
  position:fixed; inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.18) 3px,rgba(0,0,0,.18) 4px);
  pointer-events:none;
  z-index:999;
}

a{color:inherit;}

/* ============ NAV ============ */
.site-nav{
  position:sticky; top:0; z-index:200;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  padding:0 20px;
  border-bottom:2px solid var(--border);
  background:rgba(0,0,0,0.92);
  backdrop-filter:blur(2px);
}
.site-nav .brand{
  font-family:'Press Start 2P', monospace;
  font-size:11px;
  color:var(--g);
  letter-spacing:.15em;
  padding:14px 0;
  text-decoration:none;
  text-shadow:0 0 10px var(--glow);
  white-space:nowrap;
}
.site-nav .tabs{
  display:flex; gap:0; flex-wrap:wrap;
}
.site-nav .tab{
  font-family:'Press Start 2P', monospace;
  font-size:8px;
  padding:14px 16px;
  letter-spacing:.15em;
  color:var(--text-dim);
  text-decoration:none;
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  transition:color .2s, border-color .2s;
  white-space:nowrap;
}
.site-nav .tab:hover{color:var(--g4);}
.site-nav .tab.active{color:var(--g); border-bottom-color:var(--g);}

.nav-right{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}

.audio-toggle{
  display:flex; align-items:center; gap:6px;
  margin-left:14px;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-dim);
  font-family:'Share Tech Mono', monospace;
  font-size:10px; letter-spacing:.12em;
  padding:8px 12px;
  cursor:pointer;
  transition:border-color .2s, color .2s;
}
.audio-toggle:hover, .audio-toggle:focus-visible{border-color:var(--g); color:var(--g4); outline:none;}
.audio-toggle .audio-toggle-icon{font-size:12px; line-height:1;}
.audio-toggle[aria-pressed="false"]{color:#7a3a3a; border-color:#4a1a1a;}
.audio-toggle[aria-pressed="false"]:hover{border-color:#8a4040; color:#c06060;}

@media (max-width:560px){
  .site-nav{flex-direction:column; align-items:flex-start; padding:10px 16px;}
  .site-nav .tabs{padding-bottom:6px;}
  .site-nav .tab{padding:8px 10px;}
  .nav-right{width:100%; justify-content:space-between;}
  .audio-toggle{margin-left:0;}
}

/* ============ GENERIC PAGE SHELL ============ */
.page-shell{
  max-width:820px;
  margin:0 auto;
  padding:48px 24px 80px;
}

.eyebrow{
  font-family:'Press Start 2P', monospace;
  font-size:9px;
  letter-spacing:.2em;
  color:var(--text-dim);
  margin-bottom:14px;
}
.eyebrow::before{content:'// ';}

.page-title{
  font-family:'Press Start 2P', monospace;
  font-size:clamp(18px,4vw,28px);
  color:var(--g);
  letter-spacing:.1em;
  text-shadow:0 0 14px var(--glow);
  margin-bottom:28px;
  line-height:1.5;
}
@media (prefers-reduced-motion: no-preference){
  .page-title::after{
    content:'';
    display:inline-block;
    width:.5em; height:.85em;
    background:currentColor;
    margin-left:.15em;
    vertical-align:-.08em;
    animation:titleCursorBlink 1s steps(1) infinite;
  }
  @keyframes titleCursorBlink{
    0%,49%{opacity:1;}
    50%,100%{opacity:0;}
  }
}

.divider{
  width:100%; height:1px;
  background:linear-gradient(90deg, var(--border), transparent);
  margin:28px 0;
}

.back-link{
  display:inline-block;
  margin-top:36px;
  font-size:11px;
  letter-spacing:.1em;
  color:var(--text-dim);
  border:1px solid var(--border);
  padding:9px 16px;
  text-decoration:none;
  transition:border-color .2s, color .2s;
}
.back-link:hover{border-color:var(--g); color:var(--g);}
.back-link::before{content:'< ';}

/* ============ SYSTEM BUTTON (réutilisable) ============ */
.sys-btn{
  display:inline-block;
  position:relative;
  padding:14px 38px;
  background:rgba(0,0,0,0.4);
  border:1px solid var(--g);
  color:var(--g);
  font-family:'Press Start 2P', monospace;
  font-size:11px;
  letter-spacing:.15em;
  text-decoration:none;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.sys-btn::before{content:'[ '; opacity:.6;}
.sys-btn::after{content:' ]'; opacity:.6;}
.sys-btn:hover, .sys-btn:focus-visible{
  background:var(--g);
  color:var(--b);
  box-shadow:0 0 24px var(--glow);
  outline:none;
}

/* ============ LOG IMAGE (illustrations messages) ============ */
.log-img-wrap{
  position:relative;
  width:100%;
  max-width:640px;
  margin:0 0 36px;
  border:1px solid var(--border);
  background:#040a04;
  overflow:hidden;
}
.log-img-wrap::before{
  content:'';
  position:absolute; inset:0;
  box-shadow:inset 0 0 40px rgba(0,0,0,0.6);
  pointer-events:none;
}
.log-img-wrap img{
  display:block;
  width:100%;
  height:auto;
  filter:saturate(.92) contrast(1.05) brightness(.9);
}
.log-img-tag{
  position:absolute; bottom:0; left:0; right:0;
  padding:8px 12px;
  background:linear-gradient(0deg, rgba(0,0,0,0.85), transparent);
  font-size:9px; letter-spacing:.15em; color:var(--g2);
  font-family:'Share Tech Mono', monospace;
}

/* ============ FOOTER ============ */
.site-footer{
  text-align:center;
  font-size:9px;
  letter-spacing:.1em;
  color:var(--g3);
  padding:24px;
}

/* ============ PLAYER (widget hero + mini-barre persistante) ============ */
.player-widget{
  display:flex; align-items:center; gap:16px;
  border:1px solid var(--border); background:rgba(0,0,0,0.55);
  padding:12px 20px; margin-top:6px;
  backdrop-filter:blur(2px);
}
.player-btn{
  width:38px; height:38px; flex-shrink:0;
  border:1px solid var(--g); background:rgba(0,0,0,0.4);
  color:var(--g); font-size:12px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, box-shadow .15s ease;
}
.player-btn:hover, .player-btn:focus-visible{
  background:var(--g); color:var(--b); box-shadow:0 0 16px var(--glow); outline:none;
}
.player-body{display:flex; flex-direction:column; gap:9px; align-items:flex-start;}
.player-title{
  font-family:'Share Tech Mono', monospace; font-size:11px;
  letter-spacing:.12em; color:var(--text-body); white-space:nowrap;
}
.player-title span{color:var(--g4);}
.player-eq{display:flex; align-items:flex-end; gap:3px; height:16px;}
.player-eq span{
  width:3px; background:var(--g); height:4px; border-radius:1px;
  animation:eqBounce 900ms ease-in-out infinite;
  animation-play-state:paused;
  box-shadow:0 0 6px var(--glow);
}
.player-eq span:nth-child(1){animation-delay:-0.6s;}
.player-eq span:nth-child(2){animation-delay:-0.3s;}
.player-eq span:nth-child(3){animation-delay:-0.9s;}
.player-eq span:nth-child(4){animation-delay:-0.15s;}
.player-eq span:nth-child(5){animation-delay:-0.45s;}
.player-eq.playing span{animation-play-state:running;}
@keyframes eqBounce{ 0%,100%{height:4px;} 50%{height:16px;} }

.player-tracks{display:flex; gap:8px; flex-wrap:wrap;}
.player-track-btn{
  font-family:'Share Tech Mono', monospace; font-size:9px; letter-spacing:.1em;
  background:transparent; border:1px solid var(--border); color:var(--text-dim);
  padding:6px 10px; cursor:pointer; transition:border-color .2s, color .2s;
}
.player-track-btn:hover{border-color:var(--g4); color:var(--g4);}
.player-track-btn.active{border-color:var(--g); color:var(--g); text-shadow:0 0 8px var(--glow);}

.yt-hidden{
  position:absolute; width:1px; height:1px;
  overflow:hidden; opacity:0; pointer-events:none;
}

/* Mini-barre persistante (toutes les pages sauf le hero d'ENVOI) */
.player-bar{
  border-bottom:1px solid var(--border);
  background:rgba(0,0,0,0.85);
}
.player-bar-inner{
  max-width:820px; margin:0 auto;
  display:flex; align-items:center; gap:14px;
  padding:8px 24px;
}
.player-bar .player-btn{width:26px; height:26px; font-size:9px; flex-shrink:0;}
.player-bar-track{display:flex; flex-direction:column; gap:5px; flex:1; min-width:0;}
.player-bar-title{
  font-family:'Share Tech Mono', monospace; font-size:9px; letter-spacing:.1em;
  color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.player-bar .player-eq{height:10px;}
.player-bar .player-eq span{width:2px;}
.player-bar .player-tracks{flex-shrink:0;}
.player-bar .player-track-btn{padding:5px 8px; font-size:8px;}

@media (max-width:560px){
  .player-bar-inner{padding:8px 16px; gap:10px;}
  .player-bar-title{display:none;}
}

/* ============ IMMERSION — présence, système, terminal ============ */
#bootOverlay{
  position:fixed; inset:0; z-index:2000;
  background:#000;
  display:flex; align-items:center; justify-content:center;
  font-family:'Share Tech Mono', monospace;
  color:var(--g);
  transition:opacity .4s ease;
}
#bootOverlay.hide{opacity:0; pointer-events:none;}
.boot-lines{font-size:12px; letter-spacing:.05em; line-height:2; text-align:left;}
.boot-line{opacity:0; white-space:nowrap; transition:opacity .15s ease;}
.boot-line.show{opacity:1;}

.sys-readout{
  font-family:'Share Tech Mono', monospace; font-size:9px; letter-spacing:.08em;
  color:var(--text-dim); text-align:right; padding:6px 24px;
  border-bottom:1px solid var(--border); background:#020602;
}
.sys-readout span{color:var(--g4);}
@media (max-width:640px){
  .sys-readout{text-align:left; font-size:8px;}
}

.redacted{
  display:inline-block; min-width:64px; color:transparent;
  background-image:repeating-linear-gradient(90deg,#111 0 2px,#0a0a0a 2px 4px);
  border-radius:2px; padding:1px 8px; cursor:help; user-select:none;
}
.redacted.flash{
  color:#ff3030; background:#1a0000; background-image:none;
  text-shadow:0 0 8px #ff3030; letter-spacing:.08em;
}

#signalCut{
  position:fixed; inset:0; z-index:1500; background:#000;
  display:flex; align-items:center; justify-content:center;
  font-family:'Press Start 2P',monospace; font-size:10px; color:#ff3030;
  letter-spacing:.15em; opacity:0; pointer-events:none;
}
#signalCut.active{opacity:1; animation:signalFlicker .15s steps(2) infinite;}
@keyframes signalFlicker{0%,100%{opacity:1;} 50%{opacity:.7;}}

#sysToast{
  position:fixed; bottom:20px; right:20px; z-index:1800;
  max-width:280px; border:1px solid var(--g2); background:#040a04;
  padding:12px 14px; font-size:10.5px; letter-spacing:.05em; color:var(--text-body);
  box-shadow:0 0 20px rgba(74,255,74,.2);
  transform:translateY(12px); opacity:0;
  transition:transform .3s ease, opacity .3s ease;
}
#sysToast.show{transform:translateY(0); opacity:1;}
#sysToast .toast-label{
  font-family:'Press Start 2P',monospace; font-size:7px; color:var(--g);
  letter-spacing:.15em; margin-bottom:6px; display:block;
}
@media (max-width:560px){
  #sysToast{left:16px; right:16px; max-width:none; bottom:16px;}
}

@media (prefers-reduced-motion: reduce){
  #bootOverlay{transition:none;}
  #signalCut.active{animation:none;}
}

/* ============================================================
   MODE MASTERCLASS — voile de transition, lueur curseur,
   révélations au défilement, scramble, micro-déchirures.
   Tout est purement additif à l'identité déjà en place.
   ============================================================ */

/* ---------- VOILE DE TRANSITION (balayage entre les pages) ---------- */
#transVeil{
  position:fixed; inset:0; z-index:2500;
  pointer-events:none;
  background:#000;
  opacity:0;
  overflow:hidden;
}
#transVeil .tv-scan{
  position:absolute; left:0; right:0; top:-20%; height:20%;
  background:linear-gradient(180deg, transparent, rgba(74,255,74,0.55), transparent);
  box-shadow:0 0 30px 6px rgba(74,255,74,0.35);
}
#transVeil.tv-exit{
  opacity:1;
  animation:tvExit .26s steps(6) forwards;
}
#transVeil.tv-exit .tv-scan{ animation:tvScan .26s linear forwards; }
#transVeil.tv-enter{
  opacity:1;
  animation:tvEnter .42s ease forwards;
}
#transVeil.tv-enter .tv-scan{ animation:tvScan .42s linear reverse forwards; }
@keyframes tvExit{
  0%{opacity:0;}
  8%{opacity:1;}
  70%{opacity:1;}
  100%{opacity:1;}
}
@keyframes tvEnter{
  0%{opacity:1;}
  100%{opacity:0;}
}
@keyframes tvScan{
  0%{top:-20%;}
  100%{top:100%;}
}
#transVeil .tv-sigil{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%) scale(.6) rotate(0deg);
  font-size:64px; line-height:1; color:var(--g);
  text-shadow:0 0 22px var(--glow), 0 0 46px rgba(74,255,74,0.4);
  opacity:0;
}
#transVeil.tv-exit .tv-sigil{ animation:tvSigil .26s ease forwards; }
#transVeil.tv-enter .tv-sigil{ animation:tvSigil .42s ease reverse forwards; }
@keyframes tvSigil{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.4) rotate(-35deg); }
  40%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,-50%) scale(1.5) rotate(35deg); }
}

/* ---------- SCEAU AU CLIC (anneau de runes) ---------- */
.fx-ripple{
  position:fixed; left:0; top:0; z-index:1600;
  width:0; height:0; pointer-events:none;
}
.fx-ripple-rune{
  position:absolute; left:0; top:0;
  font-family:'Share Tech Mono', monospace; font-size:13px;
  color:var(--g4); text-shadow:0 0 8px var(--glow);
  transform-origin:0 0;
  animation:runeOut .6s ease-out forwards;
}
@keyframes runeOut{
  0%{ transform:rotate(var(--rot,0deg)) translateY(0); opacity:1; }
  100%{ transform:rotate(var(--rot,0deg)) translateY(-50px); opacity:0; }
}

/* ---------- LUEUR CURSEUR ---------- */
#crtCursorGlow{
  position:fixed; left:0; top:0; z-index:1600;
  width:220px; height:220px; margin:-110px 0 0 -110px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(74,255,74,0.10) 0%, rgba(74,255,74,0.04) 40%, transparent 72%);
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
  mix-blend-mode:screen;
  will-change:transform;
}
#crtCursorGlow.show{opacity:1;}

.crt-particle{
  position:fixed; left:0; top:0; z-index:1600;
  transform:translate(-50%,-50%);
  font-family:'Share Tech Mono', monospace; font-size:11px;
  color:var(--g4); text-shadow:0 0 6px var(--glow);
  pointer-events:none;
  animation:particleFade .7s ease-out forwards;
}
@keyframes particleFade{
  0%{ opacity:.85; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) translateY(14px) scale(.6); }
}

/* ---------- PLUIE DE CODE (fond) ---------- */
#matrixRain{
  position:fixed; inset:0; z-index:0;
  opacity:.5;
  pointer-events:none;
}
.player-bar, main, .hero, .page-shell{ position:relative; z-index:1; }

/* ---------- REVELATION AU DEFILEMENT ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  position:relative;
}
[data-reveal="scale"]{ transform:translateY(0) scale(.96); }
[data-reveal="left"]{ transform:translateX(-22px); }
[data-reveal="right"]{ transform:translateX(22px); }
[data-reveal].rv-show{
  opacity:1;
  transform:translate(0,0) scale(1);
}
[data-reveal]::before{
  content:'';
  position:absolute; left:0; right:0; top:0; height:0;
  background:linear-gradient(90deg, transparent, rgba(74,255,74,0.7), transparent);
  opacity:0;
  pointer-events:none;
}
[data-reveal].rv-show::before{
  animation:revealSweep .55s ease forwards;
}
@keyframes revealSweep{
  0%{ top:0; height:2px; opacity:.9; }
  100%{ top:100%; height:2px; opacity:0; }
}

/* ---------- SCRAMBLE (texte recomposé) ---------- */
[data-scramble]{ font-variant-numeric:tabular-nums; }

/* ---------- MICRO-DECHIRURE AMBIANTE ---------- */
.fx-tear{ animation:fxTear .22s steps(3) both; }
@keyframes fxTear{
  0%{ transform:translate(0); filter:none; }
  30%{ transform:translate(-3px, 1px); filter:brightness(1.3); clip-path:inset(15% 0 60% 0); }
  55%{ transform:translate(3px, -1px); filter:brightness(0.85); clip-path:inset(55% 0 10% 0); }
  100%{ transform:translate(0); filter:none; clip-path:none; }
}

/* ---------- SURTENSION (rare, plus intense qu'une simple déchirure) ---------- */
html.fx-surge-flash{ animation:fxSurgeFlash .9s ease; }
@keyframes fxSurgeFlash{
  0%{ filter:none; }
  4%{ filter:brightness(2.2) saturate(1.4); }
  8%{ filter:brightness(.3); }
  12%{ filter:brightness(1.6); }
  18%{ filter:none; }
  100%{ filter:none; }
}
.fx-surge{
  position:fixed; left:0; right:0; top:-10%; height:14%; z-index:2400;
  pointer-events:none;
  background:linear-gradient(180deg, transparent, rgba(74,255,74,0.5), rgba(154,255,154,0.15), transparent);
  box-shadow:0 0 40px 10px rgba(74,255,74,0.3);
  animation:fxSurgeRoll .9s cubic-bezier(.3,.7,.4,1) forwards;
}
@keyframes fxSurgeRoll{
  0%{ top:-14%; }
  100%{ top:100%; }
}

/* ---------- LUEUR RENFORCEE AU SURVOL (cartes, liens de contenu) ---------- */
.card:hover, .quest-card:hover, .contact-card:hover, .exc-timeline-card:hover, .log-item:hover{
  box-shadow:0 0 22px rgba(74,255,74,0.12), inset 0 0 0 1px rgba(74,255,74,0.08);
}

@media (prefers-reduced-motion: reduce){
  #transVeil{ display:none; }
  #crtCursorGlow{ display:none; }
  #matrixRain{ display:none; }
  .crt-particle{ display:none; }
  [data-reveal]{ opacity:1; transform:none; transition:none; }
  [data-reveal]::before{ display:none; }
  .fx-tear{ animation:none; }
  .fx-surge{ display:none; }
  html.fx-surge-flash{ animation:none; }
  .fx-ripple{ display:none; }
  #transVeil .tv-sigil{ display:none; }
}

@media (pointer:coarse){
  #crtCursorGlow{ display:none; }
  .crt-particle{ display:none; }
}