/* ═══════════════════════════════════════════════════════════════════
   LSG BRAND OVERRIDE — v1
   Drop AFTER your main stylesheet. Redefines fonts, palette, tones.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Google Fonts import (Orbitron + Exo 2 déjà chargés) ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700;900&family=Exo+2:ital,wght@0,300;0,400;0,600;1,300&display=swap');

/* ── Palette tokens ───────────────────────────────────────────────── */
:root {
  /* Base */
  --lsg-dark:     #1c2636;   /* fond principal */
  --lsg-light:    #d7e9ff;   /* texte principal */

  /* Nuances */
  --lsg-mid:      #374b69;   /* panneaux, cards */
  --lsg-muted:    #575e69;   /* texte secondaire */
  --lsg-dim:      #96a3b5;   /* placeholders, labels */
  --lsg-accent:   #a72850;   /* rouge — CTA, highlights */

  /* Dérivés utiles */
  --lsg-mid-dim:  rgba(55, 75, 105, .45);
  --lsg-light-dim: rgba(215, 233, 255, .55);
  --lsg-stroke:   rgba(215, 233, 255, .1);
  --lsg-stroke-m: rgba(215, 233, 255, .18);

  /* Remplace les vars existantes */
  --ink:   var(--lsg-dark);
  --blue:  var(--lsg-light);
  --red:   var(--lsg-accent);
  --red2:  var(--lsg-accent);
  --muted: var(--lsg-light-dim);
  --stroke: var(--lsg-stroke);
}

/* ── Body & base ──────────────────────────────────────────────────── */
body {
  font-family: 'Exo 2', sans-serif !important;
  background: var(--lsg-dark) !important;
  color: var(--lsg-light) !important;
}

/* ── Headings → Orbitron ─────────────────────────────────────────── */
h1, h2, h3, h4,
.hero-title,
.section-title,
.hero-eyebrow,
.section-label,
.board-name,
.board-gate,
[class*="title"],
[class*="label"],
.btn-cta, .btn-primary, .btn-ghost, .navbtn {
  font-family: 'Orbitron', monospace !important;
}

/* ── Paragraphs, body copy → Exo 2 (Cocomat Pro fallback) ────────── */
p, li, .hero-sub, .dest-desc, .board-sector, .board-tag,
.ticker-item, .step-text, .faq-body {
  font-family: 'Exo 2', sans-serif !important;
}

/* ── Hero title: harmonise les 3 couleurs → une seule logique ───── */
.hero-title {
  color: var(--lsg-light) !important;
}
.hero-title .accent {
  /* "vos univers" — couleur claire, pas cyan */
  color: var(--lsg-light) !important;
  opacity: .75;
  display: block;
  text-shadow: none !important;
}
.hero-title .accent2 {
  /* "préférés" — accent rouge, cohérent avec le CTA */
  color: var(--lsg-accent) !important;
  text-shadow: 0 0 40px rgba(167, 40, 80, .4) !important;
}

