/* config/theme-dark.css */
/* Overrides du thème sombre côté joueur.
   Chargé APRÈS theme.css et style.css dans header.ejs (cf. partial).
   L'admin n'inclut pas ce fichier (UI verrouillée en clair).

   Deux sélecteurs cumulatifs :
     • html[data-theme="sombre"]                 → utilisateur force le sombre
     • @media + html[data-theme="auto"]          → utilisateur en auto + OS en sombre
   Le thème "clair" est le défaut (theme.css), donc aucun override.

   IMPORTANT : les deux blocs doivent rester strictement identiques.
   Si tu modifies un override, modifie-le DANS LES DEUX BLOCS.
   (CSS natif ne permet pas de combiner @media et un sélecteur sans duplication.)
*/

/* ════════════════════════════════════════════════════════════
   BLOC 1 — Sombre forcé par l'utilisateur
   ════════════════════════════════════════════════════════════ */
html[data-theme="sombre"] {
  /* ── Couleurs principales ── */
  --couleur-primaire:      #1e2d4f;   /* Bleu nuit (CTA + header restent contrastés) */
  --couleur-secondaire:    #4a90e2;   /* Bleu clair (liens, accents bordure focus) */
  /* --couleur-accent reste #e94560 — rouge fonctionne dans les deux thèmes */
  --couleur-fond:          #0f1419;   /* Fond page très sombre */
  --couleur-fond-carte:    #1a1f26;   /* Surface cartes — légèrement plus claire */
  --couleur-fond-zebre:    #22272f;   /* Zébrage tableaux */
  --couleur-fond-leger:    #1f242c;
  --couleur-texte:         #e2e8f0;   /* Texte principal — gris très clair */
  --couleur-texte-leger:   #94a3b8;   /* Texte secondaire */
  --couleur-bordure:       #2d3748;
  --couleur-bordure-info:  #1e3a5f;

  /* ── Formulaires ── */
  --couleur-input-fond:    #1f242c;
  --couleur-focus-anneau:  rgba(110,180,255,0.25);
  --couleur-switch-off:    #3a4658;

  /* ── États et feedback (fonds inversés, textes éclaircis) ── */
  --couleur-succes-fond:   #0e3a2a;
  --couleur-succes-texte:  #86efac;
  --couleur-succes-bord:   #10b981;
  --couleur-erreur-fond:   #3b1a1a;
  --couleur-erreur-texte:  #fca5a5;
  --couleur-erreur-texte-md: #f87171;
  --couleur-erreur-bord:   #7f1d1d;
  --couleur-info-fond:     #0e2745;
  --couleur-info-texte:    #93c5fd;
  --couleur-info-bord:     #3b82f6;
  --couleur-avert-fond:    #3d2e0e;
  --couleur-avert-texte:   #fcd34d;
  --couleur-avert-bord:    #b45309;

  /* ── Tons "soft" — encarts d'aide ── */
  --couleur-info-fond-soft:    #0a1929;
  --couleur-info-bord-soft:    #1e3a5f;
  --couleur-info-texte-soft:   #93c5fd;
  --couleur-erreur-fond-soft:  #2c1212;
  --couleur-erreur-bord-soft:  #7f1d1d;
  --couleur-erreur-texte-soft: #fca5a5;
  --couleur-succes-fond-soft:  #0a1f12;
  --couleur-succes-bord-soft:  #14532d;
  --couleur-succes-texte-soft: #86efac;

  /* ── Médailles ── */
  --couleur-medal-or:      #fbbf24;
  --couleur-medal-argent:  #cbd5e1;
  --couleur-medal-bronze:  #ea7c2a;

  /* ── Trophées — carte acquise ── */
  --couleur-trophee-acquis-fond:  #241d0c;
  --couleur-trophee-acquis-bord:  #fbbf24;

  /* ── Bandeaux ── */
  --couleur-bandeau-warning-bord:  #fbbf24;
  --couleur-bandeau-warning-texte: #fcd34d;
  --couleur-bandeau-info-bord:     #4a6fa5;

  /* ── Gradients ── */
  --gradient-fond-page:       radial-gradient(circle, rgba(100,130,200,0.08) 1px, transparent 1px);
  --gradient-bandeau-warning: linear-gradient(135deg, #3d2e0e 0%, #5c4515 100%);
  --gradient-bandeau-info:    linear-gradient(90deg, #1a2a4a 0%, #1f2f50 100%);
  --gradient-socle-1:         linear-gradient(180deg, #3d2e0e 0%, #5c4515 100%);
  --gradient-socle-2:         linear-gradient(180deg, #2d3748 0%, #475569 100%);
  --gradient-socle-3:         linear-gradient(180deg, #3a1f0a 0%, #5c2c0f 100%);
  --gradient-trophee-mini:    linear-gradient(180deg, #2a2310 0%, #3d2e0e 100%);

  /* ── Podium dashboard (socles colorés) ── */
  --podium-1-fond:    #3d2e0e;
  --podium-1-bord:    #fbbf24;
  --podium-1-texte:   #fcd34d;
  --podium-2-fond:    #2d3748;
  --podium-2-bord:    #cbd5e1;
  --podium-2-texte:   #e2e8f0;
  --podium-3-fond:    #3a1f0a;
  --podium-3-bord:    #ea7c2a;
  --podium-3-texte:   #fdba74;
  --couleur-trophee-mini-bord: #5c4515;

  /* ── Ombres — renforcées car moins visibles sur fond sombre ── */
  --ombre-carte:       0 1px 3px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.25);
  --ombre-carte-large: 0 6px 20px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
  --ombre-dropdown:    0 12px 28px rgba(0,0,0,0.55);
  --ombre-menu:        0 4px 16px rgba(0,0,0,0.5);
  /* Modale : ombre noire seule invisible sur fond sombre — ajout d'un hairline
     blanc subtil (0 0 0 1px) qui dessine le contour de la modale par-dessus
     l'overlay flouté. Box-shadow suit le border-radius nativement. */
  --ombre-modal:       0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.10);
  --ombre-toast:       0 10px 30px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
  --ombre-cookie:      0 -2px 12px rgba(0,0,0,0.5);
  --ombre-card-hover:  0 10px 28px rgba(0,0,0,0.5);
  --couleur-overlay:   rgba(0,0,0,0.7);

  /* ── Cookies (déjà sombre dans le thème clair — léger ajustement) ── */
  --couleur-cookie-bg:     #0a0f17;

  /* ── Citation expert ── */
  --couleur-citation-fond:    #1a2030;
  --couleur-citation-texte:   #cbd5e1;
  --couleur-citation-bord:    #4a90e2;
  --couleur-citation-label:   #93c5fd;

  /* ── Titre fort (textes utilisant primaire en mode "couleur") ── */
  --couleur-titre-fort:       #93c5fd;

  /* Points classement (groupes + élim) — bleu vif lisible sur fond sombre */
  --couleur-points-classement: #60a5fa;
}

/* ════════════════════════════════════════════════════════════
   BLOC 2 — Auto + OS sombre (mêmes overrides, dupliqués)
   ════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --couleur-primaire:      #1e2d4f;
    --couleur-secondaire:    #4a90e2;
    --couleur-fond:          #0f1419;
    --couleur-fond-carte:    #1a1f26;
    --couleur-fond-zebre:    #22272f;
    --couleur-fond-leger:    #1f242c;
    --couleur-texte:         #e2e8f0;
    --couleur-texte-leger:   #94a3b8;
    --couleur-bordure:       #2d3748;
    --couleur-bordure-info:  #1e3a5f;

    --couleur-input-fond:    #1f242c;
    --couleur-focus-anneau:  rgba(110,180,255,0.25);
    --couleur-switch-off:    #3a4658;

    --couleur-succes-fond:   #0e3a2a;
    --couleur-succes-texte:  #86efac;
    --couleur-succes-bord:   #10b981;
    --couleur-erreur-fond:   #3b1a1a;
    --couleur-erreur-texte:  #fca5a5;
    --couleur-erreur-texte-md: #f87171;
    --couleur-erreur-bord:   #7f1d1d;
    --couleur-info-fond:     #0e2745;
    --couleur-info-texte:    #93c5fd;
    --couleur-info-bord:     #3b82f6;
    --couleur-avert-fond:    #3d2e0e;
    --couleur-avert-texte:   #fcd34d;
    --couleur-avert-bord:    #b45309;

    --couleur-info-fond-soft:    #0a1929;
    --couleur-info-bord-soft:    #1e3a5f;
    --couleur-info-texte-soft:   #93c5fd;
    --couleur-erreur-fond-soft:  #2c1212;
    --couleur-erreur-bord-soft:  #7f1d1d;
    --couleur-erreur-texte-soft: #fca5a5;
    --couleur-succes-fond-soft:  #0a1f12;
    --couleur-succes-bord-soft:  #14532d;
    --couleur-succes-texte-soft: #86efac;

    --couleur-medal-or:      #fbbf24;
    --couleur-medal-argent:  #cbd5e1;
    --couleur-medal-bronze:  #ea7c2a;

    --couleur-trophee-acquis-fond:  #241d0c;
    --couleur-trophee-acquis-bord:  #fbbf24;

    --couleur-bandeau-warning-bord:  #fbbf24;
    --couleur-bandeau-warning-texte: #fcd34d;
    --couleur-bandeau-info-bord:     #4a6fa5;

    --gradient-fond-page:       radial-gradient(circle, rgba(100,130,200,0.08) 1px, transparent 1px);
    --gradient-bandeau-warning: linear-gradient(135deg, #3d2e0e 0%, #5c4515 100%);
    --gradient-bandeau-info:    linear-gradient(90deg, #1a2a4a 0%, #1f2f50 100%);
    --gradient-socle-1:         linear-gradient(180deg, #3d2e0e 0%, #5c4515 100%);
    --gradient-socle-2:         linear-gradient(180deg, #2d3748 0%, #475569 100%);
    --gradient-socle-3:         linear-gradient(180deg, #3a1f0a 0%, #5c2c0f 100%);
    --gradient-trophee-mini:    linear-gradient(180deg, #2a2310 0%, #3d2e0e 100%);

    --podium-1-fond:    #3d2e0e;
    --podium-1-bord:    #fbbf24;
    --podium-1-texte:   #fcd34d;
    --podium-2-fond:    #2d3748;
    --podium-2-bord:    #cbd5e1;
    --podium-2-texte:   #e2e8f0;
    --podium-3-fond:    #3a1f0a;
    --podium-3-bord:    #ea7c2a;
    --podium-3-texte:   #fdba74;
    --couleur-trophee-mini-bord: #5c4515;

    --ombre-carte:       0 1px 3px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.25);
    --ombre-carte-large: 0 6px 20px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3);
    --ombre-dropdown:    0 12px 28px rgba(0,0,0,0.55);
    --ombre-menu:        0 4px 16px rgba(0,0,0,0.5);
    /* Modale : ombre noire seule invisible sur fond sombre — ajout d'un hairline
       blanc subtil (0 0 0 1px) qui dessine le contour de la modale par-dessus
       l'overlay flouté. Box-shadow suit le border-radius nativement. */
    --ombre-modal:       0 20px 60px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.10);
    --ombre-toast:       0 10px 30px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35);
    --ombre-cookie:      0 -2px 12px rgba(0,0,0,0.5);
    --ombre-card-hover:  0 10px 28px rgba(0,0,0,0.5);
    --couleur-overlay:   rgba(0,0,0,0.7);

    --couleur-cookie-bg:     #0a0f17;

    --couleur-citation-fond:    #1a2030;
    --couleur-citation-texte:   #cbd5e1;
    --couleur-citation-bord:    #4a90e2;
    --couleur-citation-label:   #93c5fd;

    --couleur-titre-fort:       #93c5fd;

    --couleur-points-classement: #60a5fa;
  }
}

