/* ══════════════════════════════════════════════════════════════════════
   HORIZON — l'habillage de l'application (essai du 11 novembre 2026)
   ══════════════════════════════════════════════════════════════════════

   Posée en DERNIER, après balise.css, sur le même principe que Balise après
   style.css : elle ré-ancre quelques jetons et reprend les composants, sans
   toucher à la logique. Retirer ce fichier (et sa balise <link>) rend
   l'application à Balise.

   L'intention : la retenue d'Apple et la densité d'UniFi, DANS LE BLEU NUIT
   de la maison. Les fonds et les encres restent ceux de Balise (page
   #081427 et panneaux #0D1B33 en sombre, ardoise bleutée en clair) ; un
   premier essai en gris neutres a été écarté.
   Ce qui change :
     - UN bleu d'accent, celui d'UniFi (#006FFF), à plat : ni dégradé ni halo ;
     - la barre latérale SUIT LE THÈME — blanche en clair, bleu nuit en
       sombre —, occupe toute la hauteur et se borde d'un filet ;
     - l'en-tête de page devient une barre de verre, sans cadre ;
     - les onglets deviennent un sélecteur segmenté ;
     - les boutons secondaires se remplissent au lieu de se border, et les
       actions d'une rangée de tableau s'effacent jusqu'au survol ;
     - les en-têtes de tableau et les intitulés d'indicateur quittent les
       capitales : casse normale, graisse 500 ;
     - les états passent au vert, à l'orange et au rouge du système.

   Ce que Balise imposait et qui RESTE : l'état d'abord, jamais la couleur
   seule, la chasse fixe pour les références, le plancher de 12 px, et les
   contrastes mesurés (4,5:1 pour un texte, 3:1 pour une marque ou une
   bordure de champ) — chaque teinte ci-dessous a été recalculée sur son
   fond, dans les deux thèmes.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons, thème clair ─────────────────────────────────────────── */
:root,
[data-bs-theme="light"] {
  /* La barre latérale, en clair : blanche comme une carte, dans les encres
   * ardoise de Balise. Les noms « night » viennent de Balise ; ils désignent
   * désormais « la barre », quel que soit le thème. */
  --b-night:          #FFFFFF;
  --b-night-raised:   #EEF2F7;
  --b-night-ink:      #0B1628;   /* 17,9:1 */
  --b-night-muted:    #334155;   /* 10,4:1 */
  --b-night-label:    #56657A;   /*  5,9:1, et 5,3:1 sur le champ relevé */
  /* L'entrée active du menu : un aplat bleu, plus de dégradé. */
  --b-nav-active:     #FFFFFF;   /* 4,95:1 sur son fond */
  --b-nav-active-bg:  #0068F0;

  --b-accent:         #006FFF;   /* marque : focus, sélection, graphiques */
  --b-accent-strong:  #0068F0;   /* fond du bouton principal : 4,95:1 sous du blanc */
  --b-accent-ink:     #0062E0;   /* 5,5:1 sur blanc, 4,8:1 sur accent-soft */
  --b-accent-soft:    #E8F1FF;
  --b-accent-line:    rgba(0, 111, 255, 0.32);

  --b-cyan:           #32ADE6;
  --b-ok:             #28A745;   /* 3,1:1 comme marque */
  --b-warn:           #CC7700;   /* 3,2:1 */
  --b-crit:           #E5372B;   /* 4,3:1 */
  --b-cyan-ink:       #0A6F8C;   /* 5,7:1 / 5,1:1 sur sa teinte */
  --b-ok-ink:         #16793A;   /* 5,5:1 / 4,9:1 */
  --b-warn-ink:       #9A5200;   /* 5,9:1 / 5,3:1 */
  --b-crit-ink:       #C4281C;   /* 5,7:1 / 5:1   */
  --b-cyan-soft:      #E3F5FA;
  --b-ok-soft:        #E6F5EB;
  --b-warn-soft:      #FDF1DD;
  --b-crit-soft:      #FDEBE9;

  --b-focus:          #006FFF;
  --b-glass:          rgba(245, 247, 251, 0.78);
  --b-shadow-card:    0 1px 2px rgba(15, 23, 42, 0.05);
  --b-shadow-float:   0 22px 48px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06);

  /* Sur un appareil Apple, la police du système (San Francisco) ; ailleurs, Inter. */
  --b-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --accent:           #006FFF;
  --accent-fort:      #0062E0;
  --accent-doux:      #E8F1FF;
  --accent-appuye:    #0062E0;
  --accent-voile:     #F2F7FF;
  --danger:           #E5372B;
  --danger-doux:      #FDEBE9;
  --danger-appuye:    #C4281C;

  --rayon-sm:  8px;
  --rayon:     14px;
  --rayon-lg:  18px;
  --sidebar-width: 244px;

  /* Propres à Horizon. Le « gris » des boutons secondaires et de la piste du
   * sélecteur est l'ardoise bleutée de Balise, pas un gris neutre. */
  --h-gris:         #E4E9F1;
  --h-gris-survol:  #D6DDE8;
  --h-segment:      #FFFFFF;                 /* le segment actif */
  --h-segment-ombre: 0 1px 2px rgba(15, 23, 42, 0.14), 0 0 0 0.5px rgba(15, 23, 42, 0.05);
  --h-anneau:       rgba(0, 111, 255, 0.24); /* halo de focus des champs */

  --bs-border-radius: 10px;
  --bs-border-radius-sm: 8px;
  --bs-border-radius-lg: 14px;
  --bs-border-radius-xl: 18px;
  --bs-link-color-rgb: 0, 98, 224;
  --bs-link-hover-color: #0050B8;
  --bs-link-hover-color-rgb: 0, 80, 184;
  --bs-focus-ring-color: rgba(0, 111, 255, 0.28);
  --bs-primary: #006FFF;   --bs-primary-rgb: 0, 111, 255;
  --bs-success: #28A745;   --bs-success-rgb: 40, 167, 69;
  --bs-warning: #CC7700;   --bs-warning-rgb: 204, 119, 0;
  --bs-danger:  #E5372B;   --bs-danger-rgb: 229, 55, 43;
  --bs-info:    #32ADE6;   --bs-info-rgb: 50, 173, 230;
  --bs-primary-border-subtle: #BFD9FF;
  --bs-success-border-subtle: #B5E2C3;
  --bs-warning-border-subtle: #F3D9A8;
  --bs-danger-border-subtle:  #F5C3BE;
  --bs-info-border-subtle:    #B3E0EE;
}

