/* ════════════════════════════════════════════════════════════════
   FOOTBALLAI — ALIVE — Design v4
   Fond : Bleu nuit profond (pas noir pur)
   Typo : Inter (lisibilité max) + Barlow Condensed (sport/scores)
   Vie  : Dégradés subtils, couleurs chaudes, contrastes maîtrisés
   ════════════════════════════════════════════════════════════════ */

/* Polices chargées via le <link> de index.html (en parallèle, non bloquant) —
   l'@import ici était un DOUBLON render-blocking, retiré pour la perf. */

html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ════════════════════════════════════════════════════════════════
   TOKENS
   ════════════════════════════════════════════════════════════════ */
:root {
  /* Fond bleu nuit — respire, pas oppressant */
  --bg:        #131924;   /* fond global */
  --card:      #1c2534;   /* cartes */
  --card-h:    #243044;   /* cartes hover */
  --surface:   #2a3a52;   /* éléments surélevés */
  --sidebar-bg:#0e1622;   /* sidebar plus profonde */

  /* Vert émeraude — doux, naturel */
  --green:       #10b981;
  --green-light: #34d399;
  --green-dim:   rgba(16,185,129,0.12);
  --green-line:  rgba(16,185,129,0.3);

  /* Rouge doux — pas agressif */
  --red:     #f87171;
  --red-dim: rgba(248,113,113,0.12);

  /* Bleu ciel — vivant, info */
  --blue:     #38bdf8;
  --blue-dim: rgba(56,189,248,0.1);

  /* Ambre VIP */
  --gold:     #fbbf24;
  --gold-dim: rgba(251,191,36,0.12);

  /* Slate neutre — nul */
  --slate:     #64748b;
  --slate-dim: rgba(100,116,139,0.15);

  /* Texte — hiérarchie claire, reposant pour l'oeil */
  --t1: #e2e8f0;   /* principal — lumière bleue douce, pas blanc pur */
  --t2: #94a3b8;   /* secondaire */
  --t3: #64748b;   /* tertiaire */
  --t4: #475569;   /* désactivé */

  /* Bordures */
  --b1: rgba(148,163,184,0.08);
  --b2: rgba(148,163,184,0.14);
  --b3: rgba(148,163,184,0.22);

  /* Ombres */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);

  /* Fonts */
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-sport:   'Barlow Condensed', 'Impact', sans-serif;
  --f-mono:    'Roboto Mono', monospace;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  /* Layout */
  --sidebar-w: 224px;
}

/* ════════════════════════════════════════════════════════════════
   LIGHT THEME OVERRIDES — tokens design-v2
   ════════════════════════════════════════════════════════════════ */
:root[data-theme="light"] {
  --bg:        #f8fafc;
  --card:      #ffffff;
  --card-h:    #f0f4f8;
  --surface:   #e2e8f0;
  --sidebar-bg:#f1f5f9;

  --t1: #0f172a;
  --t2: #334155;
  --t3: #52627a;   /* assombri #64748b→#52627a (~6,2:1 sur blanc) : libellés tertiaires lisibles AA en thème clair (M-10) */
  --t4: #94a3b8;

  --b1: rgba(0,0,0,0.06);
  --b2: rgba(0,0,0,0.10);
  --b3: rgba(0,0,0,0.16);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.16);
}

/* Surcharges thème CLAIR : les couleurs de marque en pleine saturation (or VIP,
   rouge live, vert logo) tombent sous WCAG AA sur fond blanc (~1,5-2,5:1). On les
   remplace par des variantes foncées lisibles (toutes >4,5:1 sur fond clair). */
