/* =============================================================================
   THEME.CSS
   Valeurs de couleur des deux thèmes (dark / light).

   C'est le SEUL fichier à ouvrir pour ajuster une couleur d'interface :
   change une valeur ici, elle se répercute partout dans style.css (qui référence
   ces variables via var(--...)).

   Fonctionnement :
     - Les valeurs par défaut (:root) = thème SOMBRE.
     - [data-theme="light"] surcharge ces mêmes variables = thème CLAIR.
     - theme.js pose/retire l'attribut data-theme sur <html> et mémorise le choix.

   À charger APRÈS style.css dans index.html pour être prioritaire :
       <link rel="stylesheet" href="style.css?v=..." />
       <link rel="stylesheet" href="theme.css?v=..." />

   Ne concerne que les couleurs d'INTERFACE (fonds, textes, bordures des panneaux
   et menus, cadre du terrain). Les couleurs d'ACCENT (jaune de sélection, rouges
   d'alerte, couleurs des jetons défense/attaque/coureur) restent dans style.css :
   elles fonctionnent sur les deux fonds et n'ont pas à basculer.
   ============================================================================= */

/* --- THÈME SOMBRE (par défaut) --------------------------------------------- */
:root {
    --fond-page: #1e1e1e;
    --texte-principal: #ffffff;
    --fond-panneau: rgba(20, 20, 20, 0.96);       /* fiche tactique */
    --fond-panneau-2: rgba(20, 20, 24, 0.92);     /* fenêtre consigne joueur */
    --bordure-panneau: rgba(255, 255, 255, 0.2);
    --texte-panneau: #eee;
    --fond-entete-panneau: rgba(0, 0, 0, 0.3);
    --fond-select: #333333;
    --texte-select: #ffffff;
    --bordure-select: #555555;
    --cadre-terrain: #ffffff;                      /* bordure autour du terrain */
    --accent-poste: #ffeb3b;                       /* étiquette de poste (P, C, 1B…) */
    --fond-accent-poste: rgba(255, 235, 59, 0.12);
    --accent-titre-bloc: #ffb74d;                  /* titres de bloc (Analyse, Priorités…) */
    --accent-consignes: #64b5f6;                   /* titre "Consignes par poste" + icône casquette —
                                                       bleu plus clair que --couleur-defense pour
                                                       rester lisible sur fond sombre */
}

/* --- THÈME CLAIR : surcharge uniquement les variables ci-dessus ------------ */
[data-theme="light"] {
    --fond-page: #eef1f5;
    --texte-principal: #1a1a1a;
    --fond-panneau: rgba(255, 255, 255, 0.97);
    --fond-panneau-2: rgba(247, 249, 251, 0.97);
    --bordure-panneau: rgba(0, 0, 0, 0.15);
    --texte-panneau: #222222;
    --fond-entete-panneau: rgba(0, 0, 0, 0.05);
    --fond-select: #ffffff;
    --texte-select: #1a1a1a;
    --bordure-select: #bbbbbb;
    --cadre-terrain: #555555;
    --accent-poste: #c62828;                       /* rouge — lisible sur blanc */
    --fond-accent-poste: rgba(168, 106, 0, 0.12);
    --accent-titre-bloc: #c62828;                  /* rouge — lisible sur blanc */
    --accent-consignes: #1976d2;                   /* bleu — déjà lisible sur fond clair,
                                                       même valeur que --couleur-defense */
}

/* --- Bouton de bascule : projecteur de stade (injecté par theme.js) --------
   Ampoules ALLUMÉES en thème sombre (stade illuminé), ÉTEINTES en thème clair
   (plein jour). Le SVG est fixe ; seul son aspect change via [data-theme]. */
#bascule-theme {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 1000;
    width: 32px;
    aspect-ratio: 3 / 2;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    transition: transform 0.15s ease;
}
#bascule-theme:hover {
    transform: scale(1.08);
}
#bascule-theme:active {
    transform: scale(0.96);
}
#bascule-theme svg {
    display: block;
    width: 100%;
    height: 100%;
    /* Ombre portée sur l'icône elle-même (pas sur un cadre de bouton). */
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

/* Panneau : cadre neutre suivant la couleur de texte du thème. */
#bascule-theme .proj-panneau {
    fill: none;
    stroke: var(--texte-principal);
    stroke-width: 1.2;
    opacity: 0.75;
}

/* Ampoules — état par défaut = ALLUMÉ (thème sombre).
   Jaune chaud + halo lumineux via drop-shadow. La transition rend l'allumage
   progressif au basculement. */
#bascule-theme .ampoule {
    fill: #ffd23f;
    stroke: #ffb300;
    stroke-width: 0.3;
    filter: drop-shadow(0 0 1.5px #ffd23f);
    transition: fill 0.3s ease, filter 0.3s ease, stroke 0.3s ease;
}

/* Ampoules — état ÉTEINT (thème clair) : gris, sans halo. */
[data-theme="light"] #bascule-theme .ampoule {
    fill: #c0aca2;
    stroke: #a0a0a0;
    filter: none;
}