/* ═══════════════════════════════════════════════════════════════
   SENVIRTUEL — CONSOLE ADMIN v3
   Refonte complète de l'interface d'administration.
   Portée : uniquement `body.adm3` (posé par le router sur
   /mamadou.gueye*). Les pages client (db-acc-*) ne sont jamais
   touchées. Ce fichier surcharge dashboard-v2.css + admin.css
   pour l'admin et apporte ses propres primitives `.adm-*`.
   Chargé en dernier → gagne les égalités de spécificité.
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   1. TOKENS
═══════════════════════════════════════════ */
body.adm3 {
  /* Fonds */
  --a-bg:        #070a14;
  --a-bg-glow:   radial-gradient(1200px 600px at 12% -8%, rgba(99,102,241,.14), transparent 60%),
                 radial-gradient(900px 500px at 92% 4%, rgba(139,92,246,.10), transparent 62%);
  --a-panel:     #0f1522;
  --a-panel-2:   #141c2c;
  --a-panel-3:   #1a2336;
  --a-rail:      #0b1120;

  /* Bordures */
  --a-line:      rgba(255,255,255,.07);
  --a-line-2:    rgba(255,255,255,.12);
  --a-line-hi:   rgba(99,102,241,.35);

  /* Texte — ratios WCAG mesurés sur --a-panel / --a-panel-2 / --a-panel-3 */
  --a-t1:        #eef2ff;  /* 16.3:1 */
  --a-t2:        #a3adc8;  /* 8.1:1  */
  --a-t3:        #828ead;  /* 5.6 / 5.2 / 4.8:1 — jamais sous 4.5 */

  /* Marque / statuts.
     Deux niveaux volontairement distincts :
     `--a-X`   = couleur GRAPHIQUE (barres, jauges, filets) — ≥ 3:1 sur le fond
     `--a-X-t` = couleur TEXTE     (puces, libellés)        — ≥ 4.5:1 sur le fond teinté
     Confondre les deux était la cause des puces illisibles en thème clair. */
  --a-brand:     #6366f1;
  --a-brand-t:   #a5b4fc;  /* 9.2:1 */
  --a-brand-2:   #8b5cf6;
  --a-brand-soft: rgba(99,102,241,.14);
  --a-ok:        #10b981;
  --a-ok-t:      #34d399;  /* 7.5:1 */
  --a-ok-soft:   rgba(16,185,129,.15);
  --a-warn:      #f59e0b;
  --a-warn-t:    #fbbf24;  /* 8.5:1 */
  --a-warn-soft: rgba(245,158,11,.15);
  --a-err:       #ef4444;
  --a-err-t:     #fca5a5;  /* 8.3:1 */
  --a-err-soft:  rgba(239,68,68,.15);
  --a-info:      #38bdf8;
  --a-info-t:    #7dd3fc;  /* 8.4:1 */
  --a-info-soft: rgba(56,189,248,.15);
  --a-purple-t:  #c4b5fd;  /* 8.4:1 */

  /* Formes */
  --a-r-xs: 7px;
  --a-r-sm: 10px;
  --a-r:    14px;
  --a-r-lg: 18px;
  --a-r-pill: 999px;

  /* Ombres */
  --a-sh-sm: 0 1px 2px rgba(0,0,0,.35);
  --a-sh:    0 6px 24px -10px rgba(0,0,0,.65);
  --a-sh-lg: 0 24px 60px -20px rgba(0,0,0,.8);
  --a-ring:  0 0 0 3px rgba(99,102,241,.28);

  /* Structure */
  --a-nav-w:      264px;
  --a-nav-w-mini: 76px;
  --a-top-h:      62px;
  --a-gap:        18px;
  --a-pad:        26px;

  --a-ease: cubic-bezier(.22,1,.36,1);
}

html.light-theme body.adm3 {
  --a-bg:        #f3f5fb;
  --a-bg-glow:   radial-gradient(1100px 560px at 10% -10%, rgba(99,102,241,.10), transparent 60%),
                 radial-gradient(800px 460px at 94% 2%, rgba(139,92,246,.08), transparent 62%);
  --a-panel:     #ffffff;
  --a-panel-2:   #f7f8fd;
  --a-panel-3:   #eef1fa;
  --a-rail:      #ffffff;
  --a-line:      rgba(15,23,42,.09);
  --a-line-2:    rgba(15,23,42,.15);
  --a-line-hi:   rgba(99,102,241,.32);
  --a-t1:        #0d1428;  /* 18.3:1 */
  --a-t2:        #4a5570;  /* 7.4:1  */
  --a-t3:        #5d6780;  /* 5.7 / 5.2 / 5.0:1 */
  --a-brand-soft: rgba(99,102,241,.11);
  /* En thème clair les couleurs vives descendent sous 3:1 sur blanc :
     graphiques ET textes basculent donc sur les variantes foncées. */
  --a-brand:     #4f46e5;
  --a-brand-t:   #4338ca;  /* 6.9:1 sur la puce */
  --a-ok:        #047857;
  --a-ok-t:      #047857;  /* 4.8:1 */
  --a-ok-soft:   rgba(16,185,129,.14);
  --a-warn:      #b45309;
  --a-warn-t:    #92400e;  /* 6.4:1 */
  --a-warn-soft: rgba(245,158,11,.14);
  --a-err:       #dc2626;
  --a-err-t:     #b91c1c;  /* 5.5:1 */
  --a-err-soft:  rgba(239,68,68,.13);
  --a-info:      #0369a1;
  --a-info-t:    #0369a1;  /* 5.2:1 */
  --a-info-soft: rgba(56,189,248,.16);
  --a-purple-t:  #6d28d9;  /* 6.0:1 */
  --a-sh-sm: 0 1px 2px rgba(15,23,42,.06);
  --a-sh:    0 8px 26px -14px rgba(15,23,42,.30);
  --a-sh-lg: 0 26px 60px -24px rgba(15,23,42,.30);
}

/* Les composants hérités (db-*) pointent vers la nouvelle palette :
   toutes les sous-pages admin suivent sans y toucher. */
body.adm3 {
  --db-bg:        var(--a-bg);
  --db-surface:   var(--a-panel);
  --db-surface-2: var(--a-panel-2);
  --db-elevated:  var(--a-panel-2);
  --db-card:      var(--a-panel);
  --db-border:    var(--a-line);
  --db-border-lg: var(--a-line-hi);
  --db-txt-1:     var(--a-t1);
  --db-txt-2:     var(--a-t2);
  --db-txt-3:     var(--a-t3);
  --db-radius:    var(--a-r);
  --db-radius-sm: var(--a-r-sm);
  --db-radius-lg: var(--a-r-lg);
  --db-shadow:    var(--a-sh);
  --db-shadow-lg: var(--a-sh-lg);
  --db-sidebar-w: var(--a-nav-w);
  --db-topbar-h:  var(--a-top-h);
}

@keyframes adm-in     { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
@keyframes adm-pop    { from { opacity:0; transform: scale(.97); }      to { opacity:1; transform:none; } }
@keyframes adm-shim   { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
@keyframes adm-spin   { to { transform: rotate(360deg); } }
@keyframes adm-ping   { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.45); } 70%,100% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } }

/* ═══════════════════════════════════════════
   2. CHARPENTE
═══════════════════════════════════════════ */
body.adm3 .db-wrap {
  display: block;
  min-height: 100dvh;
  background: var(--a-bg);
  background-image: var(--a-bg-glow);
  background-attachment: fixed;
  color: var(--a-t1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

body.adm3 .db-main {
  margin-left: var(--a-nav-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  transition: margin-left .28s var(--a-ease);
}

body.adm3 .db-content {
  flex: 1;
  width: 100%;
  max-width: 1560px;
  padding: var(--a-pad) var(--a-pad) 72px;
  animation: adm-in .26s var(--a-ease);
  /* Aucun débordement horizontal du document : seuls les conteneurs de
     tableaux défilent, jamais la page. */
  overflow-x: clip;
}

/* Mode rail (sidebar réduite) */
body.adm3 .db-wrap.adm-mini .db-main { margin-left: var(--a-nav-w-mini); }
body.adm3 .db-wrap.adm-mini .db-sidebar { width: var(--a-nav-w-mini); }

/* ═══════════════════════════════════════════
   3. SIDEBAR
═══════════════════════════════════════════ */
body.adm3 .db-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--a-nav-w);
  height: 100dvh;
  background: var(--a-rail);
  border-right: 1px solid var(--a-line);
  display: flex;
  flex-direction: column;
  z-index: 240;
  overflow: hidden;
  transition: width .28s var(--a-ease), transform .28s var(--a-ease);
}
html.light-theme body.adm3 .db-sidebar { box-shadow: 1px 0 0 rgba(15,23,42,.04); }

/* — Marque — */
body.adm3 .db-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 18px;
  min-height: var(--a-top-h);
  border-bottom: 1px solid var(--a-line);
  flex-shrink: 0;
}
body.adm3 .db-sidebar-logo {
  width: 36px; height: 36px;
  flex-shrink: 0;
  border-radius: 11px;
  background: linear-gradient(140deg, var(--a-brand), var(--a-brand-2));
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800; font-size: 17px; color: #fff;
  box-shadow: 0 6px 18px -6px rgba(99,102,241,.7);
}
body.adm3 .db-sidebar-brand-name {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 800;
  letter-spacing: .04em; color: var(--a-t1);
  line-height: 1.1; white-space: nowrap;
}
body.adm3 .db-sidebar-brand-name span { color: var(--a-brand); }
body.adm3 .db-sidebar-brand-sub {
  font-size: 10.5px; color: var(--a-t3);
  letter-spacing: .1em; text-transform: uppercase;
  margin-top: 2px; white-space: nowrap;
}

/* — Filtre de navigation — */
body.adm3 .adm-nav-filter {
  padding: 12px 14px 8px;
  flex-shrink: 0;
}
body.adm3 .adm-nav-filter-box {
  display: flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px;
  background: var(--a-panel-2);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-sm);
  transition: border-color .18s, box-shadow .18s;
}
body.adm3 .adm-nav-filter-box:focus-within {
  border-color: var(--a-line-hi);
  box-shadow: var(--a-ring);
}
body.adm3 .adm-nav-filter-box svg { color: var(--a-t3); flex-shrink: 0; }
body.adm3 .adm-nav-filter-box input {
  flex: 1; min-width: 0;
  background: none; border: 0; outline: 0;
  color: var(--a-t1); font-size: 12.5px;
  font-family: inherit;
}
body.adm3 .adm-nav-filter-box input::placeholder { color: var(--a-t3); }
body.adm3 .adm-nav-filter kbd {
  font-family: var(--font-mono);
  font-size: 9.5px; color: var(--a-t3);
  background: var(--a-panel-3);
  border: 1px solid var(--a-line);
  border-radius: 4px; padding: 2px 5px;
  flex-shrink: 0;
}

/* — Liste — */
body.adm3 .db-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 10px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--a-line-2) transparent;
}
body.adm3 .db-nav::-webkit-scrollbar { width: 6px; }
body.adm3 .db-nav::-webkit-scrollbar-thumb { background: var(--a-line-2); border-radius: 3px; }
body.adm3 .db-nav::-webkit-scrollbar-track { background: transparent; }

body.adm3 .db-nav-section {
  padding: 16px 10px 6px;
}
body.adm3 .db-nav-section-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--a-t3);
}

body.adm3 .db-nav-link {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 8px 10px;
  margin-bottom: 2px;
  border-radius: var(--a-r-sm);
  color: var(--a-t2);
  font-size: 13px; font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
body.adm3 .db-nav-link > span:nth-child(2) {
  overflow: hidden; text-overflow: ellipsis;
}
body.adm3 .db-nav-link:hover {
  background: var(--a-panel-2);
  color: var(--a-t1);
}
body.adm3 .db-nav-link.active {
  background: var(--a-brand-soft);
  color: var(--a-t1);
  font-weight: 600;
}
body.adm3 .db-nav-link.active::before {
  content: '';
  position: absolute; left: -10px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(180deg, var(--a-brand), var(--a-brand-2));
}
body.adm3 .db-nav-icon {
  width: 26px; height: 26px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--a-panel-2);
  color: var(--a-t2);
  font-size: 13px;
  transition: background .15s, color .15s;
}
body.adm3 .db-nav-link:hover .db-nav-icon { color: var(--a-t1); }
body.adm3 .db-nav-link.active .db-nav-icon {
  background: linear-gradient(140deg, var(--a-brand), var(--a-brand-2));
  color: #fff;
}
body.adm3 .db-nav-badge {
  margin-left: auto;
  min-width: 19px; height: 19px;
  padding: 0 6px;
  border-radius: var(--a-r-pill);
  background: var(--a-err);
  color: #fff;
  font-size: 10.5px; font-weight: 700;
  display: inline-grid; place-items: center;
  flex-shrink: 0;
}

/* Résultat du filtre */
body.adm3 .db-nav-link.adm-hidden,
body.adm3 .db-nav-section.adm-hidden { display: none; }
body.adm3 .adm-nav-empty {
  padding: 18px 12px;
  font-size: 12px; color: var(--a-t3);
  text-align: center;
}

/* — Pied — */
body.adm3 .db-sidebar-footer {
  flex-shrink: 0;
  padding: 12px;
  border-top: 1px solid var(--a-line);
  display: flex; flex-direction: column; gap: 8px;
  background: var(--a-rail);
}
body.adm3 .db-user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--a-r-sm);
  background: var(--a-panel-2);
  border: 1px solid var(--a-line);
  overflow: hidden;
}
body.adm3 .db-user-avatar {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(140deg, var(--a-brand), var(--a-brand-2));
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 13px;
}
body.adm3 .db-user-name { font-size: 12.5px; font-weight: 600; color: var(--a-t1); white-space: nowrap; }
body.adm3 .db-user-role { font-size: 10.5px; color: var(--a-t3); white-space: nowrap; }
body.adm3 .adm-foot-actions { display: flex; gap: 8px; }
body.adm3 .adm-foot-actions .db-btn { flex: 1; justify-content: center; }