:root[data-theme="light"] .nav-section-vip,
:root[data-theme="light"] .nav-item.nav-vip { color: #7a5c00 !important; }
:root[data-theme="light"] .nav-item.nav-live { color: #b91c1c !important; }
:root[data-theme="light"] .logo-sub {
  color: #047857 !important;
  -webkit-text-fill-color: #047857 !important;
}

/* ════════════════════════════════════════════════════════════════
   BASE — Fond et typographie de base
   ════════════════════════════════════════════════════════════════ */
html, body, * {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  box-sizing: border-box;
}

body {
  background: var(--bg) !important;
  font-family: var(--f-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--t2) !important;
  /* Gradient subtil pour donner de la profondeur */
  background-image: radial-gradient(
    ellipse 80% 40% at 50% -10%,
    rgba(56,189,248,0.04) 0%,
    transparent 60%
  ) !important;
}

.bg-orb, .bg-grid { display: none !important; }

/* Touch */
button, a, [role="button"] { touch-action: manipulation; }

/* Tabular numbers pour tous les chiffres */
.prob-label, .stat-value, .xg-value, .lb-points, .bankroll-amount {
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════
   SIDEBAR — Claire, aérée, hiérarchisée
   ════════════════════════════════════════════════════════════════ */
.sidebar {
  width: var(--sidebar-w) !important;
  background: var(--sidebar-bg) !important;
  border-right: 1px solid var(--b2) !important;
  box-shadow: 4px 0 24px rgba(0,0,0,0.3) !important;
  backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  overflow: hidden !important;
}

/* Logo */
.sidebar-logo {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 18px 16px 16px !important;
  border-bottom: 1px solid var(--b1) !important;
  background: linear-gradient(135deg, rgba(16,185,129,0.06), transparent) !important;
}

.logo-icon {
  width: 30px !important; height: 30px !important;
  border-radius: 8px !important;
  /* Emblème « Oracle » (cible de précision) — SVG blanc superposé au dégradé émeraude.
     Remplace l'ancien emoji ⚽. Vectoriel : net à toutes les tailles, aucune image chargée. */
  background:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'><circle cx='12' cy='12' r='8.4'/><circle cx='12' cy='12' r='3.7'/><path d='M12 1.3V4.2M12 19.8V22.7M1.3 12H4.2M19.8 12H22.7'/><circle cx='12' cy='12' r='1.3' fill='%23fff' stroke='none'/></svg>") center / 62% no-repeat,
    linear-gradient(135deg, #10b981, #059669) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(16,185,129,0.3) !important;
}

.logo-icon::after { content: none !important; }

.logo-text {
  font-family: var(--f-sport) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: var(--t1) !important;
  -webkit-text-fill-color: var(--t1) !important;
  line-height: 1.1 !important;
}

.logo-sub {
  font-family: var(--f-mono) !important;
  font-size: 0.55rem !important;
  color: var(--green) !important;
  -webkit-text-fill-color: var(--green) !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}

/* Nav */
.sidebar-nav {
  flex: 1 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Scrollbar VISIBLE (fine) : quand le menu déborde sur un écran court, les
     entrées du bas (Top Marchés, Alertes, Bankroll, Séries = l'offre VIP)
     étaient inaccessibles SANS AUCUN signal. On rétablit un indicateur de
     défilement + un fondu bas. Corrige P0-2 : styles.css tentait déjà de le
     faire mais était écrasé par le !important de cette feuille. */
  scrollbar-width: thin !important;
  scrollbar-color: var(--b3) transparent !important;
  padding: 10px 10px !important;
  min-height: 0 !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent) !important;
          mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent) !important;
}
.sidebar-nav::-webkit-scrollbar { width: 6px !important; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent !important; }
.sidebar-nav::-webkit-scrollbar-thumb { background: var(--b3) !important; border-radius: 3px !important; }

.nav-section-title {
  font-family: var(--f-mono) !important;
  /* 0.7rem ≈ 11px : lisibilité minimale (avant 0.58rem ≈ 9px). */
  font-size: 0.7rem !important;
  /* --t2 (au lieu de --t4) : les libellés de section (MENU/ANALYSE…) passaient
     sous WCAG AA (2,3-2,4:1) dans les deux thèmes ; --t2 les remonte >4,5:1. */
  color: var(--t2) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  padding: 16px 8px 5px !important;
  font-weight: 500 !important;
}

/* VIP : or plein (lisible sur fond sombre). Sur fond CLAIR, l'or échoue (~1,5:1)
   → couleur ambre foncé dédiée (voir surcharges light plus bas). */
.nav-section-vip { color: var(--gold) !important; }

/* Items nav — lisibles, espacés, avec icône */
.nav-item {
  font-family: var(--f-body) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  /* --t2 (au lieu de --t3) : les entrées de menu non-actives étaient sous AA
     (3,82:1 en sombre) ; --t2 les remonte >4,5:1 dans les deux thèmes. */
  color: var(--t2) !important;
  padding: 0 10px !important;
  margin: 1px 0 !important;
  /* 44px : cible tactile a11y minimale (avant 38px). */
  min-height: 44px !important;
  border-radius: var(--r-sm) !important;
  border: none !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  background: none !important;
  cursor: pointer !important;
  transition: color 0.12s, background 0.12s !important;
  text-align: left !important;
}

.nav-item:hover {
  color: var(--t1) !important;
  background: rgba(148,163,184,0.08) !important;
}

.nav-item.active, button.nav-item[aria-current] {
  color: var(--t1) !important;
  background: rgba(16,185,129,0.1) !important;
  font-weight: 600 !important;
  position: relative !important;
}

.nav-item.active::before, button.nav-item[aria-current]::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 3px;
  background: var(--green);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 8px rgba(16,185,129,0.5);
}

/* Couleurs spéciales */
.nav-item.nav-live { color: var(--red) !important; }
.nav-item.nav-live:hover { color: var(--red) !important; background: var(--red-dim) !important; }
.nav-item.nav-live.active { color: var(--red) !important; background: var(--red-dim) !important; }
.nav-item.nav-live.active::before { background: var(--red) !important; }

.nav-item.nav-wc { color: rgba(251,191,36,0.7) !important; }
.nav-item.nav-wc:hover { color: var(--gold) !important; background: var(--gold-dim) !important; }
.nav-item.nav-wc.active { color: var(--gold) !important; background: var(--gold-dim) !important; }
.nav-item.nav-wc.active::before { background: var(--gold) !important; }

.nav-item.nav-vip { color: var(--gold) !important; }
.nav-item.nav-vip:hover { color: var(--gold) !important; background: var(--gold-dim) !important; }
.nav-item.nav-vip.active { color: var(--gold) !important; background: var(--gold-dim) !important; border-left-color: var(--gold) !important; }

.nav-icon {
  font-size: 0.95rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.8;
}
.nav-item:hover .nav-icon, .nav-item.active .nav-icon { opacity: 1; }

.nav-badge {
  /* Rouge foncé (pas --red #f87171 doux) : le texte blanc « 0 » y passe WCAG AA
     (~5:1 vs 2,77:1 sur le rouge clair). */
  background: #c81e1e !important;
  color: white !important;
  font-family: var(--f-mono) !important;
  font-size: 0.58rem !important;
  padding: 1px 5px !important;
  border-radius: 4px !important;
  font-weight: 500 !important;
}

/* Footer légal */
.legal-sidebar-footer {
  flex-shrink: 0 !important;
  padding: 10px 14px !important;
  border-top: 1px solid var(--b1) !important;
  background: var(--sidebar-bg) !important;
}

.legal-footer-18 {
  font-family: var(--f-mono) !important;
  font-size: 0.6rem !important;
  /* --t2 (au lieu de --t4/--t3) : mentions légales du footer sous WCAG AA en
     sombre (2,0-3,2:1). --t2 les remonte >4,5:1 dans les deux thèmes. P0-5. */
  color: var(--t2) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

.legal-footer-line {
  font-size: 0.68rem !important;
  color: var(--t2) !important;
  line-height: 1.5 !important;
}

.legal-footer-line a { color: var(--t2) !important; text-decoration: underline !important; }

/* ════════════════════════════════════════════════════════════════
   CONTENU PRINCIPAL
   ════════════════════════════════════════════════════════════════ */
.main-content { background: var(--bg) !important; }

/* ════════════════════════════════════════════════════════════════
   CARDS — Surface claire, bien élevée du fond
   ════════════════════════════════════════════════════════════════ */
.glass-card {
  background: var(--card) !important;
  border: 1px solid var(--b2) !important;
  border-radius: var(--r-lg) !important;
  backdrop-filter: none !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 18px !important;
}

.card-header { border-bottom: 1px solid var(--b1) !important; padding: 14px 18px !important; }

.card-title {
  font-family: var(--f-sport) !important;
  font-size: 0.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--t2) !important;
}

/* ════════════════════════════════════════════════════════════════
   ONGLETS COMPÉTITION — Scroll horizontal propre
   ════════════════════════════════════════════════════════════════ */
.comp-tabs {
  display: flex !important;
  gap: 4px !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  padding: 0 0 14px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 40px), transparent) !important;
  -webkit-mask-image: linear-gradient(to right, transparent, black 16px, black calc(100% - 40px), transparent) !important;
}
.comp-tabs::-webkit-scrollbar { display: none !important; }

