/* ==========================================================================
   THÈMES — chargé APRÈS style_unifie.css
   Chaque thème = un jeu de variables CSS, activé par <html data-theme="...">
   (voir fonctions/theme.php). Les variables portent les mêmes noms que
   celles de style_unifie.css : redéfinies ici, tout le site se recolore.
   ========================================================================== */

/* ==========================================================================
   PALETTE — « Nord » (https://www.nordtheme.com), thème libre très répandu.
   Bleus-gris posés au lieu du bleu vif d'origine. Deux déclinaisons :
     Stade = Nord clair  (fond « Snow Storm », bandeaux « Polar Night »)
     Nuit  = Nord sombre (fond « Polar Night », texte « Snow Storm »)
   Accents Nord : bleu givre #5E81AC / #81A1C1, cyan #88C0D0,
                  vert #A3BE8C, jaune #EBCB8B, rouge #BF616A.
   ========================================================================== */

/* ---- Thème « Stade » : Nord clair ---- */
[data-theme="stade"] {
    --primary-color:   #4c6e96;   /* titres, éléments de marque (5,3:1 sur blanc) */
    --secondary-color: #5e81ac;   /* Nord10 */
    --accent-color:    #ebcb8b;   /* Nord13 : repères, année dans l'en-tête */
    --bandeau:         linear-gradient(135deg, #3b4252 0%, #434c5e 100%);   /* en-tête + menu */
    --text-dark:       #2e3440;   /* Nord0 */
    --text-light:      #eceff4;   /* fond de page : Nord6 */
    --text-secondary:  #4c566a;   /* Nord3 */
    --text-muted:      #6b7790;
    --surface-1:       #ffffff;
    --surface-2:       #e5e9f0;   /* Nord5 */
    --surface-3:       #d8dee9;   /* Nord4 */
    --border:          #d8dee9;
    --blue:            #5e81ac;
    --blue-light:      #dfe7f1;
}

/* ---- Thème « Nuit » : Nord sombre ---- */
[data-theme="nuit"] {
    /* « primary » sert à la fois de texte (titres) et de fond : un bleu givre moyen. */
    --primary-color:   #7497be;
    --secondary-color: #5e81ac;   /* Nord10 */
    --accent-color:    #a3be8c;   /* Nord14 : vert doux pour les repères actifs */
    --bandeau:         linear-gradient(135deg, #2e3440 0%, #3b4252 100%);   /* en-tête + menu */
    --text-dark:       #e5e9f0;   /* Nord5 */
    --text-light:      #242933;   /* fond de page (Nord0 assombri) */
    --text-secondary:  #a7b1c4;
    --text-muted:      #8a94a8;
    --surface-1:       #2e3440;   /* cartes : Nord0 */
    --surface-2:       #3b4252;   /* Nord1 */
    --surface-3:       #434c5e;   /* Nord2 */
    --border:          #434c5e;
    --green-light:     #2f3d33;
    --red-light:       #43292e;
    --yellow-light:    #4a4132;
    --blue-light:      #34425a;
    --blue:            #81a1c1;
    --shadow:          0 2px 12px rgba(0,0,0,.45);
    color-scheme: dark;           /* champs, barres de défilement natifs en sombre */
}

/* ---- Bandeaux (en-tête, menu, bandeau « expéditeur » du contact) : même couleur calme ---- */
[data-theme] .header,
[data-theme] .navbar,
[data-theme] .contact-sender-badge { background: var(--bandeau); }
[data-theme] .header { color: #eceff4; }

/* ---- Surfaces et textes qui utilisent des couleurs « en dur » dans style_unifie.css ---- */
[data-theme="nuit"] .card { background-color: var(--surface-1); color: var(--text-dark); }
[data-theme="nuit"] .nom-equipe,
[data-theme="nuit"] .team-name { color: var(--text-dark); }
[data-theme="nuit"] .sticky-footer { background: transparent; }

/* ==========================================================================
   BARRE DE NAVIGATION DU BAS (téléphone uniquement)
   Placée sous le pouce ; masquée sur ordinateur (le menu du haut suffit).
   ========================================================================== */
.bottom-nav { display: none; }

@media (max-width: 768px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 8000;
        background: var(--surface-1);
        border-top: 1px solid var(--border);
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
        /* env(...) : évite la barre d'accueil des iPhone récents */
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        padding: 6px 2px;
        font-size: .7rem;
        color: var(--text-secondary);
        text-decoration: none;
        position: relative;
        min-height: 44px;           /* cible tactile confortable */
        justify-content: center;
    }
    .bottom-nav a i { font-size: 1.25rem; }
    .bottom-nav a.on { color: var(--primary-color); font-weight: 700; }
    [data-theme="nuit"] .bottom-nav a.on { color: var(--accent-color); }
    .bottom-nav .badge-notif { position: absolute; top: 0; left: 55%; }

    /* Le contenu ne passe pas sous la barre fixe */
    body { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   LOT 3 — THÈME NUIT : accueil, classement, résultats
   (couleurs écrites « en dur » dans les feuilles ou dans les <style> des pages)
   ========================================================================== */

/* Cartes de match (accueil, résultats) */
[data-theme="nuit"] .carte-match-v2,
[data-theme="nuit"] .res-carte { background: var(--surface-1); }

/* La carte « pas encore de prono » clignotait blanc/rose : version sombre */
@keyframes blink-rose-nuit {
    0%, 100% { background-color: var(--surface-1);  box-shadow: 0 2px 10px rgba(0,0,0,.4); }
    50%      { background-color: #3b1a1f;           box-shadow: 0 0 16px rgba(239,68,68,.45); }
}
[data-theme="nuit"] .carte-match-v2.no-prono { animation-name: blink-rose-nuit; }

/* Tableau du classement */
[data-theme="nuit"] .table-classement th { background: var(--surface-2); color: var(--text-secondary); border-bottom-color: var(--border); }
[data-theme="nuit"] .table-classement td { border-bottom-color: var(--border); }
[data-theme="nuit"] .table-classement tr:hover { background-color: var(--surface-2); }
/* Ma ligne : le jaune #FFCC66 est écrit en ligne dans le PHP → vert discret en sombre */
[data-theme="nuit"] .table-classement tr[data-me="1"],
[data-theme="nuit"] .table-classement tr[style*="FFCC66"] { background-color: rgba(163, 190, 140, .20) !important; }


/* Tableaux génériques : rayures et bordures écrites en gris clair dans style_unifie.css */
[data-theme="nuit"] th,
[data-theme="nuit"] td { border-color: var(--border); }
[data-theme="nuit"] tr:nth-child(even) { background-color: var(--surface-2); }

/* ==========================================================================
   LOT 4 — THÈME NUIT : Comptoir (forum) et éditeur de message
   Ces couleurs sont écrites dans les <style> de message.php et saisie.php.
   ========================================================================== */
[data-theme="nuit"] .msg-card { background: var(--surface-1); border-color: var(--border); color: var(--text-dark); }
[data-theme="nuit"] .msg-header,
[data-theme="nuit"] .message-header { border-bottom-color: var(--border); }
[data-theme="nuit"] .author small,
[data-theme="nuit"] .date-info { color: var(--text-secondary); }
[data-theme="nuit"] .msg-body,
[data-theme="nuit"] .message-body,
[data-theme="nuit"] .msg-card-body { color: var(--text-dark); }

/* Citations, code, messages supprimés / modérés */
[data-theme="nuit"] .msg-card-body code,
[data-theme="nuit"] .rich-editor code { background: var(--surface-3); color: var(--text-dark); }
[data-theme="nuit"] .msg-card-body blockquote,
[data-theme="nuit"] .msg-card-body .citation-block,
[data-theme="nuit"] .rich-editor blockquote,
[data-theme="nuit"] .citation-preview { background: var(--blue-light); color: var(--text-dark); }
[data-theme="nuit"] .msg-deleted { background: var(--surface-2); }
[data-theme="nuit"] .msg-moderated { background: #2b1a3a; }

/* Boutons d'action, « j'aime », pagination */
[data-theme="nuit"] .action-btn,
[data-theme="nuit"] .like-btn.not-liked,
[data-theme="nuit"] .page-link { background: var(--surface-2); color: var(--text-dark); border-color: var(--border); }
[data-theme="nuit"] .like-btn.not-liked:hover { background: var(--surface-3); }
[data-theme="nuit"] .like-btn.liked,
[data-theme="nuit"] .like-btn.liked:hover { background: var(--yellow-light); }

/* Éditeur de message (barre d'outils, fenêtres, panneau d'émojis) */
[data-theme="nuit"] .tb-select,
[data-theme="nuit"] .emoji-panel input,
[data-theme="nuit"] .media-modal,
[data-theme="nuit"] .modal-tab { background: var(--surface-1); color: var(--text-dark); border-color: var(--border); }

/* ==========================================================================
   NUIT — menus déroulants, champs de saisie, styles écrits en ligne
   ========================================================================== */

/* Menus déroulants, champs texte et zones de texte (y compris la liste qui s'ouvre) */
[data-theme="nuit"] select,
[data-theme="nuit"] textarea,
[data-theme="nuit"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]) {
    background-color: var(--surface-2);
    color: var(--text-dark);
    border-color: var(--border) !important;   /* !important : beaucoup de champs ont leur bordure en ligne */
}
[data-theme="nuit"] select option { background-color: var(--surface-1); color: var(--text-dark); }
[data-theme="nuit"] ::placeholder { color: var(--text-muted); }

/* Styles écrits directement dans le HTML (style="background:#fff…") : seule façon de les atteindre */
[data-theme="nuit"] [style*="background:#fff"],
[data-theme="nuit"] [style*="background: #fff"],
[data-theme="nuit"] [style*="background:white"],
[data-theme="nuit"] [style*="background: white"],
[data-theme="nuit"] [style*="background:#f7f8fc"],
[data-theme="nuit"] [style*="background:#f8f9fa"],
[data-theme="nuit"] [style*="background:#f9f9f9"],
[data-theme="nuit"] [style*="background:#fafafa"],
[data-theme="nuit"] [style*="background:#f0f0f0"] { background: var(--surface-1) !important; color: var(--text-dark) !important; }
[data-theme="nuit"] [style*="color:#666"],
[data-theme="nuit"] [style*="color: #666"],
[data-theme="nuit"] [style*="color:#888"],
[data-theme="nuit"] [style*="color:#999"] { color: var(--text-secondary) !important; }
[data-theme="nuit"] [style*="color:#333"],
[data-theme="nuit"] [style*="color: #333"],
[data-theme="nuit"] [style*="color:#444"],
[data-theme="nuit"] [style*="color:#1f2937"] { color: var(--text-dark) !important; }

/* Classement : lignes « amis » (couleur posée par le JavaScript de la page, d'où !important) */
[data-theme="nuit"] .table-classement tbody tr[data-ami="1"][data-me="0"] {
    background-color: rgba(235, 203, 139, .12) !important;
}
[data-theme="nuit"] .table-classement tbody tr td { color: var(--text-dark); }
/* Liens bleu foncé (« Voir les 300 joueurs ») : un bleu plus clair pour rester lisible */
[data-theme="nuit"] a[style*="var(--secondary-color)"] { color: #60a5fa !important; }
/* Bordures gris clair écrites en ligne (solid #eee, #e4e7f0, #e0e0e0…) */
[data-theme="nuit"] [style*="solid #e"],
[data-theme="nuit"] [style*="solid #d"] { border-color: var(--border) !important; }

/* Badges du profil (saisie des pronos) : la couleur de fond vient de la base de données
   (valeur claire, donc impossible à lister d'avance) → fond sombre commun,
   la couleur du niveau (bronze / argent / or) reste portée par la bordure. */
[data-theme="nuit"] .ps-badge-item { background: var(--surface-2) !important; }

/* Stade : lignes « moi » et « amis » du classement dans les jaunes doux de Nord
   (le JavaScript de la page pose #FFCC66 / #FFF9C4 en ligne, d'où !important) */
[data-theme="stade"] .table-classement tbody tr[data-me="1"] {
    background-color: rgba(235, 203, 139, .60) !important;
    border-left-color: #d9b36a !important;
}
[data-theme="stade"] .table-classement tbody tr[data-ami="1"][data-me="0"] {
    background-color: rgba(235, 203, 139, .20) !important;
}