@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400..750&display=swap');

/* ══════════════════════════════════════════════════════════════════════
   BALISE — le langage visuel de l'application
   ══════════════════════════════════════════════════════════════════════

   Posée en DERNIER, après style.css, comme les couches qui l'ont précédée :
   elle remplace enhancements.css (dégradés bleu-violet, liseré coloré sur
   l'entrée active, halos d'ambiance, animations d'entrée) et ré-ancre les
   jetons de style.css sur la palette Balise. Aucune logique n'est touchée :
   retirer ce fichier rend l'application à son apparence d'avant.

   Les principes, dans l'ordre où ils tranchent :
     1. l'état d'abord — ce qui demande une action se voit en premier ;
     2. des surfaces calmes — filets plutôt qu'ombres, un seul accent ;
     3. jamais la couleur seule — une pastille porte aussi un mot ;
     4. la précision technique — chasse fixe pour IP, hôtes, références.

   Référence complète : le système de design « Balise DSI ».

   IDENTITÉ ASL-ZEN (2 novembre 2026). L'application est rattachée à la
   société ASL-Zen ; Balise s'aligne sur son site, asl-zen.fr, qui en
   reprenait déjà le bleu nuit et le bleu électrique. Ce qui change :
     - la police Inter, en graisse variable (650 pour les titres) et
       à l'interlettrage serré du site ;
     - les teintes d'état du site en sombre — cyan #38C8F4, turquoise
       #2DD4BF, ambre #F5B74A, rouge #F87171 — sur des fonds à 14 % ;
     - la page et les panneaux sombres du site (#081427, #0D1B33),
       les filets translucides, le texte secondaire #94A3B8 ;
     - l'entrée active du menu en dégradé bleu, le bouton principal en
       dégradé avec son halo, l'anneau de focus cyan en sombre.
   Deux écarts au site, pour l'accessibilité : le dégradé du bouton
   principal est assombri d'un demi-ton (#1B7DFF sous du blanc ne fait
   que 3,9:1), et les intitulés en capitales du menu restent en #7F90A8
   (le #64748B du site fait 4:1 sur la barre).

   CONTRASTES. Chaque teinte de texte est mesurée sur le fond qu'elle habite,
   dans les deux thèmes (WCAG 2 : 4,5:1 pour le texte, 3:1 pour une marque,
   une bordure de champ, un anneau de focus). Les couleurs de la palette qui
   n'y suffisent pas en petit texte — le bleu principal #1677FF (4,1:1 sur
   blanc), le vert, l'orange, le rouge — restent telles quelles pour les
   MARQUES (voyants, barres, focus) et passent par leur variante « -ink »
   dès qu'elles écrivent.

   PLANCHER. Rien sous 12 px (règle de l'application, éprouvée par
   test-typographie.js) : les intitulés en capitales de Balise montent donc
   de 11 à 12 px.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Jetons ──────────────────────────────────────────────────────────
 *
 * Les noms de style.css (--surface, --encre, --accent…) gardent leur rôle ;
 * seules leurs valeurs changent. Les jetons propres à Balise prennent le
 * préfixe --b-. */
