/* ============================================================
   FORMATIONS.J2B — Thème FUTURISTE
   Fond quasi noir + grille techno + néons cyan/violet + HUD
   ============================================================ */
:root {
  --bg: #030712;
  --bg-2: #050a18;
  --panel: rgba(9, 16, 36, .62);
  --line: rgba(34, 211, 238, .16);
  --cyan: #22d3ee;
  --violet: #a78bfa;
  --magenta: #e879f9;
  --gold: #fbbf24;
  --green: #34d399;
  --text: #e2e8f0;
  --muted: #7c8db5;
  /* --- variables de thème (étendues) --- */
  --grid: rgba(34, 211, 238, .045);
  --glow-a: rgba(34, 211, 238, .14);
  --glow-b: rgba(167, 139, 250, .12);
  --glow-c: rgba(232, 121, 249, .07);
  --grad-a: #22d3ee;
  --grad-b: #a78bfa;
  --grad-c: #e879f9;
  --grad-d: #67e8f9;
  --btn-text: #031018;
  --accent-glow: rgba(34, 211, 238, .45);
  --accent-glow-hover: rgba(34, 211, 238, .7);
  --accent-glow-soft: rgba(34, 211, 238, .15);
  --accent-glow-25: rgba(34, 211, 238, .25);
  --accent-70: rgba(34, 211, 238, .7);
  --accent-50: rgba(34, 211, 238, .5);
  --accent-35: rgba(34, 211, 238, .35);
  --accent-25: rgba(34, 211, 238, .25);
  --accent-16: rgba(34, 211, 238, .16);
  --accent-10: rgba(34, 211, 238, .10);
  --accent-08: rgba(34, 211, 238, .08);
  --accent-06: rgba(34, 211, 238, .06);
  --accent-60line: rgba(34, 211, 238, .6);
  --accent-15: rgba(34, 211, 238, .15);
  --accent2-10: rgba(167, 139, 250, .10);
  --accent2-35: rgba(167, 139, 250, .35);
  --accent2-07: rgba(167, 139, 250, .07);
  --gold-10: rgba(251, 191, 36, .10);
  --gold-glow: rgba(251, 191, 36, .4);
  --gold-glow-hover: rgba(251, 191, 36, .6);
  --gold-btn-text: #1a1200;
  --gold-btn-b: #f59e0b;
  --danger: #fb7185;
  --danger-35: rgba(251, 113, 133, .35);
  --danger-06: rgba(251, 113, 133, .06);
  --danger-14: rgba(251, 113, 133, .14);
  --danger-glow: rgba(251, 113, 133, .2);
  --panel-solid: #04081a;
  --panel-soft: rgba(4, 8, 26, .6);
  --border-soft: rgba(34, 211, 238, .1);
  --input-bg: rgba(5, 10, 24, .8);
  --placeholder: #46557a;
  --text-2: #94a3b8;
  --text-3: #64748b;
  --text-4: #475569;
  --soft: #cbd5e1;
  --shadow-accent: #22d3ee;
  --btn-gold-bg-a: #fbbf24;
  --btn-ghost-25: rgba(34, 211, 238, .25);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Grotesk', system-ui, sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}

/* ---------- Fonds fixes : grille techno + lueurs ---------- */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 30%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 0%, #000 30%, transparent 100%);
}

body::after {
  content: '';
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 50% -12%, var(--glow-a), transparent),
    radial-gradient(ellipse 55% 40% at 92% 108%, var(--glow-b), transparent),
    radial-gradient(ellipse 45% 35% at 4% 100%, var(--glow-c), transparent);
}

