/* ════════════════════════════════════════════════════════════════════════════
   EXEGIDE — DESIGN SYSTEM (ds.css)
   Socle unique, cyber/HTB, dark + light togglables. 100% via variables CSS :
   AUCUNE couleur en dur dans les composants → thème (dark/light) et accent d'event
   se propagent partout. Charge APRÈS tokens.css + global.css (couche additive).

   NOTE FONDATIONS : ce fichier N'EST PAS encore câblé dans les pages live.
   Il est consommé par la galerie deploy/designs-foundations/index.html.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS : deux palettes cohérentes (dark défaut du DS + light) ──────────
   L'accent par défaut = BLEU plateforme #2f43c9 (aligné sur tokens.css live, la
   plateforme reste bleue). Surchargeable par --accent (thème d'event /
   établissement). Les surfaces/texte basculent avec data-theme. */
:root {
  /* Accent bleu plateforme (défaut, = tokens.css). --accent surchargé par le thème d'event. */
  --ds-accent: #2f43c9;
  --ds-accent-soft: #4457d6;
  --ds-accent-strong: #1f2f9e;
  --accent: var(--ds-accent);
  --accent-2: var(--ds-accent-soft);

  /* Glow dérivé de l'accent → fonctionne quelle que soit la couleur d'accent. */
  --glow: color-mix(in srgb, var(--accent) 16%, transparent);
  --glow-strong: color-mix(in srgb, var(--accent) 34%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 40%, var(--border));
  --accent-tint: color-mix(in srgb, var(--accent) 9%, transparent);

  /* Statuts sémantiques (mêmes teintes en dark/light, ajustées plus bas si besoin). */
  --ok: #10b981;
  --warn: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --gold: #f5c451;

  /* Rayons & mouvement (partagés). */
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --t: 0.18s cubic-bezier(.4,0,.2,1);
  --t-slow: 0.32s cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  /* Typo : GROTESK display + Inter corps + JetBrains Mono pour data/chiffres. */
  --font-display: 'Space Grotesk','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-sans: 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-mono: 'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ── PALETTE LIGHT (défaut si pas de data-theme, ou data-theme='light') ──────── */
:root, [data-theme='light'] {
  --bg: #f7f8fa;
  --bg-2: #eef0f4;
  --surface: #ffffff;
  --surface-2: #f2f4f7;
  --surface-3: #e8ebf0;
  --border: #e2e5ec;
  --border-hi: #cfd4de;
  --text: #10131a;
  --text-muted: #5a6373;
  --text-dim: #8a92a3;
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent);
  --shadow: 0 1px 2px rgba(16,19,26,.06);
  --shadow-pop: 0 14px 34px -14px rgba(16,19,26,.24), 0 2px 6px -2px rgba(16,19,26,.10);
  --shadow-hover: 0 8px 22px -12px rgba(16,19,26,.2);
  --backdrop: rgba(16,19,26,.4);
}

/* ── PALETTE DARK (cyber/HTB : navy profond + surfaces bleutées + glow) ──────── */
[data-theme='dark'] {
  --bg: #080b11;
  --bg-2: #0b0f17;
  --surface: #101725;
  --surface-2: #16202f;
  --surface-3: #1b2738;
  --border: #1d2838;
  --border-hi: #2a3a51;
  --text: #e8eef7;
  --text-muted: #8496af;
  --text-dim: #8a97ad;
  --gold: #ffc247;
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  --shadow: 0 18px 40px -24px rgba(0,0,0,.8);
  --shadow-pop: 0 24px 60px -20px rgba(0,0,0,.85);
  --shadow-hover: 0 18px 40px -24px rgba(0,0,0,.75);
  --backdrop: rgba(2,6,15,.66);
}

/* Fond ambiant cyber (dark uniquement) : halos radiaux dérivés de l'accent. */
[data-theme='dark'] body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 85% -8%, var(--glow), transparent 60%),
    radial-gradient(900px 600px at 4% 4%, color-mix(in srgb, var(--accent-2) 10%, transparent), transparent 55%),
    linear-gradient(180deg, #090d14, #070a10 60%);
}

/* ════════════════════════════════════════════════════════════════════════════
   2. BASE
   ════════════════════════════════════════════════════════════════════════════ */