/* — Mode rail — */
body.adm3 .adm-mini .db-sidebar-brand { padding: 16px 0; justify-content: center; }
body.adm3 .adm-mini .db-sidebar-brand > div:last-child,
body.adm3 .adm-mini .adm-nav-filter,
body.adm3 .adm-mini .db-nav-section,
body.adm3 .adm-mini .db-nav-link > span:nth-child(2),
body.adm3 .adm-mini .db-user-row > div:last-child,
body.adm3 .adm-mini .adm-foot-label { display: none; }
body.adm3 .adm-mini .db-nav { padding: 12px 12px 16px; }
body.adm3 .adm-mini .db-nav-link { justify-content: center; padding: 9px 0; }
body.adm3 .adm-mini .db-nav-badge {
  position: absolute; top: 2px; right: 4px; margin: 0;
  min-width: 16px; height: 16px; font-size: 9.5px;
}
body.adm3 .adm-mini .db-user-row { justify-content: center; padding: 8px; }
body.adm3 .adm-mini .adm-foot-actions { flex-direction: column; }

/* ═══════════════════════════════════════════
   4. BARRE SUPÉRIEURE
═══════════════════════════════════════════ */
body.adm3 .db-topbar {
  position: sticky; top: 0; z-index: 180;
  height: var(--a-top-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 var(--a-pad);
  background: var(--a-panel);
  background: color-mix(in srgb, var(--a-bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border-bottom: 1px solid var(--a-line);
}

body.adm3 .adm-icon-btn {
  width: 34px; height: 34px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: var(--a-r-sm);
  background: transparent;
  border: 1px solid transparent;
  color: var(--a-t2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
body.adm3 .adm-icon-btn:hover {
  background: var(--a-panel-2);
  border-color: var(--a-line);
  color: var(--a-t1);
}

body.adm3 .db-topbar-toggle { display: none; }

body.adm3 .adm-crumb {
  display: flex; align-items: center; gap: 8px;
  min-width: 0;
}
body.adm3 .adm-crumb-root {
  display: inline-flex; align-items: center;
  min-height: 24px; padding: 0 4px;        /* cible ≥ 24 px (WCAG 2.5.8 AA) */
  margin-left: -4px;
  border-radius: var(--a-r-xs);
  font-size: 12px; color: var(--a-t3);
  text-decoration: none;
  white-space: nowrap;
}
body.adm3 .adm-crumb-root:hover { color: var(--a-t2); }
body.adm3 .adm-crumb-sep { color: var(--a-t3); opacity: .55; font-size: 12px; }
body.adm3 .db-topbar-title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 700;
  color: var(--a-t1);
  letter-spacing: -.01em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

body.adm3 .adm-topbar-spacer { flex: 1; }

body.adm3 .db-topbar-actions {
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
body.adm3 .adm-live {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 11px;
  border-radius: var(--a-r-pill);
  background: var(--a-ok-soft);
  border: 1px solid rgba(16,185,129,.24);
  color: var(--a-ok);
  font-size: 11.5px; font-weight: 600;
  white-space: nowrap;
}
body.adm3 .adm-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--a-ok);
  animation: adm-ping 2.2s ease-out infinite;
}

/* ═══════════════════════════════════════════
   5. EN-TÊTES DE PAGE & SECTIONS
═══════════════════════════════════════════ */
body.adm3 .adm-pagehead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px;
}
body.adm3 .adm-pagehead-title {
  font-family: var(--font-display);
  font-size: 26px; font-weight: 800;
  letter-spacing: -.025em;
  color: var(--a-t1);
  line-height: 1.15;
}
body.adm3 .adm-pagehead-sub {
  font-size: 13px; color: var(--a-t3);
  margin-top: 5px;
}
body.adm3 .adm-pagehead-actions { display: flex; gap: 8px; flex-wrap: wrap; }

body.adm3 .adm-sechead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 30px 0 14px;
}
body.adm3 .adm-sechead:first-child { margin-top: 0; }
body.adm3 .adm-sechead-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--a-t3);
}
body.adm3 .adm-sechead-title::after {
  content: ''; flex: 1; height: 1px;
  background: var(--a-line);
  min-width: 24px;
}

/* ═══════════════════════════════════════════
   6. GRILLES
═══════════════════════════════════════════ */
body.adm3 .adm-grid { display: grid; gap: var(--a-gap); }
body.adm3 .adm-g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
body.adm3 .adm-g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
body.adm3 .adm-g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
body.adm3 .adm-g5 { grid-template-columns: repeat(5, minmax(0,1fr)); }
body.adm3 .adm-g-2-1 { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
body.adm3 .adm-g-1-2 { grid-template-columns: minmax(0,1fr) minmax(0,2fr); }
body.adm3 .adm-g-3-2 { grid-template-columns: minmax(0,3fr) minmax(0,2fr); }
body.adm3 .adm-span-2 { grid-column: span 2; }
body.adm3 .adm-stack { display: flex; flex-direction: column; gap: var(--a-gap); }
body.adm3 .adm-mt { margin-top: var(--a-gap); }

/* Les grilles héritées suivent la même respiration */
body.adm3 .db-stats { display: grid; gap: var(--a-gap); margin-bottom: var(--a-gap); }
body.adm3 .db-stats-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
body.adm3 .db-stats-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
body.adm3 .db-stats-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

/* ═══════════════════════════════════════════
   7. PANNEAUX / CARTES
═══════════════════════════════════════════ */
body.adm3 .db-card,
body.adm3 .adm-panel {
  position: relative;
  background: var(--a-panel);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r);
  box-shadow: var(--a-sh-sm);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s var(--a-ease);
}
body.adm3 .db-card::after,
body.adm3 .adm-panel::after {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08) 22%, rgba(255,255,255,.08) 78%, transparent);
  pointer-events: none;
}
html.light-theme body.adm3 .db-card::after,
html.light-theme body.adm3 .adm-panel::after { display: none; }

@media (hover: hover) and (pointer: fine) {
  body.adm3 .adm-panel-hover:hover {
    border-color: var(--a-line-2);
    box-shadow: var(--a-sh);
    transform: translateY(-2px);
  }
}

body.adm3 .db-card-header,
body.adm3 .adm-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  padding: 16px 18px;
  border-bottom: 1px solid var(--a-line);
  background: linear-gradient(180deg, rgba(255,255,255,.015), transparent);
}
html.light-theme body.adm3 .db-card-header,
html.light-theme body.adm3 .adm-panel-head { background: var(--a-panel-2); }

body.adm3 .db-card-title,
body.adm3 .adm-panel-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: 14.5px; font-weight: 700;
  letter-spacing: -.01em;
  color: var(--a-t1);
}
body.adm3 .db-card-sub,
body.adm3 .adm-panel-sub {
  font-size: 12px; color: var(--a-t3);
  margin-top: 3px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
}
body.adm3 .db-card-body,
body.adm3 .adm-panel-body { padding: 18px; }
body.adm3 .adm-panel-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* <dl>/<dt>/<dd> pour les KPI : la sémantique ne doit rien changer au rendu. */
body.adm3 .adm-kpi dt,
body.adm3 .adm-kpi dd { margin: 0; }
body.adm3 .adm-panel-title { margin: 0; }
body.adm3 .adm-panel-sub { margin: 3px 0 0; }
body.adm3 .db-empty-title,
body.adm3 .db-empty-sub { margin: 0; }
body.adm3 .adm-panel-body-flush { padding: 0; }
body.adm3 .adm-panel-scroll { max-height: 360px; overflow-y: auto; }

body.adm3 .adm-panel-foot {
  padding: 12px 18px;
  border-top: 1px solid var(--a-line);
  background: var(--a-panel-2);
  font-size: 11.5px; color: var(--a-t3);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}