/* ════════════════════════════════════════════════════════════
   OVERRIDES SPÉCIFIQUES — éléments dont la couleur de texte
   ou le fond pointe vers --couleur-primaire (qui reste sombre
   en dark, car le header/boutons doivent rester contrastés).
   Sur fond sombre, ces textes deviendraient invisibles.

   Même contrainte de duplication : un bloc par cas de match.
   ════════════════════════════════════════════════════════════ */

/* Titres généraux (page, cartes), stat-valeurs, rang tableaux */
html[data-theme="sombre"] .page-titre,
html[data-theme="sombre"] .carte-titre,
html[data-theme="sombre"] .stat-valeur,
html[data-theme="sombre"] .rang {
  color: var(--couleur-texte);
}
/* Bordure du titre de page : accent reste rouge, déjà visible — pas d'override */

/* Onglets pills (pronos / classement / règles) — actif = fond primaire + texte blanc,
   inspiré du style des onglets de groupe (A, B, C…) */
html[data-theme="sombre"] .onglet-pill {
  color: var(--couleur-texte);
}
html[data-theme="sombre"] .onglet-pill-actif {
  background: var(--couleur-primaire);
  color: var(--couleur-sur-couleur);
  border-color: var(--couleur-primaire);
}
html[data-theme="sombre"] .onglet-pill-actif::after {
  background: var(--couleur-sur-couleur);
}
html[data-theme="sombre"] .onglet-pill:hover:not(.onglet-pill-actif) {
  color: var(--couleur-texte);
  background: var(--couleur-fond-zebre);
}
/* Le compteur "(N)" jaune avant complétion reste tel quel — son fond clair
   sur fond sombre fait office de badge d'alerte, visible. */