/* scanlines subtiles par-dessus tout */
.scanlines {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* ---------- Typo ---------- */
.font-tech { font-family: 'Orbitron', sans-serif; letter-spacing: .04em; }
.font-mono2 { font-family: 'IBM Plex Mono', monospace; }

/* ---------- Titre avec dégradé animé ---------- */
.text-gradient-neon {
  background: linear-gradient(90deg, var(--grad-a), var(--grad-b), var(--grad-c), var(--grad-a));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-slide 8s linear infinite;
}
@keyframes gradient-slide {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ---------- Boutons néon ---------- */
.btn-neon {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.6rem;
  border-radius: .6rem;
  font-weight: 700;
  color: var(--btn-text);
  background: linear-gradient(90deg, var(--grad-a), var(--grad-d));
  box-shadow: 0 0 18px var(--accent-glow), 0 0 60px var(--accent-glow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.btn-neon:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 28px var(--accent-glow-hover), 0 0 90px var(--accent-glow-25); }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.6rem; border-radius: .6rem;
  font-weight: 600; color: var(--cyan);
  border: 1px solid var(--accent-35);
  background: var(--accent-06);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: all .25s ease;
}
.btn-ghost:hover { background: var(--accent-15); box-shadow: 0 0 24px var(--accent-glow-soft); transform: translateY(-2px); }

.btn-gold {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.6rem; border-radius: .6rem;
  font-weight: 700; color: var(--gold-btn-text);
  background: linear-gradient(90deg, var(--gold), var(--gold-btn-b));
  box-shadow: 0 0 18px var(--gold-glow);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  transition: all .25s ease;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 0 30px var(--gold-glow-hover); }

/* ---------- Petits boutons d'action (SANS clip-path — ne pas découper) ---------- */
.btn-mini {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .45rem .7rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .72rem; white-space: nowrap;
  color: var(--cyan);
  border: 1px solid var(--accent-35);
  background: var(--accent-06);
  border-radius: .35rem;
  transition: all .2s ease;
  cursor: pointer;
}
.btn-mini:hover { background: var(--accent-15); box-shadow: 0 0 12px var(--accent-glow-soft); }
.btn-mini-danger { color: var(--danger); border-color: var(--danger-35); background: var(--danger-06); }
.btn-mini-danger:hover { background: var(--danger-14); box-shadow: 0 0 12px var(--danger-glow); }
.btn-mini-ghost { color: var(--muted); border-color: rgba(124, 141, 181, .25); background: transparent; }
.btn-mini-ghost:hover { color: var(--cyan); border-color: var(--accent-35); background: var(--accent-08); }

/* ---------- Cartes glass + coins HUD ---------- */
.hud-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  backdrop-filter: blur(14px);
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.hud-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent-50);
  box-shadow: 0 0 30px var(--accent-10), 0 20px 40px -18px rgba(0,0,0,.7);
}
.hud-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-60line), transparent);
}

/* coins en équerre (HUD) */
.hud-corners::after {
  content: '';
  position: absolute; inset: 8px; pointer-events: none;
  background:
    linear-gradient(var(--cyan), var(--cyan)) top left / 14px 2px,
    linear-gradient(var(--cyan), var(--cyan)) top left / 2px 14px,
    linear-gradient(var(--cyan), var(--cyan)) top right / 14px 2px,
    linear-gradient(var(--cyan), var(--cyan)) top right / 2px 14px,
    linear-gradient(var(--cyan), var(--cyan)) bottom left / 14px 2px,
    linear-gradient(var(--cyan), var(--cyan)) bottom left / 2px 14px,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 14px 2px,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 2px 14px;
  background-repeat: no-repeat;
  opacity: .7;
}

/* ---------- Badge HUD ---------- */
.hud-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .9rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--cyan);
  border: 1px solid var(--accent-35);
  background: var(--accent-06);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.hud-badge .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  animation: blink 2s ease-in-out infinite;
}
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* ---------- Stats terminal ---------- */
.term-line {
  font-family: 'IBM Plex Mono', monospace;
  color: var(--muted);
}
.term-line .prompt { color: var(--cyan); }
.term-line .value { color: var(--gold); font-weight: 700; }

/* ---------- Glitch titre ---------- */
.glitch { position: relative; display: inline-block; }
.glitch:hover::before,
.glitch:hover::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  overflow: hidden;
}
.glitch:hover::before {
  color: var(--magenta);
  animation: glitch-a .5s steps(2) infinite;
  clip-path: inset(20% 0 40% 0);
}
.glitch:hover::after {
  color: var(--cyan);
  animation: glitch-b .5s steps(2) infinite;
  clip-path: inset(60% 0 10% 0);
}
@keyframes glitch-a { 0%{transform:translate(2px,-1px)} 50%{transform:translate(-2px,1px)} 100%{transform:translate(1px,0)} }
@keyframes glitch-b { 0%{transform:translate(-2px,1px)} 50%{transform:translate(2px,-1px)} 100%{transform:translate(-1px,0)} }

/* ---------- Grid sections ---------- */
.section-title {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700; letter-spacing: .06em;
  position: relative;
}
.section-title::after {
  content: '';
  display: block; width: 56px; height: 2px; margin-top: .6rem;
  background: linear-gradient(90deg, var(--cyan), transparent);
  box-shadow: 0 0 12px var(--accent-glow-soft);
}

/* ---------- Révélation au scroll ---------- */
.reveal { opacity: 0; }
[x-cloak] { display: none !important; }

/* ---------- Inputs ---------- */
.inp {
  width: 100%;
  padding: .75rem 1rem;
  background: var(--input-bg);
  border: 1px solid var(--accent-25);
  color: var(--text);
  border-radius: .5rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  font-family: 'Space Grotesk', sans-serif;
}
.inp:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px var(--accent-15), 0 0 18px var(--accent-glow-soft); }
.inp::placeholder { color: var(--placeholder); }