/* ═══════════════════════════════════════════
   8. KPI
═══════════════════════════════════════════ */
body.adm3 .db-stat,
body.adm3 .adm-kpi {
  position: relative;
  display: flex; flex-direction: column;
  gap: 10px;
  padding: 16px 17px;
  background: var(--a-panel);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r);
  box-shadow: var(--a-sh-sm);
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s var(--a-ease);
  animation: adm-pop .28s var(--a-ease) backwards;
}
@media (hover: hover) and (pointer: fine) {
  body.adm3 .db-stat:hover,
  body.adm3 .adm-kpi:hover {
    border-color: var(--a-line-2);
    box-shadow: var(--a-sh);
    transform: translateY(-2px);
  }
}
body.adm3 .adm-kpi::before {
  content: '';
  position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--k, var(--a-brand));
  opacity: .8;
}
body.adm3 .adm-kpi:nth-child(1) { animation-delay: .02s; }
body.adm3 .adm-kpi:nth-child(2) { animation-delay: .06s; }
body.adm3 .adm-kpi:nth-child(3) { animation-delay: .10s; }
body.adm3 .adm-kpi:nth-child(4) { animation-delay: .14s; }
body.adm3 .adm-kpi:nth-child(5) { animation-delay: .18s; }

body.adm3 .db-stat-label,
body.adm3 .adm-kpi-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--a-t3);
}
body.adm3 .db-stat-icon,
body.adm3 .adm-kpi-icon {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--a-panel-3);
  background: color-mix(in srgb, var(--k, var(--a-brand)) 14%, transparent);
  color: var(--k, var(--a-brand));
  font-size: 15px;
}
body.adm3 .db-stat-value,
body.adm3 .adm-kpi-value {
  font-family: var(--font-display);
  font-size: 27px; font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--a-t1);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
body.adm3 .adm-kpi-value-sm { font-size: 21px; }
body.adm3 .adm-kpi-foot {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  font-size: 11.5px; color: var(--a-t3);
  margin-top: auto;
}
/* Un lien isolé dans un pied de KPI est une cible à part entière : il doit
   atteindre 24 px de haut, sinon il est trop fin pour être visé au doigt. */
body.adm3 .adm-kpi-foot a {
  display: inline-flex; align-items: center;
  min-height: 24px; padding: 0 4px; margin: 0 -4px;
  border-radius: var(--a-r-xs);
  color: var(--a-brand-t);
  text-decoration: none;
  font-weight: 600;
}
body.adm3 .adm-kpi-foot a:hover { text-decoration: underline; }
body.adm3 .adm-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2.5px 8px;
  border-radius: var(--a-r-pill);
  font-size: 11px; font-weight: 700;
  background: var(--a-panel-3);
  color: var(--a-t2);
  border: 1px solid var(--a-line);
  white-space: nowrap;
}
body.adm3 .adm-chip-ok   { background: var(--a-ok-soft);   color: var(--a-ok-t);   border-color: rgba(16,185,129,.28); }
body.adm3 .adm-chip-warn { background: var(--a-warn-soft); color: var(--a-warn-t); border-color: rgba(245,158,11,.30); }
body.adm3 .adm-chip-err  { background: var(--a-err-soft);  color: var(--a-err-t);  border-color: rgba(239,68,68,.30); }
body.adm3 .adm-chip-info { background: var(--a-info-soft); color: var(--a-info-t); border-color: rgba(56,189,248,.30); }
/* L'icône d'état double la couleur : l'information ne passe jamais par la
   seule teinte (WCAG 1.4.1 « Utilisation de la couleur »). */
body.adm3 .adm-chip svg { width: 12px; height: 12px; flex-shrink: 0; }

body.adm3 .db-stat-change { font-size: 11.5px; font-weight: 700; }
body.adm3 .db-stat-change.up   { color: var(--a-warn-t); }
body.adm3 .db-stat-change.down { color: var(--a-err-t); }

/* Mini barre de progression sous un KPI */
body.adm3 .adm-kpi-bar {
  height: 4px; border-radius: 2px;
  background: var(--a-panel-3);
  overflow: hidden;
}
body.adm3 .adm-kpi-bar > i {
  display: block; height: 100%;
  border-radius: 2px;
  background: var(--k, var(--a-brand));
}