:root,
[data-bs-theme="light"] {
  /* Bleu nuit et bleu profond : la barre latérale, dans les deux thèmes. */
  --b-night:          #07111F;   /* la barre du site : un voile sombre sur #081427 */
  --b-night-raised:   #0D1B33;   /* le panneau du site */
  --b-night-ink:      #E8EEF8;   /* 16:1 sur night */
  --b-night-muted:    #94A3B8;   /*  7,4:1 — le gris des entrées du site */
  --b-night-label:    #7F90A8;   /*  5,6:1 */
  --b-nav-active:     #FFFFFF;   /* l'entrée active du site : blanc sur le dégradé */
  --b-nav-active-bg:  linear-gradient(90deg, rgba(22, 119, 255, 0.25), rgba(22, 119, 255, 0.04));

  --b-accent:         #1677FF;   /* marque : focus, sélection, graphiques */
  --b-accent-strong:  #0B63E5;   /* fond du bouton principal, 5,3:1 sous du blanc */
  --b-accent-ink:     #0B63E5;   /* texte d'accent, 5,3:1 sur blanc */
  --b-accent-soft:    #E8F1FF;
  --b-accent-line:    rgba(22, 119, 255, 0.36);

  --b-cyan:           #38C8F4;
  --b-ok:             #0D9488;   /* turquoise du site, assombri : 3,7:1 comme marque */
  --b-warn:           #F59E0B;
  --b-crit:           #EF4444;
  --b-cyan-ink:       #0E7490;   /* 5,4:1 sur blanc, 4,9:1 sur cyan-soft */
  --b-ok-ink:         #0F766E;   /* 5,5:1 / 4,9:1 */
  --b-warn-ink:       #B45309;   /* 5:1   / 4,6:1 */
  --b-crit-ink:       #C62828;   /* 5,6:1 / 4,9:1 */
  --b-cyan-soft:      #E3F8FC;
  --b-ok-soft:        #E6F7F4;
  --b-warn-soft:      #FEF4E2;
  --b-crit-soft:      #FDECEC;
  --b-off-soft:       #EEF2F7;

  --b-line-strong:    #7D8DA3;   /* bordure de champ : 3,4:1 sur blanc */
  --b-focus:          #1677FF;   /* anneau de focus : 4,1:1 sur blanc, 3,8:1 sur la page */
  --b-glass:          rgba(255, 255, 255, 0.72);
  --b-shadow-card:    0 1px 2px rgba(15, 23, 42, 0.05);
  --b-shadow-float:   0 12px 32px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.05);
  --b-ease:           cubic-bezier(0.2, 0.8, 0.2, 1);
  --b-close-filter:   none;

  --b-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --b-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  /* Les jetons de style.css, ré-ancrés. */
  --surface:          #FFFFFF;
  --surface-basse:    #F5F7FB;
  --surface-haute:    #EEF2F7;
  --surface-inverse:  #0B1628;
  --trait:            #E2E8F0;
  --trait-fort:       #CBD5E1;
  --encre:            #0B1628;
  /* Le texte secondaire du site en clair (#475569) : 7:1 sur la page. */
  --encre-douce:      #475569;
  --encre-tenue:      #94A3B8;
  --encre-forte:      #334155;
  --encre-inverse:    #E8EEF7;
  --accent:           #1677FF;
  --accent-fort:      #0B63E5;
  --accent-doux:      #E8F1FF;
  --accent-appuye:    #0B63E5;
  --accent-voile:     #F3F8FF;
  --danger:           #EF4444;
  --danger-doux:      #FDECEC;
  --danger-appuye:    #C62828;

  --rayon-sm:  8px;
  --rayon:     12px;
  --rayon-lg:  16px;
  --ecart:     1rem;
  --sidebar-width: 248px;

  --verre:       var(--b-glass);
  --verre-flou:  blur(16px) saturate(1.4);
  --verre-trait: #E2E8F0;
  --ombre-douce: var(--b-shadow-card);
  --lueur-froide: transparent;
  --lueur-chaude: transparent;

  --sidebar-bg:          var(--b-night);
  --sidebar-text:        var(--b-night-muted);
  --sidebar-text-hover:  var(--b-night-ink);
  --sidebar-active-bg:   var(--b-nav-active-bg);
  --sidebar-active-text: var(--b-nav-active);
  --content-bg:  var(--surface-basse);
  --border:      var(--trait);
  --text:        var(--encre);
  --text-muted:  var(--encre-douce);
  --primary:     var(--b-accent);
  --primary-hover: var(--b-accent-strong);

  /* Bootstrap. Les -rgb servent aux FONDS (.bg-*, barres de progression) :
   * ils prennent la teinte vive. Les textes (.text-*) sont repris plus bas. */
  --bs-body-font-family: var(--b-sans);
  --bs-body-bg: var(--surface-basse);
  --bs-body-bg-rgb: 245, 247, 251;
  --bs-body-color: var(--encre);
  --bs-body-color-rgb: 11, 22, 40;
  --bs-emphasis-color: #0B1628;
  --bs-heading-color: var(--encre);
  --bs-secondary-color: var(--encre-douce);
  --bs-secondary-bg: var(--surface-haute);
  --bs-tertiary-bg: var(--surface-basse);
  --bs-border-color: var(--trait);
  --bs-border-color-translucent: rgba(15, 23, 42, 0.08);
  --bs-border-radius: 8px;
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: 12px;
  --bs-border-radius-xl: 16px;
  --bs-link-color: var(--b-accent-ink);
  --bs-link-color-rgb: 11, 99, 229;
  --bs-link-hover-color: #094EB5;
  --bs-link-hover-color-rgb: 9, 78, 181;
  --bs-focus-ring-color: rgba(22, 119, 255, 0.30);
  --bs-primary: #1677FF;   --bs-primary-rgb: 22, 119, 255;
  --bs-success: #0D9488;   --bs-success-rgb: 13, 148, 136;
  --bs-warning: #F59E0B;   --bs-warning-rgb: 245, 158, 11;
  --bs-danger:  #EF4444;   --bs-danger-rgb: 239, 68, 68;
  --bs-info:    #38C8F4;   --bs-info-rgb: 56, 200, 244;
  --bs-secondary: #64748B; --bs-secondary-rgb: 100, 116, 139;
  --bs-primary-text-emphasis: var(--b-accent-ink);
  --bs-success-text-emphasis: var(--b-ok-ink);
  --bs-warning-text-emphasis: var(--b-warn-ink);
  --bs-danger-text-emphasis:  var(--b-crit-ink);
  --bs-info-text-emphasis:    var(--b-cyan-ink);
  --bs-secondary-text-emphasis: var(--encre-forte);
  --bs-primary-bg-subtle: var(--b-accent-soft);
  --bs-success-bg-subtle: var(--b-ok-soft);
  --bs-warning-bg-subtle: var(--b-warn-soft);
  --bs-danger-bg-subtle:  var(--b-crit-soft);
  --bs-info-bg-subtle:    var(--b-cyan-soft);
  --bs-secondary-bg-subtle: var(--b-off-soft);
  --bs-primary-border-subtle: #BCD6FF;
  --bs-success-border-subtle: #A7E3DA;
  --bs-warning-border-subtle: #FBDDA8;
  --bs-danger-border-subtle:  #F7C1C1;
  --bs-info-border-subtle:    #B3EAF4;
  --bs-secondary-border-subtle: var(--trait);
}