.ds *, .ds *::before, .ds *::after { box-sizing: border-box; }
.ds {
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.ds h1, .ds h2, .ds h3, .ds h4 {
  font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin: 0;
}
.ds .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ds .muted { color: var(--text-muted); }
.ds .dim { color: var(--text-dim); }
.ds .tnum { font-variant-numeric: tabular-nums; }
.ds a { color: var(--accent); text-decoration: none; }
.ds a:hover { text-decoration: underline; }
.ds :focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

.ds .svgic, .ds svg.ic { width: 1em; height: 1em; flex: none; vertical-align: -.14em; }

/* ════════════════════════════════════════════════════════════════════════════
   3. BUTTON — .ds-btn (+ .primary/.ghost/.danger/.subtle · .sm/.lg · .block · .icon)
   ════════════════════════════════════════════════════════════════════════════ */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--r-sm); border: 1px solid var(--border-hi);
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1;
  color: var(--text); background: var(--surface); cursor: pointer; white-space: nowrap;
  transition: background var(--t), border-color var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.ds-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--glow); text-decoration: none; }
.ds-btn:active { transform: translateY(1px); }
.ds-btn[disabled], .ds-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
/* Accent BLEU #2f43c9 : l'ancre était #04121f (ère verte) → contraste insuffisant sur le bleu.
   On force un texte blanc/quasi-blanc sur l'accent, dark ET light (contraste ≥ 4.5:1). */
.ds-btn.primary {
  background: var(--accent); color: #ffffff; border-color: transparent;
  box-shadow: 0 8px 24px -12px var(--glow-strong);
}
.ds-btn.primary:hover { background: var(--accent-soft, var(--ds-accent-soft)); color: #ffffff; transform: translateY(-1px); }
.ds-btn.ghost { background: transparent; }
.ds-btn.subtle { background: var(--surface-2); border-color: var(--border); }
.ds-btn.danger { border-color: color-mix(in srgb, var(--danger) 45%, transparent); color: var(--danger); background: transparent; }
.ds-btn.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: var(--danger); color: var(--danger); }
.ds-btn.sm { padding: 6px 12px; font-size: 13px; }
.ds-btn.lg { padding: 12px 22px; font-size: 15px; }
.ds-btn.block { width: 100%; }
.ds-btn.icon { padding: 8px; width: 34px; height: 34px; }
/* Busy button (anti double-submit) : spinner inline + état non-interactif. */
.ds-btn.is-busy { opacity: .85; cursor: progress; }
.ds-spin { display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor;
  border-top-color: transparent; border-radius: 50%; animation: ds-spin .7s linear infinite; vertical-align: -2px; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════════════════════════
   4. CARD — .ds-card (+ .hover pour élévation cliquable · .glow bord néon)
   ════════════════════════════════════════════════════════════════════════════ */
.ds-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 20px; transition: border-color var(--t), box-shadow var(--t-slow), transform var(--t-slow);
}
[data-theme='dark'] .ds-card { background: linear-gradient(180deg, var(--surface), var(--bg-2)); }
.ds-card.hover { cursor: pointer; }
.ds-card.hover:hover { border-color: var(--border-hi); transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.ds-card.glow { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--glow), 0 10px 34px -18px var(--glow-strong); }
.ds-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ds-card-head h3 { font-size: 15px; }
.ds-card-head .r { display: flex; align-items: center; gap: 8px; }
.ds-card .hint { color: var(--text-dim); font-size: 12px; line-height: 1.5; }

/* ════════════════════════════════════════════════════════════════════════════
   5. TABLE — .ds-table (+ .zebra · .sticky). Mono pour les chiffres via .tnum.
   ════════════════════════════════════════════════════════════════════════════ */
.ds-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ds-table th {
  text-align: left; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-dim); font-weight: 600; padding: 11px 12px;
  border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.ds-table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.ds-table tbody tr { transition: background var(--t); }
.ds-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.ds-table tr:last-child td { border-bottom: 0; }
.ds-table .r { text-align: right; } .ds-table .c { text-align: center; }
.ds-table.zebra tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.ds-table.sticky th { position: sticky; top: 0; z-index: 1; }
.ds-table .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ds-table .accent-num { font-family: var(--font-mono); font-weight: 700; color: var(--accent); text-align: right; }

/* ── FORM CONTROLS partagés : .ds-input / .ds-select / .ds-textarea ────────────
   Ajoutés aux fondations pour que TeamManager + pages joueur (me/writeups/…) aient
   des champs cohérents sans re-styler page par page. */
.ds-input, .ds-select, .ds-textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border-hi); border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--text); font-size: 13.5px; font-family: var(--font-sans);
  transition: var(--t); box-sizing: border-box;
}
.ds-textarea { resize: vertical; min-height: 70px; }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--text-dim); }

/* ════════════════════════════════════════════════════════════════════════════
   6. BADGE — .ds-badge + STATUS ENUM canonique (une couleur / statut, partout)
   draft→pending→approved→published→running→paused→ended→archived
   ════════════════════════════════════════════════════════════════════════════ */