/* ── 2. Jetons, thème sombre ────────────────────────────────────────── */
[data-bs-theme="dark"] {
  /* La barre latérale, en sombre : le bleu nuit de Balise. */
  --b-night:          #07111F;
  --b-night-raised:   #0D1B33;
  --b-night-ink:      #E8EEF8;   /* 16:1 */
  --b-night-muted:    #94A3B8;   /*  7,4:1 */
  --b-night-label:    #7F90A8;   /*  5,6:1 */
  --b-nav-active:     #FFFFFF;
  --b-nav-active-bg:  #0068F0;

  --b-accent:         #0A84FF;
  --b-accent-strong:  #0068F0;
  --b-accent-ink:     #5AA9FF;   /* 7,2:1 sur le panneau, 5,7:1 sur accent-soft */
  --b-accent-soft:    rgba(10, 132, 255, 0.18);
  --b-accent-line:    rgba(90, 169, 255, 0.40);

  --b-cyan:           #40C8E0;
  --b-ok:             #32D74B;
  --b-warn:           #FF9F0A;
  --b-crit:           #FF453A;
  --b-cyan-ink:       #5CC8F0;   /* 6,6:1 sur sa teinte */
  --b-ok-ink:         #4CD471;   /* 6,7:1 */
  --b-warn-ink:       #FFB84D;   /* 7,5:1 */
  --b-crit-ink:       #FF7A70;   /* 5,7:1 */
  --b-cyan-soft:      rgba(64, 200, 224, 0.16);
  --b-ok-soft:        rgba(50, 215, 75, 0.16);
  --b-warn-soft:      rgba(255, 159, 10, 0.16);
  --b-crit-soft:      rgba(255, 69, 58, 0.16);

  --b-focus:          #3D9BFF;   /* 6:1 */
  --b-glass:          rgba(8, 20, 39, 0.74);
  --b-shadow-card:    none;
  --b-shadow-float:   0 24px 56px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(148, 163, 184, 0.10);

  --accent:           #5AA9FF;
  --accent-fort:      #7DBBFF;
  --accent-doux:      rgba(10, 132, 255, 0.18);
  --accent-appuye:    #7DBBFF;
  --accent-voile:     rgba(10, 132, 255, 0.10);
  --danger:           #FF453A;
  --danger-doux:      rgba(255, 69, 58, 0.16);
  --danger-appuye:    #FF9B93;

  --h-gris:         rgba(148, 163, 184, 0.14);
  --h-gris-survol:  rgba(148, 163, 184, 0.22);
  --h-segment:      #25395C;   /* un cran au-dessus du panneau : l'encre y fait 10:1 */
  --h-segment-ombre: 0 1px 2px rgba(0, 0, 0, 0.4);
  --h-anneau:       rgba(61, 155, 255, 0.32);

  --bs-link-color-rgb: 90, 169, 255;
  --bs-link-hover-color: #7DBBFF;
  --bs-link-hover-color-rgb: 125, 187, 255;
  --bs-focus-ring-color: rgba(61, 155, 255, 0.34);
  --bs-primary: #0A84FF;   --bs-primary-rgb: 10, 132, 255;
  --bs-success: #32D74B;   --bs-success-rgb: 50, 215, 75;
  --bs-warning: #FF9F0A;   --bs-warning-rgb: 255, 159, 10;
  --bs-danger:  #FF453A;   --bs-danger-rgb: 255, 69, 58;
  --bs-info:    #40C8E0;   --bs-info-rgb: 64, 200, 224;
  --bs-primary-border-subtle: rgba(90, 169, 255, 0.35);
  --bs-success-border-subtle: rgba(50, 215, 75, 0.30);
  --bs-warning-border-subtle: rgba(255, 159, 10, 0.32);
  --bs-danger-border-subtle:  rgba(255, 69, 58, 0.36);
  --bs-info-border-subtle:    rgba(64, 200, 224, 0.30);
}

