/*
| Charte graphique Naef — septembre 2026
|
| Sources : « [NAEF]_Mini charte graphique_2026 » (planches « Couleurs »,
| « Typographie », « Système graphique ») et la bibliothèque Figma
| « NAEF - Design System 2026 », collection « Eléments de base ».
|
| La charte donne les quatre couleurs de la palette principale en hexadécimal.
| Les déclinaisons 50 / 75 / 100 / 150 % n'y figurent qu'en aplats, sans valeur
| écrite : elles sont relevées au pixel sur la planche « Déclinaisons de teintes ».
|
| Cette feuille se charge AVANT toutes les autres et ne contient que des
| variables et les redéfinitions Bootstrap qui en découlent. Toute couleur de
| marque passe par une variable d'ici : plus aucun #ff0000 en dur ailleurs,
| sinon le prochain rebranding recommence la chasse fichier par fichier.
*/

:root {
    /*--------------- Palette principale ---------------*/
    --naef-blanc: #ffffff;
    --naef-blanc-casse: #faf6f0;
    --naef-blanc-casse-150: #e6e2df;

    --naef-nuit-noire: #040c31;
    --naef-nuit-noire-75: #424964;
    --naef-nuit-noire-50: #808597;

    --naef-groseille: #cd2d43;
    --naef-groseille-150: #9e2133;
    --naef-groseille-50: #e29099;

    /* La charte nomme cette couleur « Quartz 50 % » : c'est la teinte de référence. */
    --naef-quartz: #e2e7ec;
    --naef-quartz-100: #c4cfda;
    --naef-quartz-150: #7a8898;

    /*--------------- Typographie ---------------*/
    /* Onest medium pour les titres, Inter regular pour le texte courant. */
    --naef-police-titre: "Onest", "Segoe UI", system-ui, sans-serif;
    --naef-police-texte: "Inter", "Segoe UI", system-ui, sans-serif;

    /*--------------- Système graphique ---------------*/
    /* Le « bloc modulable » de la charte : un carré dont un seul angle est arrondi. */
    --naef-rayon: 4px;
    --naef-rayon-bloc: 20px;

    /*--------------- Rôles ---------------*/
    /*
    | L'accent porte l'identité de la session : groseille pour un accès copropriété
    | (comité, contrôleur), nuit noire pour un accès individuel. C'est la traduction
    | du couple rouge / bleu clair d'avant 2026, les deux seules couleurs de la
    | palette qui tiennent du texte blanc.
    */
    --v-accent: var(--naef-groseille);
    --v-accent-survol: var(--naef-groseille-150);
    --v-accent-doux: var(--naef-groseille-50);
    --v-accent-contraste: var(--naef-blanc);

    --v-fond: var(--naef-blanc-casse);
    --v-surface: var(--naef-blanc);
    --v-surface-alt: var(--naef-blanc-casse);
    --v-surface-forte: var(--naef-quartz);

    --v-texte: var(--naef-nuit-noire);
    --v-texte-doux: var(--naef-nuit-noire-75);
    --v-texte-faible: var(--naef-nuit-noire-50);
    --v-texte-contraste: var(--naef-blanc);

    --v-bordure: var(--naef-quartz);
    --v-bordure-forte: var(--naef-quartz-100);

    /* Couleurs de statut : hors charte, elles disent un état et non la marque. */
    --v-succes: #1f7244;
    --v-attente: #fe9600;
    --v-neutre: var(--naef-quartz-150);
}

body.layout-individuel {
    --v-accent: var(--naef-nuit-noire);
    --v-accent-survol: var(--naef-nuit-noire-75);
    --v-accent-doux: var(--naef-nuit-noire-50);
}

/*--------------- Socle typographique ---------------*/
body {
    font-family: var(--naef-police-texte);
    color: var(--v-texte);
    background-color: var(--v-fond);
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--naef-police-titre);
    font-weight: 500;
    color: var(--v-texte);
}

/*
| Le surtitre de la charte : Onest en capitales, interlettré.
| Utilisé sur les titres de cartes et les en-têtes de tableau.
*/
.naef-surtitre {
    font-family: var(--naef-police-titre);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.78em;
}

