/* command-center.css — direction esthétique « centre de commandement » FIVE SARL.
   Variables + utilitaires prêts à copier. Valeurs issues du dashboard référendum.
   Importe ce fichier (ou un design-tokens.css généré) AVANT ton CSS applicatif. */

:root {
  /* ── Couleurs ── */
  --bg: #062b5b;
  --bg-deep: #041d3d;
  --bg-deep-2: #0a2647;
  --panel: #0d3a6b;
  --panel-2: #0a2f57;
  --border: rgba(255, 255, 255, .12);
  --border-soft: rgba(255, 255, 255, .06);

  --cyan: #0066cc;
  --gold: #f7d417;
  --danger: #ce1126;

  --text: #eaf2fb;
  --text-muted: #9db8da;

  /* ── Glow ── */
  --glow-cyan: 0 0 14px rgba(0, 102, 204, .45), 0 0 32px rgba(0, 102, 204, .20);
  --glow-gold: 0 0 14px rgba(247, 212, 23, .35), 0 0 32px rgba(247, 212, 23, .15);
  --glow-red: 0 0 14px rgba(206, 17, 38, .35), 0 0 30px rgba(206, 17, 38, .15);

  /* ── Typo ── */
  --font-display: 'Orbitron', 'Manrope', system-ui, sans-serif;
  --font-ui: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ── Espacement / rayons ── */
  --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --radius-md: 8px; --radius-lg: 14px;
}

/* ── Fond bleu nuit ── */
body.cc-bg {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 70% -10%, rgba(0,102,204,.18), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(247,212,23,.06), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  min-height: 100vh;
}

/* ── Grille tactique (overlay décoratif, derrière le contenu) ── */
.tac-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 85%);
}

/* ── Panneau translucide ── */
.cc-panel {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: 0 8px 30px rgba(0,0,0,.35);
}

/* ── Utilitaires glow ── */
.glow-cyan { box-shadow: var(--glow-cyan); }
.glow-gold { box-shadow: var(--glow-gold); }
.glow-red  { box-shadow: var(--glow-red); }

/* ── Texte d'affichage ── */
.cc-display { font-family: var(--font-display); letter-spacing: .04em; }
.cc-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ── Animation : pulse de glow ── */
@keyframes cc-pulse {
  0%, 100% { box-shadow: var(--glow-cyan); }
  50%      { box-shadow: 0 0 22px rgba(0,102,204,.65), 0 0 48px rgba(0,102,204,.30); }
}
.cc-pulse { animation: cc-pulse 3s ease-in-out infinite; }

/* ── Animation : balayage de scan ── */
@keyframes cc-scan {
  from { transform: translateY(-100%); }
  to   { transform: translateY(100%); }
}
.cc-scanline { position: relative; overflow: hidden; }
.cc-scanline::after {
  content: ""; position: absolute; left: 0; right: 0; height: 40%;
  background: linear-gradient(180deg, transparent, rgba(0,102,204,.12), transparent);
  animation: cc-scan 4s linear infinite;
}

/* ── Accessibilité : couper les animations si demandé ── */
@media (prefers-reduced-motion: reduce) {
  .cc-pulse, .cc-scanline::after { animation: none; }
}