.ds-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em;
  border: 1px solid var(--border-hi); color: var(--text-muted); background: var(--surface-2); white-space: nowrap;
}
.ds-badge .d { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
/* Chaque statut = teinte dédiée, dérivée d'une variable → cohérent dark/light. */
.ds-badge.st-draft    { --c: var(--text-dim);  }
.ds-badge.st-pending  { --c: var(--warn);      }
.ds-badge.st-approved { --c: var(--info);      }
.ds-badge.st-published{ --c: var(--accent-2);  }
.ds-badge.st-running  { --c: var(--ok);        }
.ds-badge.st-paused   { --c: var(--gold);      }
.ds-badge.st-ended    { --c: #8b7bff;          }
.ds-badge.st-archived { --c: var(--text-dim);  }
.ds-badge[class*='st-'] {
  color: var(--c); border-color: color-mix(in srgb, var(--c) 38%, transparent);
  background: color-mix(in srgb, var(--c) 12%, transparent);
}
/* Statut « running » : pastille qui pulse (live). */
.ds-badge.st-running .d { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: dsPulse 1.8s ease-out infinite; }
@keyframes dsPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); } 70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ════════════════════════════════════════════════════════════════════════════
   7. EMPTY STATE — .ds-empty (icône + titre + sous-texte + action optionnelle)
   ════════════════════════════════════════════════════════════════════════════ */
.ds-empty {
  text-align: center; padding: 40px 24px; border: 1px dashed var(--border-hi); border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface-2) 50%, transparent); color: var(--text-muted);
}
.ds-empty .ic { color: var(--text-dim); display: inline-flex; margin-bottom: 10px; }
.ds-empty .ic .svgic { width: 34px; height: 34px; }
.ds-empty h4 { color: var(--text); font-size: 15px; margin-bottom: 6px; }
.ds-empty p { font-size: 13px; margin: 0 auto 14px; max-width: 340px; }

/* ════════════════════════════════════════════════════════════════════════════
   8. SKELETON — .ds-skel (shimmer doux, respecte reduced-motion)
   ════════════════════════════════════════════════════════════════════════════ */
.ds-skel {
  background: linear-gradient(100deg, var(--surface-2) 30%, color-mix(in srgb, var(--surface-2) 55%, var(--surface)) 50%, var(--surface-2) 70%);
  background-size: 200% 100%; border-radius: var(--r-sm); animation: dsShimmer 1.3s linear infinite; display: block;
}
.ds-skel.line { height: 12px; margin: 8px 0; }
.ds-skel.line.sm { height: 9px; width: 55%; }
.ds-skel.block { height: 100px; }
.ds-skel.circle { border-radius: 50%; }
@keyframes dsShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ════════════════════════════════════════════════════════════════════════════
   9. KPI-STAT — .ds-kpi (label mono + gros chiffre display + delta optionnel)
   ════════════════════════════════════════════════════════════════════════════ */
.ds-kpi {
  border: 1px solid var(--border); border-radius: var(--r); background: var(--surface);
  padding: 16px 18px; position: relative; overflow: hidden;
}
[data-theme='dark'] .ds-kpi { background: linear-gradient(180deg, var(--surface), var(--bg-2)); }
[data-theme='dark'] .ds-kpi::after { content: ''; position: absolute; right: -30px; top: -30px; width: 90px; height: 90px; border-radius: 50%; background: var(--glow); filter: blur(24px); opacity: .5; }
.ds-kpi .kh { display: flex; align-items: center; justify-content: space-between; color: var(--text-muted); font-size: 12px; }
.ds-kpi .kh .ki { color: var(--accent); display: inline-flex; }
.ds-kpi .kn { font-family: var(--font-display); font-size: 30px; font-weight: 800; margin-top: 9px; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ds-kpi .kt { font-family: var(--font-mono); font-size: 11px; margin-top: 8px; color: var(--text-dim); }
.ds-kpi .kt.up { color: var(--ok); } .ds-kpi .kt.down { color: var(--danger); } .ds-kpi .kt.warn { color: var(--gold); }

/* ════════════════════════════════════════════════════════════════════════════
   10. TABS — .ds-tabs (rôle=tablist ; état actif via aria-selected / .on)
   ════════════════════════════════════════════════════════════════════════════ */
.ds-tabs { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface-2); border-radius: var(--r-sm); border: 1px solid var(--border); }
.ds-tab {
  padding: 7px 14px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--text-muted);
  background: transparent; border: none; cursor: pointer; transition: var(--t); display: inline-flex; align-items: center; gap: 7px;
}
.ds-tab:hover { color: var(--text); }
.ds-tab[aria-selected='true'], .ds-tab.on { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); }
[data-theme='dark'] .ds-tab[aria-selected='true'], [data-theme='dark'] .ds-tab.on { background: var(--glow); }

