/*
 * charte-fnce.css : CHARTE GRAPHIQUE de Consultation FNCE (lot 7, décision D8, 15/10/2026).
 * Couleurs tirées du logo : ORANGE, VERT, BLANC.
 *
 * UN SEUL fichier de tokens et de surcharges. Pour changer la charte : modifier le bloc « :root » de la section 1, rien d'autre.
 * Document de conception, tableau de contraste, mapping et checklist d'intégration : .dev/avancement/lot7-charte.md.
 *
 * ORDRE DE CHARGEMENT (impératif) : ce fichier est chargé EN DERNIER, après styles/css/base.css, css/fnce.css, les CSS des vendors
 * (leaflet, markercluster, datatables) et le CSS de la page (css/pages/*.css, css/connexion.css). Il surcharge par ordre de source,
 * à spécificité égale ; il ne modifie JAMAIS un fichier de vendors ni base.css (généré par Sass).
 *   <link rel="stylesheet" href="css/charte-fnce.css">
 *
 * RÈGLE D'USAGE DES COULEURS
 *   BLANC  : fonds et surfaces dominants (cartes, en-tête, menu, champs).
 *   VERT   : couleur principale (navigation, boutons d'action, liens, titres, barres et jauges).
 *   ORANGE : accent (repère du menu actif, liseré de l'en-tête, bordure des tuiles, lettres des blocs, pastilles de regroupement,
 *            valeurs clés « payés »).
 *   JAMAIS d'orange clair (--fnce-orange) pour du TEXTE sur fond blanc ou clair (2,28:1 sur blanc, sous le seuil WCAG AA de 4,5:1).
 *   Texte orange = --fnce-orange-texte (5,61:1 sur blanc). Texte sur FOND orange = --fnce-texte (6,50:1). Un fond orange ne porte
 *   jamais seul une information : un libellé ou un nombre l'accompagne toujours.
 *
 * COMPATIBILITÉ : CSP stricte respectée (aucun style="", aucun @import, aucune police ni image externe, aucune url()). Les halos
 * translucides utilisent color-mix() (Chrome 111+, Firefox 113+, Safari 16.2+), comme css/connexion.css.
 * Aucun !important, SAUF là où le gabarit ArchitectUI en pose un lui-même (utilitaires .text-*, .bg-*, .border-* et liens d'onglets) :
 * chaque cas est signalé « !important : le gabarit en pose un ».
 * Aucun changement de comportement ni de contenu : couleurs, états hover / focus / actif et un liseré décoratif seulement.
 *
 * SECTIONS
 *   1. Tokens (:root)                      8. Tableaux, pagination, onglets
 *   2. Base : texte, liens, focus          9. Badges, pastilles, repères
 *   3. Coque : en-tête, menu, fil          10. Alertes, états, chargeurs
 *   4. Boutons                             11. Carte : Leaflet et pastilles de regroupement
 *   5. Formulaires                         12. Page de connexion
 *   6. Cartes, blocs, tuiles               13. Divers : mentions légales, infobulle
 *   7. Jauges, barres, histogramme
 */

/* ==========================================================================================================================
   1. TOKENS
   Les valeurs de teinte sont LITTÉRALES (pas de calcul) pour que les ratios de contraste du document lot7-charte.md restent exacts.
   Après toute modification : relancer contraste-charte.js (dossier de la maquette), qui relit ce bloc et recalcule tous les couples.
   Les noms --fnce-vert, --fnce-vert-clair, --fnce-orange, --fnce-orange-texte et --fnce-gris-texte existent déjà dans base.css et sont
   lus par tous les CSS de pages : les redéfinir ici recolore l'application entière sans toucher aux pages.
   ========================================================================================================================== */
