/* ============================================================
   KOBBLEMMONS — DESIGN SYSTEM v1 (jalon 1 · maquettes)
   Identité : violet spatial profond · cyan lumineux · or ·
   rouge Deoxys réservé aux CTA et alertes raid.
   Polices self-hostées (OFL) : Space Grotesk (display),
   Inter (texte), Silkscreen (micro-labels pixel).
   Aucune taille de texte < 12 px. AA visé partout.
   ============================================================ */

/* ---------- Polices ---------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('/maquette/media-acad6de1fc93436f5c0f1f41.ttf') format('truetype-variations');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/maquette/media-29160a80ff49ddcab2c97711.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Silkscreen';
  src: url('/maquette/media-c845473330b94c2079ce9af0.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Silkscreen';
  src: url('/maquette/media-768476aa712d4f5c3e18d3bc.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Couleurs */
  --bg: #100b20;
  --bg-deep: #0c0819;
  --panel: #1e1435;
  --panel-2: #271b44;
  --panel-3: #31235399;
  --edge: #9a7dbc40;
  --edge-strong: #9a7dbc66;
  --text: #fbf7ff;
  --muted: #bdb2d1;
  --faint: #a99cc0;
  --cyan: #80e2df;
  --cyan-deep: #57b8b5;
  --gold: #ffcf79;
  --gold-deep: #c99345;
  --red: #ff6161;          /* Deoxys : CTA raid / alertes UNIQUEMENT */
  --ok: #7ddb9e;

  /* Typographie */
  --font-display: 'Space Grotesk', 'Segoe UI', Arial, sans-serif;
  --font-text: 'Inter', 'Segoe UI', Arial, sans-serif;
  --font-pixel: 'Silkscreen', 'Consolas', monospace;
  --fs-12: .75rem;  --fs-13: .8125rem;  --fs-14: .875rem;
  --fs-16: 1rem;    --fs-18: 1.125rem;  --fs-22: 1.375rem;
  --fs-28: 1.75rem; --fs-36: 2.25rem;   --fs-48: 3rem;
  --fs-64: 4rem;
  --lh-tight: 1.12; --lh-body: 1.7;

  /* Rayons (3 niveaux + pill) */
  --r-s: 8px; --r-m: 14px; --r-l: 20px; --r-pill: 999px;

  /* Espacements (base 4) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px;

  /* Ombres */
  --shadow-1: 0 10px 34px #06031250;
  --shadow-2: 0 18px 60px #05020e66;
  --glow-cyan: 0 0 22px #80e2df2b;
  --glow-gold: 0 0 24px #ffcf7930;
  --glow-red: 0 0 26px #ff61613d;

  /* Motion */
  --t-fast: 140ms ease;
  --t-med: 240ms ease;

  /* Layout */
  --container: 1240px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-text);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  background-image:
    radial-gradient(circle at 15px 25px, #f4efe5 1px, transparent 1.5px),
    radial-gradient(circle at 72px 118px, #8dbbd1 .7px, transparent 1.3px),
    radial-gradient(circle at 143px 53px, #b1adbe 1px, transparent 1.4px),
    radial-gradient(at 85% 12%, #5632794d, transparent 42%),
    radial-gradient(at 8% 52%, #40236959, transparent 42%),
    radial-gradient(at 72% 92%, #745c3b2e, transparent 40%);
  background-size: 257px 239px, 181px 227px, 317px 281px, auto, auto, auto;
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -.02em;
  margin: 0;
}
p { margin: 0; color: var(--muted); }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 4px; border-radius: 4px; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }
@media (min-width: 900px) { .container { padding: 0 var(--sp-6); } }

/* Lien d'évitement (accessibilité) */
.skip {
  position: fixed; top: -80px; left: var(--sp-4); z-index: 100;
  background: var(--cyan); color: var(--bg); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-s); font-weight: 600;
  transition: top var(--t-fast);
}
.skip:focus { top: var(--sp-3); }

/* ---------- Composants primitifs ---------- */

/* Micro-label pixel (Silkscreen) */
.eyebrow {
  font-family: var(--font-pixel);
  font-size: var(--fs-12);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--faint);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}
.eyebrow::before {
  content: ""; width: 6px; height: 6px; background: var(--cyan);
  box-shadow: var(--glow-cyan);
}
.eyebrow.gold::before { background: var(--gold); box-shadow: var(--glow-gold); }
.eyebrow.red::before { background: var(--red); box-shadow: var(--glow-red); }

/* Badge état (pixel) */
.badge {
  font-family: var(--font-pixel);
  font-size: var(--fs-12);
  letter-spacing: .08em;
  display: inline-flex; align-items: center; gap: var(--sp-2);
  border: 1px solid var(--edge);
  background: var(--panel);
  color: var(--muted);
  border-radius: var(--r-s);
  padding: 6px 10px;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.badge.is-online .dot { background: var(--ok); box-shadow: 0 0 10px #7ddb9e66; }
.badge.is-online { color: #c9ecd6; border-color: #7ddb9e40; }
.badge.is-soon { color: var(--gold); border-color: #ffcf7940; }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  min-height: 48px; padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-s);
  border: 1px solid var(--edge-strong);
  background: var(--panel);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600; font-size: var(--fs-14);
  transition: transform var(--t-fast), filter var(--t-fast), background var(--t-fast);
}
.btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.btn.primary {
  background: linear-gradient(120deg, #ffe1a2, var(--gold));
  border-color: #ffe0a1;
  border-bottom: 3px solid var(--gold-deep);
  color: #291b31;
  box-shadow: var(--glow-gold);
}
.btn.primary:hover { filter: brightness(1.05); }
.btn.raid {
  background: linear-gradient(120deg, #ff8585, var(--red));
  border-color: #ff9090;
  border-bottom: 3px solid #b73e3e;
  color: #2b0f0f;
  box-shadow: var(--glow-red);
}
.btn.ghost { background: transparent; }
.btn[disabled], .btn.is-disabled {
  opacity: .55; cursor: default; transform: none; filter: none;
}
.btn svg { width: 17px; height: 17px; }

/* Lien texte */
.text-link {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-14);
  color: var(--cyan);
}
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.text-link svg { width: 15px; height: 15px; }

/* Carte */
.card {
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--edge);
  border-radius: var(--r-m);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.card .card-body { padding: var(--sp-5); }

/* En-tête de section */
.section-head { margin-bottom: var(--sp-6); }
.section-head h2 {
  font-size: clamp(var(--fs-28), 3.4vw, var(--fs-36));
  margin-top: var(--sp-3);
}
.section-head .lead { max-width: 680px; margin-top: var(--sp-3); }
.lead { color: var(--muted); font-size: var(--fs-16); line-height: 1.75; }

/* Sections */
.section { padding: var(--sp-9) 0; }
.section.tight { padding: var(--sp-8) 0; }

/* Chip IP / code */
.code-chip {
  font-family: 'Consolas', monospace;
  font-size: var(--fs-14);
  color: var(--cyan);
  background: var(--bg-deep);
  border: 1px solid var(--edge);
  border-radius: var(--r-s);
  padding: 6px 10px;
}

/* Utilitaires */
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-5); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-5); }
@media (max-width: 980px) { .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

/* Réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}