/* =============================================================
   MIB — Habillage des consoles d'administration
   -------------------------------------------------------------
   Ce fichier ne décrit AUCUN écran en particulier : il décrit la
   coquille commune à toutes les consoles de la plateforme — la
   barre latérale, le bandeau, les cartes, les tableaux, les
   fenêtres modales.

   Il vient de « center.html », où il vivait en clair dans la page.
   L'espace Entreprise avait besoin de la même coquille : le
   recopier aurait fait deux descriptions concurrentes d'une seule
   apparence, et c'est ainsi qu'on finit par corriger un bouton
   d'un côté sans le corriger de l'autre. Il est donc sorti tel
   quel, sans une règle changée, et les deux pages le lisent.

   Prérequis : « design-tokens.css » puis « mib-design.css », dans
   cet ordre — tout ce qui suit s'exprime en variables issues des
   deux.
   ============================================================= */

/* =============================================================
   Aliases legacy → MIB Vigil
   On garde les anciennes classes (.btn, .card, .kpi, .inp, .tbl)
   mais on les restyle avec les design tokens Vigil pour ne pas
   réécrire tout le HTML/JS de la page.
   ============================================================= */

html, body { height: 100%; font-family: var(--font-body); color: var(--text-2); }

/* Fond de page avec halos brand */
.bg-wrap {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 10% 0%, rgba(16, 185, 129, 0.10) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 100%, rgba(37, 99, 235, 0.08) 0%, transparent 60%),
    var(--bg-page);
}

/* ============ SIDEBAR — gradient sombre brand ============ */
.sidebar {
  width: 240px;
  min-height: 100vh;
  background: var(--gradient-sidebar);
  border-right: 1px solid rgba(255,255,255,0.06);
  padding: var(--space-5) var(--space-3);
  flex-shrink: 0;
  box-shadow: 4px 0 20px rgba(15, 23, 42, 0.08);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: var(--z-sticky);
}
.sidebar .logo-t { color: #fff; }

/* Nav items */
.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: rgba(255, 255, 255, 0.7);
  transition: all var(--duration-fast);
  margin-bottom: 3px;
  user-select: none;
}
.nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.nav-item.on {
  background: rgba(16, 185, 129, 0.18);
  color: #fff;
  box-shadow: inset 3px 0 0 var(--vigil-400);
}
.nav-icon { font-size: 1rem; width: 20px; text-align: center; }

/* Bouton hamburger mobile (sidebar drawer) */
.sidebar-burger {
  display: none;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: 8px;
  cursor: pointer;
  color: var(--text-2);
  margin-right: var(--space-3);
  align-items: center;
  justify-content: center;
}
.sidebar-burger:hover { background: var(--neutral-100); }
.sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(6px);
  z-index: var(--z-overlay);
}
.sidebar-backdrop.open { display: block; }

/* ============ TOPBAR ============ */
.topbar {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-3) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  box-shadow: 0 2px 10px -4px rgba(15, 23, 42, 0.06);
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}
.topbar h1 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
  color: var(--text-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}
.topbar .text-3xs {
  font-size: 0.72rem;
  color: var(--text-3);
}

/* ============ CARD — relief 3D + barre brand ============ */
.card {
  position: relative;
  overflow: hidden;
  background: var(--bg-surface);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 4px 12px -2px rgba(15, 23, 42, 0.10),
    0 2px 4px -1px rgba(15, 23, 42, 0.06);
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-primary);
  z-index: 1;
}