:root {
  /* Couleurs du logo (échantillonnées : voir lot7-charte.md §1). Les deux seules valeurs « de marque ». */
  --fnce-logo-vert: #207838;
  --fnce-logo-orange: #F09808;

  /* Vert : principal, survol, actif (appuyé), foncé (texte sur fond teinté, focus), clair (survol, repère), très clair (fond de page). */
  --fnce-vert: var(--fnce-logo-vert);
  --fnce-vert-survol: #1B6630;
  --fnce-vert-actif: #185A2A;
  --fnce-vert-fonce: #134822;
  --fnce-vert-clair: #E9F2EB;
  --fnce-vert-tres-clair: #F4F8F5;

  /* Orange : accent (aplat, jamais en texte), survol et actif d'un aplat, texte (sur clair), texte foncé (alertes), fond clair. */
  --fnce-orange: var(--fnce-logo-orange);
  --fnce-orange-survol: #D88907;
  --fnce-orange-actif: #D08005;
  --fnce-orange-texte: #9A5700;
  --fnce-orange-fonce: #5A3500;
  --fnce-orange-clair: #FEF3DF;

  /* Blanc et neutres (légèrement teintés de vert pour rester dans la charte). */
  --fnce-blanc: #FFFFFF;
  --fnce-surface: var(--fnce-blanc);
  --fnce-fond-page: var(--fnce-vert-tres-clair);
  --fnce-texte: #1F2A24;
  --fnce-gris-texte: #55625A;
  --fnce-bordure: #D6DED8;        /* bordures décoratives (cartes, repères) */
  --fnce-bordure-champ: #78857C;  /* contour des champs et des éléments d'interface : 3:1 au moins (WCAG 1.4.11) */
  --fnce-filet: #E6ECE8;          /* filets de séparation, piste des jauges et des barres */

  /* États, cohérents avec la charte : succès = vert, avertissement = orange, erreur = rouge, information = neutre. */
  --fnce-succes: var(--fnce-vert);
  --fnce-succes-fond: var(--fnce-vert-clair);
  --fnce-succes-texte: var(--fnce-vert-fonce);
  --fnce-avertissement: var(--fnce-orange);
  --fnce-avertissement-fond: var(--fnce-orange-clair);
  --fnce-avertissement-texte: var(--fnce-orange-fonce);
  --fnce-erreur: #B02A37;
  --fnce-erreur-fond: #FCEBED;
  --fnce-erreur-texte: #7F1D28;
  --fnce-info-fond: #EEF3F0;
  --fnce-info-texte: var(--fnce-texte);
  --fnce-info-bordure: var(--fnce-bordure);

  /* Anneau de focus clavier (WCAG 2.4.7) : vert foncé, 3 px, décalé de 2 px. */
  --fnce-focus: var(--fnce-vert-fonce);
  --fnce-focus-largeur: 3px;
  --fnce-focus-decalage: 2px;
}

/* ==========================================================================================================================
   2. BASE : texte, liens, utilitaires de couleur, focus
   ========================================================================================================================== */
body {
  color: var(--fnce-texte);
}

a {
  color: var(--fnce-vert);
}

a:hover {
  color: var(--fnce-vert-fonce);
}

/* Anneau de focus global (remplace #0b6647 compilé dans base.css). Les règles plus spécifiques (décalage -3px du menu, valeurs
   tronquées de la fiche) gardent leur propre décalage. */
:focus-visible {
  outline: var(--fnce-focus-largeur) solid var(--fnce-focus);
  outline-offset: var(--fnce-focus-decalage);
}

/* Intégration lot 7 : base.css pose `.btn:focus { outline: 0 }` (spécificité 0,2,0 > :focus-visible) : les boutons n'avaient aucun anneau au clavier (WCAG 2.4.7). */
.btn:focus-visible,
.btn-check:focus-visible + .btn {
  outline: var(--fnce-focus-largeur) solid var(--fnce-focus);
  outline-offset: var(--fnce-focus-decalage);
}

/* Utilitaires du gabarit : !important : le gabarit en pose un (.text-*, .bg-*, .border-*). */
.text-primary {
  color: var(--fnce-vert) !important;
}

