/* ═══════════════════════════════════════════════════════════
   GSF SYSTEM — palette "acier froid", identique au plugin et
   à l'app iPhone. Un seul thème : un écran de terminal est
   sombre, point. Pas de dégradés, pas de fondus.
   ═══════════════════════════════════════════════════════════ */
:root{
  /* Un tube allumé n'atteint jamais le noir absolu : le faisceau diffuse dans
     le verre. Ici le verre est bleuté — bleu-nuit ardoise, pas gris-vert. */
  --bg:       #0b111e;   /* tube au repos                        */
  --panel:    #0d1424;   /* fond encaissé : cartes, dialogues    */
  --text:     #b6c4d4;   /* ink par défaut — ardoise clair       */
  --bright:   #e6eefa;   /* gras / vidéo inverse                 */
  --dim:      #5b6b7f;   /* commentaires, hints, pied de page    */
  --accent:   #38bdf8;   /* phosphore cyan — ON AIR, actions     */
  --accent-hi:#7dd3fc;   /* survol                               */
  --steel:    #cbd5e1;   /* état "en cours" (ex-jaune)           */
  --red:      #ff4d5e;   /* erreurs                              */
  --line:     #1c2738;
  /* Halo phosphore : chaque glyphe bave sa propre couleur dans le noir */
  --bloom:  0 0 7px color-mix(in srgb, currentColor 50%, transparent);
  --mono: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", "Courier New", monospace;
  /* Trame striée : la même hairline que les scanlines, mais posée SUR un
     aplat clair (bouton, barre détectée) au lieu du fond. */
  --striped: repeating-linear-gradient(to bottom,
               rgba(11,17,30,0) 0 2px, rgba(11,17,30,.20) 2px 3px);
}

*{ 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;
  text-shadow:var(--bloom);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.accent{ color:var(--accent); }
.steel{ color:var(--steel); }
.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,.26) 3px, rgba(0,0,0,.26) 4px),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 52%, rgba(0,0,0,.6) 100%);
}

/* ── Title bar : discrète, en retrait — c'est le logo qui porte ── */
.titlebar{
  position:sticky; top:0; z-index:50;
  display:flex; justify-content:space-between; align-items:center;
  background:var(--bg); color:var(--dim);
  padding:7px 14px;
  font-size:11px; letter-spacing:.28em;
  border-bottom:1px solid var(--line);
}

.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 40px;
}
.cursor{ color:var(--accent); animation:blink 1s step-end infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* Le mark REFON, halo cyan comme un glyphe allumé */
.logo{
  display:block; width:128px; height:128px; margin:0 auto 34px;
  filter:drop-shadow(0 0 22px rgba(56,189,248,.35));
}

.tagline{
  margin:0 0 22px;
  font-size:clamp(17px, 3.2vw, 25px);
  line-height:1.5; letter-spacing:.22em; font-weight:400;
}

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

/* ── 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:.16em; color:var(--dim);
}
.specs b{ color:var(--text); font-weight:400; }

/* ══ 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:var(--panel); }
.card.detected{ border-color:var(--accent); box-shadow:0 0 26px rgba(56,189,248,.14); }

/* Au repos la barre reste en retrait ; seule la carte détectée s'allume. */
.card-bar{
  display:flex; justify-content:space-between; align-items:center;
  background:var(--panel); color:var(--dim);
  border-bottom:1px solid var(--line);
  padding:6px 12px; font-size:12px; letter-spacing:.24em;
  text-shadow:none;
}
.card.detected .card-bar{
  background:var(--striped), var(--accent);
  border-bottom-color:var(--accent);
  color:#04121f;
}
.badge{ font-size:10px; letter-spacing:.14em; }
.card.detected .badge{ background:#04121f; color:var(--accent); padding:1px 7px; }

.card-body{ padding:20px 18px 22px; }
.file{ margin:0 0 16px; font-size:17px; color:var(--bright); 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 var(--line); }
.meta dt{ color:var(--dim); flex:0 0 72px; }
.meta dd{ margin:0; color:var(--text); }

/* bandeau iPhone, pleine largeur sous les deux cartes */
.card-wide{ margin-top:18px; }
.ios-body{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap;
}
.ios-body .file{ margin:0; display:flex; align-items:center; gap:14px; }
.ios-body .file img{ width:38px; height:38px; }
.ios-body .btn{ flex:none; min-width:220px; }

/* 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(--dim);
}

/* ── Boutons ──────────────────────────────────────────────── */
/* Aplat cyan traversé par la trame : le bouton est une zone allumée de
   l'écran, pas un widget posé dessus. */
.btn{
  display:block; text-align:center; text-decoration:none;
  background:var(--striped), var(--accent);
  color:#04121f;
  text-shadow:none;
  padding:12px 16px;
  font-family:var(--mono); font-size:14px; letter-spacing:.24em;
  border:1px solid var(--accent);
  transition:background .12s, box-shadow .12s, transform .06s;
}
.btn:hover{ background:var(--striped), var(--accent-hi); box-shadow:0 0 26px rgba(56,189,248,.45); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:2px solid var(--steel); outline-offset:3px; }

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

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

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

.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(--accent); 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(--accent); 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(--accent); font-weight:400;
}
.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:var(--panel); border:1px solid var(--line);
  padding:1px 5px; font-size:12.5px; color:var(--steel);
}

.legal-key{
  border:1px solid var(--accent); 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(--steel);
}
.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:var(--panel); }
.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:var(--panel); color:var(--accent);
  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(--accent); }
.gate-link{ color:var(--accent); }

/* ── Bloc paiement (dormant — voir le commentaire dans index.html) ─ */
.price{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  border:1px solid var(--steel); padding:16px 18px; margin:0 0 20px;
}
.price-tag{ font-size:26px; color:var(--steel); 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(--striped), var(--steel); border-color:var(--steel); color:#04121f;
}
.btn-buy:hover{ background:var(--striped), #e2e8f0; box-shadow:0 0 24px rgba(203,213,225,.35); }

/* ── É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(--accent); font-weight:400;
}
.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:var(--panel); }
.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(--line); 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%; }
}