/* =========================================================
   Design tokens — système "dark assaini"
   Source de vérité unique pour les couleurs/élévations.
   Les anciennes variables sont ré-aliasées plus bas pour
   propager le nouveau système sans toucher chaque fichier.
   ========================================================= */
:root {
    color-scheme: dark;

    /* Fonds & élévation — bleu nuit calé sur le visuel du groupement
       (fond du site : champ sombre #0d0b26, teinte 244°). On garde l'échelle
       de clartés d'origine (fond 9,8 % → carte survolée 22,4 %) et on assainit
       la teinte à 234° pour éviter le reflet violet sur les surfaces empilées.
       POC validé : design-poc/couleur-fond.html */
    --bg:            #0c0f25;
    --surface-1:     #141735;   /* panneau de contenu */
    --surface-2:     #1b1f41;   /* cartes */
    --surface-2-hov: #23274f;
    --surface-3:     #0f122e;   /* zones internes, inputs, lignes */

    /* Halo — la lumière bleue du visuel (teinte 208°, mesurée sur le fond du
       site), posée en haut de page. Voir la règle body dans app.css. */
    --halo:          20, 97, 165;
    --halo-op:       0.20;

    /* Bordures & ombres */
    --border:        rgba(255, 255, 255, 0.07);
    --border-strong: rgba(255, 255, 255, 0.13);
    --shadow:        0 8px 24px rgba(0, 0, 0, 0.28);
    --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.20);

    /* Texte */
    --text:          #e9eaf3;
    --text-muted:    #9396b4;
    --text-faint:    #777a9a;

    /* Accent unique (le doré d'origine, légèrement enrichi) */
    --gold:          #e6c98a;
    --gold-strong:   #f3dca7;
    --gold-soft:     rgba(230, 201, 138, 0.14);
    --stepper-gs:    #252738;

    /* Doré "remplissage" (bouton doré plein) : reste vif même en thème clair,
       où --gold vire au bronze pour rester lisible en texte sur fond clair. */
    --gold-fill:        var(--gold);
    --gold-fill-hover:  var(--gold-strong);
    --gold-ink:         #2a1d05;

    /* Survol neutre théma-aware (remplace les rgba(255,255,255,x) épars). */
    --hover:            rgba(255, 255, 255, 0.06);

    /* Listes déroulantes : le panneau qui s'ouvre est dessiné par le
       navigateur, hors de la page. Il ignore les transparences et retombe
       sur les couleurs système quand on ne lui impose rien (le texte noir
       sur bleu nuit ici, le blanc sur blanc là). D'où des couleurs opaques,
       thème par thème. POC validé : design-poc/fonds-listes-deroulantes.html */
    --select-pop-bg:    var(--surface-2);
    --select-pop-text:  var(--text);
    --select-caret:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba(233,239,243,0.7)'%3E%3Cpath d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E");

    /* Bandeaux signature bleu nuit (header, pied, barre d'onglets mobile),
       identiques dans les deux thèmes : rappel du #0c0f25 institutionnel
       (mails, logo, affiches). En sombre ils reprennent la teinte de la page,
       seul le liseré --band-border marque la limite ; le filet doré n'apparaît
       qu'en thème clair (menu.css). */
    --band-bg:       #0c0f25;
    --band-text:     #e9eaf3;
    --band-muted:    #9396b4;
    --band-active:   #f3dca7;
    --band-soft:     rgba(230, 201, 138, 0.16);
    --band-border:   rgba(255, 255, 255, 0.09);
    --band-hover:    rgba(255, 255, 255, 0.07);
    --band-glass:    rgba(12, 15, 37, 0.72);
    --band-filet:    #e6c98a;

    /* Sémantiques (sobres) */
    --success:       #4fae8b;
    --danger:        #e2625b;
    --danger-strong: #ef7a73;
    --warning:       #e0ab33;
    --success-soft:  rgba(79, 174, 139, 0.14);
    --danger-soft:   rgba(226, 98, 91, 0.13);
    --danger-line:   rgba(226, 98, 91, 0.4);
    --warning-soft:  rgba(224, 171, 51, 0.13);

    /* Géométrie */
    --radius:        14px;
    --radius-sm:     10px;
    --radius-lg:     16px;   /* cartes premium (modales) */
    --navbar-height: 86px;

    /* ---- Alias de compatibilité (anciennes variables) ----
       On garde les noms historiques mais on les fait pointer
       vers le nouveau système : tout le CSS existant suit. */
    --white-color:                 var(--text);
    --main-dark-color:             var(--bg);
    --main-dark-color-transparent: rgba(12, 15, 37, 0.85);
    --main-container-color:        var(--surface-3);   /* était clair #f1eee9 */
    --secondary-container-color:   var(--surface-1);   /* était clair #faf8f6 */
    --link-default-color:          var(--gold);
    --link-hover-default-color:    var(--gold-strong);

    /* ---- Mapping Bootstrap (réutiliser les composants) ---- */
    --bs-body-bg:          var(--bg);
    --bs-body-color:       var(--text);
    --bs-border-color:     var(--border-strong);
    --bs-link-color:       var(--gold);
    --bs-link-color-rgb:   230, 201, 138;
    --bs-link-hover-color: var(--gold-strong);
    --bs-emphasis-color:   var(--text);
}

