/* ═══════════════════════════════════════════════════════════
   GSF SYSTEM — CGA/EGA text-mode palette, identique au plugin
   ═══════════════════════════════════════════════════════════ */
:root{
  --bg:     #000000;
  --text:   #b8b8b8;   /* DOS light gray */
  --dim:    #565656;   /* dark gray      */
  --green:  #55ff55;   /* ON AIR         */
  --yellow: #ffff55;   /* waiting        */
  --red:    #ff5555;   /* errors         */
  --line:   #2a2a2a;
  --mono: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier New", monospace;
}

*{ box-sizing:border-box; }
html{ background:var(--bg); }
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--mono);
  font-size:15px;
  line-height:1.65;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.green{ color:var(--green); }
.yellow{ color:var(--yellow); }
.red{ color:var(--red); }
.dim{ color:var(--dim); }

/* ── CRT scanlines + vignette ─────────────────────────────── */
.scanlines{
  position:fixed; inset:0; z-index:99; pointer-events:none;
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
      rgba(0,0,0,.28) 3px, rgba(0,0,0,.28) 4px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}

/* ── Title bar : vidéo inverse, comme la fenêtre MS-DOS ───── */
.titlebar{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  background:var(--text); color:var(--bg);
  padding:5px 14px;
  font-size:14px; font-weight:700; letter-spacing:.18em;
}

.wrap{ max-width:900px; margin:0 auto; padding:0 20px; }

/* ══ HERO ═══════════════════════════════════════════════════ */
.hero{ padding:52px 0 46px; text-align:center; }

.prompt{
  color:var(--dim); font-size:14px; letter-spacing:.1em;
  text-align:left; margin:0 0 30px;
}
.cursor{ color:var(--green); animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }

.banner{
  margin:0 auto 26px;
  font-size:clamp(5px, 2.6vw, 22px);
  line-height:1.05;
  color:var(--green);
  text-shadow:0 0 12px rgba(85,255,85,.45);
  overflow:hidden;
  white-space:pre;
  display:inline-block;
  text-align:left;
}

.tagline{
  margin:0 0 18px;
  font-size:clamp(20px, 4.2vw, 32px);
  line-height:1.35; letter-spacing:.05em; font-weight:700;
}

.sub{ margin:0 auto 34px; max-width:52ch; color:var(--text); opacity:.85; }

/* ── VU mètre ─────────────────────────────────────────────── */
.vu{
  display:flex; align-items:center; gap:12px;
  max-width:520px; margin:0 auto 30px;
  border:1px solid var(--line); padding:9px 12px;
}
.vu-label,.vu-db{ font-size:11px; letter-spacing:.16em; color:var(--dim); flex:none; }
.vu-bars{ display:flex; gap:2px; flex:1; height:14px; }
.vu-bars i{
  flex:1; background:var(--line); transition:background .07s linear;
}
.vu-bars i.on{ background:var(--green); }
.vu-bars i.on.mid{ background:var(--yellow); }
.vu-bars i.on.hot{ background:var(--red); }

/* ── Specs ────────────────────────────────────────────────── */
.specs{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:10px 26px;
  font-size:12px; letter-spacing:.12em; color:var(--dim);
}
.specs b{ color:var(--text); }

/* ══ SECTIONS ═══════════════════════════════════════════════ */
section{ padding-bottom:56px; }
.section-head{
  margin:0 0 22px;
  font-size:13px; font-weight:400; letter-spacing:.16em; color:var(--dim);
  border-bottom:1px solid var(--line); padding-bottom:9px;
}

/* ── Cartes de téléchargement (tranches de console) ───────── */
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:720px){ .cards{ grid-template-columns:1fr; } }

.card{ border:1px solid var(--line); background:#050505; }
.card.detected{ border-color:var(--green); box-shadow:0 0 22px rgba(85,255,85,.13); }

.card-bar{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--text); color:var(--bg);
  padding:4px 12px; font-size:13px; font-weight:700; letter-spacing:.18em;
}
.card.detected .card-bar{ background:var(--green); }
.badge{ font-size:10px; letter-spacing:.12em; font-weight:700; }