[data-bs-theme="dark"] {
  --b-accent-ink:     #6AA8FF;   /* 6,4:1 sur la carte sombre */
  --b-accent-soft:    rgba(22, 119, 255, 0.16);
  --b-accent-line:    rgba(106, 168, 255, 0.40);
  /* Les teintes d'état du site, telles quelles : le mot dans la teinte,
   * sur la même teinte à 14 %. */
  --b-cyan-ink:       #38C8F4;
  --b-ok-ink:         #2DD4BF;
  --b-warn-ink:       #F5B74A;
  --b-crit-ink:       #F87171;
  --b-ok:             #2DD4BF;
  --b-warn:           #F5B74A;
  --b-crit:           #F87171;
  --b-cyan:           #38C8F4;
  --b-cyan-soft:      rgba(56, 200, 244, 0.14);
  --b-ok-soft:        rgba(45, 212, 191, 0.14);
  --b-warn-soft:      rgba(245, 183, 74, 0.14);
  --b-crit-soft:      rgba(248, 113, 113, 0.14);
  --b-off-soft:       rgba(154, 168, 189, 0.12);
  --b-line-strong:    #64789A;   /* 3,4:1 sur le panneau sombre */
  --b-focus:          #38C8F4;   /* l'anneau cyan du site */
  --b-glass:          rgba(13, 27, 51, 0.78);
  --b-shadow-card:    0 1px 2px rgba(0, 0, 0, 0.32);
  --b-shadow-float:   0 16px 40px rgba(0, 0, 0, 0.45);
  --b-close-filter:   invert(1) grayscale(100%) brightness(200%);

  /* Les fonds du site : la page #081427, les panneaux #0D1B33, des filets
   * translucides. La barre latérale reste le point le plus sombre. */
  --surface:          #0D1B33;
  --surface-basse:    #081427;
  --surface-haute:    #13233F;
  --surface-inverse:  #0B1628;
  --trait:            rgba(148, 163, 184, 0.14);
  --trait-fort:       rgba(148, 163, 184, 0.24);
  --encre:            #E8EEF8;
  --encre-douce:      #94A3B8;   /* 6:1 sur le panneau, 7,1:1 sur la page */
  --encre-tenue:      #64748B;
  --encre-forte:      #C9D4E3;
  --encre-inverse:    #E8EEF8;
  --accent:           #6AA8FF;
  --accent-fort:      #8CB8FF;
  --accent-doux:      rgba(22, 119, 255, 0.16);
  --accent-appuye:    #8CB8FF;
  --accent-voile:     rgba(22, 119, 255, 0.10);
  --danger:           #F87171;
  --danger-doux:      rgba(239, 68, 68, 0.16);
  --danger-appuye:    #FCA5A5;

  --verre:       var(--b-glass);
  --verre-trait: rgba(148, 163, 184, 0.14);
  --ombre-douce: var(--b-shadow-card);
  --lueur-froide: transparent;
  --lueur-chaude: transparent;

  --content-bg:  var(--surface-basse);
  --border:      var(--trait);
  --text:        var(--encre);
  --text-muted:  var(--encre-douce);
  --primary:     var(--b-accent);
  --primary-hover: var(--b-accent-strong);
  --sidebar-bg:  var(--b-night);

  --bs-body-bg: var(--surface-basse);
  --bs-body-bg-rgb: 8, 20, 39;
  --bs-body-color: var(--encre);
  --bs-body-color-rgb: 232, 238, 248;
  --bs-emphasis-color: #FFFFFF;
  --bs-heading-color: var(--encre);
  --bs-secondary-color: var(--encre-douce);
  --bs-secondary-bg: var(--surface-haute);
  --bs-tertiary-bg: #0B1628;
  --bs-border-color: var(--trait);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.08);
  --bs-link-color: var(--b-accent-ink);
  --bs-link-color-rgb: 106, 168, 255;
  --bs-link-hover-color: #8CB8FF;
  --bs-link-hover-color-rgb: 140, 184, 255;
  --bs-primary: #4C97FF;   --bs-primary-rgb: 76, 151, 255;
  --bs-secondary: #94A3B8; --bs-secondary-rgb: 148, 163, 184;
  --bs-success: #2DD4BF;   --bs-success-rgb: 45, 212, 191;
  --bs-warning: #F5B74A;   --bs-warning-rgb: 245, 183, 74;
  --bs-danger:  #F87171;   --bs-danger-rgb: 248, 113, 113;
  --bs-info:    #38C8F4;   --bs-info-rgb: 56, 200, 244;
  --bs-primary-text-emphasis: var(--b-accent-ink);
  --bs-success-text-emphasis: var(--b-ok-ink);
  --bs-warning-text-emphasis: var(--b-warn-ink);
  --bs-danger-text-emphasis:  var(--b-crit-ink);
  --bs-info-text-emphasis:    var(--b-cyan-ink);
  --bs-secondary-text-emphasis: var(--encre-forte);
  --bs-primary-bg-subtle: var(--b-accent-soft);
  --bs-success-bg-subtle: var(--b-ok-soft);
  --bs-warning-bg-subtle: var(--b-warn-soft);
  --bs-danger-bg-subtle:  var(--b-crit-soft);
  --bs-info-bg-subtle:    var(--b-cyan-soft);
  --bs-secondary-bg-subtle: var(--b-off-soft);
  --bs-primary-border-subtle: rgba(106, 168, 255, 0.35);
  --bs-success-border-subtle: rgba(45, 212, 191, 0.30);
  --bs-warning-border-subtle: rgba(245, 183, 74, 0.30);
  --bs-danger-border-subtle:  rgba(248, 113, 113, 0.35);
  --bs-info-border-subtle:    rgba(56, 200, 244, 0.30);
  --bs-secondary-border-subtle: var(--trait);
}

/* ── 2. Fond, typographie ───────────────────────────────────────────── */
body {
  font-family: var(--b-sans);
  background: var(--surface-basse);
  color: var(--encre);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* Plus de halos : le calme du fond rend les alertes lisibles. */
#content { background-image: none; }

/* Les titres du site : graisse 650, interlettrage serré. */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 650; letter-spacing: -0.02em; text-wrap: balance; }
.fw-bold, b, strong { font-weight: 600; }

/* La chasse fixe pour ce qui se lit caractère par caractère. */
code, kbd, pre, samp, .font-monospace, .bl-mono { font-family: var(--b-mono) !important; }
code:not(.prose code) {
  color: var(--encre);
  background: var(--surface-haute);
  border: 1px solid var(--trait);
  border-radius: 6px;
  padding: 0.05rem 0.35rem;
  font-weight: 500;
  font-size: 0.82em;
}
/* Une référence se lit d'un bloc : « TCK-2026-0001 » ne se coupe pas. */
.table code { border-radius: 6px; color: var(--encre); white-space: nowrap; }

/* Les chiffres qui s'alignent en colonne. */
.table, .kpi-value, .badge { font-variant-numeric: tabular-nums; }

/* Textes colorés : la variante lisible, dans les deux thèmes. */
.text-primary { color: var(--b-accent-ink) !important; }
.text-success { color: var(--b-ok-ink) !important; }
.text-warning { color: var(--b-warn-ink) !important; }
.text-danger  { color: var(--b-crit-ink) !important; }
.text-info    { color: var(--b-cyan-ink) !important; }
.text-muted, .text-body-secondary, .text-secondary { color: var(--encre-douce) !important; }
a:not(.btn):not(.sidebar-nav-item):not(.nav-link):not(.dropdown-item):not(.list-group-item):not(.procedure-card) { text-underline-offset: 2px; }