/* Trio "Tirage" 1 N 2 — texte clair quand non actif */
html[data-theme="sombre"] .tirage-trio {
  background: var(--couleur-fond);
  border-color: var(--couleur-bordure);
}
html[data-theme="sombre"] .tirage-btn {
  color: var(--couleur-texte);
}
html[data-theme="sombre"] .tirage-btn:hover:not(.tirage-actif):not(.tirage-btn-n) {
  background: var(--couleur-secondaire);
  color: var(--couleur-sur-couleur);
}
html[data-theme="sombre"] .tirage-btn.tirage-actif {
  background: var(--couleur-secondaire);
  color: var(--couleur-sur-couleur);
}
/* Match nul (N) — jaune clair hardcodé devient jaune sombre en dark */
html[data-theme="sombre"] .tirage-btn-n:hover,
html[data-theme="sombre"] .tirage-btn-n.tirage-actif {
  background: #5c4515;
  color: #fcd34d;
}
/* Bouton d'aide "?" : fond sombre + texte clair en dark */
html[data-theme="sombre"] .tirage-aide-btn {
  background: var(--couleur-fond);
  color: var(--couleur-texte);
  border-color: var(--couleur-bordure);
}
html[data-theme="sombre"] .tirage-aide-btn:hover,
html[data-theme="sombre"] .tirage-aide-btn[aria-expanded="true"] {
  background: var(--couleur-secondaire);
  color: var(--couleur-sur-couleur);
  border-color: var(--couleur-secondaire);
}
/* Badge "✨ tirage" dans la ligne de date (desktop) — fond clair hardcodé */
html[data-theme="sombre"] .md-tirage-hint {
  background: var(--couleur-fond-zebre);
  border-color: var(--couleur-bordure);
  color: var(--couleur-secondaire);
}
/* Bandeau mobile du tirage (gradient clair hardcodé en CSS interne) */
@media (max-width: 640px) {
  html[data-theme="sombre"] .mp-tirage {
    background: var(--couleur-fond);
    border-color: var(--couleur-bordure);
  }
}

