/*
 * ==========================================================
 * THEME GLOBAL — Bootstrap 5.3
 * Palette : corps / esprit / mouvement
 * ==========================================================
 *
 * Charger ce fichier APRÈS Bootstrap.
 *
 * Pour changer un thème, modifier uniquement les variables
 * --app-corps, --app-esprit et --app-mouvement.
 */

/* ==========================================================
   1. COULEURS DE RÉFÉRENCE
   ========================================================== */

:root {
    color-scheme: light;

    --app-corps: #B7412C;
    --app-esprit: #2E7171;
    --app-mouvement: #1D5680;

    /* Couleur du texte sur les fonds principaux */
    --app-theme-contrast: #FFFFFF;

    /* Pour les boutons outline et les liens */
    --app-theme-hover-mix: 15%;
    --app-theme-active-mix: 25%;

    /* ======================================================
       2. COULEURS DÉRIVÉES AUTOMATIQUEMENT
       ====================================================== */

    /* Corps */
    --app-corps-hover:
        color-mix(in srgb, var(--app-corps), black 15%);
    --app-corps-active:
        color-mix(in srgb, var(--app-corps), black 25%);
    --app-corps-border:
        color-mix(in srgb, var(--app-corps), black 20%);
    --app-corps-emphasis:
        color-mix(in srgb, var(--app-corps), black 40%);
    --app-corps-subtle:
        color-mix(in srgb, var(--app-corps), white 90%);

    /* Esprit */
    --app-esprit-hover:
        color-mix(in srgb, var(--app-esprit), black 15%);
    --app-esprit-active:
        color-mix(in srgb, var(--app-esprit), black 25%);
    --app-esprit-border:
        color-mix(in srgb, var(--app-esprit), black 20%);
    --app-esprit-emphasis:
        color-mix(in srgb, var(--app-esprit), black 40%);
    --app-esprit-subtle:
        color-mix(in srgb, var(--app-esprit), white 90%);

    /* Mouvement */
    --app-mouvement-hover:
        color-mix(in srgb, var(--app-mouvement), black 15%);
    --app-mouvement-active:
        color-mix(in srgb, var(--app-mouvement), black 25%);
    --app-mouvement-border:
        color-mix(in srgb, var(--app-mouvement), black 20%);
    --app-mouvement-emphasis:
        color-mix(in srgb, var(--app-mouvement), black 40%);
    --app-mouvement-subtle:
        color-mix(in srgb, var(--app-mouvement), white 90%);
}

/* ==========================================================
   3. CLASSES TEXTE
   ========================================================== */

.text-corps {
    color: var(--app-corps) !important;
}

.text-esprit {
    color: var(--app-esprit) !important;
}

.text-mouvement {
    color: var(--app-mouvement) !important;
}

/* Texte d'emphase : plus sombre pour les fonds clairs */

.text-corps-emphasis {
    color: var(--app-corps-emphasis) !important;
}

.text-esprit-emphasis {
    color: var(--app-esprit-emphasis) !important;
}

.text-mouvement-emphasis {
    color: var(--app-mouvement-emphasis) !important;
}

/* ==========================================================
   4. CLASSES FOND PRINCIPAL
   ========================================================== */

.bg-corps {
    background-color: var(--app-corps) !important;
}

.bg-esprit {
    background-color: var(--app-esprit) !important;
}

.bg-mouvement {
    background-color: var(--app-mouvement) !important;
}

/* ==========================================================
   5. CLASSES FOND + TEXTE CONTRASTÉ
   ========================================================== */

.bg-text-corps {
    color: var(--app-theme-contrast) !important;
    background-color: var(--app-corps) !important;
}

.bg-text-esprit {
    color: var(--app-theme-contrast) !important;
    background-color: var(--app-esprit) !important;
}

.bg-text-mouvement {
    color: var(--app-theme-contrast) !important;
    background-color: var(--app-mouvement) !important;
}

/* Les liens héritent du contraste du fond */

.bg-text-corps a,
.bg-text-esprit a,
.bg-text-mouvement a {
    color: inherit;
}

/* ==========================================================
   6. FONDS SUBTILS
   ========================================================== */

.bg-corps-subtle {
    background-color: var(--app-corps-subtle) !important;
}

.bg-esprit-subtle {
    background-color: var(--app-esprit-subtle) !important;
}

.bg-mouvement-subtle {
    background-color: var(--app-mouvement-subtle) !important;
}

/* ==========================================================
   7. BOUTONS PLEINS
   Compatible avec les états Bootstrap :
   normal, hover, focus, active et disabled.
   ========================================================== */

.btn-corps {
    --bs-btn-color: var(--app-theme-contrast);
    --bs-btn-bg: var(--app-corps);
    --bs-btn-border-color: var(--app-corps);

    --bs-btn-hover-color: var(--app-theme-contrast);
    --bs-btn-hover-bg: var(--app-corps-hover);
    --bs-btn-hover-border-color: var(--app-corps-border);

    --bs-btn-focus-shadow-rgb: 183, 65, 44;
    --bs-btn-focus-box-shadow:
        0 0 0 .25rem color-mix(in srgb, var(--app-corps) 40%, transparent);

    --bs-btn-active-color: var(--app-theme-contrast);
    --bs-btn-active-bg: var(--app-corps-active);
    --bs-btn-active-border-color: var(--app-corps-border);

    --bs-btn-disabled-color: var(--app-theme-contrast);
    --bs-btn-disabled-bg: var(--app-corps);
    --bs-btn-disabled-border-color: var(--app-corps);
}