/* ── Section titles ───────────────────────────────────────────────── */
.section-title { color: var(--lsg-light) !important; }
.section-title .accent { color: var(--lsg-accent) !important; }
.section-label { color: var(--lsg-dim) !important; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn-primary, .btn-cta {
  background: linear-gradient(135deg, var(--lsg-accent), #c9305d) !important;
  box-shadow: 0 0 20px rgba(167, 40, 80, .3) !important;
  color: #fff !important;
}
.btn-primary:hover, .btn-cta:hover {
  box-shadow: 0 0 34px rgba(167, 40, 80, .55) !important;
}
.btn-ghost {
  border-color: var(--lsg-stroke-m) !important;
  color: var(--lsg-light-dim) !important;
  background: transparent !important;
}
.btn-ghost:hover {
  border-color: rgba(215, 233, 255, .4) !important;
  color: var(--lsg-light) !important;
}

/* ── Cards / panels ───────────────────────────────────────────────── */
.card, .step, .faq-item {
  background: var(--lsg-mid-dim) !important;
  border-color: var(--lsg-stroke) !important;
}

/* ── Board: adapt hologram palette to brand ──────────────────────── */
.board-wrap {
  border-color: rgba(215, 233, 255, .14) !important;
  box-shadow:
    0 0 0 1px rgba(215, 233, 255, .04),
    0 0 60px rgba(28, 38, 54, .9),
    inset 0 0 80px rgba(28, 38, 54, .5) !important;
}
/* Scan line: blanc au lieu de cyan pur */
.board-wrap::before {
  background: linear-gradient(90deg, transparent, rgba(215,233,255,.5), transparent) !important;
}
.board-header {
  background: rgba(18, 26, 40, .98) !important;
  border-bottom-color: rgba(215, 233, 255, .12) !important;
  color: rgba(215, 233, 255, .3) !important;
  letter-spacing: 4px;
}
.board-body { background: rgba(22, 32, 48, .95) !important; }
.board-row:nth-child(odd) { background: rgba(215, 233, 255, .013) !important; }
.board-row:hover { background: rgba(215, 233, 255, .04) !important; }
.board-row::after {
  background: linear-gradient(180deg, transparent, rgba(167,40,80,.8), transparent) !important;
  box-shadow: 0 0 10px rgba(167,40,80,.6) !important;
}

/* Board name: brand light instead of harsh white */
.board-name { color: var(--lsg-light) !important; }
.board-name .sf-char { color: var(--lsg-light) !important; border-color: rgba(215,233,255,.14) !important; }

/* Sector: muted */
.board-sector { color: var(--lsg-dim) !important; }
.board-sector .sf-char { color: var(--lsg-dim) !important; }

/* Gate: accent rouge au lieu de cyan */
.board-gate {
  color: var(--lsg-accent) !important;
  text-shadow: 0 0 16px rgba(167,40,80,.7), 0 0 32px rgba(167,40,80,.3) !important;
}
.board-gate .sf-char {
  color: var(--lsg-accent) !important;
  border-color: rgba(167,40,80,.25) !important;
  background: rgba(167,40,80,.06) !important;
  box-shadow: inset 0 0 8px rgba(167,40,80,.08), 0 0 10px rgba(167,40,80,.15) !important;
}

/* Char boxes during flip: brand glow */
.sf-char.flapping {
  color: var(--lsg-light) !important;
  box-shadow: inset 0 0 8px rgba(0,0,0,.8), 0 0 10px rgba(215,233,255,.25) !important;
}

/* Status pill: "disponible" → brand colors */
.board-pill {
  border-color: rgba(215,233,255,.18) !important;
  color: var(--lsg-dim) !important;
  background: rgba(215,233,255,.05) !important;
  box-shadow: none !important;
}
.board-pill-dot { background: var(--lsg-dim) !important; box-shadow: none !important; }

/* Ticker */
.board-ticker { background: rgba(18,26,40,.6) !important; border-top-color: rgba(215,233,255,.08) !important; }
.ticker-label { color: var(--lsg-accent) !important; text-shadow: 0 0 10px rgba(167,40,80,.4) !important; }
.ticker-item { color: rgba(215, 233, 255, .28) !important; }

/* ── Strip / tag ticker ───────────────────────────────────────────── */
.strip { border-color: var(--lsg-stroke) !important; }
.strip-item { color: var(--lsg-dim) !important; }

/* ── Steps ────────────────────────────────────────────────────────── */
.step::before { background: linear-gradient(90deg, var(--lsg-accent), transparent) !important; }
.step-num { color: rgba(215,233,255,.06) !important; }
.step-title { color: var(--lsg-light) !important; }
.step-text  { color: var(--lsg-light-dim) !important; }

/* ── Input fields (si présents) ───────────────────────────────────── */
input, textarea, select {
  background: rgba(28,38,54,.8) !important;
  border-color: var(--lsg-stroke-m) !important;
  color: var(--lsg-light) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(215,233,255,.4) !important;
  box-shadow: 0 0 12px rgba(215,233,255,.1) !important;
}

/* ── Scrollbar ────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--lsg-dark); }
::-webkit-scrollbar-thumb { background: var(--lsg-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--lsg-muted); }


/* LSG TOPBAR (shared) */
:root{
  --lsg-bg: rgba(10,16,28,.72);
  --lsg-border: rgba(255,255,255,.08);
  --lsg-text: #d7e9ff;
  --lsg-muted: rgba(215,233,255,.7);
  --lsg-accent: #c02f5c;
}

body.lsg-topbar-offset{ padding-top: 84px; }

.lsg-topbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: linear-gradient(180deg, var(--lsg-bg), rgba(10,16,28,.45));
  border-bottom: 1px solid var(--lsg-border);
  backdrop-filter: blur(10px);
}

.lsg-topbar__inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.lsg-brand{
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  color: var(--lsg-text);
  min-width: 210px;
}

.lsg-brand__name{
  font-family: Orbitron, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  font-size: 14px;
  text-transform: uppercase;
}

.lsg-brand__tag{
  font-family: "Cocomat Pro", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  color: var(--lsg-muted);
}

.lsg-nav{
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
}

.lsg-nav__link{
  font-family: Orbitron, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: rgba(215,233,255,.75);
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.lsg-nav__link:hover{ color: var(--lsg-text); border-color: rgba(255,255,255,.10); background: rgba(255,255,255,.04); }
.lsg-nav__link.is-active{ color: var(--lsg-text); border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.06); }

.lsg-actions{ display:flex; align-items:center; gap:10px; }

.lsg-btn{
  font-family: Orbitron, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--lsg-text);
  background: rgba(255,255,255,.04);
}

.lsg-btn:hover{ background: rgba(255,255,255,.08); }

.lsg-btn--primary{
  background: linear-gradient(180deg, rgba(192,47,92,.95), rgba(150,28,66,.95));
  border-color: rgba(255,255,255,.12);
}

.lsg-btn--primary:hover{ filter: brightness(1.06); }

.lsg-btn--ghost{ background: rgba(255,255,255,.03); }

@media (max-width: 980px){
  .lsg-nav{ display:none; }
  body.lsg-topbar-offset{ padding-top: 78px; }
  .lsg-brand{ min-width: unset; }
}