/* Éliminatoires — boutons équipes : opacité plus élevée et texte clair
   pour que les non-sélectionnées restent lisibles */
html[data-theme="sombre"] .btn-equipe {
  color: var(--couleur-texte);
}
html[data-theme="sombre"] .btn-equipe.non-selectionne {
  opacity: 0.65;
}
html[data-theme="sombre"] .btn-equipe.selectionne {
  color: var(--couleur-succes-texte);
}

/* Dashboard — stats globales (chiffres + sous-titre + pourcentage + barre) */
html[data-theme="sombre"] .stats-num,
html[data-theme="sombre"] .stats-sous-titre,
html[data-theme="sombre"] .stats-top-pct {
  color: var(--couleur-titre-fort);
}
html[data-theme="sombre"] .stats-top-bar > span {
  background: var(--couleur-secondaire);
}

/* Fiche joueur (modale) — cartes blanches stats (pronos / trophées / ligues) → fond moins clair */
html[data-theme="sombre"] .fj-stat {
  background: var(--couleur-fond-zebre);
  border-color: var(--couleur-bordure);
  box-shadow: var(--ombre-carte);
}
/* Valeurs bleues (pronos, ligues) — primaire sombre en dark → bleu vif */
html[data-theme="sombre"] .fj-stat-val { color: var(--couleur-points-classement); }

/* Tooltips custom (.tooltip-bulle) — fond hardcoded sur --couleur-texte
   qui devient blanc en dark → tooltip invisible. Forcer fond très sombre. */
html[data-theme="sombre"] .pts-tooltip .tooltip-bulle {
  background: #0a0f17;
  color: #fff;
}
html[data-theme="sombre"] .pts-tooltip .tooltip-bulle::after {
  border-top-color: #0a0f17;
}