/* ── 3. Fond, typographie ───────────────────────────────────────────── */
body { letter-spacing: -0.006em; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; letter-spacing: -0.022em; }
.fw-semibold { font-weight: 550 !important; }
::selection { background: rgba(0, 111, 255, 0.22); }

.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--b-accent);
  box-shadow: 0 0 0 3px var(--h-anneau);
}

/* ── 4. La barre latérale : pleine hauteur, de la couleur du thème ──── */
#sidebar {
  background: var(--b-night);
  border: 0;
  border-right: 1px solid var(--trait);
  border-radius: 0;
  box-shadow: none;
  top: 0; left: 0;
  height: 100vh;
}
#content { margin-left: var(--sidebar-width); }
@media (max-width: 992px) { #app #content { margin-left: var(--sidebar-width); } }
@media (max-width: 768px) {
  #content, #app #content { margin-left: 0 !important; }
  #sidebar { box-shadow: var(--b-shadow-float); }
}

.sidebar-brand { padding: 1.15rem 1.15rem 0.7rem; }
.sidebar-brand h1 { font-weight: 600; }
/* Balise posait ici des teintes faites pour la nuit : elles suivent le thème. */
.sidebar-brand h1 i { color: var(--b-accent) !important; }
.sidebar-brand h1 i.text-danger { color: var(--b-crit) !important; }
[data-bs-theme="dark"] .sidebar-brand h1 i { color: #4C97FF !important; }              /* 6,2:1 sur la barre */
[data-bs-theme="dark"] .sidebar-brand h1 i.text-danger { color: #F87171 !important; }
.sidebar-brand .subtitle { letter-spacing: 0.04em; }

.sidebar-search input { border-radius: 10px; padding: 0.42rem 0.7rem; }
.sidebar-search input:focus { box-shadow: 0 0 0 3px var(--h-anneau); }

.sidebar-section-title { letter-spacing: 0.04em; font-weight: 600; }
.sidebar-nav-item { border-radius: 9px; min-height: 34px; }
.sidebar-nav-item:hover { background: var(--h-gris); }
.sidebar-nav-item.active { font-weight: 600; }
/* L'entrée active : un aplat bleu, le mot et le pictogramme en blanc. */
.sidebar-nav-item.active i { color: inherit; }
.sidebar-nav-item.active:hover { background: #005AD1; }
.sidebar-nav-item.active .badge { background: rgba(255, 255, 255, 0.22) !important; color: #FFFFFF !important; }

#sidebar .badge.bg-danger  { background: #D93025 !important; color: #FFFFFF !important; }   /* 4,8:1 */
#sidebar .badge.bg-warning { background: var(--b-warn-soft) !important; color: var(--b-warn-ink) !important; }
#sidebar .text-warning { color: var(--b-warn-ink) !important; }
#sidebar .text-info    { color: var(--b-cyan-ink) !important; }

.dark-mode-switch .form-check-input { border-color: var(--b-line-strong); }
.sidebar-btn { border-radius: 9px; }
.sidebar-btn:hover { background: var(--h-gris-survol); color: var(--b-night-ink); }
#sidebar::-webkit-scrollbar-thumb { background: rgba(125, 141, 163, 0.38); background-clip: padding-box; }

/* ── 5. L'en-tête de page : une barre de verre, sans cadre ──────────── */
#content .page-header {
  background: var(--b-glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border: 0;
  border-bottom: 1px solid var(--trait);
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0.85rem 1.75rem;
  top: 0;
}
@supports not (backdrop-filter: blur(1px)) {
  #content .page-header { background: var(--surface-basse); }
}
#content .page-header h2 { font-size: 1.3125rem; font-weight: 600; letter-spacing: -0.022em; }
#content .page-body { padding: 1.35rem 1.75rem 3rem; }
@media (max-width: 768px) {
  #content .page-header { margin: 0; padding: 0.7rem 1rem; }
  #content .page-body { padding: 1rem 0.75rem 2.5rem; }
}

/* ── 6. Cartes : un filet, presque pas d'ombre ──────────────────────── */
.card.border-0 { border: 1px solid var(--trait) !important; }
.card-header { font-weight: 600; }
.procedure-card:hover,
.salon-card:hover { transform: translateY(-2px); }

/* ── 7. Indicateurs : l'intitulé en casse normale, le chiffre posé ──── */
.kpi-label,
.stat-carte .libelle {
  font-size: var(--txt-xxs);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.kpi-value,
.stat-carte .valeur,
[data-bs-theme="dark"] .kpi-value,
[data-bs-theme="dark"] .stat-carte .valeur { font-weight: 600; letter-spacing: -0.03em; }

/* ── 8. Tableaux : l'en-tête sur le même fond, en casse normale ─────── */
[data-bs-theme] .table-light,
.table > thead { --bs-table-bg: transparent; }
.table > thead th,
.table-light th,
[data-bs-theme="dark"] .table > thead th,
[data-bs-theme="dark"] .table-light th {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}
.table > :not(caption) > * > * { padding: 0.7rem 0.85rem; }
.table-sm > :not(caption) > * > * { padding: 0.45rem 0.65rem; }
thead th[data-sort]:hover,
thead th[data-sort-stock]:hover,
thead th[data-sort-cert]:hover { background: var(--surface-haute); }
.table-responsive table:has(thead th:last-child:is(:empty, .col-actions)) > thead > tr > th:last-child { background: var(--surface); }

/* Les actions d'une rangée s'effacent : grises au repos, elles prennent la
 * teinte de leur nature au survol ou au clavier. Le pictogramme et
 * l'infobulle disent le geste ; la couleur ne le disait jamais seule. */
.table td .btn[class*="btn-outline-"] {
  --bs-btn-color: var(--encre-douce);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-border-color: transparent;
  box-shadow: none;
}
.table td .btn.btn-outline-secondary { --bs-btn-hover-bg: var(--h-gris); --bs-btn-active-bg: var(--h-gris-survol); }
.table td .btn.btn-outline-danger { --bs-btn-hover-color: var(--b-crit-ink); }
/* Un bouton de rangée bordé en dur dans le code (« vers le stock », en brun)
 * suit la même règle que les autres. */
.table td .btn-sm[style*="border:1px solid"] { border-color: transparent !important; color: var(--encre-douce) !important; }
.table td .btn-sm[style*="border:1px solid"]:hover { background: var(--h-gris); color: var(--encre) !important; }

/* Un tableau posé à même la page prend le cadre d'une carte : sans lui, sa
 * colonne d'actions collée (fond opaque) tranchait sur le fond de la page. */
#content .table-responsive:not(.card .table-responsive) {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--b-shadow-card);
}

/* Les intitulés que des pages posent elles-mêmes en capitales. */
#content .kpi-label { font-size: var(--txt-xxs); font-weight: 500; letter-spacing: 0; text-transform: none; }
#content .annuaire-table thead th { font-size: var(--txt-xxs); font-weight: 500; letter-spacing: 0; text-transform: none; }

/* ── 9. Boutons : un bleu à plat, des fonds pleins ──────────────────── */
.btn {
  --bs-btn-font-weight: 550;
  --bs-btn-border-radius: 10px;
  letter-spacing: -0.008em;
}
.btn-sm { --bs-btn-border-radius: 8px; }
.btn-lg { --bs-btn-border-radius: 12px; }

.btn-primary {
  --bs-btn-hover-bg: #005AD1;
  --bs-btn-hover-border-color: #005AD1;
  --bs-btn-active-bg: #004DB3;
  --bs-btn-active-border-color: #004DB3;
  background-image: none;
  border-color: transparent;
  box-shadow: none;
}
.btn-primary:hover, .btn-primary:active { background-image: none; }

.btn-secondary,
.btn-outline-secondary,
.btn-light,
[data-bs-theme="dark"] .btn-secondary,
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-light {
  --bs-btn-bg: var(--h-gris);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--h-gris-survol);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-bg: var(--h-gris-survol);
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-bg: var(--h-gris);
  --bs-btn-disabled-border-color: transparent;
  box-shadow: none;
}

/* Les boutons « contour » deviennent des boutons teintés : un fond pâle de
 * leur nature, le mot dans la teinte lisible, plus de bordure. */
.btn-outline-primary { --bs-btn-bg: var(--b-accent-soft); --bs-btn-hover-bg: color-mix(in srgb, var(--b-accent) 20%, transparent); }
.btn-outline-danger  { --bs-btn-bg: var(--b-crit-soft);   --bs-btn-hover-bg: color-mix(in srgb, var(--b-crit) 22%, transparent); }
.btn-outline-success { --bs-btn-bg: var(--b-ok-soft);     --bs-btn-hover-bg: color-mix(in srgb, var(--b-ok) 22%, transparent); }
.btn-outline-warning { --bs-btn-bg: var(--b-warn-soft);   --bs-btn-hover-bg: color-mix(in srgb, var(--b-warn) 24%, transparent); }
.btn-outline-info    { --bs-btn-bg: var(--b-cyan-soft);   --bs-btn-hover-bg: color-mix(in srgb, var(--b-cyan) 24%, transparent); }
.btn-outline-primary, .btn-outline-danger, .btn-outline-success, .btn-outline-warning, .btn-outline-info {
  --bs-btn-border-color: transparent;
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-border-color: transparent;
  --bs-btn-disabled-border-color: transparent;
}

.btn-success {
  --bs-btn-bg: #16793A; --bs-btn-border-color: #16793A;                       /* 5,5:1 */
  --bs-btn-hover-bg: #126A32; --bs-btn-hover-border-color: #126A32;
  --bs-btn-active-bg: #0F5B2B; --bs-btn-active-border-color: #0F5B2B;
  --bs-btn-disabled-bg: #16793A; --bs-btn-disabled-border-color: #16793A;
}
.btn-danger {
  --bs-btn-bg: #C4281C; --bs-btn-border-color: #C4281C;                       /* 5,7:1 */
  --bs-btn-hover-bg: #AB2218; --bs-btn-hover-border-color: #AB2218;
  --bs-btn-active-bg: #931D14; --bs-btn-active-border-color: #931D14;
  --bs-btn-disabled-bg: #C4281C; --bs-btn-disabled-border-color: #C4281C;
}
.btn-info {
  --bs-btn-bg: #0A6F8C; --bs-btn-border-color: #0A6F8C;                       /* 5,7:1 */
  --bs-btn-hover-bg: #09617A; --bs-btn-hover-border-color: #09617A;
  --bs-btn-active-bg: #075368; --bs-btn-active-border-color: #075368;
}

/* Un groupe de boutons se lit comme un sélecteur segmenté. */
.btn-group > .btn-outline-secondary,
.btn-group > .btn-outline-primary { --bs-btn-bg: var(--h-gris); --bs-btn-color: var(--encre-douce); }
.btn-group > .btn-check:checked + .btn,
.btn-group > .btn.active {
  --bs-btn-active-bg: var(--b-accent-soft);
  --bs-btn-active-color: var(--b-accent-ink);
}

/* ── 10. Pastilles ──────────────────────────────────────────────────── */
.badge { font-weight: 550; padding: 0.32em 0.7em; }
/* Balise la teignait de la couleur de la barre : en clair, elle serait blanche. */
.badge.bg-dark { background: var(--surface-inverse) !important; color: var(--encre-inverse) !important; }

/* ── 11. Formulaires ────────────────────────────────────────────────── */
.form-control,
.form-select,
.tags-field { border-radius: 10px; }
.form-control-sm, .form-select-sm { border-radius: 8px; }
.form-control-lg, .form-select-lg { border-radius: 12px; }
.tags-field.focused { border-color: var(--b-accent); box-shadow: 0 0 0 3px var(--h-anneau); }
.form-label, .col-form-label { font-weight: 550; }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 3px var(--h-anneau); }
.input-group > .form-control:not(:first-child), .input-group > .form-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child), .input-group > .form-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ── 12. Onglets : un sélecteur segmenté ────────────────────────────────
 *
 * Une piste teintée, le segment actif en relief. Les utilitaires de marge
 * intérieure de Bootstrap (px-3, pt-3) gonfleraient la piste : ils
 * deviennent des marges extérieures. */
.nav.nav-tabs {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  gap: 2px;
  padding: 3px !important;
  border: 0;
  border-radius: 11px;
  background: var(--h-gris);
}
.nav.nav-tabs.px-3 { margin-left: 1rem; margin-right: 1rem; }
.nav.nav-tabs.pt-3 { margin-top: 1rem; }
.nav.nav-tabs.pt-2 { margin-top: 0.5rem; }
.nav-tabs .nav-link {
  border: 0;
  border-radius: 8px;
  margin: 0;
  padding: 0.38rem 0.9rem;
  color: var(--encre-douce);
  font-weight: 500;
  font-size: var(--txt-xs);
  transition: background-color 160ms var(--b-ease), color 160ms var(--b-ease), box-shadow 160ms var(--b-ease);
}
.nav-tabs .nav-link:hover { color: var(--encre); border: 0; }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  background: var(--h-segment);
  color: var(--encre);
  box-shadow: var(--h-segment-ombre);
  font-weight: 600;
}
.nav-pills .nav-link { border-radius: 9px; }

/* ── 13. Fenêtres ───────────────────────────────────────────────────── */
.modal-content { border-radius: var(--rayon-lg); }
[data-bs-theme="dark"] .modal-content { border-color: var(--trait-fort); }
.modal-header { padding: 1.05rem 1.35rem; }
.modal-title { font-weight: 600; }
.modal-body { padding: 1.35rem; }
.modal-footer { padding: 0.85rem 1.35rem; }
.modal-backdrop.show { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* ── 14. Menus, alertes ─────────────────────────────────────────────── */
.dropdown-menu {
  --bs-dropdown-border-radius: 12px;
  --bs-dropdown-item-border-radius: 8px;
  --bs-dropdown-padding-x: 0.3rem;
  --bs-dropdown-padding-y: 0.3rem;
}
.dropdown-item { border-radius: 8px; }
.alert { border-color: transparent; }
/* Un bloc de code reste sombre dans les deux thèmes, comme avant. */
.prose pre { background: #07111F; }
.prose pre code { color: #E8EEF8; }
.tag, .tag-chip { border-radius: 999px; }

/* ── 16. La barre du haut ───────────────────────────────────────────────
 *
 * Collante, de verre, sur toutes les pages : la recherche à gauche ; à
 * droite, ce qui est à traiter, le thème, la commune, le compte. L'en-tête de
 * page, dessous, n'est plus qu'un titre et ses boutons : il ne colle plus. */
#barre-haut {
  position: sticky;
  top: var(--decalage-haut, 0px);
  z-index: 1030;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.6rem 1.75rem;
  background: var(--b-glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid var(--trait);
}
@supports not (backdrop-filter: blur(1px)) { #barre-haut { background: var(--surface-basse); } }

.bh-recherche { position: relative; flex: 1 1 auto; max-width: 34rem; min-width: 0; }
.bh-recherche > .bi { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); color: var(--encre-douce); pointer-events: none; }
.bh-recherche input {
  width: 100%;
  padding: 0.5rem 0.9rem 0.5rem 2.4rem;
  border: 1px solid var(--trait-fort);
  border-radius: 11px;
  background: var(--surface);
  color: var(--encre);
  font-size: var(--txt-xs);
  transition: border-color 120ms var(--b-ease), box-shadow 120ms var(--b-ease);
}
.bh-recherche input::placeholder { color: var(--encre-douce); }
.bh-recherche input:focus { outline: 0; border-color: var(--b-accent); box-shadow: 0 0 0 3px var(--h-anneau); }

.bh-actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }
.bh-bouton {
  position: relative;
  width: 2.35rem; height: 2.35rem;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--encre-forte);
  font-size: 1.1rem;
  transition: background-color 120ms var(--b-ease);
}
.bh-bouton:hover, .bh-bouton[aria-expanded="true"] { background: var(--h-gris); }
.bh-pastille {
  position: absolute; top: 0.05rem; right: 0;
  min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem;
  display: grid; place-items: center;
  border-radius: 999px; border: 2px solid var(--surface-basse);
  background: var(--b-accent-strong); color: #FFFFFF;
  font-size: 0.75rem; font-weight: 600; line-height: 1; box-sizing: content-box;
}
.bh-pastille--critique { background: #D93025; }                                     /* 4,8:1 sous du blanc */

.bh-commune {
  display: inline-flex; align-items: center; gap: 0.5rem;
  max-width: 16rem; padding: 0.35rem 0.8rem;
  border-radius: 999px; background: var(--h-gris);
  color: var(--encre-forte); font-size: var(--txt-xxs); font-weight: 550;
}
.bh-commune span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bh-profil {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.45rem 0.15rem 0.15rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--encre-douce);
  transition: background-color 120ms var(--b-ease);
}
.bh-profil:hover, .bh-profil[aria-expanded="true"] { background: var(--h-gris); }
.bh-profil .bi { font-size: 0.75rem; }
.bh-menu-profil { min-width: 14rem; }
.bh-identite { padding: 0.5rem 0.75rem 0.35rem; }
.bh-identite .user-name { color: var(--encre); }
.bh-identite .user-role { color: var(--encre-douce); }

.bh-panneau { width: min(22rem, calc(100vw - 2rem)); max-height: min(28rem, 70vh); overflow-y: auto; }
.bh-panneau-titre { padding: 0.45rem 0.75rem 0.35rem; font-weight: 600; font-size: var(--txt-sm); color: var(--encre); }
.bh-panneau-vide { padding: 0.5rem 0.75rem 0.75rem; font-size: var(--txt-xs); color: var(--encre-douce); }
.bh-panneau-vide .bi { color: var(--b-ok-ink); }
.bh-item { display: flex; align-items: flex-start; gap: 0.6rem; white-space: normal; font-size: var(--txt-xs); padding: 0.5rem 0.75rem; }
.bh-item > .bi { margin-top: 0.1rem; }
.bh-item--critique > .bi  { color: var(--b-crit-ink); }
.bh-item--attention > .bi { color: var(--b-warn-ink); }
.bh-item--info > .bi      { color: var(--b-accent-ink); }
.bh-tout { font-size: var(--txt-xs); color: var(--b-accent-ink); font-weight: 550; }

/* L'en-tête de page : sous la barre du haut, un titre et ses boutons. */
#content .page-header {
  position: static;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 0;
  padding: 1.1rem 1.75rem 0;
}
#content .page-body { padding-top: 1rem; }

/* Le pied du menu ne porte plus que l'identité. */
.sidebar-footer { padding: 0.8rem 0.9rem; }

@media (max-width: 768px) {
  #barre-haut { padding: 0.5rem 0.75rem; gap: 0.5rem; }
  .bh-commune { display: none; }
  #content .page-header { padding: 0.8rem 0.75rem 0; }
}

/* La photo de profil remplit sa pastille. */
.user-avatar { overflow: hidden; }
.user-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Les notifications s'affichent sous la barre du haut, sans la recouvrir. */
.toast-container-fixed { top: calc(var(--decalage-haut, 0px) + 4.25rem); }