/* ═══════════════════════════════════════════
   9. BANDEAU HÉRO
═══════════════════════════════════════════ */
body.adm3 .adm-hero {
  position: relative;
  padding: 26px 28px;
  border-radius: var(--a-r-lg);
  /* Le point le plus clair du dégradé est #4f46e5 : le blanc y tient 6.3:1.
     L'ancien #6366f1 plafonnait à 4.47:1, sous le seuil AA. */
  background:
    radial-gradient(520px 260px at 88% -30%, rgba(109,40,217,.45), transparent 70%),
    linear-gradient(135deg, #4338ca 0%, #4f46e5 45%, #6d28d9 100%);
  color: #fff;
  overflow: hidden;
  box-shadow: 0 22px 50px -26px rgba(79,70,229,.85);
}
body.adm3 .adm-hero::before,
body.adm3 .adm-hero::after {
  content: '';
  position: absolute; border-radius: 50%;
  background: rgba(255,255,255,.08);
  pointer-events: none;
}
body.adm3 .adm-hero::before { width: 210px; height: 210px; top: -80px; right: -40px; }
body.adm3 .adm-hero::after  { width: 300px; height: 300px; bottom: -190px; right: 110px; background: rgba(255,255,255,.05); }

body.adm3 .adm-hero-inner {
  position: relative;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
body.adm3 .adm-hero-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.9);   /* 5.4:1 */
  margin-bottom: 8px;
}
body.adm3 .adm-hero-value {
  font-family: var(--font-display);
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800; letter-spacing: -.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
body.adm3 .adm-hero-sub { font-size: 13.5px; color: rgba(255,255,255,.9); margin-top: 8px; }
body.adm3 .adm-hero-metrics {
  display: flex; gap: 10px; flex-wrap: wrap;
}
body.adm3 .adm-hero-metric {
  padding: 10px 14px;
  border-radius: var(--a-r-sm);
  /* Tuile assombrie (et non éclaircie) : le blanc y monte à 6:1 au lieu de 3.7:1. */
  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.22);
  min-width: 108px;
}
body.adm3 .adm-hero-metric-k {
  font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);   /* 6.0:1 sur la tuile */
}
body.adm3 .adm-hero-metric-v {
  font-family: var(--font-display);
  font-size: 18px; font-weight: 800;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════
   10. ACTIONS REQUISES
═══════════════════════════════════════════ */
body.adm3 .adm-todo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0; padding: 0;
}
body.adm3 .adm-todo-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  border-radius: var(--a-r-sm);
  background: var(--a-panel-2);
  border: 1px solid var(--a-line);
  border-left: 3px solid var(--a-brand);
  text-decoration: none;
  transition: transform .16s var(--a-ease), border-color .16s, background .16s;
}
@media (hover: hover) and (pointer: fine) {
  body.adm3 .adm-todo-item:hover {
    transform: translateX(3px);
    background: var(--a-panel-3);
  }
}
body.adm3 .adm-todo-item.urgent {
  border-left-color: var(--a-err);
  background: var(--a-err-soft);
}
body.adm3 .adm-todo-icon { flex-shrink: 0; line-height: 0; }
body.adm3 .adm-todo-label {
  flex: 1; min-width: 0;
  font-size: 12.5px; font-weight: 500;
  color: var(--a-t1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.adm3 .adm-todo-item.urgent .adm-todo-label { color: var(--a-err-t); font-weight: 600; }
body.adm3 .adm-todo-icon svg { width: 17px; height: 17px; display: block; }
body.adm3 .adm-todo-item.urgent .adm-todo-icon { color: var(--a-err-t); }
body.adm3 .adm-todo-item:not(.urgent) .adm-todo-icon { color: var(--a-brand-t); }
body.adm3 .adm-todo-go { color: var(--a-t3); flex-shrink: 0; font-size: 13px; }

/* ═══════════════════════════════════════════
   11. LISTES (flux, classement, clé/valeur)
═══════════════════════════════════════════ */
body.adm3 .adm-list { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
body.adm3 .adm-list-title,
body.adm3 .adm-list-meta { margin: 0; }
body.adm3 .adm-list-item {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--a-line);
  text-decoration: none;
  transition: background .14s;
}
body.adm3 .adm-list-item:last-child { border-bottom: 0; }
body.adm3 .adm-list-item:hover { background: var(--a-panel-2); }
body.adm3 .adm-list-avatar {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: 9px;
  display: grid; place-items: center;
  background: var(--a-panel-3);
  color: var(--a-t2);
}
body.adm3 .adm-list-avatar svg { width: 15px; height: 15px; }
body.adm3 .adm-list-avatar.ok   { background: var(--a-ok-soft);   color: var(--a-ok-t); }
body.adm3 .adm-list-avatar.info { background: var(--a-info-soft); color: var(--a-info-t); }
body.adm3 .adm-list-avatar.warn { background: var(--a-warn-soft); color: var(--a-warn-t); }
body.adm3 .adm-list-avatar.brand{ background: var(--a-brand-soft);color: var(--a-brand-t); }
body.adm3 .adm-list-main { flex: 1; min-width: 0; }
body.adm3 .adm-list-title {
  font-size: 12.5px; color: var(--a-t1); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.adm3 .adm-list-meta { font-size: 11px; color: var(--a-t3); margin-top: 2px; }
body.adm3 .adm-list-side { text-align: right; flex-shrink: 0; }
body.adm3 .adm-list-side-v {
  font-size: 12.5px; font-weight: 700; color: var(--a-t1);
  font-variant-numeric: tabular-nums;
}
body.adm3 .adm-list-side-k { font-size: 10.5px; color: var(--a-t3); margin-top: 2px; }

body.adm3 .adm-rank {
  width: 24px; height: 24px; flex-shrink: 0;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
  background: var(--a-brand-soft);
  color: var(--a-brand);
  font-variant-numeric: tabular-nums;
}
body.adm3 .adm-rank-1 { background: linear-gradient(140deg,#fbbf24,#f59e0b); color:#1a1200; }
body.adm3 .adm-rank-2 { background: linear-gradient(140deg,#e2e8f0,#94a3b8); color:#0f172a; }
body.adm3 .adm-rank-3 { background: linear-gradient(140deg,#fdba74,#c2703a); color:#2a1400; }

body.adm3 .adm-kv {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--a-line);
  font-size: 12.5px;
}
body.adm3 .adm-kv:last-child { border-bottom: 0; }
body.adm3 .adm-kv-k { color: var(--a-t2); display: flex; align-items: center; gap: 8px; min-width: 0; }
body.adm3 .adm-kv-icon { line-height: 0; color: var(--a-t3); flex-shrink: 0; }
body.adm3 .adm-kv-icon svg { width: 14px; height: 14px; }
body.adm3 .adm-kv-v {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 700; color: var(--a-t1);
  font-variant-numeric: tabular-nums;
  text-align: right; flex-shrink: 0;
}
body.adm3 .adm-kv-v svg { width: 13px; height: 13px; flex-shrink: 0; }
body.adm3 .adm-kv-v.ok   { color: var(--a-ok-t); }
body.adm3 .adm-kv-v.warn { color: var(--a-warn-t); }
body.adm3 .adm-kv-v.err  { color: var(--a-err-t); }
body.adm3 .adm-kv-hint { font-size: 10.5px; color: var(--a-t3); margin-left: 6px; font-weight: 400; }

/* Entonnoir */
body.adm3 .adm-funnel,
body.adm3 .adm-bar-list { list-style: none; margin: 0; padding: 0; }
body.adm3 .adm-funnel-row { margin-bottom: 13px; }
body.adm3 .adm-funnel-row:last-of-type { margin-bottom: 0; }
body.adm3 .adm-funnel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 6px;
  font-size: 12.5px;
}
body.adm3 .adm-funnel-label { color: var(--a-t1); }
body.adm3 .adm-funnel-count {
  color: var(--a-t1); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
body.adm3 .adm-funnel-pct { color: var(--a-t3); font-weight: 500; font-size: 11.5px; }
body.adm3 .adm-funnel-track {
  height: 9px; border-radius: var(--a-r-pill);
  background: var(--a-panel-3);
  overflow: hidden;
}
body.adm3 .adm-funnel-fill {
  height: 100%; border-radius: var(--a-r-pill);
  transition: width .5s var(--a-ease);
}

/* Barre de répartition (pays, etc.) */
body.adm3 .adm-bar-row { padding: 9px 0; border-bottom: 1px solid var(--a-line); }
body.adm3 .adm-bar-row:last-child { border-bottom: 0; }
body.adm3 .adm-bar-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-bottom: 6px; font-size: 12.5px;
}
body.adm3 .adm-bar-track {
  height: 6px; border-radius: var(--a-r-pill);
  background: var(--a-panel-3); overflow: hidden;
}
body.adm3 .adm-bar-fill {
  height: 100%; border-radius: var(--a-r-pill);
  background: linear-gradient(90deg, var(--a-brand), var(--a-brand-2));
}

/* ═══════════════════════════════════════════
   12. TABLEAUX
═══════════════════════════════════════════ */
body.adm3 .db-table-wrap {
  background: var(--a-panel);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r);
  overflow: auto;
  box-shadow: var(--a-sh-sm);
}
body.adm3 .db-card .db-table-wrap {
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
}
body.adm3 .db-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
body.adm3 .db-table thead tr { background: var(--a-panel-2); }
body.adm3 .db-table th {
  position: sticky; top: 0; z-index: 2;
  background: var(--a-panel-2);
  padding: 10px 14px;
  text-align: left;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--a-t3);
  border-bottom: 1px solid var(--a-line);
  white-space: nowrap;
}
body.adm3 .db-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--a-line);
  color: var(--a-t2);
  vertical-align: middle;
  /* Chiffres tabulaires : les colonnes de montants restent alignées et ne
     « sautent » plus d'une ligne à l'autre. */
  font-variant-numeric: tabular-nums;
}
body.adm3 .db-table tbody tr:last-child td { border-bottom: 0; }
body.adm3 .db-table tbody tr { transition: background .14s; }
body.adm3 .db-table tbody tr:hover td { background: var(--a-panel-2); }
body.adm3 .db-table strong { color: var(--a-t1); font-weight: 700; font-variant-numeric: tabular-nums; }
body.adm3 .db-table code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--a-panel-3);
  border: 1px solid var(--a-line);
  border-radius: 5px;
  padding: 2px 6px;
  color: var(--a-t2);
}

/* ═══════════════════════════════════════════
   13. BOUTONS
═══════════════════════════════════════════ */
body.adm3 .db-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px;
  height: 36px; padding: 0 14px;
  border-radius: var(--a-r-sm);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 13px; font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s, border-color .16s, color .16s, transform .12s, box-shadow .16s;
}
body.adm3 .db-btn:active { transform: translateY(1px); }
body.adm3 .db-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