/* ============ KPI — relief 3D + barre brand ============ */
.kpi {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #FFFFFF 0%, var(--vigil-50) 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 16px -4px rgba(15, 23, 42, 0.12),
    0 2px 6px -2px rgba(15, 23, 42, 0.06);
  transition: transform var(--duration-standard) var(--ease-out),
              box-shadow var(--duration-standard);
}
.kpi::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-primary);
  z-index: 1;
}
.kpi:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 14px 28px -6px rgba(15, 23, 42, 0.18),
    0 4px 10px -2px rgba(15, 23, 42, 0.08);
}
.kpi-val {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Surcharges Tailwind text-*-600 sur kpi-val (pour conserver les nuances par KPI) */
.kpi-val.text-blue-600 { background: linear-gradient(135deg, var(--info-600), var(--info-800)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi-val.text-green-600 { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi-val.text-purple-600 { background: linear-gradient(135deg, #7C3AED, #5B21B6); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi-val.text-orange-600 { background: linear-gradient(135deg, var(--warning-500), var(--warning-700)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kpi-lbl {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-3);
  margin-top: var(--space-1);
}
.kpi-icon { font-size: 1.5rem; margin-bottom: var(--space-2); }

/* ============ INPUTS ============ */
.inp {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  outline: none;
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
  -webkit-appearance: none;
  appearance: none;
}
.inp:hover { border-color: var(--border-strong); }
.inp:focus {
  border-color: var(--vigil-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}
.inp::placeholder { color: var(--text-4); }
.inp option { background: #fff; color: var(--text-1); }
.lbl {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-2);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  display: block;
  margin-bottom: var(--space-2);
}

/* ============ BUTTONS — relief 3D harmonisé ============ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition: all var(--duration-fast) var(--ease-in-out);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
}
/* Le survol, l'appui et le focus appartiennent à « mib-relief.css » depuis le
   20 août 2026. Les règles qui vivaient ici s'écrivaient
   « .btn:hover:not(:disabled) » — trois classes contre les deux du relief,
   donc gagnantes. Résultat : le socle apparaissait au repos, mais le bouton ne
   s'enfonçait plus. Michel : « patrol très bien, centre rien » — et il avait
   raison, puisque tout l'effet tient au MOUVEMENT.

   Retirer le doublon plutôt que surenchérir : un seul fichier décide de la
   façon dont un bouton réagit. Seule reste la mise en veille visuelle du
   bouton désactivé, qui n'entre en conflit avec rien. */
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Blue / Green = action principale (gradient brand) — réservés aux CTA majeurs */
.btn-blue,
.btn-green {
  background: var(--gradient-primary);
  color: var(--text-inverse);
  border-color: rgba(255, 255, 255, 0.15);
}
.btn-blue:hover:not(:disabled),
.btn-green:hover:not(:disabled) {
  background: var(--gradient-primary-hover);
}

/* Orange = warning (plat) */
.btn-orange {
  background: var(--warning-600);
  color: var(--text-inverse);
  border-color: rgba(255, 255, 255, 0.15);
}
.btn-orange:hover:not(:disabled) {
  background: var(--warning-700);
}

/* Red = danger (plat) */
.btn-red {
  background: var(--danger-600);
  color: var(--text-inverse);
  border-color: rgba(255, 255, 255, 0.15);
}
.btn-red:hover:not(:disabled) {
  background: var(--danger-700);
}

/* Gray = neutre / annuler (relief subtil) */
.btn-gray {
  background: #FFFFFF;
  color: var(--text-2);
  border-color: var(--border-default);
}
.btn-gray:hover:not(:disabled) {
  background: var(--neutral-50);
  color: var(--text-1);
  border-color: var(--border-strong);
}

.btn-sm { padding: 7px 12px; font-size: var(--text-xs); border-radius: var(--radius-sm); }
.btn-xs { padding: 5px 10px; font-size: 0.7rem; border-radius: var(--radius-sm); }

/* ============ TABLE ============ */
.tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.tbl th {
  background: var(--neutral-50);
  padding: 10px 14px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-3);
  text-align: left;
  border-bottom: 1px solid var(--border-default);
}
.tbl th:first-child { border-top-left-radius: var(--radius-md); }
.tbl th:last-child  { border-top-right-radius: var(--radius-md); }
.tbl td {
  padding: 12px 14px;
  font-size: var(--text-sm);
  color: var(--text-2);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--bg-surface);
  vertical-align: middle;
}
.tbl tr:hover td { background: var(--neutral-50); }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:last-child td:first-child { border-bottom-left-radius: var(--radius-md); }
.tbl tr:last-child td:last-child  { border-bottom-right-radius: var(--radius-md); }

/* ============ BADGES ============ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.b-green  { background: var(--success-100); color: var(--success-800); }
.b-blue   { background: var(--info-100);    color: var(--info-800); }
.b-orange { background: var(--warning-100); color: var(--warning-800); }
.b-red    { background: var(--danger-100);  color: var(--danger-800); }
.b-gray   { background: var(--neutral-100); color: var(--neutral-700); }
.b-purple { background: #F3E8FF; color: #6B21A8; }

/* ============ MODULE CARDS — cohérent avec KPI/cards ============ */
.mod-card {
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: var(--bg-surface);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 4px 12px -2px rgba(15, 23, 42, 0.10),
    0 2px 4px -1px rgba(15, 23, 42, 0.06);
  transition: transform var(--duration-fast), box-shadow var(--duration-fast);
}
.mod-on {
  background: linear-gradient(135deg, #FFFFFF 0%, var(--vigil-50) 100%);
  border-color: var(--vigil-200);
}
.mod-on::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--gradient-primary);
}
.mod-on { position: relative; overflow: hidden; }
.mod-on:hover {
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 12px 24px -6px rgba(15, 23, 42, 0.15),
    0 4px 8px -2px rgba(15, 23, 42, 0.08);
}
.mod-off {
  background: var(--neutral-50);
  border-color: var(--border-default);
  opacity: 0.6;
  box-shadow:
    0 1px 2px rgba(15, 23, 42, 0.04);
}
.mod-icon { font-size: 1.8rem; margin-bottom: var(--space-2); }
.mod-title {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--text-1);
  letter-spacing: var(--tracking-tight);
}
.mod-desc { font-size: var(--text-xs); color: var(--text-3); margin-top: 4px; line-height: var(--lh-normal); }
.mod-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  margin-top: var(--space-3);
  padding: 3px 10px;
  border-radius: var(--radius-full);
}
.mod-on .mod-status {
  color: var(--vigil-800);
  background: var(--vigil-100);
}
.mod-off .mod-status {
  color: var(--neutral-600);
  background: var(--neutral-100);
}

/* ============ MODAL ============ */
.modal-bg {
  position: fixed; inset: 0;
  background: var(--bg-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  animation: mib-fade-in var(--duration-standard) var(--ease-out);
}
.modal-box {
  position: relative;
  background: var(--bg-modal);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  width: 100%;
  max-width: 520px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  animation: mib-modal-in var(--duration-standard) var(--ease-out);
}
.modal-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-primary);
  z-index: 1;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
@keyframes mib-modal-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@media (max-width: 640px) {
  .modal-bg { align-items: flex-end; padding: 0; }
  .modal-box {
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 92vh;
  }
}

/* ============ FAQ ACCORDÉON (modale) ============ */
.faq-acc details {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 10px);
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--bg-surface);
}
.faq-acc details[open] { border-color: var(--vigil-300); }
.faq-acc summary {
  list-style: none; cursor: pointer;
  padding: 12px 14px;
  font-weight: 700; font-size: .9rem;
  color: var(--text-1);
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
}
.faq-acc summary::-webkit-details-marker { display: none; }
.faq-acc summary::after { content: '⌄'; color: var(--vigil-600); font-size: 1.1rem; line-height: 1; transition: transform .2s; }
.faq-acc details[open] summary::after { transform: rotate(180deg); }
.faq-acc .a { padding: 0 14px 14px; font-size: .85rem; line-height: 1.6; color: var(--text-2); }
.faq-acc .a a { color: var(--vigil-700); font-weight: 600; }
.faq-acc .a strong { color: var(--text-1); }
.faq-cat { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 18px 0 8px; }
.faq-cat:first-child { margin-top: 2px; }