/* ---------- Lien nav néon ---------- */
.nav-link { position: relative; color: var(--muted); transition: color .2s; }
.nav-link::after {
  content: '';
  position: absolute; left: 0; bottom: -4px; width: 0; height: 1px;
  background: var(--cyan); box-shadow: 0 0 8px var(--cyan);
  transition: width .25s ease;
}
.nav-link:hover { color: var(--cyan); }
.nav-link:hover::after { width: 100%; }

/* ---------- Champ "chip" catégorie ---------- */
.chip {
  display: inline-block;
  padding: .2rem .6rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--violet);
  border: 1px solid var(--accent2-35);
  background: var(--accent2-07);
}

/* ---------- Classes utilitaires thémées (remplacent les utilitaires Tailwind en dur) ---------- */
.text-strongest { color: #fff; }
.text-strong { color: var(--text); }
.text-accent { color: var(--cyan); }
.text-accent-bright { color: var(--grad-d); }
.text-accent-70 { color: var(--accent-70); }
.text-accent-2 { color: var(--violet); }
.text-accent-3 { color: var(--magenta); }
.text-gold { color: var(--gold); }
.text-soft { color: var(--soft); }
.text-muted-2 { color: var(--text-2); }
.text-muted-3 { color: var(--text-3); }
.text-danger { color: var(--danger); }
.bg-panel-solid { background: var(--panel-solid); }
.bg-panel-soft { background: var(--panel-soft); }
.bg-site { background: var(--bg); }
.bg-site-75 { background: color-mix(in srgb, var(--bg) 75%, transparent); }
.bg-accent { background: var(--cyan); }
.bg-accent-2 { background: var(--violet); }
.bg-accent-3 { background: var(--magenta); }
.bg-accent-10 { background: var(--accent-10); }
.bg-accent2-10 { background: var(--accent2-10); }
.bg-gold-10 { background: var(--gold-10); }
.border-soft { border-color: var(--border-soft); }
.border-accent { border-color: var(--accent-50); }
.border-accent-soft { border-color: var(--accent-35); }
.shadow-accent { box-shadow: 0 0 10px var(--shadow-accent); }
.shadow-gold { box-shadow: 0 0 8px var(--gold); }
.dot-accent { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.dot-gold { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* ---------- Rendu de leçon : code, liens, callouts, tableaux ---------- */
.inline-code {
  background: var(--accent-10);
  border: 1px solid var(--accent-16);
  border-radius: .3rem;
  padding: .1rem .35rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .85em;
  color: var(--accent);
}
.code-block {
  background: var(--input-bg);
  border: 1px solid var(--accent-25);
  border-radius: .5rem;
  overflow: hidden;
}
.code-block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .4rem .8rem;
  border-bottom: 1px solid var(--accent-16);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--muted);
}
.code-block-pre {
  margin: 0;
  padding: .9rem 1rem;
  overflow-x: auto;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--soft);
  background: transparent;
}
.btn-copy {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .66rem;
  letter-spacing: .08em;
  color: var(--cyan);
  border: 1px solid var(--accent-35);
  background: var(--accent-06);
  border-radius: .3rem;
  padding: .2rem .5rem;
  cursor: pointer;
  transition: all .2s ease;
}
.btn-copy:hover { background: var(--accent-15); box-shadow: 0 0 10px var(--accent-glow-soft); }
.callout { font-size: .95rem; }
.callout-warn { border-color: var(--gold); background: var(--gold-10); color: var(--soft); }
.callout-warn p::before { content: '⚠️ '; }
.callout-tip { border-color: var(--cyan); background: var(--accent-06); color: var(--soft); }
.callout-tip p::before { content: '💡 '; }
.callout-goal { border-color: var(--violet); background: var(--accent2-10); color: var(--soft); }
.callout-goal p::before { content: '🎯 '; }
.callout-note { border-color: #60a5fa; background: rgba(96,165,250,.08); color: var(--soft); }
.callout-note p::before { content: '📌 '; }
.callout-ok { border-color: var(--green); background: rgba(52,211,153,.08); color: var(--soft); }
.callout-ok p::before { content: '✅ '; }
.callout-ko { border-color: var(--danger); background: var(--danger-06); color: var(--soft); }
.callout-ko p::before { content: '❌ '; }
.lesson-quote {
  background: var(--accent-06);
  border-color: var(--accent-35);
}
.lesson-ol { list-style: decimal; }
.lesson-ol li::marker { color: var(--accent); font-family: 'IBM Plex Mono', monospace; }
.lesson-table { border-collapse: collapse; }
.lesson-table th, .lesson-table td {
  border: 1px solid var(--accent-16);
  padding: .5rem .75rem;
  text-align: left;
  vertical-align: top;
}
.lesson-table th {
  background: var(--accent-10);
  color: var(--accent);
  font-family: 'IBM Plex Mono', monospace;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lesson-table td { color: var(--text-2); }