.card-body{ padding:20px 18px 22px; }
.file{ margin:0 0 16px; font-size:17px; color:var(--text); word-break:break-all; }

.meta{ margin:0 0 18px; font-size:11px; letter-spacing:.1em; }
.meta div{ display:flex; gap:10px; padding:3px 0; border-bottom:1px dotted #1c1c1c; }
.meta dt{ color:var(--dim); flex:0 0 72px; }
.meta dd{ margin:0; color:var(--text); }

/* fader décoratif */
.fader{ position:relative; height:3px; background:var(--line); margin:22px 0; }
.fader-cap{
  position:absolute; top:-6px; left:72%;
  width:9px; height:15px; background:var(--text);
}

/* ── Boutons ──────────────────────────────────────────────── */
.btn{
  display:block; text-align:center; text-decoration:none;
  background:var(--green); color:#000;
  padding:12px 16px;
  font-family:var(--mono); font-size:15px; font-weight:700; letter-spacing:.16em;
  border:1px solid var(--green);
  transition:background .12s, box-shadow .12s, transform .06s;
}
.btn:hover{ background:#7dff7d; box-shadow:0 0 24px rgba(85,255,85,.4); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--yellow); outline-offset:3px; }

.btn-ghost{
  display:inline-block; margin:14px 0 6px;
  background:transparent; color:var(--green);
  padding:9px 18px; font-size:13px;
}
.btn-ghost:hover{ background:var(--green); color:#000; }

.note{
  margin:16px 0 0; font-size:12px; line-height:1.6; color:var(--dim);
}
.note b{ color:var(--text); }

.gate-notice{
  margin:0 0 20px; padding:10px 14px;
  border:1px solid var(--yellow);
  font-size:12px; letter-spacing:.08em; color:var(--text); line-height:1.6;
}
.gate-notice.unlocked{ border-color:var(--green); }

.gate-file{
  margin:0 0 20px; padding:11px 13px;
  border:1px dotted var(--line);
  font-size:12px; letter-spacing:.06em; line-height:1.7;
}
.gate-file b{ color:var(--green); word-break:break-all; }

/* ── Page /privacy ────────────────────────────────────────── */
.legal{ padding:44px 0 70px; max-width:680px; margin:0 auto; }
.legal-lang{ font-size:11px; letter-spacing:.16em; color:var(--dim); margin:0 0 34px; }
.legal-lang a{ color:var(--green); text-decoration:none; }
.legal-lang a:hover{ text-decoration:underline; }

.legal-h1{
  margin:0 0 6px; font-size:clamp(19px, 3.4vw, 26px);
  letter-spacing:.05em; line-height:1.35;
}
.legal-meta{ margin:0 0 26px; font-size:12px; letter-spacing:.08em; color:var(--dim); line-height:1.7; }
.legal-h2{
  margin:32px 0 10px; font-size:13px; letter-spacing:.16em;
  color:var(--green); font-weight:700;
}
.legal p{ margin:0 0 14px; font-size:13.5px; line-height:1.8; color:var(--text); opacity:.9; }
.legal p b, .legal dd b{ opacity:1; }
.legal code{
  background:#111; border:1px solid var(--line);
  padding:1px 5px; font-size:12.5px; color:var(--yellow);
}

.legal-key{
  border:1px solid var(--green); padding:15px 17px; margin:0 0 10px;
  font-size:13px; line-height:1.8; color:var(--text);
}

.legal-list{ margin:0 0 14px; padding-left:20px; font-size:13.5px; line-height:1.8; opacity:.9; }
.legal-list li{ margin-bottom:4px; }

.legal-dl{ margin:0 0 14px; }
.legal-dl dt{
  margin:16px 0 5px; font-size:12px; letter-spacing:.14em; color:var(--yellow);
}
.legal-dl dd{
  margin:0; padding-left:16px; border-left:1px solid var(--line);
  font-size:13.5px; line-height:1.8; color:var(--text); opacity:.9;
}

.legal-rule{ border:0; border-top:1px solid var(--line); margin:52px 0 44px; }

/* ── Page /unlock ─────────────────────────────────────────── */
.gate{ padding:70px 0 90px; max-width:480px; margin:0 auto; }
.gate-box{ border:1px solid var(--line); background:#050505; }
.gate-msg{ margin:0 0 20px; font-size:13.5px; color:var(--text); opacity:.9; line-height:1.7; }
.gate-err{
  margin:0 0 18px; padding:9px 12px;
  border:1px solid var(--red); font-size:12px; letter-spacing:.1em; color:var(--red);
}
.gate-label{
  display:block; margin:0 0 8px;
  font-size:11px; letter-spacing:.16em; color:var(--dim);
}
.gate-input{
  display:block; width:100%; margin:0 0 18px;
  background:#000; color:var(--green);
  border:1px solid var(--line); padding:11px 12px;
  font-family:var(--mono); font-size:16px; letter-spacing:.18em;
}
.gate-input:focus{ outline:none; border-color:var(--green); }
.gate-link{ color:var(--green); }

/* ── Bloc paiement (dormant — voir le commentaire dans index.html) ─ */
.price{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border:1px solid var(--yellow); padding:16px 18px; margin:0 0 20px;
}
.price-tag{ font-size:26px; font-weight:700; color:var(--yellow); letter-spacing:.04em; }
.price-note{ flex:1; font-size:11px; letter-spacing:.12em; color:var(--dim); }
.btn-buy{
  display:inline-block; flex:none;
  background:var(--yellow); border-color:var(--yellow); color:#000;
}
.btn-buy:hover{ background:#ffff8c; box-shadow:0 0 24px rgba(255,255,85,.4); }

/* ── Étapes ───────────────────────────────────────────────── */
.steps{ list-style:none; margin:0; padding:0; }
.steps li{
  display:flex; gap:20px;
  padding:20px 0; border-bottom:1px solid var(--line);
}
.steps li:last-child{ border-bottom:0; }
.step-n{
  flex:none; font-size:22px; color:var(--dim); letter-spacing:.05em; line-height:1.2;
}
.steps h3{
  margin:0 0 7px; font-size:14px; letter-spacing:.16em; color:var(--green);
}
.steps p{ margin:0; font-size:14px; color:var(--text); opacity:.9; max-width:60ch; }
.steps b{ color:var(--text); opacity:1; }

/* ── README ───────────────────────────────────────────────── */
.readme{ border:1px solid var(--line); padding:20px 20px 6px; background:#050505; }
.readme p{ margin:0 0 16px; font-size:13.5px; max-width:70ch; color:var(--text); opacity:.9; }
.readme b{ opacity:1; }

/* ══ FOOTER ═════════════════════════════════════════════════ */
footer{ border-top:1px solid var(--line); }
.transport{
  display:flex; align-items:center; gap:14px;
  max-width:900px; margin:0 auto; padding:14px 20px;
}
.t-btn{ font-size:13px; color:var(--dim); }
.t-bpm{ font-size:11px; letter-spacing:.14em; color:var(--dim); flex:none; }

.wave{ display:flex; align-items:flex-end; gap:2px; height:20px; flex:1; }
.wave i{
  flex:1; background:var(--dim); min-height:2px;
  animation:pulse 1.4s ease-in-out infinite alternate;
}
@keyframes pulse{ from{ height:8%; } to{ height:100%; } }

.foot-line{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  max-width:900px; margin:0 auto; padding:12px 20px 28px;
  font-size:11px; letter-spacing:.16em; color:var(--dim);
  border-top:1px solid var(--line);
}

@media (prefers-reduced-motion:reduce){
  .cursor,.wave i{ animation:none; }
  .wave i{ height:45%; }
}