/* ════════════════════════════════════════════════════════════════════════════
   11. MODAL — .ds-modal-backdrop / .ds-modal (focus-trap + role=dialog en JS)
   ════════════════════════════════════════════════════════════════════════════ */
.ds-modal-backdrop {
  position: fixed; inset: 0; z-index: 200; background: var(--backdrop);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: dsFade .16s ease;
}
.ds-modal {
  background: var(--surface); border: 1px solid var(--border-hi); border-radius: var(--r-lg);
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-pop);
  animation: dsModalIn .22s var(--ease-out);
}
.ds-modal-head { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 12px; position: sticky; top: 0; background: var(--surface); }
.ds-modal-head h3 { font-size: 16px; }
.ds-modal-body { padding: 20px; }
.ds-modal-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
@keyframes dsFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dsModalIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }

/* ════════════════════════════════════════════════════════════════════════════
   12. TOAST — .ds-toast-wrap / .ds-toast (variantes ok/warn/error/info)
   ════════════════════════════════════════════════════════════════════════════ */
.ds-toast-wrap { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.ds-toast {
  display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border-hi);
  border-left: 4px solid var(--accent); padding: 10px 14px; border-radius: var(--r-sm); box-shadow: var(--shadow-pop);
  font-size: 13.5px; color: var(--text); pointer-events: auto; animation: dsToastIn .2s ease; max-width: calc(100vw - 24px);
}
.ds-toast .svgic { color: var(--accent); }
.ds-toast.ok { border-left-color: var(--ok); } .ds-toast.ok .svgic { color: var(--ok); }
.ds-toast.warn { border-left-color: var(--warn); } .ds-toast.warn .svgic { color: var(--warn); }
.ds-toast.error { border-left-color: var(--danger); } .ds-toast.error .svgic { color: var(--danger); }
.ds-toast.info { border-left-color: var(--info); } .ds-toast.info .svgic { color: var(--info); }
.ds-toast.out { animation: dsToastOut .2s ease forwards; }
@keyframes dsToastIn { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dsToastOut { to { transform: translateY(-8px); opacity: 0; } }

/* ════════════════════════════════════════════════════════════════════════════
   13. COUNTDOWN — .ds-countdown (grille d'unités mono, pilotée par serverTime)
   ════════════════════════════════════════════════════════════════════════════ */
.ds-countdown { display: inline-flex; gap: 10px; }
.ds-countdown .u { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 12px; text-align: center; min-width: 54px; }
[data-theme='dark'] .ds-countdown .u { background: rgba(0,0,0,.3); }
.ds-countdown .u b { font-family: var(--font-display); font-size: 24px; font-weight: 700; display: block; line-height: 1; font-variant-numeric: tabular-nums; }
.ds-countdown .u span { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .1em; }
.ds-countdown.inline { gap: 4px; align-items: baseline; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; }
.ds-countdown.inline .u { all: unset; }
.ds-countdown.done b, .ds-countdown.done { color: var(--text-dim); }

/* ── Utilitaires de layout partagés ──────────────────────────────────────────── */
.ds .grid { display: grid; gap: 16px; }
.ds .grid.c2 { grid-template-columns: repeat(2,1fr); }
.ds .grid.c3 { grid-template-columns: repeat(3,1fr); }
.ds .grid.c4 { grid-template-columns: repeat(4,1fr); }
.ds .row { display: flex; align-items: center; gap: 10px; }
.ds .row.wrap { flex-wrap: wrap; }
.ds .between { justify-content: space-between; }
.ds .col { display: flex; flex-direction: column; gap: 10px; }
.ds-divider { height: 1px; background: var(--border); border: 0; margin: 16px 0; }
/* Grilles DS → responsive. Breakpoints unifiés : 1024 (4/3→2), 768 (tablette : tout →2),
   600 (→1). 100% additif, media-query-only. */
@media (max-width: 1024px) { .ds .grid.c4, .ds .grid.c3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 768px) { .ds .grid.c4, .ds .grid.c3, .ds .grid.c2 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 600px) { .ds .grid.c4, .ds .grid.c3, .ds .grid.c2 { grid-template-columns: 1fr; } }

/* Reduced-motion : neutralise toutes les animations du DS. */
@media (prefers-reduced-motion: reduce) {
  .ds-skel, .ds-badge.st-running .d, .ds-toast, .ds-modal, .ds-modal-backdrop { animation: none !important; }
}