body.adm3 .db-btn-primary {
  background: linear-gradient(135deg, var(--a-brand), var(--a-brand-2));
  color: #fff;
  box-shadow: 0 6px 18px -8px rgba(99,102,241,.85);
}
body.adm3 .db-btn-primary:hover {
  filter: brightness(1.08);
  box-shadow: 0 10px 24px -10px rgba(99,102,241,.95);
}
body.adm3 .db-btn-ghost {
  background: var(--a-panel-2);
  border-color: var(--a-line);
  color: var(--a-t2);
}
body.adm3 .db-btn-ghost:hover {
  background: var(--a-panel-3);
  border-color: var(--a-line-2);
  color: var(--a-t1);
}
body.adm3 .db-btn-ghost.db-btn-primary {
  background: linear-gradient(135deg, var(--a-brand), var(--a-brand-2));
  border-color: transparent; color: #fff;
}
body.adm3 .db-btn-danger  { background: var(--a-err); color: #fff; }
body.adm3 .db-btn-danger:hover  { filter: brightness(1.08); }
body.adm3 .db-btn-success { background: var(--a-ok); color: #fff; }
body.adm3 .db-btn-success:hover { filter: brightness(1.08); }
body.adm3 .db-btn-sm { height: 30px; padding: 0 11px; font-size: 12px; border-radius: var(--a-r-xs); }
body.adm3 .db-btn-xs { height: 26px; padding: 0 9px; font-size: 11px; border-radius: var(--a-r-xs); }
body.adm3 .db-btn-icon { width: 32px; height: 32px; padding: 0; flex-shrink: 0; }
/* Un bouton à icône seule reste une cible carrée d'au moins 30 px, même en
   taille réduite : sinon la surface cliquable tombe sous le seuil WCAG. */
body.adm3 .db-btn-sm.db-btn-icon { width: 30px; height: 30px; padding: 0; }
body.adm3 .db-btn-xs.db-btn-icon { width: 26px; height: 26px; padding: 0; }

/* ═══════════════════════════════════════════
   14. BADGES
═══════════════════════════════════════════ */
body.adm3 .db-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--a-r-pill);
  font-size: 11px; font-weight: 700;
  letter-spacing: .01em;
  white-space: nowrap;
  animation: none;
}
body.adm3 .db-badge-success { background: var(--a-ok-soft);   color: var(--a-ok-t);    border: 1px solid rgba(16,185,129,.28); }
body.adm3 .db-badge-warning { background: var(--a-warn-soft); color: var(--a-warn-t);  border: 1px solid rgba(245,158,11,.30); }
body.adm3 .db-badge-error   { background: var(--a-err-soft);  color: var(--a-err-t);   border: 1px solid rgba(239,68,68,.30); }
body.adm3 .db-badge-info    { background: var(--a-info-soft); color: var(--a-info-t);  border: 1px solid rgba(56,189,248,.30); }
body.adm3 .db-badge-purple  { background: rgba(139,92,246,.14); color: var(--a-purple-t); border: 1px solid rgba(139,92,246,.28); }
body.adm3 .db-badge-default { background: var(--a-panel-3);  color: var(--a-t2);    border: 1px solid var(--a-line); }
body.adm3 .db-badge .adm-live-dot { width: 6px; height: 6px; }
/* Bouton WhatsApp : la couleur de marque reste lisible sur les deux thèmes. */
body.adm3 .adm-wa { color: #25d366; }
html.light-theme body.adm3 .adm-wa { color: #0f7a41; }
body.adm3 .adm-wa svg { flex-shrink: 0; }
/* Aide contextuelle sous un champ : visible en permanence, pas seulement au
   focus — un texte d'aide caché ne prévient personne avant l'erreur. */
body.adm3 .adm-help {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: var(--a-t3);
  line-height: 1.45;
}
body.adm3 .db-input[aria-invalid="true"],
body.adm3 .db-textarea[aria-invalid="true"] {
  border-color: var(--a-err);
  box-shadow: 0 0 0 3px var(--a-err-soft);
}
body.adm3 .db-form-group + .db-form-group { margin-top: 12px; }
body.adm3 .adm-segmented { display: flex; gap: 6px; }

/* Repli « équivalent textuel » d'un graphique */
body.adm3 .adm-details { margin-top: 14px; }
body.adm3 .adm-details > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--a-t2);
  padding: 6px 2px;
  border-radius: var(--a-r-xs);
  list-style-position: inside;
}
body.adm3 .adm-details > summary:hover { color: var(--a-t1); }

/* Troncature : le texte complet reste disponible via title */
body.adm3 .adm-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Message d'état inline sous une action (cron, envoi…) */
body.adm3 .adm-inline-status {
  display: flex; align-items: center; gap: 6px;
  margin: 12px 0 0;
  font-size: 12px; color: var(--a-t3);
  min-height: 16px;
}
body.adm3 .adm-inline-status svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ═══════════════════════════════════════════
   15. FORMULAIRES
═══════════════════════════════════════════ */
body.adm3 .db-label {
  display: block;
  font-size: 11.5px; font-weight: 600;
  color: var(--a-t2);
  margin-bottom: 6px;
}
body.adm3 .db-input,
body.adm3 .db-select,
body.adm3 .db-textarea {
  width: 100%;
  min-height: 38px;
  padding: 9px 12px;
  background: var(--a-panel-2);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-sm);
  color: var(--a-t1);
  font-family: inherit;
  font-size: 13px;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
body.adm3 .db-input:focus,
body.adm3 .db-select:focus,
body.adm3 .db-textarea:focus {
  outline: 0;
  border-color: var(--a-brand);
  box-shadow: var(--a-ring);
  background: var(--a-panel);
}
body.adm3 .db-input::placeholder,
body.adm3 .db-textarea::placeholder { color: var(--a-t3); }
body.adm3 textarea.db-input { min-height: 74px; resize: vertical; }

body.adm3 .db-search {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 12px;
  background: var(--a-panel-2);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-sm);
  transition: border-color .16s, box-shadow .16s;
}
body.adm3 .db-search:focus-within { border-color: var(--a-brand); box-shadow: var(--a-ring); }
body.adm3 .db-search input { background: none; border: 0; outline: 0; color: var(--a-t1); font-size: 13px; flex: 1; min-width: 0; }

/* ═══════════════════════════════════════════
   16. ONGLETS / BARRE D'OUTILS / PAGINATION
═══════════════════════════════════════════ */
body.adm3 .db-tabs {
  display: flex; gap: 4px;
  padding: 4px;
  background: var(--a-panel-2);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-sm);
  border-bottom: 1px solid var(--a-line);
  overflow-x: auto;
  margin-bottom: var(--a-gap);
}
body.adm3 .db-tab {
  padding: 7px 14px;
  border: 0; border-bottom: 0;
  border-radius: var(--a-r-xs);
  background: transparent;
  color: var(--a-t2);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
body.adm3 .db-tab:hover { background: var(--a-panel-3); color: var(--a-t1); }
body.adm3 .db-tab.active {
  background: linear-gradient(135deg, var(--a-brand), var(--a-brand-2));
  color: #fff;
  border-bottom: 0;
}

body.adm3 .db-toolbar {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  padding: 13px 15px;
  background: var(--a-panel);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r);
  margin-bottom: var(--a-gap);
}