.link-primary {
  color: var(--fnce-vert);
}

.link-primary:hover,
.link-primary:focus {
  color: var(--fnce-vert-fonce);
}

.text-muted {
  color: var(--fnce-gris-texte) !important;
}

/* Texte « accent » : jamais l'orange clair, seulement l'orange texte (4,5:1 au moins sur blanc). */
.text-accent {
  color: var(--fnce-orange-texte) !important;
}

.link-accent {
  color: var(--fnce-orange-texte);
}

.bg-primary,
.bg-success {
  background-color: var(--fnce-vert) !important;
}

.bg-accent,
.bg-warning {
  color: var(--fnce-texte);
  background-color: var(--fnce-orange) !important;
}

.bg-danger {
  background-color: var(--fnce-erreur) !important;
}

.bg-info,
.bg-secondary {
  background-color: var(--fnce-gris-texte) !important;
}

.border-primary,
.border-success {
  border-color: var(--fnce-vert) !important;
}

.border-accent,
.border-warning {
  border-color: var(--fnce-orange) !important;
}

.border-danger {
  border-color: var(--fnce-erreur) !important;
}

/* ==========================================================================================================================
   3. COQUE : en-tête, menu latéral, fil d'Ariane
   ========================================================================================================================== */
.app-container {
  background: var(--fnce-fond-page);
}

/* Liseré de marque en pied de l'en-tête : vert, puis orange (même découpage 72 / 28 que le panneau de la page de connexion).
   Décoratif (aria-hidden par nature : pseudo-élément) ; pour le retirer, supprimer cette seule règle. */
.app-header::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg, var(--fnce-vert) 0 72%, var(--fnce-orange) 72% 100%);
  pointer-events: none;
}

.app-header .app-header__logo,
.app-sidebar {
  border-right-color: var(--fnce-bordure);
}

.app-header .fnce-marque {
  color: var(--fnce-vert);
}

.app-header .fnce-marque:hover {
  color: var(--fnce-vert-fonce);
}

.app-header .fnce-utilisateur {
  color: var(--fnce-texte);
}

.app-header .fnce-utilisateur .fa {
  color: var(--fnce-vert);
}

.app-header .fnce-bouton-menu:hover {
  background: var(--fnce-vert-clair);
}

/* Bouton de menu (hamburger) : barres vertes. */
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after,
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after {
  background-color: var(--fnce-vert);
}

/* Fil d'Ariane. */
.app-header .fnce-fil .breadcrumb-item a {
  color: var(--fnce-gris-texte);
}

.app-header .fnce-fil .breadcrumb-item a:hover {
  color: var(--fnce-vert-fonce);
}

.app-header .fnce-fil .breadcrumb-item.active {
  color: var(--fnce-texte);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--fnce-gris-texte);
}

/* Menu latéral : texte encre, survol et entrée active sur fond vert clair, repère orange à gauche (non textuel). */
.app-sidebar__heading {
  color: var(--fnce-gris-texte);
}

.vertical-nav-menu li a {
  color: var(--fnce-texte);
}

.vertical-nav-menu li a:hover {
  color: var(--fnce-vert-fonce);
  background: var(--fnce-vert-clair);
}

.vertical-nav-menu li a.mm-active,
.vertical-nav-menu li a[aria-current="page"] {
  color: var(--fnce-vert-fonce);
  background: var(--fnce-vert-clair);
  box-shadow: inset 4px 0 0 var(--fnce-orange);
}

.vertical-nav-menu i.metismenu-icon {
  color: var(--fnce-vert);
}

.vertical-nav-menu li a.mm-active i.metismenu-icon,
.vertical-nav-menu li a[aria-current="page"] i.metismenu-icon {
  color: var(--fnce-orange-texte);
}