.comp-tab {
  flex-shrink: 0 !important;
  font-family: var(--f-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border-radius: 999px !important;
  border: 1px solid var(--b2) !important;
  color: var(--t2) !important;
  /* padding vertical augmenté : cible tactile plus proche des standards a11y
     (avant ~28px). */
  padding: 8px 16px !important;
  white-space: nowrap !important;
  background: transparent !important;
  cursor: pointer !important;
  transition: color 0.12s, background 0.12s, border-color 0.12s !important;
}

.comp-tab:hover:not(.active) {
  color: var(--t2) !important;
  border-color: var(--b3) !important;
  background: var(--card) !important;
}

.comp-tab.active {
  font-weight: 600 !important;
  border-color: var(--green) !important;
  color: var(--green) !important;
  background: var(--green-dim) !important;
}

/* Couleurs par ligue */
#tab-PL.active    { border-color:#60a5fa !important; color:#60a5fa !important; background:rgba(96,165,250,0.1) !important; }
#tab-FL1.active   { border-color:#38bdf8 !important; color:#38bdf8 !important; background:rgba(56,189,248,0.1) !important; }
#tab-BL1.active   { border-color:#f87171 !important; color:#f87171 !important; background:rgba(248,113,113,0.1) !important; }
#tab-SA.active    { border-color:#4ade80 !important; color:#4ade80 !important; background:rgba(74,222,128,0.1) !important; }
#tab-PD.active    { border-color:#fb923c !important; color:#fb923c !important; background:rgba(251,146,60,0.1) !important; }
#tab-CL.active    { border-color:#818cf8 !important; color:#818cf8 !important; background:rgba(129,140,248,0.1) !important; }
#tab-WC2026.active{ border-color:#fbbf24 !important; color:#fbbf24 !important; background:rgba(251,191,36,0.1) !important; }
#tab-BSA.active   { border-color:#34d399 !important; color:#34d399 !important; background:rgba(52,211,153,0.1) !important; }
#tab-FRIENDLY.active{border-color:#a78bfa !important; color:#a78bfa !important; background:rgba(167,139,250,0.1) !important; }

/* ════════════════════════════════════════════════════════════════
   CARTE MATCH — Layout clair, aéré
   ════════════════════════════════════════════════════════════════ */
.match-card-premium {
  background: var(--card) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r-md) !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s !important;
}