/* ── 3. Focus clavier : un anneau plein, jamais retiré ───────────────── */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
.sidebar-nav-item:focus-visible {
  outline: 2px solid var(--b-focus);
  outline-offset: 3px;
}
.btn:focus-visible { outline: 2px solid var(--b-focus); outline-offset: 3px; box-shadow: none; }
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: var(--b-accent);
  box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.22);
}

/* ── 4. La barre latérale : bleu nuit, compacte, rangée par modules ──── */
#sidebar {
  background: var(--b-night);
  border: 0;
  border-radius: var(--rayon-lg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
  top: 0.75rem; left: 0.75rem;
  height: calc(100vh - 1.5rem);
  padding-bottom: 0.25rem;
}
#content { margin-left: calc(var(--sidebar-width) + 1.5rem); }
@media (max-width: 992px) {
  #sidebar { top: 0; left: 0; height: 100vh; border-radius: 0; }
  #app #content { margin-left: var(--sidebar-width); }
}
@media (max-width: 768px) {
  #content, #app #content { margin-left: 0 !important; }
}

.sidebar-brand { padding: 1.1rem 1.1rem 0.75rem; border-bottom: 0; }
.sidebar-brand h1 { font-size: 1rem; font-weight: 650; letter-spacing: -0.02em; color: var(--b-night-ink); gap: 0.55rem; }
.sidebar-brand h1 i { color: #4C97FF !important; }      /* 6,2:1 sur night */
.sidebar-brand h1 i.text-danger { color: #F87171 !important; }
.sidebar-brand .subtitle { color: var(--b-night-label); font-size: 0.75rem; letter-spacing: 0.06em; }

.sidebar-search { padding: 0.25rem 0.75rem 0.5rem; }
.sidebar-search input {
  /* La loupe du texte d'aide est un glyphe de Bootstrap Icons (U+F52A) :
   * Inter ne l'a pas, la police d'icônes prend le relais. */
  font-family: var(--b-sans), "bootstrap-icons";
  background: var(--b-night-raised);
  border: 1px solid transparent;
  border-radius: var(--rayon-sm);
  color: var(--b-night-ink);
  font-size: var(--txt-xs);
  padding: 0.45rem 0.7rem;
  transition: border-color 120ms var(--b-ease), box-shadow 120ms var(--b-ease);
}
.sidebar-search input::placeholder { color: var(--b-night-muted); }
.sidebar-search input:focus { border-color: var(--b-accent); box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.35); }

.sidebar-section { padding: 0.35rem 0; }
.sidebar-section-title {
  color: var(--b-night-label);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 0.6rem 1.1rem 0.25rem;
}
.sidebar-nav-item {
  min-height: 34px;
  padding: 0.4rem 0.65rem;
  margin: 1px 0.6rem;
  border: 0;
  border-radius: var(--rayon-sm);
  color: var(--b-night-muted);
  font-size: var(--txt-xs);
  font-weight: 500;
  gap: 0.65rem;
  transition: background-color 120ms var(--b-ease), color 120ms var(--b-ease);
}
.sidebar-nav-item i { font-size: 1.02rem; width: 1.15rem; opacity: 0.92; }
.sidebar-nav-item:hover { background: rgba(148, 163, 184, 0.08); color: var(--b-night-ink); }
.sidebar-nav-item.active { background: var(--b-nav-active-bg); color: var(--b-nav-active); }
.sidebar-nav-item.active i { opacity: 1; }

/* Les compteurs de la barre : sur la nuit, pas sur une pastille claire. */
#sidebar .badge {
  margin-left: auto;
  background: var(--b-night-raised) !important;
  color: var(--b-night-ink) !important;
  border-radius: 999px;
  min-width: 20px;
  padding: 0.2em 0.5em !important;
  font-size: 0.75rem;
}
#sidebar .badge.bg-danger { background: var(--b-crit) !important; color: var(--b-night) !important; }   /* 4,8:1 */
#sidebar .badge.bg-warning { background: var(--b-warn) !important; color: var(--b-night) !important; }  /* 8,4:1 */
#sidebar .text-warning { color: var(--b-warn) !important; }
#sidebar .text-info    { color: var(--b-cyan) !important; }

.dark-mode-switch .form-check-input { background-color: var(--b-night-raised); border-color: #2A3E5C; }
.dark-mode-switch .form-check-input:checked { background-color: var(--b-accent-strong); border-color: var(--b-accent-strong); }

.sidebar-footer { border-top: 1px solid var(--b-night-raised); padding: 0.85rem 0.9rem 0.6rem; }
.user-avatar {
  background: var(--b-accent-strong) !important;
  color: #FFFFFF;
  box-shadow: none;
  width: 32px; height: 32px;
  font-size: 0.8125rem;
}
.user-name { color: var(--b-night-ink); font-weight: 600; font-size: var(--txt-xs); }
.user-role { color: var(--b-night-label); font-size: 0.75rem; }
.sidebar-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  background: var(--b-night-raised);
  color: var(--b-night-muted);
  border: 1px solid transparent;
  border-radius: var(--rayon-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.35rem 0.5rem;
  transition: background-color 120ms var(--b-ease), color 120ms var(--b-ease);
}
.sidebar-btn:hover { background: #13233F; color: var(--b-night-ink); }

#sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); background-clip: padding-box; }

/* ── 5. L'en-tête de page : le seul verre de l'application ─────────────
 *
 * Collant, translucide, flouté : le contenu défile dessous, et c'est le seul
 * endroit où la transparence a un sens. Préfixé par #content pour passer
 * devant les trois définitions successives de style.css. */
#content .page-header {
  background: var(--b-glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--b-shadow-card);
  margin: 0.75rem 1.25rem 0.25rem 0.75rem;
  padding: 0.8rem 1.25rem;
  top: 0.75rem;
  animation: none;
}
@supports not (backdrop-filter: blur(1px)) {
  #content .page-header { background: var(--surface); }
}
#content .page-header h2 {
  font-size: 1.375rem;
  line-height: 1.75rem;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--encre);
}
#content .page-header h2 > .bi:first-child { color: var(--b-accent) !important; font-size: 1.15rem; vertical-align: -0.05em; }
#content .page-header .actions { gap: 0.5rem; }
#menu-toggle { color: var(--encre); }