/* ==========================================================================================================================
   4. BOUTONS
   Primaire = vert plein ; secondaire = contour gris-vert ; contour = contour vert ; accent = orange plein (texte encre).
   Désactivé : couleurs de repos conservées, l'atténuation (opacity) reste celle du gabarit.
   ========================================================================================================================== */

/* --- Primaire (et succès) ------------------------------------------------------------------------------------------------- */
.btn-primary,
.btn-success {
  color: var(--fnce-blanc);
  background-color: var(--fnce-vert);
  border-color: var(--fnce-vert);
}

.btn-primary:hover,
.btn-success:hover {
  color: var(--fnce-blanc);
  background-color: var(--fnce-vert-survol);
  border-color: var(--fnce-vert-survol);
}

.btn-check:focus + .btn-primary,
.btn-primary:focus,
.btn-check:focus + .btn-success,
.btn-success:focus {
  color: var(--fnce-blanc);
  background-color: var(--fnce-vert-survol);
  border-color: var(--fnce-vert-survol);
  box-shadow: none;
}

.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle,
.btn-check:checked + .btn-success,
.btn-check:active + .btn-success,
.btn-success:active,
.btn-success.active {
  color: var(--fnce-blanc);
  background-color: var(--fnce-vert-actif);
  border-color: var(--fnce-vert-actif);
}

.btn-check:checked + .btn-primary:focus,
.btn-check:active + .btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: none;
}

.btn-primary:disabled,
.btn-primary.disabled,
.btn-success:disabled,
.btn-success.disabled {
  color: var(--fnce-blanc);
  background-color: var(--fnce-vert);
  border-color: var(--fnce-vert);
}

/* --- Contour vert --------------------------------------------------------------------------------------------------------------- */
.btn-outline-primary {
  color: var(--fnce-vert);
  border-color: var(--fnce-vert);
}

.btn-outline-primary:hover {
  color: var(--fnce-blanc);
  background-color: var(--fnce-vert);
  border-color: var(--fnce-vert);
}

.btn-check:focus + .btn-outline-primary,
.btn-outline-primary:focus {
  box-shadow: none;
}

.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active,
.btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
  color: var(--fnce-blanc);
  background-color: var(--fnce-vert-actif);
  border-color: var(--fnce-vert-actif);
}

.btn-check:checked + .btn-outline-primary:focus,
.btn-check:active + .btn-outline-primary:focus,
.btn-outline-primary:active:focus,
.btn-outline-primary.active:focus,
.btn-outline-primary.dropdown-toggle.show:focus {
  box-shadow: none;
}

.btn-outline-primary:disabled,
.btn-outline-primary.disabled {
  color: var(--fnce-vert);
  background-color: transparent;
}

/* --- Secondaire (contour gris-vert) et secondaire plein ---------------------------------------------------------------------- */
.btn-outline-secondary {
  color: var(--fnce-gris-texte);
  border-color: var(--fnce-gris-texte);
}

.btn-outline-secondary:hover {
  color: var(--fnce-blanc);
  background-color: var(--fnce-gris-texte);
  border-color: var(--fnce-gris-texte);
}

.btn-check:focus + .btn-outline-secondary,
.btn-outline-secondary:focus {
  box-shadow: none;
}

.btn-check:checked + .btn-outline-secondary,
.btn-check:active + .btn-outline-secondary,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.btn-outline-secondary.dropdown-toggle.show {
  color: var(--fnce-blanc);
  background-color: var(--fnce-texte);
  border-color: var(--fnce-texte);
}

.btn-outline-secondary:disabled,
.btn-outline-secondary.disabled {
  color: var(--fnce-gris-texte);
  background-color: transparent;
}

.btn-secondary {
  color: var(--fnce-blanc);
  background-color: var(--fnce-gris-texte);
  border-color: var(--fnce-gris-texte);
}

.btn-secondary:hover,
.btn-secondary:focus {
  color: var(--fnce-blanc);
  background-color: var(--fnce-texte);
  border-color: var(--fnce-texte);
  box-shadow: none;
}