/* ============ PLAN BANNER — relief 3D + barre brand ============ */
.plan-banner {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.9) inset,
    0 6px 16px -4px rgba(15, 23, 42, 0.12),
    0 2px 6px -2px rgba(15, 23, 42, 0.06);
}
.plan-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-primary);
  z-index: 1;
}
.pb-starter {
  background: linear-gradient(135deg, #FFFFFF 0%, var(--vigil-50) 60%, var(--marine-50) 100%);
  border: 1px solid var(--vigil-200);
}

/* ============ CSV ZONE ============ */
.csv-zone {
  border: 2px dashed var(--vigil-300);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  text-align: center;
  background: var(--vigil-50);
  cursor: pointer;
  transition: all var(--duration-fast);
}
.csv-zone:hover {
  border-color: var(--vigil-500);
  background: var(--vigil-100);
}

/* ============ ALERTS ============ */
.alert-ok {
  background: var(--success-50);
  border: 1px solid var(--success-100);
  border-left: 4px solid var(--success-500);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--success-800);
}
.alert-err {
  background: var(--danger-50);
  border: 1px solid var(--danger-100);
  border-left: 4px solid var(--danger-500);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--danger-800);
}

/* ============ PIN DISPLAY ============ */
.pin-display {
  background: var(--vigil-50);
  border: 1px solid var(--vigil-200);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: 0.4em;
  text-align: center;
  color: var(--vigil-800);
}