.match-card-premium:hover {
  border-color: var(--b3) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
  transform: translateY(-1px) !important;
}

.match-card-premium.live {
  border-color: rgba(248,113,113,0.25) !important;
}

.match-card-premium.live::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--red), #fca5a5, var(--red));
  background-size: 200% 100%;
  animation: liveFlow 2s linear infinite;
}

@keyframes liveFlow {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* Noms d'équipes */
.team-name {
  font-family: var(--f-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--t1) !important;
  line-height: 1.3 !important;
}

/* Score central — Barlow Condensed pour l'impact sportif */
.match-score, .score-display {
  font-family: var(--f-sport) !important;
  font-size: 2.4rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  color: var(--t1) !important;
  line-height: 1 !important;
}

/* Date et méta */
.match-time {
  font-family: var(--f-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--t2) !important;
  margin-top: 3px !important;
}

.match-day-info {
  font-family: var(--f-mono) !important;
  font-size: 10px !important;
  color: var(--t2) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* Badge FINI — propre */
.match-status-badge {
  font-family: var(--f-mono) !important;
  font-size: 10px !important;
  border-radius: var(--r-sm) !important;
  padding: 2px 7px !important;
  letter-spacing: 0.08em !important;
}

.status-finished { background: rgba(100,116,139,0.15) !important; color: var(--t2) !important; border-color: var(--b1) !important; }
.status-live { background: rgba(248,113,113,0.12) !important; color: var(--red) !important; border-color: rgba(248,113,113,0.3) !important; }
.status-postponed { background: rgba(251,191,36,0.1) !important; color: var(--gold) !important; }

/* ════════════════════════════════════════════════════════════════
   PROBABILITÉS — Barre propre, labels lisibles
   ════════════════════════════════════════════════════════════════ */
.prob-bar-bg {
  height: 5px !important;
  background: rgba(148,163,184,0.1) !important;
  border-radius: 99px !important;
  overflow: hidden !important;
}

.prob-bar-fill > div:first-child  { background: var(--green) !important; border-radius: 99px 0 0 99px !important; }
.prob-bar-fill > div:nth-child(2) { background: var(--slate) !important; opacity: 0.6 !important; }
.prob-bar-fill > div:last-child   { background: var(--red) !important; border-radius: 0 99px 99px 0 !important; }

.prob-label-row {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 5px !important;
}

.prob-label-row span {
  font-family: var(--f-body) !important;
  font-size: 12px !important;
  color: var(--t2) !important;
  font-weight: 400 !important;
}

.prob-label-row strong {
  font-weight: 600 !important;
  color: var(--t1) !important;
}

/* Pills marchés */
.market-pill {
  font-family: var(--f-mono) !important;
  font-size: 11px !important;
  border-radius: 999px !important;
  padding: 3px 10px !important;
  background: rgba(148,163,184,0.08) !important;
  border: 1px solid var(--b2) !important;
  color: var(--t2) !important;
}

.market-pill.over {
  background: var(--green-dim) !important;
  border-color: var(--green-line) !important;
  color: var(--green-light) !important;
}

.market-pill.btts {
  background: var(--gold-dim) !important;
  border-color: rgba(251,191,36,0.3) !important;
  color: var(--gold) !important;
}

/* Thème clair : le vert clair et l'or des pastilles marché échouent sur fond
   pâle (~1,7:1) → variantes foncées lisibles. */
:root[data-theme="light"] .market-pill.over { color: #047857 !important; }
:root[data-theme="light"] .market-pill.btts { color: #7a5c00 !important; }

/* Labels sections boutons */
.pick-section-label {
  font-family: var(--f-mono) !important;
  font-size: 11px !important;
  color: var(--t2) !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

/* ════════════════════════════════════════════════════════════════
   BOUTONS — Clairs, distincts
   ════════════════════════════════════════════════════════════════ */
.btn {
  font-family: var(--f-body) !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border-radius: var(--r-sm) !important;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s, box-shadow 0.12s !important;
}

.btn-primary {
  background: var(--green) !important;
  color: #062519 !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(16,185,129,0.3) !important;
}

.btn-primary:hover {
  background: var(--green-light) !important;
  box-shadow: 0 4px 20px rgba(16,185,129,0.4) !important;
  transform: translateY(-1px) !important;
}

.btn-outline {
  border-color: var(--b3) !important;
  color: var(--t2) !important;
  background: transparent !important;
}

.btn-outline:hover {
  border-color: var(--green) !important;
  color: var(--green) !important;
  background: var(--green-dim) !important;
}

/* Pick buttons */
.pick-btn {
  font-family: var(--f-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  min-height: 38px !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--b2) !important;
  color: var(--t2) !important;
  background: transparent !important;
  transition: all 0.12s !important;
}

.pick-btn:hover { background: rgba(148,163,184,0.08) !important; color: var(--t1) !important; }

.pick-btn.pick-home:hover, .pick-btn.pick-home.selected {
  border-color: var(--green) !important; color: var(--green) !important; background: var(--green-dim) !important;
}
.pick-btn.pick-draw:hover, .pick-btn.pick-draw.selected {
  border-color: var(--slate) !important; color: var(--t2) !important; background: var(--slate-dim) !important;
}
.pick-btn.pick-away:hover, .pick-btn.pick-away.selected {
  border-color: var(--red) !important; color: var(--red) !important; background: var(--red-dim) !important;
}

/* Lang buttons */
.lang-btn {
  min-height: 38px !important;
  border-radius: var(--r-sm) !important;
  font-family: var(--f-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  border-color: var(--b2) !important;
  color: var(--t2) !important;
}
.lang-btn.active {
  background: rgba(16,185,129,0.1) !important;
  border-color: var(--green-line) !important;
  color: var(--green) !important;
}

/* ════════════════════════════════════════════════════════════════
   INPUTS
   ════════════════════════════════════════════════════════════════ */
input, select, textarea, .user-input, .form-control {
  background: rgba(148,163,184,0.06) !important;
  border: 1px solid var(--b2) !important;
  border-radius: var(--r-sm) !important;
  color: var(--t1) !important;
  font-family: var(--f-body) !important;
  font-size: 14px !important;
}

input:focus-visible, select:focus-visible, textarea:focus-visible {
  border-color: var(--green) !important;
  outline: 2px solid rgba(16,185,129,0.25) !important;
  outline-offset: 2px !important;
}

/* ════════════════════════════════════════════════════════════════
   MODALES
   ════════════════════════════════════════════════════════════════ */
.modal-overlay, .modal-overlay-premium {
  background: rgba(13,25,36,0.85) !important;
  backdrop-filter: blur(10px) !important;
  /* Ancrage EN HAUT (pas centrage vertical) : la fiche match change de hauteur
     selon l'onglet ; centrée, toute la modale — dont la barre d'onglets — se
     déplaçait sous le curseur. Ancrée en haut, la barre d'onglets reste fixe. */
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 4vh 16px !important;
  overflow-y: auto !important;
}

.modal, .modal-content-premium {
  background: var(--card) !important;
  border: 1px solid var(--b2) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6) !important;
}

.modal-tab.active { border-bottom-color: var(--green) !important; color: var(--t1) !important; }

/* ════════════════════════════════════════════════════════════════
   LEADERBOARD
   ════════════════════════════════════════════════════════════════ */
.lb-item {
  background: var(--card) !important;
  border: 1px solid var(--b1) !important;
  border-radius: var(--r-sm) !important;
  transition: background 0.12s, border-color 0.12s !important;
}
.lb-item:hover { background: var(--card-h) !important; border-color: var(--b2) !important; }
.lb-points { font-family: var(--f-mono) !important; color: var(--green-light) !important; font-weight: 500 !important; }

/* ════════════════════════════════════════════════════════════════
   XG DISPLAY
   ════════════════════════════════════════════════════════════════ */
.xg-value { font-family: var(--f-sport) !important; font-size: 2rem !important; font-weight: 700 !important; color: var(--green-light) !important; }
.xg-team.away .xg-value { color: var(--red) !important; }
.xg-bar { background: linear-gradient(90deg, rgba(16,185,129,0.4), var(--green)) !important; border-radius: 99px !important; }
.xg-team.away .xg-bar { background: linear-gradient(90deg, rgba(248,113,113,0.4), var(--red)) !important; }

/* ════════════════════════════════════════════════════════════════
   VIP PAYWALL
   ════════════════════════════════════════════════════════════════ */
.vip-paywall {
  background: linear-gradient(135deg, rgba(251,191,36,0.04), rgba(16,185,129,0.04)) !important;
  border: 1px solid rgba(251,191,36,0.2) !important;
  border-radius: var(--r-lg) !important;
}
.vip-paywall-title { font-family: var(--f-sport) !important; font-size: 1rem !important; font-weight: 700 !important; color: var(--gold) !important; letter-spacing: 0.1em !important; }
.vip-paywall .btn-primary { background: var(--gold) !important; color: #1a0f00 !important; }

/* ════════════════════════════════════════════════════════════════
   WC2026
   ════════════════════════════════════════════════════════════════ */
.wc-main-title, .page-title {
  font-family: var(--f-sport) !important;
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--t1) !important;
  text-wrap: balance !important;
}

.wc-group-panel { border: 1px solid var(--b2) !important; border-radius: var(--r-md) !important; overflow: hidden !important; transition: border-color 0.15s !important; }
.wc-group-panel:hover { border-color: var(--b3) !important; }
.wc-group-header { background: rgba(148,163,184,0.05) !important; border-bottom: 1px solid var(--b1) !important; }
.wc-group-letter { font-family: var(--f-sport) !important; font-size: 0.85rem !important; font-weight: 700 !important; color: var(--t1) !important; letter-spacing: 0.1em !important; }
.wc-group-count { font-family: var(--f-mono) !important; font-size: 0.65rem !important; color: var(--t2) !important; }
.wc-match-card { background: var(--card) !important; border-bottom: 1px solid var(--b1) !important; transition: background 0.12s !important; }
.wc-match-card:hover { background: var(--card-h) !important; }
.wc-score-final { font-family: var(--f-sport) !important; font-size: 1.3rem !important; font-weight: 700 !important; color: var(--t1) !important; letter-spacing: 0.08em !important; }
.wc-score-vs { font-family: var(--f-mono) !important; font-size: 0.65rem !important; color: var(--t2) !important; letter-spacing: 0.2em !important; }
.wc-team-name { font-family: var(--f-body) !important; font-weight: 600 !important; font-size: 13.5px !important; color: var(--t1) !important; }

/* ════════════════════════════════════════════════════════════════
   EMPTY STATES
   ════════════════════════════════════════════════════════════════ */
#pred-content { min-height: 400px; display: flex; flex-direction: column; }

.empty-state-fullheight {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 48px 24px; text-align: center; gap: 14px; min-height: 360px;
}

.empty-state-icon {
  width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(148,163,184,0.07);
  border: 1px solid var(--b2);
  border-radius: 18px; color: var(--t3);
}

.empty-state-title {
  font-family: var(--f-sport) !important;
  font-size: 1.1rem !important; font-weight: 700 !important;
  color: var(--t1) !important; letter-spacing: 0.06em !important;
  text-transform: uppercase !important; margin: 0 !important;
}

.empty-state-desc {
  font-size: 13.5px !important; color: var(--t2) !important;
  line-height: 1.6 !important; max-width: 300px !important; margin: 0 !important;
}
.empty-state-desc strong { color: var(--t2) !important; }

/* Sidebar sticky droit */
.pred-sidebar-sticky {
  position: sticky !important; top: 20px !important;
  align-self: flex-start !important;
  max-height: calc(100vh - 40px) !important;
  overflow-y: auto !important; scrollbar-width: none !important;
}
.pred-sidebar-sticky::-webkit-scrollbar { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   MOBILE TOPBAR
   ════════════════════════════════════════════════════════════════ */
.mobile-topbar { display: none; }

@media (max-width: 900px) {
  .mobile-topbar {
    display: flex !important; align-items: center !important;
    justify-content: space-between !important; padding: 0 16px !important;
    position: fixed !important; top: 0; left: 0; right: 0 !important;
    height: 56px !important; z-index: 1000 !important;
    background: rgba(13,22,34,0.97) !important;
    border-bottom: 1px solid var(--b2) !important;
    backdrop-filter: blur(16px) !important;
  }

  html[data-theme="light"] .mobile-topbar {
    background: rgba(248,250,252,0.97) !important;
  }

  .sidebar {
    transform: translateX(-250px); visibility: hidden;
    transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), visibility 0.25s !important;
    z-index: 1001 !important;
  }
  .sidebar.open, .sidebar.sidebar-open { transform: translateX(0) !important; visibility: visible !important; }
  .main-content { margin-left: 0 !important; padding-top: 64px !important; }
  .section-grid.three-col, .section-grid.two-col, .section-grid.main-side { grid-template-columns: 1fr !important; }
  .glass-card { padding: 14px !important; border-radius: var(--r-md) !important; }
}

.burger-btn {
  width: 44px; height: 44px;
  border-radius: var(--r-sm); border: 1px solid var(--b2);
  background: transparent; color: var(--t2);
  font-size: 1.1rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.12s !important;
}
.burger-btn:hover { border-color: var(--green) !important; color: var(--green) !important; background: var(--green-dim) !important; }

.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); backdrop-filter: blur(3px); z-index: 99; }
.sidebar-backdrop.visible { display: block; }

/* ════════════════════════════════════════════════════════════════
   FOCUS & A11Y
   ════════════════════════════════════════════════════════════════ */
button:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--green) !important;
  outline-offset: 3px !important;
  border-radius: var(--r-sm) !important;
}

/* ════════════════════════════════════════════════════════════════
   UTILITAIRES
   ════════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--b2); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }

.spinner { border-color: var(--b3) !important; border-top-color: var(--green) !important; }

.skeleton {
  background: linear-gradient(90deg, var(--card) 25%, var(--card-h) 50%, var(--card) 75%) !important;
  background-size: 200% 100% !important;
  border-radius: var(--r-sm) !important;
}

.momentum-bar { background: linear-gradient(90deg, rgba(16,185,129,0.5), var(--green)) !important; }
.momentum-bar.away { background: linear-gradient(90deg, rgba(248,113,113,0.5), var(--red)) !important; }

h1, h2, h3, h4 { font-family: var(--f-sport) !important; font-weight: 700 !important; color: var(--t1) !important; text-wrap: balance !important; }

.section-header, .card-title { font-family: var(--f-sport) !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; }

.history-item { background: var(--card) !important; border: 1px solid var(--b1) !important; border-radius: var(--r-sm) !important; }
.history-item:hover { background: var(--card-h) !important; }
.history-item.correct { border-left: 2px solid var(--green) !important; }
.history-item.incorrect { border-left: 2px solid var(--red) !important; }

@keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.match-card-premium { animation: fadeUp 0.2s ease both; }

@media (max-width: 640px) {
  .glass-card, .sidebar { backdrop-filter: none !important; }
}

/* ── GDPR Cookie Banner ──────────────────────────────────────────────────── */
#gdpr-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9998;
  background: rgba(13, 22, 34, 0.97);
  border-top: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 16px 24px;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -4px 32px rgba(0,0,0,0.4);
}