.btn-secondary:disabled,
.btn-secondary.disabled {
  color: var(--fnce-blanc);
  background-color: var(--fnce-gris-texte);
  border-color: var(--fnce-gris-texte);
}

/* --- Accent orange (et avertissement) : aplat orange, texte encre ------------------------------------------------------------- */
.btn-accent,
.btn-warning {
  color: var(--fnce-texte);
  background-color: var(--fnce-orange);
  border-color: var(--fnce-orange);
}

.btn-accent:hover,
.btn-accent:focus,
.btn-warning:hover,
.btn-warning:focus {
  color: var(--fnce-texte);
  background-color: var(--fnce-orange-survol);
  border-color: var(--fnce-orange-survol);
  box-shadow: none;
}

.btn-check:checked + .btn-accent,
.btn-check:active + .btn-accent,
.btn-accent:active,
.btn-accent.active,
.btn-warning:active,
.btn-warning.active {
  color: var(--fnce-texte);
  background-color: var(--fnce-orange-actif);
  border-color: var(--fnce-orange-actif);
}

.btn-accent:disabled,
.btn-accent.disabled,
.btn-warning:disabled,
.btn-warning.disabled {
  color: var(--fnce-texte);
  background-color: var(--fnce-orange);
  border-color: var(--fnce-orange);
}

/* Contour orange : le TEXTE est l'orange texte (jamais l'orange clair), l'aplat n'apparaît qu'au survol, avec le texte encre. */
.btn-outline-accent {
  color: var(--fnce-orange-texte);
  border-color: var(--fnce-orange-texte);
}

.btn-outline-accent:hover {
  color: var(--fnce-texte);
  background-color: var(--fnce-orange);
  border-color: var(--fnce-orange);
}

.btn-check:checked + .btn-outline-accent,
.btn-check:active + .btn-outline-accent,
.btn-outline-accent:active,
.btn-outline-accent.active,
.btn-outline-accent.dropdown-toggle.show {
  color: var(--fnce-texte);
  background-color: var(--fnce-orange-survol);
  border-color: var(--fnce-orange-survol);
}

.btn-outline-accent:disabled,
.btn-outline-accent.disabled {
  color: var(--fnce-orange-texte);
  background-color: transparent;
}

/* --- Danger --------------------------------------------------------------------------------------------------------------------- */
.btn-danger {
  color: var(--fnce-blanc);
  background-color: var(--fnce-erreur);
  border-color: var(--fnce-erreur);
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  color: var(--fnce-blanc);
  background-color: var(--fnce-erreur-texte);
  border-color: var(--fnce-erreur-texte);
  box-shadow: none;
}

/* --- Bouton-lien ----------------------------------------------------------------------------------------------------------------- */
.btn-link {
  color: var(--fnce-vert);
}

.btn-link:hover {
  color: var(--fnce-vert-fonce);
}

/* ==========================================================================================================================
   5. FORMULAIRES : champs, focus, validation
   ========================================================================================================================== */
.form-control,
.form-select {
  color: var(--fnce-texte);
  border-color: var(--fnce-bordure-champ);
}

.form-control::placeholder {
  color: var(--fnce-gris-texte);
  opacity: 1;
}

/* Focus : contour vert + anneau net (le gabarit ne posait qu'un halo, sans outline). */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  color: var(--fnce-texte);
  border-color: var(--fnce-vert);
  outline: var(--fnce-focus-largeur) solid var(--fnce-focus);
  outline-offset: 1px;
  box-shadow: none;
}

/* Le gabarit supprime l'outline de ces deux contrôles au focus (outline: 0) : l'anneau clavier est rétabli. */
.page-link:focus-visible,
.btn-close:focus-visible {
  outline: var(--fnce-focus-largeur) solid var(--fnce-focus);
  outline-offset: var(--fnce-focus-decalage);
}

.btn-close:focus {
  box-shadow: none;
}