body.adm3 .db-pagination { display: flex; gap: 5px; justify-content: center; padding: 16px 0 0; flex-wrap: wrap; }
body.adm3 .db-page-btn {
  min-width: 32px; height: 32px; padding: 0 9px;
  border-radius: var(--a-r-xs);
  background: var(--a-panel-2);
  border: 1px solid var(--a-line);
  color: var(--a-t2);
  font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
body.adm3 .db-page-btn:hover { background: var(--a-panel-3); color: var(--a-t1); }
body.adm3 .db-page-btn.active {
  background: linear-gradient(135deg, var(--a-brand), var(--a-brand-2));
  border-color: transparent; color: #fff;
}

/* ═══════════════════════════════════════════
   17. MODALES
═══════════════════════════════════════════ */
body.adm3 .db-modal-backdrop {
  position: fixed; inset: 0; z-index: 420;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(4,7,16,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: adm-in .18s var(--a-ease);
  overflow-y: auto;
}
body.adm3 .db-modal {
  width: 100%; max-width: 560px;
  background: var(--a-panel);
  border: 1px solid var(--a-line-2);
  border-radius: var(--a-r-lg);
  box-shadow: var(--a-sh-lg);
  animation: adm-pop .2s var(--a-ease);
  overflow: hidden;
  max-height: calc(100dvh - 40px);
  display: flex; flex-direction: column;
}
body.adm3 .db-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 17px 20px;
  border-bottom: 1px solid var(--a-line);
  background: var(--a-panel-2);
  flex-shrink: 0;
}
body.adm3 .db-modal-title {
  font-family: var(--font-display);
  font-size: 15.5px; font-weight: 700;
  color: var(--a-t1);
}
body.adm3 .db-modal-close {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--a-r-xs);
  background: transparent; border: 0;
  color: var(--a-t3); cursor: pointer;
  font-size: 17px;
  transition: background .15s, color .15s;
}
body.adm3 .db-modal-close:hover { background: var(--a-panel-3); color: var(--a-t1); }
body.adm3 .db-modal-body { padding: 20px; overflow-y: auto; flex: 1; }
body.adm3 .db-modal-footer {
  display: flex; justify-content: flex-end; gap: 9px;
  padding: 14px 20px;
  border-top: 1px solid var(--a-line);
  background: var(--a-panel-2);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════
   18. ÉTATS (vide, chargement, progression)
═══════════════════════════════════════════ */
body.adm3 .db-empty {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px; padding: 36px 20px;
  text-align: center;
}
body.adm3 .db-empty-icon {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--a-panel-3);
  color: var(--a-t3);
}
body.adm3 .db-empty-title { font-size: 13.5px; font-weight: 600; color: var(--a-t2); }
body.adm3 .db-empty-sub { font-size: 12px; color: var(--a-t3); max-width: 340px; }

body.adm3 .db-skeleton {
  background: linear-gradient(90deg, var(--a-panel) 25%, var(--a-panel-3) 50%, var(--a-panel) 75%);
  background-size: 840px 100%;
  animation: adm-shim 1.35s linear infinite;
  border-radius: var(--a-r);
  border: 1px solid var(--a-line);
}
body.adm3 .db-spinner,
body.adm3 .db-loader {
  width: 17px; height: 17px;
  border: 2px solid var(--a-line-2);
  border-top-color: var(--a-brand);
  border-radius: 50%;
  animation: adm-spin .7s linear infinite;
  display: inline-block;
}
body.adm3 .db-progress {
  height: 7px; border-radius: var(--a-r-pill);
  background: var(--a-panel-3); overflow: hidden;
}
body.adm3 .db-progress-fill,
body.adm3 .db-progress-bar {
  height: 100%; border-radius: var(--a-r-pill);
  background: linear-gradient(90deg, var(--a-brand), var(--a-brand-2));
}

body.adm3 .db-chart-wrap { height: 280px; position: relative; }

/* Overlay mobile */
body.adm3 .db-overlay {
  position: fixed; inset: 0; z-index: 230;
  background: rgba(4,7,16,.6);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .22s;
}
body.adm3 .db-overlay.active { opacity: 1; pointer-events: auto; }

/* ═══════════════════════════════════════════
   19. ÉCRAN DE CONNEXION
═══════════════════════════════════════════ */
body.adm3 .db-login-wrap {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px;
  background: var(--a-bg);
  background-image: var(--a-bg-glow);
  position: relative;
}
body.adm3 .db-login-card {
  position: relative; z-index: 2;
  width: 100%; max-width: 396px;
  padding: 34px 30px;
  background: var(--a-panel);
  border: 1px solid var(--a-line-2);
  border-radius: var(--a-r-lg);
  box-shadow: var(--a-sh-lg);
  animation: adm-pop .3s var(--a-ease);
}
body.adm3 .db-login-logo {
  display: flex; align-items: center; gap: 11px;
  margin-bottom: 24px;
}
body.adm3 .db-login-logo-mark {
  width: 42px; height: 42px;
  border-radius: 13px;
  background: linear-gradient(140deg, var(--a-brand), var(--a-brand-2));
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 800; font-size: 20px; color: #fff;
  box-shadow: 0 8px 22px -8px rgba(99,102,241,.8);
}
body.adm3 .db-login-logo-name {
  font-family: var(--font-display);
  font-size: 17px; font-weight: 800; letter-spacing: .03em;
  color: var(--a-t1);
}
body.adm3 .db-login-logo-name span { color: var(--a-brand); }
body.adm3 .db-login-title {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 800; letter-spacing: -.02em;
  color: var(--a-t1);
}
body.adm3 .db-login-sub { font-size: 13px; color: var(--a-t3); margin: 6px 0 22px; }
body.adm3 .db-login-error {
  display: none;
  padding: 10px 13px;
  border-radius: var(--a-r-sm);
  background: var(--a-err-soft);
  border: 1px solid rgba(239,68,68,.26);
  color: var(--a-err-t); font-size: 12.5px;
}
body.adm3 .db-login-error:not(:empty) { display: block; }
body.adm3 .db-login-blob {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .5;
}
body.adm3 .db-login-blob:nth-child(1) { width: 380px; height: 380px; top: -80px; left: -60px; background: rgba(99,102,241,.4); }
body.adm3 .db-login-blob:nth-child(2) { width: 320px; height: 320px; bottom: -70px; right: -50px; background: rgba(139,92,246,.35); }