/* Intitulé d'un groupe de navigation : « Centre », puis la formation ouverte.
   Discret par construction — il situe, il ne se clique pas. */
.nav-groupe {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text3);
  padding: 0 var(--space-3);
  margin: var(--space-5) 0 var(--space-2);
}
.nav-groupe:first-child { margin-top: 0; }

/* ============ AUTRES ============ */
.sep {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-4) 0;
}
.logo-t {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
}
.spin {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: sp 0.6s linear infinite;
  display: inline-block;
  vertical-align: middle;
}
@keyframes sp { to { transform: rotate(360deg); } }
.hidden { display: none !important; }

/* Pastilles d'habilitation : un clic attribue ou retire. L'état se lit à la
   couleur autant qu'à aria-pressed, pour qui n'a pas la couleur. */
.hab-cases { display: flex; flex-wrap: wrap; gap: 4px; }
.chip-hab {
  border: 1px solid var(--border-default);
  background: var(--neutral-50);
  color: var(--text3);
  border-radius: var(--radius-full);
  padding: 2px 9px;
  font-size: .7rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .15s var(--ease-out);
}
.chip-hab:hover { border-color: var(--vigil-300, #6ee7b7); }
.chip-hab.on {
  background: var(--success-100);
  color: var(--success-800);
  border-color: transparent;
}
.chip-hab.on::before { content: '✓ '; }

/* Dans la FICHE du formateur, la même pastille porte en plus sa date
   d'obtention : une colonne par ligne, et non le bandeau du tableau. Le
   tableau, lui, garde « .hab-cases » — on y coche vite, sans dater.
   « formateur_specialites.obtenue_le » existait depuis l'origine et n'avait
   jamais eu d'écran : quatorze lignes, zéro date. */
.hab-liste { display: flex; flex-direction: column; gap: 6px; }
.hab-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hab-ligne .chip-hab { min-width: 92px; text-align: left; }
.hab-date {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  color: var(--text3);
}
.hab-note {
  font-size: .68rem;
  color: var(--text3);
  font-style: italic;
  white-space: nowrap;
}
.hab-date input {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 8px);
  padding: 2px 7px;
  font-size: .74rem;
  background: var(--neutral-50);
  color: var(--text);
}

/* Progress bar */
.prog-bar {
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--neutral-200);
  overflow: hidden;
  margin-top: 6px;
}
.prog-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width 0.4s var(--ease-out);
  background: var(--gradient-primary);
}

/* Stars */
.star-btn {
  background: none;
  border: none;
  font-size: 1.6rem;
  cursor: pointer;
  padding: 2px;
  transition: transform var(--duration-fast);
  line-height: 1;
}
.star-btn:hover { transform: scale(1.2); }

/* Avis card */
.avis-card {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  margin-bottom: var(--space-3);
  background: var(--bg-surface);
}

/* ============ RESPONSIVE — Sidebar drawer mobile ============ */
@media (max-width: 1023px) {
  .sidebar-burger { display: inline-flex; }
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform var(--duration-standard) var(--ease-out);
    z-index: calc(var(--z-overlay) + 1);
    box-shadow: 0 0 50px rgba(15, 23, 42, 0.3);
  }
  .sidebar.open { transform: translateX(0); }
}

/* ============ RESPONSIVE — Mobile ============ */
@media (max-width: 640px) {
  .topbar { padding: var(--space-3) var(--space-4); }
  .topbar h1 { font-size: var(--text-base); }
  .topbar .text-3xs { display: none; }
  .kpi { padding: var(--space-4); }
  .kpi-val { font-size: var(--text-2xl); }
  .kpi-icon { font-size: 1.3rem; }

  /* Boutons toolbar : icônes seules en mobile */
  .btn-sm, .btn-xs {
    padding: 8px 10px;
    min-width: 36px;
    justify-content: center;
  }

  /* Tables — scroll horizontal */
  .tbl th, .tbl td { padding: 10px 12px; font-size: var(--text-xs); }

  /* Padding contenu main */
  .main-content { padding: var(--space-4); }
}

/* Tablette */
@media (min-width: 641px) and (max-width: 1023px) {
  .main-content { padding: var(--space-5); }
}

/* Focus visible global */
*:focus-visible {
  outline: 2px solid var(--vigil-500);
  outline-offset: 2px;
}