/* Page RAVERSE : démos (communes) + mise en page « pas à pas » (scène fixe à gauche, récit à droite) */

.demo{ position:relative; overflow:hidden; background:#000; color:#fff; }
.demo > canvas{ display:block; width:100%; height:100%; }
.rv-hud{ position:absolute; left:12px; bottom:10px; right:12px; font:500 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace; color:#d8ff00; pointer-events:none; text-shadow:0 1px 2px #000; z-index:3; }
.rv-hud b{ color:#fff; font-weight:600; }
.demo > canvas.rv-flat{ position:absolute; right:12px; top:12px; width:min(38%,260px); height:auto !important; border:1px solid #d8ff00; display:none; z-index:2; }
.rv-label{ position:absolute; left:0; top:0; pointer-events:none; font:400 15px/1 "VT323",monospace; color:#000; background:#d8ff00; padding:4px 7px; opacity:0; transition:opacity .15s; z-index:3; white-space:nowrap; }

/* Carte du son : la page à gauche, les couches à droite */
.rv-soundmap{ display:grid; grid-template-columns:minmax(120px,30%) 1fr; background:#0b0a0f; font-family:Poppins,sans-serif; }
.sm-page{ position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:14px 0; border-right:1px solid rgba(255,255,255,.1); cursor:ns-resize; user-select:none; touch-action:none; background:linear-gradient(180deg,#000 0%,#07060c 12%,#d8ff00 24%,#120000 36%,#2a0a78 48%,#14101f 60%,#1a0010 70%,#3d3d46 82%,#0018b8 100%); }
.sm-page span{ font:500 10px/1 Poppins,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:#fff; mix-blend-mode:difference; padding-left:14px; }
.sm-handle{ position:absolute; left:0; right:0; height:2px; background:#fff; box-shadow:0 0 0 1px #000, 0 0 14px #fff; transform:translateY(-1px); pointer-events:none; }
.sm-handle::after{ content:"vous êtes ici"; position:absolute; right:8px; top:6px; font:400 14px/1 "VT323",monospace; color:#000; background:#fff; padding:2px 5px; }
.sm-right{ display:grid; grid-template-rows:auto auto 1fr; gap:14px; padding:16px; min-width:0; }
.sm-layers{ display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.sm-layers div{ font:500 10px/1.3 Poppins,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.3); border:1px solid rgba(255,255,255,.12); padding:10px 8px; display:flex; flex-direction:column; gap:8px; transition:color .3s, border-color .3s; }
.sm-layers i{ width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.15); }
.sm-layers .on{ color:#fff; border-color:rgba(216,255,0,.5); }
.sm-layers .on i{ background:rgba(216,255,0,.45); }
.sm-layers .hit i{ background:#d8ff00; box-shadow:0 0 12px #d8ff00; }
.sm-knobs{ display:flex; gap:24px; font:500 10px/1 Poppins,sans-serif; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.sm-knobs b{ display:block; font:400 34px/1 "VT323",monospace; color:#d8ff00; letter-spacing:0; margin-bottom:4px; }
.sm-right canvas{ width:100%; height:100%; min-height:60px; display:block; }
@media (max-width:700px){ .sm-layers{ grid-template-columns:repeat(3,1fr); } }

/* Démarrage BIOS */
.rv-bios{ background:#000; cursor:pointer; }
.rv-bios .tube{ position:absolute; inset:0; padding:clamp(18px,5vw,56px); display:flex; flex-direction:column; justify-content:center; color:#e9e9e9; font:400 clamp(14px,1.6vw,21px)/1.45 "VT323",ui-monospace,monospace; transform-origin:50% 50%; }
.rv-bios pre{ margin:0; font:inherit; white-space:pre-wrap; }
.rv-bios b{ color:#d8ff00; font-weight:400; }
.rv-bios .cur{ color:#d8ff00; animation:rv-blink 1s steps(1) infinite; }
.rv-bios .tube.off{ animation:rv-off .9s cubic-bezier(.7,0,.3,1) forwards; }
@keyframes rv-blink{ 50%{ opacity:0; } }
@keyframes rv-off{ 0%{ transform:none; filter:none; opacity:1; } 35%{ transform:scaleY(.004); filter:brightness(5); opacity:1; } 100%{ transform:scaleY(.004) scaleX(0); filter:brightness(5); opacity:0; } }

/* Titre cathodique : chrome + deux calques rouge / glace décalés au rythme (--pulse) */
.rv-titlebox{ display:grid; place-items:center; background:radial-gradient(ellipse at center,#1b1030 0%,#000 75%); container-type:size; }
.rv-title{ --pulse:0; position:relative; font:800 min(11.5cqw, 40cqh, 170px)/.9 "Syne",sans-serif; /* calé sur le cadre, pas sur la fenêtre */ letter-spacing:-.02em; transform:scale(calc(1 + var(--pulse) * .025)); white-space:nowrap; }
.rv-title .a{ color:#d8ff00; }
.rv-title .b{ background:linear-gradient(180deg,#fff 0 42%,#9a9aa8 50%,#ffd0f4 58%,#cfc8ff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; }
.rv-title::before, .rv-title::after{ content:attr(data-text); position:absolute; inset:0; mix-blend-mode:screen; opacity:calc(var(--pulse) * .9); pointer-events:none; }
.rv-title::before{ color:#ff1e3c; transform:translateX(calc(var(--pulse) * -.035em)); }
.rv-title::after{ color:#7df9ff; transform:translateX(calc(var(--pulse) * .035em)); }
.rv-scan{ position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,0,0,.4) 0 1px,transparent 1px 3px), radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.65)); }
.rv-titlebox.lab .rv-title::before{ opacity:.9; outline:1px dashed #ff1e3c; }
.rv-titlebox.lab .rv-title::after{ opacity:.9; outline:1px dashed #7df9ff; }

/* Boutons partagés : Studio / Lab, son */
.lens{ display:inline-flex; border:1px solid currentColor; }
.lens button{ all:unset; cursor:pointer; padding:9px 14px; font:700 10px/1 Poppins,sans-serif; letter-spacing:.22em; text-transform:uppercase; }
.lens button[aria-pressed=true]{ background:currentColor; }
.lens button[aria-pressed=true] span{ color:var(--lens-bg,#0A0A0A); }
.sound{ all:unset; cursor:pointer; font:700 10px/1 Poppins,sans-serif; letter-spacing:.22em; text-transform:uppercase; border:1px solid currentColor; padding:9px 14px; display:inline-flex; gap:8px; align-items:center; }
.sound i{ width:8px; height:8px; border-radius:50%; background:currentColor; opacity:.35; }
.sound[aria-pressed=true] i{ background:#d8ff00; opacity:1; box-shadow:0 0 10px #d8ff00; }

/* ─── Mise en page ───────────────────────────────────────────────────── */
:root{ --hh: 77px; } /* hauteur du header, recalculée par page.js */
.rv-intro{ display:grid; grid-template-columns:1fr 1fr; gap:48px; padding:var(--pad-y) var(--pad-x); border-bottom:var(--hair-soft); align-items:end; }
.rv-intro .k{ font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--stone); font-weight:500; margin-bottom:18px; }
.rv-intro .k a{ color:var(--stone); }
.rv-intro h1{ font-weight:900; font-size:clamp(44px,7vw,120px); line-height:.9; letter-spacing:-.045em; margin:0; }
.rv-intro p{ font-size:15px; line-height:1.75; color:var(--anthracite); margin:0 0 24px; }
.rv-intro .meta{ display:flex; flex-wrap:wrap; gap:8px 22px; font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:500; color:var(--stone); margin:0 0 26px; }
.rv-intro .meta b{ color:var(--ink); font-weight:700; }
.rv-intro .meta a{ color:var(--ink); border-bottom:1px solid var(--greige); }
.rv-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.rv-facts b{ display:block; font-weight:900; font-size:30px; letter-spacing:-.03em; }
.rv-facts span{ font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); }

.rv-split{ display:grid; grid-template-columns:58% 42%; }
.rv-stage{ position:sticky; top:var(--hh); height:calc(100vh - var(--hh)); height:calc(100svh - var(--hh)); background:#000; }
.rv-stage .slot{ position:absolute; inset:0; opacity:0; transition:opacity .6s var(--ease); pointer-events:none; }
.rv-stage .slot.on{ opacity:1; pointer-events:auto; z-index:1; }
.rv-stage .slot .demo{ position:absolute; inset:0; }
.rv-stage .cap{ position:absolute; left:18px; top:16px; z-index:5; font:400 18px/1 "VT323",monospace; color:#d8ff00; mix-blend-mode:difference; pointer-events:none; max-width:calc(100% - 210px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rv-stage .snd{ position:absolute; right:16px; top:12px; z-index:5; color:#fff; mix-blend-mode:difference; }
.rv-stage .hint{ position:absolute; left:18px; bottom:16px; z-index:5; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#fff; mix-blend-mode:difference; font-weight:500; pointer-events:none; }
.rv-stage .bar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(255,255,255,.15); z-index:5; pointer-events:none; }
.rv-stage .bar i{ display:block; height:100%; background:#d8ff00; width:0; }
.rv-stage .slot .rv-soundmap, .rv-stage .slot .rv-bios .tube{ padding-top:52px; } /* place pour la légende et le bouton son */

.rv-col article{ min-height:100vh; padding:clamp(48px,7vh,96px) clamp(24px,3.4vw,56px); border-bottom:var(--hair-soft); display:flex; flex-direction:column; justify-content:center; }
.rv-col article.tall{ min-height:200vh; justify-content:flex-start; }
.rv-col article.tall .inner{ position:sticky; top:calc(var(--hh) + 48px); }
.rv-col .n{ font:400 22px/1 "VT323",monospace; color:var(--stone); }
.rv-col h2{ font-weight:900; font-size:clamp(28px,3vw,46px); line-height:.98; letter-spacing:-.035em; margin:10px 0 28px; }
.rv-col .lbl{ font-size:9px; letter-spacing:.24em; text-transform:uppercase; font-weight:700; margin:0 0 8px; display:flex; align-items:center; gap:8px; }
.rv-col .lbl::before{ content:""; width:18px; height:1px; background:currentColor; }
.rv-col .studio{ font-size:15px; line-height:1.75; color:var(--anthracite); margin:0 0 28px; }
.rv-col .lab{ font:13px/1.75 ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--ink); background:#fff; border:var(--hair-soft); padding:18px 20px; margin:0; transition:border-color .3s; cursor:help; }
.rv-col .lab:hover, .rv-col .lab.on{ border-color:var(--ink); }
.rv-col .specs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.rv-col .specs span{ font-size:10px; letter-spacing:.1em; border:1px solid var(--greige); padding:6px 10px; color:var(--anthracite); }
.rv-col .specs b{ font-weight:900; color:var(--ink); }

.rv-film{ padding:var(--pad-y) var(--pad-x); border-bottom:var(--hair-soft); }
.rv-film .head{ display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:24px; }
.rv-film h2{ font-weight:900; font-size:clamp(28px,3.4vw,52px); letter-spacing:-.035em; line-height:.95; margin:0; }
.rv-film p{ margin:0; max-width:44ch; font-size:14px; line-height:1.7; color:var(--anthracite); }
.rv-film .box{ background:var(--ink); aspect-ratio:16/9; }
.rv-film video{ width:100%; height:100%; object-fit:cover; display:block; }

.rv-outro{ padding:var(--pad-y) var(--pad-x); background:var(--ink); color:var(--off); display:flex; justify-content:space-between; align-items:end; gap:40px; flex-wrap:wrap; }
.rv-outro h2{ font-weight:900; font-size:clamp(40px,6vw,96px); letter-spacing:-.04em; line-height:.9; margin:0; }
.rv-outro p{ max-width:46ch; color:var(--greige); line-height:1.7; margin:0 0 18px; }
.rv-outro .links{ display:flex; flex-wrap:wrap; gap:18px; }
.rv-outro a{ color:var(--off); font-weight:900; border-bottom:1px solid var(--off); }

@media(max-width:900px){
  .rv-intro{ grid-template-columns:1fr; }
  .rv-split{ grid-template-columns:1fr; }
  .rv-stage{ height:46vh; height:46svh; z-index:10; }
  .rv-stage .hint{ display:none; }
  .rv-col article, .rv-col article.tall{ min-height:90vh; }
  .rv-col article.tall .inner{ position:static; }
  .rv-film .head{ flex-direction:column; align-items:start; }
}
@media(max-width:560px){ .rv-facts{ grid-template-columns:1fr 1fr; } }