#gdpr-banner.gdpr-visible { transform: translateY(0); }
#gdpr-banner.gdpr-hidden  { transform: translateY(100%); }

html[data-theme="light"] #gdpr-banner {
  background: rgba(248, 250, 252, 0.97);
  border-top: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 -4px 32px rgba(0,0,0,0.1);
}

.gdpr-content {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.gdpr-text { flex: 1; min-width: 200px; }

.gdpr-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 4px;
}

.gdpr-desc {
  font-size: 0.8rem;
  color: var(--t2);
  margin: 0;
  line-height: 1.5;
}

.gdpr-actions {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.gdpr-btn {
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid;
  white-space: nowrap;
}

/* Refuser — outline, même poids visuel que Accepter (exigence CNIL) */
.gdpr-refuse {
  background: transparent;
  border-color: rgba(255,255,255,0.15);
  color: var(--t2);
}
.gdpr-refuse:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.25);
}
html[data-theme="light"] .gdpr-refuse {
  border-color: rgba(0,0,0,0.15);
  color: var(--t2);
}
html[data-theme="light"] .gdpr-refuse:hover {
  background: rgba(0,0,0,0.04);
}

/* Accepter — accent */
.gdpr-accept {
  background: var(--accent-500, #00c87a);
  border-color: transparent;
  color: #000;
}
.gdpr-accept:hover {
  background: var(--accent-400, #00ff87);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0,200,122,0.35);
}

/* Aligné sur 640px (comme styles.css) : avant, design-v2 basculait en mobile à
   600px et styles.css à 640px → entre 600 et 640px, une feuille passait mobile et
   pas l'autre (incohérences de mise en page). */
@media (max-width: 640px) {
  .gdpr-content { flex-direction: column; align-items: stretch; gap: 12px; }
  .gdpr-actions { justify-content: stretch; }
  .gdpr-btn { flex: 1; text-align: center; }
}

/* ── Silent refresh fade-in ─────────────────────────────────────────────── */
@keyframes viewFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.view-enter {
  animation: viewFadeIn 0.18s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
  .view-enter { animation: none; }
}