.btn-esprit {
    --bs-btn-color: var(--app-theme-contrast);
    --bs-btn-bg: var(--app-esprit);
    --bs-btn-border-color: var(--app-esprit);

    --bs-btn-hover-color: var(--app-theme-contrast);
    --bs-btn-hover-bg: var(--app-esprit-hover);
    --bs-btn-hover-border-color: var(--app-esprit-border);

    --bs-btn-focus-box-shadow:
        0 0 0 .25rem color-mix(in srgb, var(--app-esprit) 40%, transparent);

    --bs-btn-active-color: var(--app-theme-contrast);
    --bs-btn-active-bg: var(--app-esprit-active);
    --bs-btn-active-border-color: var(--app-esprit-border);

    --bs-btn-disabled-color: var(--app-theme-contrast);
    --bs-btn-disabled-bg: var(--app-esprit);
    --bs-btn-disabled-border-color: var(--app-esprit);
}

.btn-mouvement {
    --bs-btn-color: var(--app-theme-contrast);
    --bs-btn-bg: var(--app-mouvement);
    --bs-btn-border-color: var(--app-mouvement);

    --bs-btn-hover-color: var(--app-theme-contrast);
    --bs-btn-hover-bg: var(--app-mouvement-hover);
    --bs-btn-hover-border-color: var(--app-mouvement-border);

    --bs-btn-focus-box-shadow:
        0 0 0 .25rem color-mix(in srgb, var(--app-mouvement) 40%, transparent);

    --bs-btn-active-color: var(--app-theme-contrast);
    --bs-btn-active-bg: var(--app-mouvement-active);
    --bs-btn-active-border-color: var(--app-mouvement-border);

    --bs-btn-disabled-color: var(--app-theme-contrast);
    --bs-btn-disabled-bg: var(--app-mouvement);
    --bs-btn-disabled-border-color: var(--app-mouvement);
}

/* ==========================================================
   8. BOUTONS OUTLINE
   ========================================================== */

.btn-outline-corps {
    --bs-btn-color: var(--app-corps);
    --bs-btn-border-color: var(--app-corps);

    --bs-btn-hover-color: var(--app-theme-contrast);
    --bs-btn-hover-bg: var(--app-corps);
    --bs-btn-hover-border-color: var(--app-corps);

    --bs-btn-focus-box-shadow:
        0 0 0 .25rem color-mix(in srgb, var(--app-corps) 40%, transparent);

    --bs-btn-active-color: var(--app-theme-contrast);
    --bs-btn-active-bg: var(--app-corps-active);
    --bs-btn-active-border-color: var(--app-corps-active);

    --bs-btn-disabled-color: var(--app-corps);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--app-corps);
}

.btn-outline-esprit {
    --bs-btn-color: var(--app-esprit);
    --bs-btn-border-color: var(--app-esprit);

    --bs-btn-hover-color: var(--app-theme-contrast);
    --bs-btn-hover-bg: var(--app-esprit);
    --bs-btn-hover-border-color: var(--app-esprit);

    --bs-btn-focus-box-shadow:
        0 0 0 .25rem color-mix(in srgb, var(--app-esprit) 40%, transparent);

    --bs-btn-active-color: var(--app-theme-contrast);
    --bs-btn-active-bg: var(--app-esprit-active);
    --bs-btn-active-border-color: var(--app-esprit-active);

    --bs-btn-disabled-color: var(--app-esprit);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--app-esprit);
}

.btn-outline-mouvement {
    --bs-btn-color: var(--app-mouvement);
    --bs-btn-border-color: var(--app-mouvement);

    --bs-btn-hover-color: var(--app-theme-contrast);
    --bs-btn-hover-bg: var(--app-mouvement);
    --bs-btn-hover-border-color: var(--app-mouvement);

    --bs-btn-focus-box-shadow:
        0 0 0 .25rem color-mix(in srgb, var(--app-mouvement) 40%, transparent);

    --bs-btn-active-color: var(--app-theme-contrast);
    --bs-btn-active-bg: var(--app-mouvement-active);
    --bs-btn-active-border-color: var(--app-mouvement-active);

    --bs-btn-disabled-color: var(--app-mouvement);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--app-mouvement);
}


/* ==========================================================
   BORDURES SUBTILES
   Alignées sur les fonds subtils de chaque thème
   ========================================================== */

.border-corps-subtle {
    border-color: var(--app-corps-subtle) !important;
}

.border-esprit-subtle {
    border-color: var(--app-esprit-subtle) !important;
}

.border-mouvement-subtle {
    border-color: var(--app-mouvement-subtle) !important;
}