/* ════════════════════════════════════════════════════════════════
6eHomme — theme.css · feuille de thème PARTAGÉE (source unique)
Bascule clair / sombre. SOMBRE = thème par défaut (charte premium).
Couplée à assets/theme.js (pose data-theme sur avant peinture).
Usage dans une page :
(root)
(root)
… ou ../assets/… depuis un sous-dossier (admin/*)
Le mode clair REDÉFINIT la valeur des mêmes variables CSS du :root :
background:var(--navy) devient clair, color:var(--white) devient foncé.
Orange et or de la marque sont conservés (réajustés pour le contraste).
⚠ Les surcharges de couleurs CODÉES EN DUR propres à chaque page
(fonds/teintes qui ne suivent pas les variables) restent dans la page,
en :root[data-theme="light"] .ma-classe{ … }.
════════════════════════════════════════════════════════════════ */
:root[data-theme="light"]{
--orange:#E8470A; --orange-light:#C93D08; --orange-dim:rgba(232,71,10,0.10);
--navy:#F4F1EA; /* fond de page (crème clair) */
--navy-mid:#EAE5D9; /* surfaces secondaires / pills */
--navy-card:#FFFFFF; /* cartes */
--navy-hover:#EFE9DC; /* survol de surface */
--white:#15203A; /* texte principal (navy foncé) */
--gray:#6C6A60; /* texte secondaire */
--gray-light:#4B5163; /* sous-titres lisibles sur fond clair */
--gold:#FFD166; --gold-dim:rgba(176,130,8,0.12);
--semantic-good:#1E9E63; --semantic-warn:#B9750F; --semantic-bad:#D14545;
--semantic-info:#2E72C0; --semantic-mute:#7A786E;
--green:var(--semantic-good); --red:var(--semantic-bad); --blue:var(--semantic-info);
--border:rgba(11,20,38,0.12);
--border-strong:rgba(11,20,38,0.20);
--shadow-card:0 1px 2px rgba(16,24,40,0.04), 0 8px 24px rgba(16,24,40,0.10);
}
/* ── Bouton de bascule (universel, déposé dans le header de chaque page) ──
*/
.btn-theme{
background:transparent; border:1px solid var(--border-strong); border-radius:100px;
width:34px; height:34px; flex-shrink:0;
display:inline-flex; align-items:center; justify-content:center;
font-size:15px; line-height:1; color:var(--white); cursor:pointer;
transition:background 0.15s, border-color 0.15s, color 0.15s;
}
.btn-theme:hover{ border-color:var(--orange); background:var(--orange-dim); color:var(--white); }
/* ── Surcharges GÉNÉRIQUES en mode clair pour les liens cliquables partagés ──
.player-link est stylé or #FFD166 EN DUR par le module fiche-joueur.js ;
illisible sur fond clair → orange profond de la marque. */
:root[data-theme="light"] .player-link{
color:#C2410C !important; border-bottom-color:rgba(194,65,12,0.5) !important;
}
:root[data-theme="light"] .player-link:hover{
color:#0B1426 !important; border-bottom-color:#0B1426 !important;
}
/* ════════════════════════════════════════════════════════════════
CENTRALISÉ — PRINCIPE : aucune couleur vive en mode clair.
Ces familles se répètent sur quasi toutes les pages connectées
(mêmes noms de classes/variables) → définies UNE fois ici.
════════════════════════════════════════════════════════════════ */
/* 1) Couleurs sémantiques propres aux pages (--good/--warn/--bad/--info,
non couvertes par le bloc variables ci-dessus) → versions foncées/calmes.
N'affecte que les pages qui définissent/utilisent ces noms. */
:root[data-theme="light"]{
--good:#1E9E63; --warn:#B9750F; --bad:#D14545; --info:#2E72C0;
}
/* 2) Badges de tier (Superstar/Star/Rotation/Remplaçant) : pastel clair
illisible → teinte foncée DANS LE TON (même hue). */
:root[data-theme="light"] .tier.Superstar{ background:rgba(109,59,196,0.12); color:#6D3BC4; }
:root[data-theme="light"] .tier.Star{ background:rgba(31,95,176,0.12); color:#1F5FB0; }
:root[data-theme="light"] .tier.Rotation{ background:rgba(30,122,72,0.12); color:#1E7A48; }
:root[data-theme="light"] .tier.Remplacant,
:root[data-theme="light"] .tier.Remplaçant{ background:rgba(90,90,78,0.14); color:#5A5A4E; }
/* 3) Pastilles de slot : couleur posée en INLINE vif par le JS (map SLOT_COLOR).
Le JS doit ajouter une classe hook `slot-XX` sur la pastille ; on cible la
classe seule (générique pour .rslot / .rr-slot / .seat .rslot…).
!important pour battre le style inline. */
:root[data-theme="light"] .slot-AR{ color:#B0420E !important; border-color:rgba(176,66,14,0.40) !important; }
:root[data-theme="light"] .slot-AI{ color:#BD5A1E !important; border-color:rgba(189,90,30,0.40) !important; }
:root[data-theme="light"] .slot-P{ color:#1F5FB0 !important; border-color:rgba(31,95,176,0.40) !important; }
:root[data-theme="light"] .slot-6H{ color:#8A6D1F !important; border-color:rgba(138,109,31,0.45) !important; }
:root[data-theme="light"] .slot-BAN{ color:#5A5A4E !important; border-color:rgba(90,90,78,0.40) !important; }
:root[data-theme="light"] .slot-INA{ color:#B23A3A !important; border-color:rgba(178,58,58,0.40) !important; }