/* =========================================================
   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 (dérivés du teal-navy d'origine #01283b) */
    --bg:            #06202c;
    --surface-1:     #0c2c3b;   /* panneau de contenu */
    --surface-2:     #11384b;   /* cartes */
    --surface-2-hov: #16465c;
    --surface-3:     #0a2733;   /* zones internes, inputs, lignes */

    /* 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:          #e9eff3;
    --text-muted:    #93a8b4;
    --text-faint:    #6e8794;

    /* 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:    #253738;

    /* 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);

    /* Bandeaux signature teal-navy (header + filet doré), identiques dans les
       deux thèmes : rappel du #06202c institutionnel (mails, logo, affiches). */
    --band-bg:       #06202c;
    --band-text:     #e9eff3;
    --band-muted:    #93a8b4;
    --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(6, 32, 44, 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(6, 32, 44, 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 teal-navy.
   On ne surcharge que les tokens qui changent ; tout le CSS qui
   passe par les variables suit automatiquement. Les bandeaux
   (--band-*) restent teal-navy dans les deux thèmes.
   POC validé : design-poc/theme-clair.html
   ========================================================= */
:root[data-theme="light"] {
    color-scheme: light;

    --bg:            #e9edef;   /* clair froid, légère pointe teal */
    --surface-1:     #f5f8f9;
    --surface-2:     #ffffff;
    --surface-2-hov: #f3f7f8;
    --surface-3:     #e4eaed;

    --border:        rgba(6, 32, 44, 0.12);
    --border-strong: rgba(6, 32, 44, 0.20);
    --shadow:        0 10px 26px rgba(6, 32, 44, 0.10);
    --shadow-sm:     0 2px 8px rgba(6, 32, 44, 0.07);

    --text:          #0f2c39;   /* encre teal-navy (proche du #06202c) */
    --text-muted:    #4a6470;
    --text-faint:    #7f929c;

    /* 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(6, 32, 44, 0.055);

    /* Header : teal-navy franc (le blur reste juste perceptible au scroll). */
    --band-glass:    rgba(6, 32, 44, 0.96);

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