.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
  background-color: var(--fnce-vert);
  border-color: var(--fnce-vert);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--fnce-erreur);
}

.invalid-feedback {
  color: var(--fnce-erreur);
}

/* ==========================================================================================================================
   6. CARTES, BLOCS, TUILES
   ========================================================================================================================== */

/* Tuiles du tableau de bord : liseré orange à gauche (accent), valeur verte ; les deux tuiles « payés » (valeurs clés) en orange texte. */
.tdb-tuile {
  border-left-color: var(--fnce-orange);
}

.tdb-tuile__valeur {
  color: var(--fnce-vert);
}

.tdb-tuile--payes .tdb-tuile__valeur,
.tdb-tuile--pct-payes .tdb-tuile__valeur {
  color: var(--fnce-orange-texte);
}

/* Lettres des blocs de la fiche (C, B, G, F) : pastille orange, lettre encre (6,50:1). */
.fiche-bloc__lettre {
  color: var(--fnce-texte);
  background: var(--fnce-orange);
}

/* Filets, bordures et fonds neutres des pages (valeurs en dur dans les CSS de pages, ramenées aux neutres de la charte). */
.fiche-ligne,
.fiche-doc {
  border-bottom-color: var(--fnce-filet);
}

.fiche-photo__bouton,
.fiche-vignette__bouton {
  background: var(--fnce-fond-page);
  border-color: var(--fnce-bordure);
}

.fiche-photo__repli,
.fiche-vignette__repli {
  background: var(--fnce-fond-page);
  border-color: var(--fnce-bordure-champ);
}

.fiche-photo__repli .fa-user,
.fiche-carte__vide .fas {
  color: var(--fnce-bordure-champ);
}

.fiche-carte {
  background: var(--fnce-filet);
}

.rech__historique {
  border-top-color: var(--fnce-bordure);
}

/* ==========================================================================================================================
   7. JAUGES, BARRES, HISTOGRAMME
   Piste = filet clair ; remplissage = vert (5,51:1 sur blanc, 4,60:1 sur la piste : barre distinguable, WCAG 1.4.11) ;
   barre « anomalie » = gris-vert (3,21:1 sur la piste). La valeur est toujours écrite à côté : la couleur ne porte pas seule le sens.
   (Ratios calculés à la main, tronqués ; contraste-charte.js les recalcule.)
   ========================================================================================================================== */
.progress,
.tdb-jauge,
.tdb-barre__piste {
  background-color: var(--fnce-filet);
}

.progress-bar,
.tdb-jauge .progress-bar,
.tdb-barre__valeur {
  color: var(--fnce-blanc);
  background-color: var(--fnce-vert);
}

.tdb-barre__valeur--neutre {
  background-color: var(--fnce-bordure-champ);
}

/* ==========================================================================================================================
   8. TABLEAUX, PAGINATION, ONGLETS
   ========================================================================================================================== */
.table {
  --bs-table-hover-color: var(--fnce-texte);
  --bs-table-hover-bg: var(--fnce-vert-clair);
  --bs-table-active-color: var(--fnce-texte);
  --bs-table-active-bg: var(--fnce-vert-clair);
  color: var(--fnce-texte);
  border-color: var(--fnce-filet);
}

/* En-tête : fond vert très clair (opaque, pour l'en-tête collant de l'histogramme), filet vert dessous. */
.table > thead > tr > th {
  background-color: var(--fnce-vert-tres-clair);
}

.table > :not(:last-child) > :last-child > * {
  border-bottom-color: var(--fnce-vert);
}

/* Pagination (DataTables / Bootstrap). */
.page-link,
.pagination li a {
  color: var(--fnce-vert);
}

.page-link:hover,
.page-link:focus,
.pagination li a:hover {
  color: var(--fnce-vert-fonce);
  background-color: var(--fnce-vert-clair);
}

.page-item.active .page-link,
.pagination .active.page-number .page-link,
.pagination li.active a {
  color: var(--fnce-blanc);
  background-color: var(--fnce-vert);
  border-color: var(--fnce-vert);
}