#content .page-body { padding: 1rem 1.25rem 2.5rem 0.75rem; }
#content > .page-body > * { animation: none; }
@media (max-width: 768px) {
  #content .page-header { margin: 0.5rem 0.5rem 0.25rem; padding: 0.7rem 0.9rem; }
  #content .page-body { padding: 0.75rem 0.5rem 2rem; }
}

/* ── 6. Cartes ──────────────────────────────────────────────────────── */
.card {
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--trait);
  --bs-card-border-radius: var(--rayon);
  --bs-card-inner-border-radius: calc(var(--rayon) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-padding-y: 0.85rem;
  --bs-card-cap-padding-x: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
  border-radius: var(--rayon);
  box-shadow: var(--b-shadow-card);
  transition: box-shadow 200ms var(--b-ease), transform 200ms var(--b-ease);
}
.card-header { background: transparent; border-bottom: 1px solid var(--trait); font-weight: 600; }
.card-footer { background: transparent; border-top: 1px solid var(--trait); }
.card.shadow-sm:hover { transform: none; box-shadow: var(--b-shadow-card) !important; }
.card-formulaire:hover { transform: none !important; }
.shadow-sm { box-shadow: var(--b-shadow-card) !important; }
.shadow, .shadow-lg { box-shadow: var(--b-shadow-float) !important; }

/* Les cartes de procédure et de ville : cliquables, elles s'élèvent d'un pixel. */
.procedure-card,
.salon-card {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--b-shadow-card);
  transition: box-shadow 200ms var(--b-ease), transform 200ms var(--b-ease), border-color 200ms var(--b-ease);
}
.procedure-card::before { content: none; }
.procedure-card:hover,
.salon-card:hover {
  border-color: var(--b-accent-line);
  box-shadow: var(--b-shadow-float) !important;
  transform: translateY(-1px);
}
.salon-card { border-width: 1px; border-radius: var(--rayon-lg); }

/* Les filtres par catégorie des procédures. La couleur de la catégorie
 * (--cat, posée par dashboard.js) marque le point et, active, le contour ;
 * le mot reste dans l'encre du thème. */
.category-pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--trait);
  border-radius: 999px;
  background: var(--surface);
  color: var(--encre-douce);
  font-size: var(--txt-xs);
  font-weight: 500;
  text-decoration: none;
  transition: border-color 120ms var(--b-ease), color 120ms var(--b-ease), background-color 120ms var(--b-ease);
}
.category-pill:hover { color: var(--encre); border-color: var(--trait-fort); }
.category-pill.active {
  color: var(--encre);
  border-color: var(--cat);
  background: color-mix(in srgb, var(--cat) 12%, var(--surface));
}
.category-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); flex: none; }
.category-pill-count { font-size: 0.75rem; color: var(--encre-douce); font-variant-numeric: tabular-nums; }

/* L'étiquette de catégorie d'une procédure : la teinte de la catégorie,
 * mêlée à l'encre du thème pour rester lisible (6:1 et plus, deux thèmes). */
.category-badge {
  background: color-mix(in srgb, var(--cat, #94A3B8) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat, #94A3B8) 30%, transparent);
  color: color-mix(in srgb, var(--cat, #94A3B8) 55%, var(--encre));
  letter-spacing: 0.06em;
}

/* ── 7. Indicateurs ─────────────────────────────────────────────────────
 *
 * Le chiffre en encre, pas en couleur : la couleur est réservée aux états.
 * C'est l'écart de taille qui le désigne. */
.kpi-card,
.stat-carte {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--b-shadow-card);
}
.kpi-card:hover, .stat-carte:hover { transform: none; box-shadow: var(--b-shadow-card); }
.kpi-value,
.stat-carte .valeur,
[data-bs-theme="dark"] .kpi-value,
[data-bs-theme="dark"] .stat-carte .valeur {
  color: var(--encre);
  font-weight: 650;
  letter-spacing: -0.03em;
}
.kpi-label,
.stat-carte .libelle {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--encre-douce);
}
.kpi-card > .bi:first-child,
.stat-carte > .bi:first-child,
[data-bs-theme="dark"] .kpi-card > .bi:first-child,
[data-bs-theme="dark"] .stat-carte > .bi:first-child {
  background: var(--b-accent-soft);
  color: var(--b-accent-ink);
  border-radius: var(--rayon-sm);
}

/* ── 8. Tableaux ────────────────────────────────────────────────────────
 *
 * Denses et alignés : rangées de 44 px, filet entre elles, en-têtes en
 * capitales sur une bande à peine teintée, survol d'un cran. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--encre);
  --bs-table-border-color: var(--trait);
  --bs-table-hover-bg: var(--surface-haute);
  --bs-table-hover-color: var(--encre);
  --bs-table-striped-bg: var(--surface-basse);
  --bs-table-striped-color: var(--encre);
  --bs-table-active-bg: var(--b-accent-soft);
  --bs-table-active-color: var(--encre);
  margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: 0.65rem 0.75rem; }
.table-sm > :not(caption) > * > * { padding: 0.4rem 0.6rem; }
[data-bs-theme] .table-light,
.table > thead {
  --bs-table-bg: var(--surface-haute);
  --bs-table-color: var(--encre-douce);
  --bs-table-border-color: var(--trait);
}
/* En-têtes : le jeton des micro-libellés (13 px), règle de l'application
 * éprouvée par test-typographie.js — un en-tête en dur était tombé à 11,5 px. */
.table > thead th,
.table-light th,
[data-bs-theme="dark"] .table > thead th,
[data-bs-theme="dark"] .table-light th {
  text-transform: uppercase;
  font-size: var(--txt-xxs);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--encre-douce);
  white-space: nowrap;
  border-bottom: 1px solid var(--trait);
  padding-top: 0.55rem;
  padding-bottom: 0.55rem;
}
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table-hover > tbody > tr { transition: background-color 120ms var(--b-ease); }
thead th[data-sort]:hover,
thead th[data-sort-stock]:hover,
thead th[data-sort-cert]:hover { background: var(--trait); color: var(--encre); }
.table-responsive { border-radius: var(--rayon); }
.table-responsive table:has(thead th:last-child:is(:empty, .col-actions)) > thead > tr > th:last-child { background: var(--surface-haute); }
/* Une rangée sélectionnée — « table-active », « table-primary ». */
.table-active, .table-primary { --bs-table-bg: var(--b-accent-soft); --bs-table-color: var(--encre); }

/* ── 9. Boutons ─────────────────────────────────────────────────────────
 *
 * Le bouton principal porte le bleu, une fois par vue, en dégradé avec le
 * halo du site — assombri d'un demi-ton pour que le blanc y tienne 4,5:1
 * d'un bout à l'autre. Les autres s'effacent. */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: 10px;
  --bs-btn-focus-box-shadow: none;
  letter-spacing: -0.005em;
  transition: background-color 120ms var(--b-ease), border-color 120ms var(--b-ease), color 120ms var(--b-ease), box-shadow 120ms var(--b-ease), transform 120ms var(--b-ease);
}
.btn:active { transform: scale(0.98); }
.btn:disabled, .btn.disabled { transform: none; }
.btn-sm { --bs-btn-padding-y: 0.3rem; --bs-btn-padding-x: 0.65rem; --bs-btn-border-radius: 9px; }