/*
|--------------------------------------------------------------------------
| Redéfinitions Bootstrap 4
|--------------------------------------------------------------------------
|
| bootstrap.min.css est vendorisé et versionné tel quel : on ne le retouche
| pas, on repeint par-dessus les seules classes que les vues emploient
| (relevé : bg-danger, btn-danger, btn-primary, btn-info, btn-secondary,
| btn-warning, text-muted, text-light, text-white, bg-red).
|
| « danger » ne dit plus un danger dans ces vues, il dit la marque : la barre
| de navigation, le sélecteur d'immeuble et les boutons d'action l'emploient.
| Il prend donc l'accent de la session, pas un rouge d'alerte.
*/
.bg-danger {
    background-color: var(--v-accent) !important;
}

.text-danger {
    color: var(--v-accent) !important;
}

.border-danger {
    border-color: var(--v-accent) !important;
}

.btn-danger,
.btn-danger:focus,
.btn-danger.focus {
    background-color: var(--v-accent);
    border-color: var(--v-accent);
    color: var(--v-accent-contraste);
}

.btn-danger:hover,
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
    background-color: var(--v-accent-survol);
    border-color: var(--v-accent-survol);
    color: var(--v-accent-contraste);
}

.btn-danger:focus,
.btn-danger.focus,
.btn-danger:not(:disabled):not(.disabled):active:focus,
.show > .btn-danger.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem var(--v-accent-doux);
}

.btn-outline-danger {
    color: var(--v-accent);
    border-color: var(--v-accent);
}

.btn-outline-danger:hover {
    background-color: var(--v-accent);
    border-color: var(--v-accent);
    color: var(--v-accent-contraste);
}

/* Le bouton primaire est l'action neutre : nuit noire, jamais le bleu Bootstrap. */
.btn-primary,
.btn-primary:focus,
.btn-primary.focus {
    background-color: var(--naef-nuit-noire);
    border-color: var(--naef-nuit-noire);
    color: var(--naef-blanc);
}

.btn-primary:hover,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--naef-nuit-noire-75);
    border-color: var(--naef-nuit-noire-75);
    color: var(--naef-blanc);
}

.btn-primary:focus,
.btn-primary.focus {
    box-shadow: 0 0 0 0.2rem var(--naef-quartz-100);
}

.btn-info,
.btn-info:focus,
.btn-info.focus {
    background-color: var(--naef-nuit-noire-75);
    border-color: var(--naef-nuit-noire-75);
    color: var(--naef-blanc);
}

.btn-info:hover,
.btn-info:not(:disabled):not(.disabled):active {
    background-color: var(--naef-nuit-noire);
    border-color: var(--naef-nuit-noire);
    color: var(--naef-blanc);
}

.btn-secondary,
.btn-secondary:focus,
.btn-secondary.focus {
    background-color: var(--naef-quartz);
    border-color: var(--naef-quartz-100);
    color: var(--v-texte);
}

.btn-secondary:hover,
.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--naef-quartz-100);
    border-color: var(--naef-quartz-100);
    color: var(--v-texte);
}

.text-muted {
    color: var(--v-texte-faible) !important;
}

/* Un lien sans classe prend l'accent, comme sur naef.ch. */
a {
    color: var(--v-accent);
}

a:hover,
a:focus {
    color: var(--v-accent-survol);
}

.alert-warning {
    background-color: var(--naef-blanc-casse-150);
    border-color: var(--naef-quartz-100);
    color: var(--v-texte);
}

.alert-danger {
    background-color: var(--naef-groseille-50);
    border-color: var(--v-accent);
    color: var(--naef-groseille-150);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--naef-quartz);
    color: var(--v-texte);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--v-accent);
    color: var(--v-accent-contraste);
}

input[type="password"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus,
.form-control:focus {
    border-color: var(--v-accent);
    box-shadow: 0 0 0 0.15rem var(--v-accent-doux);
    outline: none;
}

/*--------------- Bloc modulable ---------------*/
/*
| L'angle unique arrondi de la charte. La règle est isolée pour qu'on puisse
| la retirer d'un bloc en réécrivant border-radius sans toucher au reste.
*/
.naef-bloc {
    border-radius: 0 var(--naef-rayon-bloc) 0 0;
}