.page-item.disabled .page-link,
.pagination .disabled.page-number .page-link {
  color: var(--fnce-gris-texte);
}

/* Onglets et pastilles de navigation. */
.nav-link {
  color: var(--fnce-vert);
}

.nav-link:hover,
.nav-link:focus {
  color: var(--fnce-vert-fonce);
}

/* !important : le gabarit en pose un sur ces deux survols. */
.nav-tabs .nav-link:hover,
.nav-pills .nav-link:hover {
  color: var(--fnce-vert-fonce) !important;
}

.nav-pills .nav-link.active:hover {
  color: var(--fnce-blanc) !important;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--fnce-vert);
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: var(--fnce-blanc);
  background-color: var(--fnce-vert);
}

.fiche-onglets .nav-link {
  color: var(--fnce-texte);
}

/* Onglet actif de la fiche : texte vert (css/pages/fiche.css) + trait orange de 3 px (non textuel). */
.fiche-onglets .nav-link.active {
  box-shadow: inset 0 -3px 0 var(--fnce-orange);
}

/* Liste déroulante (inutilisée aujourd'hui, mappée par cohérence). */
.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--fnce-texte);
  background-color: var(--fnce-vert-clair);
}

.dropdown-item.active,
.dropdown-item:active {
  color: var(--fnce-blanc);
  background-color: var(--fnce-vert);
}

/* ==========================================================================================================================
   9. BADGES, PASTILLES, REPÈRES
   ========================================================================================================================== */
.badge {
  color: var(--fnce-blanc);
}

.badge.bg-warning,
.badge.bg-accent {
  color: var(--fnce-texte);
}

/* Repère « type » de la fiche et pastille de filtre du listing : texte vert foncé sur vert clair (9,28:1). */
.fiche-repere {
  border-color: var(--fnce-bordure);
}

.fiche-repere--type {
  color: var(--fnce-vert-fonce);
  background: var(--fnce-vert-clair);
}

.cons__pastille {
  color: var(--fnce-vert-fonce);
  background: var(--fnce-vert-clair);
  border-color: var(--fnce-vert);
}

.cons__pastille-retrait:hover {
  color: var(--fnce-blanc);
  background: var(--fnce-vert);
}

/* ==========================================================================================================================
   10. ALERTES, ÉTATS (vide, chargement, erreur), CHARGEURS
   ========================================================================================================================== */
.alert-success {
  color: var(--fnce-succes-texte);
  background-color: var(--fnce-succes-fond);
  border-color: var(--fnce-succes);
}

.alert-warning,
.fnce-avertissement {
  color: var(--fnce-avertissement-texte);
  background-color: var(--fnce-avertissement-fond);
  border-color: var(--fnce-avertissement);
}

.alert-danger {
  color: var(--fnce-erreur-texte);
  background-color: var(--fnce-erreur-fond);
  border-color: var(--fnce-erreur);
}

.alert-info {
  color: var(--fnce-info-texte);
  background-color: var(--fnce-info-fond);
  border-color: var(--fnce-info-bordure);
}

/* États de page : message d'erreur en rouge de la charte (même valeur que les #b02a37 en dur des CSS de pages). */
.fnce-etat--erreur,
.rech__erreur:not(:empty),
.cons__erreur-liste:not(:empty),
.fiche-bandeau__erreur {
  color: var(--fnce-erreur);
}

/* Chargeurs : le spinner Bootstrap dessine avec currentColor. Seul le spinner de .fnce-etat--chargement porte .text-primary (vert, section 2) ;
   celui du bouton « Se connecter » / « Rechercher » hérite le blanc du bouton : AUCUNE règle de couleur ici (un vert sur le vert du bouton
   le rendrait invisible). */