.btn-primary {
  --bs-btn-color: #FFFFFF;
  --bs-btn-bg: var(--b-accent-strong);
  --bs-btn-border-color: var(--b-accent-strong);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-bg: #0A58CC;
  --bs-btn-hover-border-color: #0A58CC;
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-active-bg: #094EB5;
  --bs-btn-active-border-color: #094EB5;
  --bs-btn-disabled-color: #FFFFFF;
  --bs-btn-disabled-bg: var(--b-accent-strong);
  --bs-btn-disabled-border-color: var(--b-accent-strong);
  /* #1769EE → #0F57D6 : 4,8:1 puis 6,3:1 sous du blanc. */
  background-image: linear-gradient(135deg, #1769EE, #0F57D6);
  border-color: transparent;
  box-shadow: 0 10px 28px -12px rgba(22, 119, 255, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover { background-image: linear-gradient(135deg, #1462E0, #0C4FC4); }
.btn-primary:active { background-image: linear-gradient(135deg, #1157C8, #0A45AD); }
.btn-primary:disabled, .btn-primary.disabled { box-shadow: none; }
.btn-secondary,
.btn-outline-secondary,
.btn-light {
  --bs-btn-color: var(--encre);
  --bs-btn-bg: var(--surface);
  --bs-btn-border-color: var(--trait);
  --bs-btn-hover-color: var(--encre);
  --bs-btn-hover-bg: var(--surface-haute);
  --bs-btn-hover-border-color: var(--trait-fort);
  --bs-btn-active-color: var(--encre);
  --bs-btn-active-bg: var(--surface-haute);
  --bs-btn-active-border-color: var(--trait-fort);
  --bs-btn-disabled-color: var(--encre-douce);
  --bs-btn-disabled-bg: var(--surface);
  --bs-btn-disabled-border-color: var(--trait);
}
.btn-secondary, .btn-outline-secondary { box-shadow: var(--b-shadow-card); }
/* En sombre, le bouton « fantôme » du site : un voile blanc à peine posé. */
[data-bs-theme="dark"] .btn-secondary,
[data-bs-theme="dark"] .btn-outline-secondary,
[data-bs-theme="dark"] .btn-light {
  --bs-btn-bg: rgba(255, 255, 255, 0.04);
  --bs-btn-border-color: var(--trait-fort);
  --bs-btn-hover-bg: rgba(255, 255, 255, 0.08);
  --bs-btn-active-bg: rgba(255, 255, 255, 0.10);
  --bs-btn-disabled-bg: rgba(255, 255, 255, 0.02);
  box-shadow: none;
}
.btn-outline-primary {
  --bs-btn-color: var(--b-accent-ink);
  --bs-btn-border-color: var(--b-accent-line);
  --bs-btn-hover-color: var(--b-accent-ink);
  --bs-btn-hover-bg: var(--b-accent-soft);
  --bs-btn-hover-border-color: var(--b-accent-line);
  --bs-btn-active-color: var(--b-accent-ink);
  --bs-btn-active-bg: var(--b-accent-soft);
  --bs-btn-active-border-color: var(--b-accent);
  --bs-btn-disabled-color: var(--b-accent-ink);
  --bs-btn-disabled-border-color: var(--b-accent-line);
}
.btn-outline-danger {
  --bs-btn-color: var(--b-crit-ink);
  --bs-btn-border-color: var(--bs-danger-border-subtle);
  --bs-btn-hover-color: var(--b-crit-ink);
  --bs-btn-hover-bg: var(--b-crit-soft);
  --bs-btn-hover-border-color: var(--b-crit-ink);
  --bs-btn-active-color: var(--b-crit-ink);
  --bs-btn-active-bg: var(--b-crit-soft);
  --bs-btn-active-border-color: var(--b-crit-ink);
  --bs-btn-disabled-color: var(--b-crit-ink);
  --bs-btn-disabled-border-color: var(--bs-danger-border-subtle);
}
.btn-outline-success {
  --bs-btn-color: var(--b-ok-ink);
  --bs-btn-border-color: var(--bs-success-border-subtle);
  --bs-btn-hover-color: var(--b-ok-ink);
  --bs-btn-hover-bg: var(--b-ok-soft);
  --bs-btn-hover-border-color: var(--b-ok-ink);
  --bs-btn-active-color: var(--b-ok-ink);
  --bs-btn-active-bg: var(--b-ok-soft);
  --bs-btn-active-border-color: var(--b-ok-ink);
}
.btn-outline-warning {
  --bs-btn-color: var(--b-warn-ink);
  --bs-btn-border-color: var(--bs-warning-border-subtle);
  --bs-btn-hover-color: var(--b-warn-ink);
  --bs-btn-hover-bg: var(--b-warn-soft);
  --bs-btn-hover-border-color: var(--b-warn-ink);
  --bs-btn-active-color: var(--b-warn-ink);
  --bs-btn-active-bg: var(--b-warn-soft);
  --bs-btn-active-border-color: var(--b-warn-ink);
}
.btn-outline-info {
  --bs-btn-color: var(--b-cyan-ink);
  --bs-btn-border-color: var(--bs-info-border-subtle);
  --bs-btn-hover-color: var(--b-cyan-ink);
  --bs-btn-hover-bg: var(--b-cyan-soft);
  --bs-btn-hover-border-color: var(--b-cyan-ink);
  --bs-btn-active-color: var(--b-cyan-ink);
  --bs-btn-active-bg: var(--b-cyan-soft);
  --bs-btn-active-border-color: var(--b-cyan-ink);
}
.btn-success {
  --bs-btn-color: #FFFFFF; --bs-btn-bg: #0F766E; --bs-btn-border-color: #0F766E;        /* 5,5:1 */
  --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #0D6660; --bs-btn-hover-border-color: #0D6660;
  --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #0B5752; --bs-btn-active-border-color: #0B5752;
  --bs-btn-disabled-color: #FFFFFF; --bs-btn-disabled-bg: #0F766E; --bs-btn-disabled-border-color: #0F766E;
}
.btn-danger {
  --bs-btn-color: #FFFFFF; --bs-btn-bg: #C62828; --bs-btn-border-color: #C62828;        /* 5,6:1 */
  --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #AE2121; --bs-btn-hover-border-color: #AE2121;
  --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #971C1C; --bs-btn-active-border-color: #971C1C;
  --bs-btn-disabled-color: #FFFFFF; --bs-btn-disabled-bg: #C62828; --bs-btn-disabled-border-color: #C62828;
}
.btn-warning {
  --bs-btn-color: #0B1628; --bs-btn-bg: #F59E0B; --bs-btn-border-color: #F59E0B;        /* 8,4:1 */
  --bs-btn-hover-color: #0B1628; --bs-btn-hover-bg: #E08E06; --bs-btn-hover-border-color: #E08E06;
  --bs-btn-active-color: #0B1628; --bs-btn-active-bg: #C97F05; --bs-btn-active-border-color: #C97F05;
}
.btn-info {
  --bs-btn-color: #FFFFFF; --bs-btn-bg: #0E7490; --bs-btn-border-color: #0E7490;        /* 5,4:1 */
  --bs-btn-hover-color: #FFFFFF; --bs-btn-hover-bg: #0C6680; --bs-btn-hover-border-color: #0C6680;
  --bs-btn-active-color: #FFFFFF; --bs-btn-active-bg: #0A576D; --bs-btn-active-border-color: #0A576D;
}
.btn-link { --bs-btn-color: var(--b-accent-ink); --bs-btn-hover-color: var(--bs-link-hover-color); font-weight: 500; }
.btn-close { opacity: 0.6; }
.btn-close:hover { opacity: 1; }

/* ── 10. Pastilles d'état ───────────────────────────────────────────────
 *
 * Les pastilles pleines de Bootstrap — blanc sur vert, sur orange, sur
 * cyan — tombaient entre 1,6 et 2,5:1. Elles deviennent des pastilles
 * teintées : un fond pâle, le mot dans la teinte « -ink ». Toutes à plus de
 * 4,5:1, dans les deux thèmes. */
.badge {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0;
  padding: 0.3em 0.65em;
  font-size: var(--txt-xxs);
}
.badge.bg-success   { background: var(--b-ok-soft) !important;   color: var(--b-ok-ink) !important; }
.badge.bg-warning   { background: var(--b-warn-soft) !important; color: var(--b-warn-ink) !important; }
.badge.bg-danger    { background: var(--b-crit-soft) !important; color: var(--b-crit-ink) !important; }
.badge.bg-info      { background: var(--b-cyan-soft) !important; color: var(--b-cyan-ink) !important; }
.badge.bg-primary   { background: var(--b-accent-soft) !important; color: var(--b-accent-ink) !important; }
.badge.bg-secondary { background: var(--b-off-soft) !important;  color: var(--encre-forte) !important; }
.badge.bg-light     { background: var(--surface-haute) !important; color: var(--encre) !important; border-color: var(--trait) !important; }
.badge.bg-dark      { background: var(--b-night) !important; color: var(--b-night-ink) !important; }
/* Les pastilles déjà « subtiles » prennent la teinte lisible. */
.badge[class*="-subtle"] { border-color: transparent !important; }

/* ── 11. Formulaires ────────────────────────────────────────────────────
 *
 * Bordure à 3:1 (--b-line-strong) : c'est elle qui dit « ici, on écrit ».
 * Un filet décoratif à 1,2:1 ne délimite rien. */
.form-control,
.form-select,
.tags-field {
  background-color: var(--surface);
  color: var(--encre);
  border: 1px solid var(--b-line-strong);
  border-radius: var(--rayon-sm);
  transition: border-color 120ms var(--b-ease), box-shadow 120ms var(--b-ease);
}
.form-control::placeholder { color: var(--encre-douce); opacity: 0.85; }
/* Plusieurs textes d'aide commencent par la loupe de Bootstrap Icons
 * (U+F52A, «  Agent, modèle… ») : Inter n'a pas ce glyphe,
 * la police d'icônes prend le relais au lieu d'un carré vide. */
input, select, textarea, .form-control, .form-select { font-family: var(--b-sans), "bootstrap-icons"; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--surface-haute); }
.tags-field.focused { border-color: var(--b-accent); box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.22); }
.input-group-text {
  background: var(--surface-haute);
  border-color: var(--b-line-strong);
  color: var(--encre-douce);
}
.form-label, .col-form-label { font-weight: 600; font-size: var(--txt-xs); color: var(--encre); margin-bottom: 0.35rem; }
.form-text { color: var(--encre-douce); }
.form-check-input { border-color: var(--b-line-strong); background-color: var(--surface); }
.form-check-input:checked { background-color: var(--b-accent-strong); border-color: var(--b-accent-strong); }
.form-switch .form-check-input:focus { box-shadow: 0 0 0 3px rgba(22, 119, 255, 0.22); }

/* ── 12. Onglets ────────────────────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--trait); gap: 0.25rem; }
.nav-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--encre-douce);
  font-weight: 500;
  padding: 0.55rem 0.85rem;
  margin-bottom: -1px;
  background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--encre); border-bottom-color: var(--trait-fort); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--encre);
  background: transparent;
  border-bottom-color: var(--b-accent);
  font-weight: 600;
}
.nav-pills .nav-link { border-radius: var(--rayon-sm); color: var(--encre-douce); font-weight: 500; }
.nav-pills .nav-link:hover { background: var(--surface-haute); color: var(--encre); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--b-accent-soft) !important;
  color: var(--b-accent-ink) !important;
  box-shadow: none;
}
#site-tabs .nav-link.active { border-color: var(--b-accent-line); background: var(--b-accent-soft) !important; }

/* ── 13. Fenêtres ───────────────────────────────────────────────────── */
.modal-content {
  background: var(--surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon-lg);
  box-shadow: var(--b-shadow-float);
}
.modal-header { border-bottom: 1px solid var(--trait); padding: 1rem 1.25rem; }
.modal-title { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.02em; }
.modal-body { padding: 1.25rem; }
.modal-footer { border-top: 1px solid var(--trait); padding: 0.75rem 1.25rem; gap: 0.5rem; }
.modal-backdrop { --bs-backdrop-bg: #0B1628; --bs-backdrop-opacity: 0.42; }
.modal-backdrop.show { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal.fade .modal-dialog { transition: transform 320ms var(--b-ease), opacity 200ms var(--b-ease); }
.modal.fade:not(.show) .modal-dialog { transform: translateY(8px) scale(0.99); }

/* ── 14. Alertes, listes, menus, progression ────────────────────────── */
.alert { border-radius: var(--rayon); border-width: 1px; }
.alert-light, .alert-secondary { background: var(--surface-haute); color: var(--encre); border-color: var(--trait); }
.list-group {
  --bs-list-group-bg: var(--surface);
  --bs-list-group-color: var(--encre);
  --bs-list-group-border-color: var(--trait);
  --bs-list-group-border-radius: var(--rayon);
  --bs-list-group-action-hover-bg: var(--surface-haute);
  --bs-list-group-action-hover-color: var(--encre);
  --bs-list-group-active-bg: var(--b-accent-soft);
  --bs-list-group-active-color: var(--b-accent-ink);
  --bs-list-group-active-border-color: var(--b-accent-line);
}
.dropdown-menu {
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-border-color: var(--trait);
  --bs-dropdown-border-radius: var(--rayon);
  --bs-dropdown-link-hover-bg: var(--surface-haute);
  --bs-dropdown-link-active-bg: var(--b-accent-soft);
  --bs-dropdown-link-active-color: var(--b-accent-ink);
  box-shadow: var(--b-shadow-float);
}
.progress, .progress-stacked {
  --bs-progress-bg: var(--surface-haute);
  --bs-progress-border-radius: 999px;
  --bs-progress-bar-bg: var(--b-accent);
}
.spinner-border.text-primary { color: var(--b-accent) !important; }

/* ── 15. Notifications ─────────────────────────────────────────────────
 *
 * Une surface claire, l'icône dans la teinte du type : un toast blanc sur
 * vert faisait 2,5:1. */
.toast-container-fixed {
  position: fixed; top: 1rem; right: 1rem; z-index: 9999;
  display: flex; flex-direction: column; gap: 0.5rem; max-width: 400px;
}
.toast-container-fixed .toast {
  background: var(--surface) !important;
  color: var(--encre) !important;
  border: 1px solid var(--trait) !important;
  border-radius: var(--rayon);
  box-shadow: var(--b-shadow-float);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  animation: b-toast-in 240ms var(--b-ease);
}
.toast-container-fixed .toast.text-bg-success .bi { color: var(--b-ok-ink); }
.toast-container-fixed .toast.text-bg-danger .bi  { color: var(--b-crit-ink); }
.toast-container-fixed .toast.text-bg-warning .bi { color: var(--b-warn-ink); }
.toast-container-fixed .toast.text-bg-info .bi    { color: var(--b-cyan-ink); }
.toast-container-fixed .btn-close-white { filter: var(--b-close-filter); }
@keyframes b-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── 16. Contenu des procédures ─────────────────────────────────────── */
.prose { font-size: 1rem; line-height: 1.7; }
.prose h1 { font-size: 1.75rem; border-bottom: 1px solid var(--trait); letter-spacing: -0.02em; }
.prose h2 { font-size: 1.35rem; border-bottom: 1px solid var(--trait); }
.prose blockquote { border-left: 3px solid var(--b-accent); background: var(--b-accent-soft); color: var(--encre); border-radius: 0 var(--rayon-sm) var(--rayon-sm) 0; }
.prose a { color: var(--b-accent-ink); }
.prose code { color: var(--encre); background: var(--surface-haute); border-color: var(--trait); font-family: var(--b-mono); }
.prose pre { background: var(--b-night); border-radius: var(--rayon); }
.prose pre code { color: var(--b-night-ink); }
.tag, .tag-chip { background: var(--surface-haute); color: var(--encre-forte); border-radius: 6px; }
.tag:hover { transform: none; }

/* ── 17. États vides : immobiles ────────────────────────────────────── */
.empty-state i { animation: none; opacity: 0.35; }

/* ── 18. Barres de défilement discrètes ─────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(125, 141, 163, 0.38); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(125, 141, 163, 0.6); background-clip: padding-box; }

/* ── 19. Mouvement réduit ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:active, .procedure-card:hover, .salon-card:hover { transform: none; }
}

/* La copie de la barre de défilement d'un tableau large : voir layout.js. */
#barre-defilement {
  position: fixed;
  bottom: 0;
  z-index: 1020;
  height: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--surface);
  border-top: 1px solid var(--trait);
}
#barre-defilement > div { height: 1px; }