/* ═══════════════════════════════════════════
   20. DIVERS HÉRITÉS
═══════════════════════════════════════════ */
body.adm3 .db-divider { border: 0; border-top: 1px solid var(--a-line); margin: 16px 0; }
body.adm3 .db-detail-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 0; border-bottom: 1px solid var(--a-line);
  font-size: 12.5px;
}
body.adm3 .db-detail-label { color: var(--a-t3); }
body.adm3 .db-detail-value { color: var(--a-t1); font-weight: 600; text-align: right; }
body.adm3 .db-cred-block,
body.adm3 .db-cred-box {
  background: var(--a-panel-2);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r-sm);
  padding: 12px 14px;
}
body.adm3 .db-cred-label { color: var(--a-t3); font-size: 11px; }
body.adm3 .db-cred-val { color: var(--a-t1); font-family: var(--font-mono); font-size: 12px; }
body.adm3 .db-kpi-card {
  background: var(--a-panel);
  border: 1px solid var(--a-line);
  border-radius: var(--a-r);
}

/* ═══════════════════════════════════════════
   20b. ACCESSIBILITÉ
═══════════════════════════════════════════ */

/* Indicateur de focus : 2 px pleins + halo de contraste inverse, pour rester
   visible aussi bien sur un fond sombre que sur un aplat de marque. */
body.adm3 :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--a-brand-t);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(99,102,241,.25);
  border-radius: var(--a-r-xs);
}
html.light-theme body.adm3 :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline-color: var(--a-brand-t);
}

/* La topbar est collante : sans ce décalage, tabuler vers un élément situé
   juste sous elle place le focus derrière (WCAG 2.2 — « Focus non masqué »). */
body.adm3,
html:has(body.adm3) { scroll-padding-top: calc(var(--a-top-h) + 16px); }

/* Contenu réservé aux lecteurs d'écran */
body.adm3 .adm-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Lien d'évitement : ~35 liens de navigation précèdent le contenu, un moyen
   de les contourner est obligatoire (WCAG 2.4.1). */
body.adm3 .adm-skip {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 500;
  transform: translateY(-160%);
  padding: 10px 16px;
  border-radius: var(--a-r-sm);
  background: var(--a-brand);
  color: #fff;
  font-size: 13px; font-weight: 600;
  text-decoration: none;
  box-shadow: var(--a-sh-lg);
  transition: transform .18s var(--a-ease);
}
body.adm3 .adm-skip:focus { transform: none; }

/* Le contenu reçoit le focus programmatique après navigation SPA */
body.adm3 .db-content:focus { outline: none; }

/* États de chargement annoncés */
body.adm3 [aria-busy="true"] { cursor: progress; }

/* ═══════════════════════════════════════════
   21. RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 1280px) {
  body.adm3 .adm-g5 { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

@media (max-width: 1100px) {
  body.adm3 { --a-pad: 20px; --a-gap: 15px; }
  body.adm3 .adm-g4,
  body.adm3 .db-stats-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body.adm3 .adm-g3,
  body.adm3 .adm-g5 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  body.adm3 .adm-g-2-1,
  body.adm3 .adm-g-1-2,
  body.adm3 .adm-g-3-2 { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 860px) {
  body.adm3 .db-sidebar {
    transform: translateX(-100%);
    box-shadow: var(--a-sh-lg);
    width: min(84vw, 300px);
  }
  body.adm3 .db-sidebar.open { transform: none; }
  body.adm3 .db-wrap.adm-mini .db-sidebar { width: min(84vw, 300px); }
  body.adm3 .db-main,
  body.adm3 .db-wrap.adm-mini .db-main { margin-left: 0; }
  body.adm3 .db-topbar-toggle { display: grid; }
  body.adm3 .adm-collapse-btn { display: none; }
  /* Sur mobile la sidebar ouverte reprend l'affichage complet */
  body.adm3 .adm-mini .db-sidebar-brand > div:last-child,
  body.adm3 .adm-mini .adm-nav-filter,
  body.adm3 .adm-mini .db-nav-section,
  body.adm3 .adm-mini .db-nav-link > span:nth-child(2),
  body.adm3 .adm-mini .db-user-row > div:last-child { display: block; }
  body.adm3 .adm-mini .db-sidebar-brand { padding: 16px 18px; justify-content: flex-start; }
  body.adm3 .adm-mini .db-nav-link { justify-content: flex-start; padding: 8px 10px; }
  body.adm3 .adm-mini .adm-foot-actions { flex-direction: row; }
  body.adm3 .adm-pagehead-title { font-size: 22px; }
}

/* ── Cibles tactiles & saisie mobile ──
   Sous 768 px on passe en mode doigt : 44 px de hauteur minimale sur les
   contrôles (Apple HIG / Material) et 16 px sur les champs, seuil en dessous
   duquel iOS zoome automatiquement au focus. */
@media (max-width: 768px) {
  body.adm3 .db-btn { min-height: 44px; padding: 0 16px; }
  body.adm3 .db-btn-sm { min-height: 40px; padding: 0 14px; font-size: 13px; }
  body.adm3 .db-btn-xs { min-height: 36px; padding: 0 12px; font-size: 12px; }
  body.adm3 .db-btn-icon,
  body.adm3 .db-btn-sm.db-btn-icon,
  body.adm3 .adm-icon-btn { width: 44px; height: 44px; }
  body.adm3 .db-page-btn { min-width: 44px; height: 44px; }
  body.adm3 .db-modal-close { width: 40px; height: 40px; }
  body.adm3 .db-input,
  body.adm3 .db-select,
  body.adm3 .db-textarea,
  body.adm3 .db-search input,
  body.adm3 .adm-nav-filter-box input { font-size: 16px; }
  body.adm3 .db-input,
  body.adm3 .db-select { min-height: 44px; }
  body.adm3 .db-search,
  body.adm3 .adm-nav-filter-box { height: 44px; }
  body.adm3 .db-nav-link { padding: 11px 10px; }
  body.adm3 .adm-todo-item { padding: 13px; }
  body.adm3 .adm-list-item { padding: 13px 16px; }
  body.adm3 .adm-kpi-foot a { min-height: 40px; }
  body.adm3 .adm-details > summary { min-height: 40px; display: flex; align-items: center; }
  /* 8 px minimum entre deux cibles voisines */
  body.adm3 .db-topbar-actions,
  body.adm3 .adm-pagehead-actions,
  body.adm3 .adm-foot-actions { gap: 8px; }
}

@media (max-width: 640px) {
  body.adm3 { --a-pad: 14px; --a-gap: 12px; }
  body.adm3 .adm-g2,
  body.adm3 .adm-g3,
  body.adm3 .adm-g4,
  body.adm3 .adm-g5,
  body.adm3 .db-stats-2,
  body.adm3 .db-stats-3,
  body.adm3 .db-stats-4 { grid-template-columns: minmax(0,1fr); }
  body.adm3 .adm-span-2 { grid-column: auto; }
  body.adm3 .adm-hero { padding: 20px; }
  body.adm3 .adm-hero-inner { align-items: flex-start; }
  body.adm3 .adm-hero-metrics { width: 100%; }
  body.adm3 .adm-hero-metric { flex: 1; min-width: 96px; }
  body.adm3 .db-stat-value,
  body.adm3 .adm-kpi-value { font-size: 23px; }
  body.adm3 .db-topbar { padding: 0 14px; gap: 8px; }
  body.adm3 .adm-crumb-root,
  body.adm3 .adm-crumb-sep { display: none; }
  body.adm3 .adm-live span { display: none; }
  body.adm3 .adm-live { padding: 0 9px; }
  body.adm3 .db-modal { max-width: none; border-radius: var(--a-r); }
}

@media (prefers-reduced-motion: reduce) {
  body.adm3 *,
  body.adm3 *::before,
  body.adm3 *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}