/* ==========================================================================================================================
   11. CARTE : Leaflet et pastilles de regroupement (Leaflet.markercluster)
   Le marqueur individuel est l'image fournie assets/marqueur-fnce.png : ce fichier n'y touche PAS.
   Regroupements : petit (moins de 10) = vert, moyen (10 à 99) = orange, grand (100 et plus) = orange foncé.
   Disque plein et OPAQUE (le contraste du nombre est calculable), couronne translucide, liseré blanc pour se détacher du fond de carte.
   ========================================================================================================================== */
.leaflet-container {
  background-color: var(--fnce-filet);
}

.leaflet-control-attribution a {
  color: var(--fnce-vert);
}

/* Liseré blanc par ombre portée (et non par bordure : la bordure réduirait la zone de 26 px et décalerait le nombre). */
.marker-cluster div {
  font-weight: 700;
  box-shadow: 0 0 0 2px var(--fnce-blanc);
}

/* Nombre exact sur une seule ligne ; le disque grandit avec le nombre de chiffres (t0 : jusqu'à 3 chiffres, 40 px ; t1 : 4 chiffres, 44 px ;
   t2 : 5, 52 px ; t3 : 6, 58 px ; t4 : 7, 70 px ; t5 : 8 chiffres et plus, 84 px). Le disque intérieur laisse 5 px de couronne. */
.marker-cluster span {
  white-space: nowrap;
}

.marker-cluster-t1 { border-radius: 22px; }
.marker-cluster-t1 div { width: 34px; height: 34px; border-radius: 17px; }
.marker-cluster-t1 span { line-height: 34px; }
.marker-cluster-t2 { border-radius: 26px; }
.marker-cluster-t2 div { width: 42px; height: 42px; border-radius: 21px; }
.marker-cluster-t2 span { line-height: 42px; }
.marker-cluster-t3 { border-radius: 29px; }
.marker-cluster-t3 div { width: 48px; height: 48px; border-radius: 24px; }
.marker-cluster-t3 span { line-height: 48px; }
.marker-cluster-t4 { border-radius: 35px; }
.marker-cluster-t4 div { width: 60px; height: 60px; border-radius: 30px; }
.marker-cluster-t4 span { line-height: 60px; }
.marker-cluster-t5 { border-radius: 42px; }
.marker-cluster-t5 div { width: 74px; height: 74px; border-radius: 37px; }
.marker-cluster-t5 span { line-height: 74px; }

.marker-cluster-small {
  background-color: color-mix(in srgb, var(--fnce-vert) 35%, transparent);
}

.marker-cluster-small div {
  color: var(--fnce-blanc);
  background-color: var(--fnce-vert);
}

.marker-cluster-medium {
  background-color: color-mix(in srgb, var(--fnce-orange) 45%, transparent);
}

.marker-cluster-medium div {
  color: var(--fnce-texte);
  background-color: var(--fnce-orange);
}

.marker-cluster-large {
  background-color: color-mix(in srgb, var(--fnce-orange-texte) 35%, transparent);
}

.marker-cluster-large div {
  color: var(--fnce-blanc);
  background-color: var(--fnce-orange-texte);
}

/* ==========================================================================================================================
   12. PAGE DE CONNEXION
   Le panneau d'identité (css/connexion.css) lit déjà var(--fnce-vert) et var(--fnce-orange) (disques, trame, liseré) : il est recoloré
   par les tokens. Seuls les textes posés sur ce fond décoré passent à l'encre (le fond n'est pas uni : marge de contraste maximale).
   ========================================================================================================================== */
.fnce-connexion__nom {
  color: var(--fnce-vert-fonce);
}

.fnce-connexion__sous-titre,
.fnce-connexion__accroche {
  color: var(--fnce-texte);
}

.fnce-connexion__carte {
  border-color: var(--fnce-bordure);
}

/* ==========================================================================================================================
   13. DIVERS : mentions légales, info-bulle de la fiche
   ========================================================================================================================== */
.fiche-infobulle {
  background: var(--fnce-texte);
}