/* ==========================================
   THÈMES DE COULEURS DU PORTAIL (20/10/2026)
   Choisis par le client dans le menu utilisateur (cookie, core/themes.py) et
   posés sur <html data-theme="…">. variables.css reste la copie conforme du
   backoffice (test_charte_parite) : un thème SURCHARGE ici les variables
   --ece-* ; « ece » (la charte) ne surcharge rien.
   Rôles propres aux thèmes, lus avec repli sur la charte dans les feuilles :
   --theme-encre-accent      texte posé sur un fond « or » (accent)
   --theme-accent-sur-fonce  accent en TEXTE sur un fond foncé
   --theme-fond              fond de page
   --theme-teinte*           teintes claires des tableaux (SIG)
   Contrastes WCAG AA (4,5:1) verrouillés par core/tests/test_themes.py.
   ========================================== */

/* MEGPSM : anthracite + rouge du Pilotage HBI, encre blanche sur le rouge. */
:root[data-theme="megpsm"] {
    --ece-purple-dark: #17171c;
    --ece-purple: #232329;
    --ece-purple-light: #3a3a44;
    --ece-gold: #d81f2c;
    --ece-gold-light: #c41a26;
    --ece-gold-lighter: #dc2834;
    --ece-gold-dark: #b4161f;
    --ece-gold-hover: #c01a26;
    --bs-link-color: #b4161f;
    --bs-link-color-rgb: 180, 22, 31;
    --bs-link-hover-color: #8f1119;
    --bs-link-hover-color-rgb: 143, 17, 25;
    --theme-encre-accent: #ffffff;
    --theme-accent-sur-fonce: #ff7b84;
    --theme-fond: #ededf1;
    --theme-teinte: #f1f1f4;
    --theme-teinte-legere: #f8f8fa;
    --theme-teinte-survol: #ebebef;
    --theme-teinte-accent: #fdeced;
}

/* Océan : bleu marine + turquoise. */
:root[data-theme="ocean"] {
    --ece-purple-dark: #0b2239;
    --ece-purple: #12355a;
    --ece-purple-light: #1d4f7c;
    --ece-gold: #3fb8af;
    --ece-gold-light: #6fd0c8;
    --ece-gold-lighter: #57c4bb;
    --ece-gold-dark: #1d6b66;
    --ece-gold-hover: #35a39b;
    --bs-link-color: #12355a;
    --bs-link-color-rgb: 18, 53, 90;
    --bs-link-hover-color: #0b2239;
    --bs-link-hover-color-rgb: 11, 34, 57;
    --theme-fond: #e9eef3;
    --theme-teinte: #eef3f8;
    --theme-teinte-legere: #f7fafc;
    --theme-teinte-survol: #e6eef6;
    --theme-teinte-accent: #dcf1ef;
}

/* Forêt : vert sapin + cuivre. */
:root[data-theme="foret"] {
    --ece-purple-dark: #0f2a1f;
    --ece-purple: #1b4332;
    --ece-purple-light: #2d6a4f;
    --ece-gold: #d08c60;
    --ece-gold-light: #e3a97f;
    --ece-gold-lighter: #dc9c70;
    --ece-gold-dark: #8a4f24;
    --ece-gold-hover: #bd7a4f;
    --bs-link-color: #1b4332;
    --bs-link-color-rgb: 27, 67, 50;
    --bs-link-hover-color: #0f2a1f;
    --bs-link-hover-color-rgb: 15, 42, 31;
    --theme-fond: #e9efeb;
    --theme-teinte: #eef4f0;
    --theme-teinte-legere: #f7faf8;
    --theme-teinte-survol: #e5efe8;
    --theme-teinte-accent: #f6e9df;
}

/* Pastilles du menu : couleurs FIXES de chaque thème (visibles quel que soit le thème courant). */
.pastille-theme {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.15);
    vertical-align: -0.15em;
}

.pastille-theme-ece { background: linear-gradient(135deg, #2d2056 50%, #b6a54d 50%); }
.pastille-theme-megpsm { background: linear-gradient(135deg, #232329 50%, #d81f2c 50%); }
.pastille-theme-ocean { background: linear-gradient(135deg, #12355a 50%, #3fb8af 50%); }
.pastille-theme-foret { background: linear-gradient(135deg, #1b4332 50%, #d08c60 50%); }

.navbar-user-menu .choix-theme {
    display: flex;
    align-items: center;
}

.navbar-user-menu .choix-theme .bi-check2 {
    margin-left: auto;
    padding-left: 0.75rem;
}

/* Sous-menu « Thèmes » (collapse) : chevron retourné à l'ouverture, options en retrait. */
.navbar-user-menu .menu-themes-titre .bi-chevron-down {
    transition: transform 0.2s ease;
}

.navbar-user-menu .menu-themes-titre[aria-expanded="true"] .bi-chevron-down {
    transform: rotate(180deg);
}

.navbar-user-menu .choix-theme-option {
    padding-left: 2.25rem;
}