/* =========================================================
   Thème CLAIR — « papier assaini » froid, accordé au bleu nuit.
   On ne surcharge que les tokens qui changent ; tout le CSS qui
   passe par les variables suit automatiquement. Les bandeaux
   (--band-*) restent bleu nuit dans les deux thèmes.
   POC validé : design-poc/theme-clair.html
   ========================================================= */
:root[data-theme="light"] {
    color-scheme: light;

    --bg:            #e9eaef;   /* clair froid, légère pointe bleu nuit */
    --surface-1:     #f5f5f9;
    --surface-2:     #ffffff;
    --surface-2-hov: #f3f3f8;
    --surface-3:     #e4e5ed;

    --border:        rgba(12, 15, 37, 0.12);
    --border-strong: rgba(12, 15, 37, 0.20);
    --shadow:        0 10px 26px rgba(12, 15, 37, 0.10);
    --shadow-sm:     0 2px 8px rgba(12, 15, 37, 0.07);

    --text:          #131635;   /* encre bleu nuit (proche du #0c0f25) */
    --text-muted:    #4a4e70;
    --text-faint:    #7f829c;

    /* Doré : bronze foncé en texte (lisible sur clair), vif en remplissage. */
    --gold:          #8a611a;
    --gold-strong:   #6f4d12;
    --gold-soft:     rgba(138, 97, 26, 0.13);
    --gold-fill:        #e3bd6f;
    --gold-fill-hover:  #d3aa54;
    --gold-ink:         #3a2c10;

    --success:       #2f8f6b;
    --success-soft:  rgba(47, 143, 107, 0.13);
    --danger:        #c34039;
    --danger-strong: #a5322c;
    --danger-soft:   rgba(195, 64, 57, 0.10);
    --danger-line:   rgba(195, 64, 57, 0.38);
    --warning:       #a9711a;
    --warning-soft:  rgba(169, 113, 26, 0.13);

    --hover:         rgba(12, 15, 37, 0.055);

    /* Chevron des listes : encre sombre (le clair disparaissait sur --surface-3).
       --select-pop-* suivent d'eux-mêmes : ils pointent sur --surface-2/--text. */
    --select-caret:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba(19,22,53,0.7)'%3E%3Cpath d='M1.5 5.5l6 6 6-6'/%3E%3C/svg%3E");

    /* Header : bleu nuit franc (le blur reste juste perceptible au scroll). */
    --band-glass:    rgba(12, 15, 37, 0.96);

    /* Pas de halo sur fond clair : la lumière bleue n'y a rien à éclairer. */
    --halo-op:       0;

    /* Offcanvas mobile : panneau clair translucide (texte sombre lisible dessus). */
    --main-dark-color-transparent: rgba(240, 241, 245, 0.88);
}