/* Trophées — éclaircir la couleur du header "Engagement" (bleu marine sombre origine) */
html[data-theme="sombre"] .trophees-section[data-section="engagement"] .trophees-section-header h2,
html[data-theme="sombre"] .trophees-section[data-section="engagement"] .trophees-section-chevron {
  color: #8fb4d9;
}
html[data-theme="sombre"] .trophees-section[data-section="engagement"] .trophees-section-header {
  border-left-color: #8fb4d9;
}

/* ───────── Duplication pour auto + OS sombre ───────── */
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] .page-titre,
  html[data-theme="auto"] .carte-titre,
  html[data-theme="auto"] .stat-valeur,
  html[data-theme="auto"] .rang {
    color: var(--couleur-texte);
  }

  html[data-theme="auto"] .onglet-pill {
    color: var(--couleur-texte);
  }
  html[data-theme="auto"] .onglet-pill-actif {
    background: var(--couleur-primaire);
    color: var(--couleur-sur-couleur);
    border-color: var(--couleur-primaire);
  }
  html[data-theme="auto"] .onglet-pill-actif::after {
    background: var(--couleur-sur-couleur);
  }
  html[data-theme="auto"] .onglet-pill:hover:not(.onglet-pill-actif) {
    color: var(--couleur-texte);
    background: var(--couleur-fond-zebre);
  }

  html[data-theme="auto"] .tirage-trio {
    background: var(--couleur-fond);
    border-color: var(--couleur-bordure);
  }
  html[data-theme="auto"] .tirage-btn {
    color: var(--couleur-texte);
  }
  html[data-theme="auto"] .tirage-btn:hover:not(.tirage-actif):not(.tirage-btn-n) {
    background: var(--couleur-secondaire);
    color: var(--couleur-sur-couleur);
  }
  html[data-theme="auto"] .tirage-btn.tirage-actif {
    background: var(--couleur-secondaire);
    color: var(--couleur-sur-couleur);
  }
  html[data-theme="auto"] .tirage-btn-n:hover,
  html[data-theme="auto"] .tirage-btn-n.tirage-actif {
    background: #5c4515;
    color: #fcd34d;
  }
  html[data-theme="auto"] .tirage-aide-btn {
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    border-color: var(--couleur-bordure);
  }
  html[data-theme="auto"] .tirage-aide-btn:hover,
  html[data-theme="auto"] .tirage-aide-btn[aria-expanded="true"] {
    background: var(--couleur-secondaire);
    color: var(--couleur-sur-couleur);
    border-color: var(--couleur-secondaire);
  }
  html[data-theme="auto"] .md-tirage-hint {
    background: var(--couleur-fond-zebre);
    border-color: var(--couleur-bordure);
    color: var(--couleur-secondaire);
  }
  @media (max-width: 640px) {
    html[data-theme="auto"] .mp-tirage {
      background: var(--couleur-fond);
      border-color: var(--couleur-bordure);
    }
  }

  html[data-theme="auto"] .btn-equipe {
    color: var(--couleur-texte);
  }
  html[data-theme="auto"] .btn-equipe.non-selectionne {
    opacity: 0.65;
  }
  html[data-theme="auto"] .btn-equipe.selectionne {
    color: var(--couleur-succes-texte);
  }

  html[data-theme="auto"] .stats-num,
  html[data-theme="auto"] .stats-sous-titre,
  html[data-theme="auto"] .stats-top-pct {
    color: var(--couleur-titre-fort);
  }
  html[data-theme="auto"] .stats-top-bar > span {
    background: var(--couleur-secondaire);
  }

  /* Fiche joueur — cartes stats moins claires + bleu vif */
  html[data-theme="auto"] .fj-stat {
    background: var(--couleur-fond-zebre);
    border-color: var(--couleur-bordure);
    box-shadow: var(--ombre-carte);
  }
  html[data-theme="auto"] .fj-stat-val { color: var(--couleur-points-classement); }

  /* Tooltips */
  html[data-theme="auto"] .pts-tooltip .tooltip-bulle {
    background: #0a0f17;
    color: #fff;
  }
  html[data-theme="auto"] .pts-tooltip .tooltip-bulle::after {
    border-top-color: #0a0f17;
  }

  /* Trophées — engagement plus clair */
  html[data-theme="auto"] .trophees-section[data-section="engagement"] .trophees-section-header h2,
  html[data-theme="auto"] .trophees-section[data-section="engagement"] .trophees-section-chevron {
    color: #8fb4d9;
  }
  html[data-theme="auto"] .trophees-section[data-section="engagement"] .trophees-section-header {
    border-left-color: #8fb4d9;
  }
}