/* ═══════════════════════════════════════════════════════════════════════════
   VIVID.CSS — Couche design dynamique
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --accent:       #1565c0;
  --accent-mid:   #1976d2;
  --accent-light: #e3f2fd;
  --accent-bg:    #f5f9ff;
}

* { font-style: normal !important; }

/* ── NAVBAR ── */
#nav { background: linear-gradient(95deg, #1e88e5 0%, #1565c0 55%, #0d47a1 100%); border-bottom: none; box-shadow: 0 2px 12px rgba(13, 71, 161, 0.28); }
.logo { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: .16em; color: #fff; display: flex; align-items: center; gap: 10px; }
.logo-dot { background: #bbdefb; box-shadow: 0 0 0 3px rgba(187, 222, 251, 0.25), 0 0 10px rgba(187, 222, 251, 0.4); animation: pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 3px rgba(187,222,251,0.22), 0 0 10px rgba(187,222,251,0.4); } 50% { box-shadow: 0 0 0 6px rgba(187,222,251,0.1),  0 0 18px rgba(187,222,251,0.65); } }
.nav-a { color: rgba(255,255,255,0.78); font-size: 10px; letter-spacing: .1em; border-bottom: 2px solid transparent; transition: color .15s, border-color .15s, background .15s; border-radius: 6px 6px 0 0; padding: 0 14px; }
.nav-a:hover { color: rgba(255,255,255,0.96); background: rgba(255,255,255,0.09); }
.nav-a.active { color: #fff; border-bottom-color: #bbdefb; background: rgba(255,255,255,0.12); }
#nav-stats .badge-red    { background: #ef4444; color: #fff; border-color: transparent; }
#nav-stats .badge-orange { background: #f59e0b; color: #fff; border-color: transparent; }
#nav .btn-ghost { color: rgba(255,255,255,0.68); border-color: rgba(255,255,255,0.2); }
#nav .btn-ghost:hover { color: #fff; background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.38); }

/* ── BARRE DE CONTRÔLE ── */
#control-bar { background: #ffffff; border-bottom: 1.5px solid var(--accent-light); box-shadow: 0 1px 6px rgba(21, 101, 192, 0.06); }
.dark #control-bar, [data-theme="dark"] #control-bar { background: #1a1a2e; border-bottom: 1.5px solid rgba(187, 222, 251, 0.1); box-shadow: none; }

/* ── PAGE-VIEW & SECTION ── */
.page-view { background: var(--bg); }
.section-header { background: var(--accent-bg); border-radius: 10px; padding: 18px 22px; border-left: 4px solid var(--accent-mid); margin-bottom: 22px; box-shadow: 0 1px 6px rgba(21, 101, 192, 0.07); }
.section-title { background: linear-gradient(90deg, #0d47a1, #1976d2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.dark .section-header, [data-theme="dark"] .section-header { background: #1e2a3a; border-left-color: #42a5f5; box-shadow: none; }
.dark .section-title, [data-theme="dark"] .section-title { background: linear-gradient(90deg, #90caf9, #42a5f5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* ══ FIX : EN-TÊTES DE TABLEAUX FIGÉS ════════════════════════════════════ */
.tbl-wrap { 
  max-height: 70vh !important; /* Déclenche le scroll interne */
  overflow: auto !important; 
}
table { 
  border-collapse: separate !important; /* Essentiel pour le sticky sous Chrome */
  border-spacing: 0 !important; 
}
table thead th {
  position: sticky !important; 
  top: 0 !important; 
  z-index: 100 !important;
  background-color: var(--accent-bg) !important; 
  background-clip: padding-box !important;
}
[data-theme="dark"] table thead th, .dark table thead th { 
  background-color: #1e2a3a !important; 
}