/*
 * Pont Bootstrap 4 -> charte Naef 2026.
 *
 * A charger APRES bootstrap.min.css : le fichier ne fait que redefinir les
 * couleurs par defaut de Bootstrap (le bleu #007bff, le rouge #dc3545, les
 * alertes) avec les jetons de naef.css. Bootstrap n'est pas recompile depuis ses
 * sources Sass — il est livre minifie dans public/ — donc la seule facon de
 * changer ses couleurs sans le remplacer est de les surcharger ici.
 *
 * Rien d'autre que de la couleur : aucune geometrie, aucune taille. Un correctif
 * de mise en page n'a pas sa place dans ce fichier.
 */

/*----------------- Base -----------------*/
/*
 * naef.css pose deja ces regles, mais Bootstrap redefinit « body » apres lui, a
 * specificite egale : sans cette reprise, l'element body garde la pile de polices
 * et le gris #212529 de Bootstrap. Les enfants, eux, heritent bien de la charte.
 */
body {
	font-family: var(--naef-texte);
	color: var(--epro-texte);
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--naef-titre);
	font-weight: 500;
	color: var(--epro-texte);
}

/*----------------- Liens -----------------*/
a {
	color: var(--epro-accent);
}
a:hover,
a:focus {
	color: var(--epro-accent-fonce);
}

/*----------------- Boutons -----------------*/
/*
 * btn-danger est le bouton d'action de l'application (telecharger, valider,
 * ouvrir un devis) : il porte donc la couleur de marque, pas un rouge d'alerte.
 *
 * Tous les boutons prennent le rayon « Bouton » du design system, soit 100px : le
 * composant Bouton Rouge de la bibliotheque est une pilule, pas le rectangle a
 * 0.25rem de Bootstrap.
 */
.btn {
	border-radius: var(--naef-rayon-pilule);
}
.btn-danger,
.btn-primary {
	background-color: var(--epro-accent);
	border-color: var(--epro-accent);
	color: var(--naef-blanc);
}
.btn-danger:hover,
.btn-primary:hover,
.btn-danger:focus,
.btn-primary:focus,
.btn-danger:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled):active {
	background-color: var(--epro-accent-fonce);
	border-color: var(--epro-accent-fonce);
	color: var(--naef-blanc);
}
.btn-danger:focus,
.btn-primary:focus,
.btn-danger.focus,
.btn-primary.focus {
	box-shadow: 0 0 0 0.2rem rgba(205, 45, 67, 0.3);
}

.btn-secondary {
	background-color: var(--epro-total);
	border-color: var(--epro-total);
	color: var(--naef-blanc);
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active {
	background-color: var(--naef-nuit);
	border-color: var(--naef-nuit);
	color: var(--naef-blanc);
}

.btn-success {
	background-color: var(--epro-succes);
	border-color: var(--epro-succes);
	color: var(--naef-blanc);
}
.btn-success:hover,
.btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
	background-color: #175733;
	border-color: #175733;
	color: var(--naef-blanc);
}

.btn-light,
.btn-default {
	background-color: var(--naef-blanc);
	border-color: var(--epro-bordure-forte);
	color: var(--epro-texte);
}
.btn-light:hover,
.btn-default:hover {
	background-color: var(--epro-surface-douce);
	border-color: var(--epro-bordure-forte);
	color: var(--epro-texte);
}

.btn-outline-danger,
.btn-outline-primary {
	border-color: var(--epro-accent);
	color: var(--epro-accent);
}
.btn-outline-danger:hover,
.btn-outline-primary:hover {
	background-color: var(--epro-accent);
	border-color: var(--epro-accent);
	color: var(--naef-blanc);
}

.btn:focus,
.btn.focus {
	box-shadow: 0 0 0 0.2rem rgba(4, 12, 49, 0.15);
}

/*----------------- Champs de formulaire -----------------*/
.form-control,
.custom-select {
	border-color: var(--naef-quartz);
	border-radius: var(--naef-rayon-small);
	color: var(--epro-texte);
}
.form-control:focus,
.custom-select:focus {
	border-color: var(--naef-quartz-150);
	box-shadow: 0 0 0 0.2rem rgba(4, 12, 49, 0.12);
}
.form-control::placeholder {
	color: var(--epro-texte-discret);
}
.custom-control-input:checked ~ .custom-control-label::before {
	background-color: var(--epro-accent);
	border-color: var(--epro-accent);
}

/*----------------- Alertes -----------------*/
.alert-danger {
	background-color: rgba(205, 45, 67, 0.12);
	border-color: var(--naef-rouge-50);
	color: var(--naef-rouge-150);
}
.alert-success {
	background-color: rgba(31, 114, 68, 0.12);
	border-color: rgba(31, 114, 68, 0.35);
	color: #175733;
}
.alert-info {
	background-color: var(--naef-quartz-50);
	border-color: var(--naef-quartz);
	color: var(--naef-nuit);
}
.alert-warning {
	background-color: rgba(176, 122, 18, 0.12);
	border-color: rgba(176, 122, 18, 0.35);
	color: #7b550c;
}

/*----------------- Pastilles et divers -----------------*/
.badge-danger,
.badge-primary {
	background-color: var(--epro-accent);
	color: var(--naef-blanc);
}
.badge-secondary {
	background-color: var(--epro-total);
	color: var(--naef-blanc);
}
.badge-success {
	background-color: var(--epro-succes);
	color: var(--naef-blanc);
}

.text-muted {
	color: var(--epro-texte-doux) !important;
}
.text-danger {
	color: var(--epro-accent) !important;
}
.text-primary {
	color: var(--naef-nuit) !important;
}
.text-success {
	color: var(--epro-succes) !important;
}

/*
 * Cartes Bootstrap : surface blanche, filet Ecru Medium et rayon Regular, comme
 * les cartes du design system.
 */
.card {
	background-color: var(--epro-surface);
	border-color: var(--naef-ecru-medium);
	border-radius: var(--naef-rayon-regular);
}
.card-header,
.card-footer {
	background-color: var(--epro-surface-douce);
	border-color: var(--epro-bordure);
}
.card > .card-img-top,
.card > .card-header:first-child {
	border-radius: var(--naef-rayon-regular) var(--naef-rayon-regular) 0 0;
}

.dropdown-item.active,
.dropdown-item:active {
	background-color: var(--epro-accent);
	color: var(--naef-blanc);
}
.dropdown-item:hover,
.dropdown-item:focus {
	background-color: var(--epro-surface-douce);
	color: var(--epro-texte);
}

.page-link {
	color: var(--epro-accent);
}
.page-item.active .page-link {
	background-color: var(--epro-accent);
	border-color: var(--epro-accent);
	color: var(--naef-blanc);
}

.close {
	color: var(--epro-texte);
}

/*
 * bootstrap-select (selecteur d'immeubles, filtres de statistiques) : sa feuille
 * vient d'un CDN, ses etats actifs restent donc en bleu Bootstrap sans ceci.
 */
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu li.selected a {
	background-color: var(--epro-surface-douce);
	color: var(--epro-texte);
}
.bootstrap-select .dropdown-toggle:focus {
	outline-color: var(--naef-quartz-150) !important;
}