/* ================== FSN FUTUR — Console Admin Hi-Fi ==================
   Design system adapté du projet SunuONAS, recoloré aux teintes
   du Fonds de Solidarité Nationale (vert solidarité + or Sénégal).
   ===================================================================== */
:root {
  /* --- Couleur primaire (anciennement "navy" ONAS) = Vert FSN --- */
  --navy: #0a6c3e;         /* Vert FSN principal */
  --navy-2: #0e8a4d;       /* Vert clair */
  --navy-deep: #063a22;    /* Vert très sombre */
  /* --- Couleur secondaire (anciennement "orange" ONAS) = Or Sénégal --- */
  --orange: #f3c64a;       /* Or principal */
  --orange-2: #f6d472;     /* Or clair */
  --orange-soft: #fef3d6;  /* Or très pâle */
  /* --- Fonds dérivés (anciennement "blue" ONAS) = Vert pâle FSN --- */
  --blue-bg: #e5f4ec;
  --blue-pale: #f0faf4;
  /* --- Sémantiques --- */
  --green: #2EB872;
  --green-soft: #E0F4EA;
  --red: #ce1126;          /* Rouge drapeau Sénégal */
  --amber: #F4B740;
  /* --- Aliases FSN explicites (utilisables dans les nouveaux composants) --- */
  --fsn-vert: #0a6c3e;
  --fsn-vert-clair: #0e8a4d;
  --fsn-vert-fonce: #063a22;
  --fsn-or: #f3c64a;
  --fsn-or-fonce: #c89e2c;
  --fsn-rouge: #ce1126;
  /* --- Neutres --- */
  --ink: #14202E;
  --ink-2: #4A5868;
  --ink-3: #8794A4;
  --line: #E2E8F0;
  --line-2: #CBD5E1;
  --bg: #F7F9FC;
  --white: #ffffff;
  --shadow-sm: 0 1px 3px rgba(6, 58, 34, 0.08);
  --shadow-md: 0 4px 12px rgba(6, 58, 34, 0.10);
  --shadow-lg: 0 8px 28px rgba(6, 58, 34, 0.14);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* [v420] Police standard globale = Inter (choix user). 'Inter'
   etait l'ancienne ; remplace par Inter qui est deja chargee depuis Google
   Fonts (cf. index.html). Fallback systeme conserve. */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ============= App layout ============= */
.app-stage {
  min-height: 100vh;
  background: linear-gradient(180deg, #EFF4FA 0%, #F7F9FC 50%);
  padding: 32px 24px 60px;
}

.app-header {
  max-width: 1280px;
  margin: 0 auto 28px;
}
.app-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.5px;
}
.app-sub {
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 4px;
}

.gallery {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  justify-content: center;
}

.frame {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.frame-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-align: center;
}
.frame-label strong { color: var(--navy); }

/* ============= Phone bezel =============
   Sur PC/tablette → frame iPhone décorative (preview ONAS sur grand écran).
   Sur vrai mobile → edge-to-edge sans frame ni encoche, vraie app. */
.phone {
  width: 360px;
  height: 760px;
  background: #0a0a0a;
  border-radius: 44px;
  padding: 8px;
  box-shadow: var(--shadow-lg), inset 0 0 0 2px #1f1f1f;
  position: relative;
}
/* Encoche désactivée — encombrait visuellement, plus pertinente. */
.phone-screen {
  width: 100%; height: 100%;
  background: var(--white);
  border-radius: 36px;
  overflow: hidden;
  position: relative;
}

/* status bar */
.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 28px 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  z-index: 4;
  position: relative;
}
.status-bar.dark { color: white; }
.status-bar .ic { display: inline-flex; gap: 4px; align-items: center; }

/* scroll area */
.screen-scroll {
  height: calc(100% - 32px);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

/* ============= Reusable hi-fi components ============= */

/* Top app bar */
.appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 10px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.appbar.navy {
  background: var(--navy);
  color: white;
  border: none;
}
.appbar .back {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,0.05);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  cursor: pointer;
}
.appbar.navy .back { background: rgba(255,255,255,0.15); color: white; }
.appbar h1 {
  font-size: 16px;
  font-weight: 700;
  flex: 1;
  text-align: center;
  margin: 0 8px;
}
.appbar .right { width: 36px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  border-radius: 12px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-primary { background: var(--navy); color: white; }
.btn-primary:hover { background: var(--navy-2); }
.btn-accent { background: var(--orange); color: white; }
.btn-success { background: var(--green); color: white; }
.btn-ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--line-2); }
.btn-block { width: 100%; }
.btn-lg { padding: 16px 20px; font-size: 15px; }

/* Cards */
.card {
  background: white;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  padding: 14px;
}
.card-flat { box-shadow: none; }

/* Pills / badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--blue-bg);
  color: var(--navy);
  white-space: nowrap;
}
.badge.orange { background: var(--orange-soft); color: var(--orange); }
.badge.green { background: var(--green-soft); color: var(--green); }
.badge.red { background: #FDE5E7; color: var(--red); }
.badge.amber { background: #FEF3D7; color: #B7820B; }

/* Inputs */
.field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
  min-width: 0;
  overflow: hidden;
}
.field .icn { color: var(--ink-3); flex: 0 0 auto; }
.field input, .field select {
  border: none;
  outline: none;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-overflow: ellipsis;
}
.field input::placeholder { color: var(--ink-3); }

/* Native select harmonisé avec .field — utilisé dans les forms admin */
.admin-select {
  display: block;
  width: 100%;
  background: white;
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
  padding: 6px 32px 6px 10px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238794A4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  transition: border-color 0.15s;
  line-height: 1.4;
}
.admin-select:hover { border-color: var(--ink-3); }
.admin-select:focus { outline: none; border-color: var(--navy); }
.admin-select:disabled { background-color: var(--bg); cursor: not-allowed; }

/* Bottom nav */
.bottom-nav-h {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 78px;
  background: white;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-around;
  padding: 8px 16px 22px;
  z-index: 10;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.04);
}
.bottom-nav-h .nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  color: var(--ink-3);
  cursor: pointer;
  flex: 1;
  font-weight: 600;
}
.bottom-nav-h .nav-item.active { color: var(--navy); }
.bottom-nav-h .nav-item.active .ic-wrap {
  background: var(--blue-bg);
}
.bottom-nav-h .ic-wrap {
  width: 32px; height: 32px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
}

/* Dot/avatar */
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--orange), var(--orange-2));
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex: 0 0 auto;
}
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
.avatar.lg { width: 56px; height: 56px; font-size: 18px; }
.avatar.navy { background: linear-gradient(135deg, var(--navy), var(--navy-2)); }

/* Stepper hi-fi */
.stepper-h {
  display: flex; align-items: center; gap: 8px;
}
.stepper-h .st {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--line);
  color: var(--ink-3);
  font-size: 12px; font-weight: 700;
  flex: 0 0 auto;
}
.stepper-h .st.done { background: var(--green); color: white; }
.stepper-h .st.active { background: var(--navy); color: white; box-shadow: 0 0 0 4px rgba(10, 108, 62, 0.12); }
.stepper-h .bar {
  flex: 1; height: 3px; border-radius: 2px;
  background: var(--line);
}
.stepper-h .bar.done { background: var(--green); }

/* Service tile */
.svc-tile {
  background: white;
  border-radius: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
  transition: all 0.15s;
}
.svc-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.svc-tile .svc-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.svc-tile h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy-deep);
  line-height: 1.25;
}
.svc-tile p {
  font-size: 11px;
  color: var(--ink-2);
  line-height: 1.4;
}

/* Hero card */
.hero-card {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  color: white;
  border-radius: 18px;
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.hero-card::after {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(243, 198, 74, 0.4) 0%, transparent 70%);
}

/* Map placeholder hi-fi */
.map-h {
  position: relative;
  background:
    radial-gradient(circle at 30% 30%, #C9DDF0 0 60px, transparent 61px),
    radial-gradient(circle at 70% 60%, #D1E5C9 0 80px, transparent 81px),
    radial-gradient(circle at 50% 80%, #E8DCC4 0 50px, transparent 51px),
    linear-gradient(135deg, #E8EFF7 0%, #DBE7F0 100%);
  overflow: hidden;
}
.map-h::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,0.5) 50%, transparent 50.5%) 0 0 / 40% 100%,
    linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,0.4) 50%, transparent 50.5%) 0 0 / 70% 100%,
    linear-gradient(0deg, transparent 49.5%, rgba(255,255,255,0.5) 50%, transparent 50.5%) 0 0 / 100% 35%;
  pointer-events: none;
}
.map-pin {
  position: absolute;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.25));
  z-index: 2;
}
.map-truck {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* QR card */
.qr-block {
  width: 72px; height: 72px;
  background: white;
  border: 2px solid var(--navy);
  border-radius: 12px;
  padding: 4px;
  position: relative;
}
.qr-block::before, .qr-block::after {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  border: 2.5px solid var(--orange);
}
.qr-block::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.qr-block::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }
.qr-svg { width: 100%; height: 100%; }

.qr-block.lg { width: 180px; height: 180px; padding: 8px; }

/* Toggle */
.toggle {
  width: 44px; height: 26px;
  border-radius: 999px;
  background: var(--line-2);
  position: relative;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.2s;
}
.toggle.on { background: var(--green); }
.toggle::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: left 0.2s;
}
.toggle.on::after { left: 21px; }

/* Timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 22px;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 9px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--line);
}
.tl-item { position: relative; }
.tl-item::before {
  content: "";
  position: absolute;
  left: -20px; top: 4px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--line-2);
  z-index: 1;
}
.tl-item.done::before { background: var(--green); border-color: var(--green); }
.tl-item.active::before {
  background: var(--orange); border-color: var(--orange);
  box-shadow: 0 0 0 5px rgba(243, 198, 74, 0.2);
  animation: pulse 1.6s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(243, 198, 74, 0.2); }
  50% { box-shadow: 0 0 0 9px rgba(243, 198, 74, 0); }
}
@keyframes pulseOnline {
  0%, 100% { box-shadow: 0 0 0 2px rgba(220,38,38,0.25), 0 0 0 0 rgba(220,38,38,0.5); }
  50%      { box-shadow: 0 0 0 2px rgba(220,38,38,0.25), 0 0 0 6px rgba(220,38,38,0); }
}
/* Pulse pour marker FSN ciblé sur la carte (bouton "Voir sur la carte") */
@keyframes fsnPulse {
  0%   { transform: scale(0.7); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}
/* Pulse plus rapide et plus agressif pour les markers FRAUDE (hors zone déclarée) */
@keyframes fsnFraudPulse {
  0%   { transform: scale(0.6); opacity: 1; }
  60%  { transform: scale(1.8); opacity: 0.4; }
  100% { transform: scale(2.6); opacity: 0; }
}
/* Lignes pointillées animées (flux de tirets) entre fiche flottante et polygone */
@keyframes fsnDashFlow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -20; }
}
/* Apparition fluide de la fiche flottante de zone (au clic sur polygone) */
@keyframes fsnCardSlideIn {
  0%   { opacity: 0; transform: translateY(-8px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Drawer latéral qui glisse depuis la droite (saisie nouveau dossier) */
@keyframes fsnDrawerSlideIn {
  0%   { opacity: 0; transform: translateX(100%); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes fsnSpin {
  to { transform: rotate(360deg); }
}
@keyframes fsnCaretBlink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
/* Pulse subtle pour la section courante dans la timeline */
@keyframes fsnTimelineCurrentPulse {
  0%, 100% { background: rgba(243, 198, 74, 0.10); }
  50%      { background: rgba(243, 198, 74, 0.28); }
}
.fsn-timeline-current {
  animation: fsnTimelineCurrentPulse 1.8s ease-in-out infinite;
}

/* ============================================================
   ORBE JARVIS — animation Cerebrus en cours de génération
   Inspirée de l'arc-réacteur d'Iron Man : noyau lumineux
   + anneaux concentriques expansifs + rotation interne
   ============================================================ */
.fsn-jarvis-orb {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fsn-jarvis-orb .jarvis-core {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff7d6 0%, #f3c64a 40%, #0a6c3e 100%);
  box-shadow:
    0 0 8px rgba(243, 198, 74, 0.95),
    0 0 18px rgba(243, 198, 74, 0.65),
    0 0 32px rgba(10, 108, 62, 0.45),
    inset 0 0 6px rgba(255, 255, 255, 0.6);
  animation: fsnJarvisCorePulse 1.4s ease-in-out infinite;
  z-index: 3;
}
.fsn-jarvis-orb .jarvis-ring {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(243, 198, 74, 0.9);
  animation: fsnJarvisRingExpand 1.8s ease-out infinite;
  z-index: 2;
}
.fsn-jarvis-orb .jarvis-ring-2 {
  animation-delay: 0.6s;
  border-color: rgba(255, 247, 214, 0.7);
}
.fsn-jarvis-orb .jarvis-ring-3 {
  animation-delay: 1.2s;
  border-color: rgba(10, 108, 62, 0.6);
}
.fsn-jarvis-orb .jarvis-arcs {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 1.5px dashed rgba(243, 198, 74, 0.4);
  animation: fsnJarvisRotate 4s linear infinite;
  z-index: 1;
}
.fsn-jarvis-orb .jarvis-arcs-inner {
  position: absolute;
  width: 64%;
  height: 64%;
  top: 18%;
  left: 18%;
  border-radius: 50%;
  border-top: 1.5px solid rgba(243, 198, 74, 0.8);
  border-right: 1.5px solid transparent;
  border-bottom: 1.5px solid transparent;
  border-left: 1.5px solid rgba(255, 247, 214, 0.6);
  animation: fsnJarvisRotateReverse 2.5s linear infinite;
  z-index: 1;
}
@keyframes fsnJarvisCorePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 0 8px rgba(243, 198, 74, 0.95),
      0 0 18px rgba(243, 198, 74, 0.65),
      0 0 32px rgba(10, 108, 62, 0.45),
      inset 0 0 6px rgba(255, 255, 255, 0.6);
  }
  50% {
    transform: scale(1.18);
    box-shadow:
      0 0 14px rgba(243, 198, 74, 1),
      0 0 28px rgba(243, 198, 74, 0.85),
      0 0 48px rgba(10, 108, 62, 0.65),
      inset 0 0 10px rgba(255, 255, 255, 0.85);
  }
}
@keyframes fsnJarvisRingExpand {
  0%   { transform: scale(0.55); opacity: 1; }
  100% { transform: scale(2.4);  opacity: 0; }
}
@keyframes fsnJarvisRotate {
  to { transform: rotate(360deg); }
}
@keyframes fsnJarvisRotateReverse {
  to { transform: rotate(-360deg); }
}

/* === Verrouillage sidebar/rail pendant la création d'un dossier === */
/* (le drawer overlay bloque déjà les clics ; on ajoute un signal visuel) */
html[data-fsn-creating="true"] .sidebar,
html[data-fsn-creating="true"] .sidebar-rail {
  filter: grayscale(0.6) brightness(0.55);
  pointer-events: none;
  position: relative;
}
html[data-fsn-creating="true"] .sidebar::after {
  content: "MENU VERROUILLÉ — CRÉATION EN COURS";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  transform-origin: center;
  font-size: 11px;
  font-weight: 800;
  color: #f3c64a;
  letter-spacing: 1.5px;
  white-space: nowrap;
  text-shadow: 0 2px 6px rgba(0,0,0,0.85);
  pointer-events: none;
  z-index: 10001;
  filter: brightness(2) grayscale(0);
}
/* Panneau latéral timeline + AI : masqué sur écrans étroits */
.fsn-drawer-side { display: none !important; }
@media (min-width: 1700px) {
  .fsn-drawer-side { display: flex !important; }
}

/* Fenêtre Cerebrus chat — à droite du drawer (visible sur écrans larges uniquement) */
.fsn-cerebrus-window { display: none !important; }
@media (min-width: 1100px) {
  .fsn-cerebrus-window { display: flex !important; }
}

/* Scrollbar INVISIBLE pour le thread Cerebrus (scroll fonctionne sans barre visible) */
.fsn-cerebrus-thread {
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE / Edge legacy */
}
.fsn-cerebrus-thread::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;                  /* Webkit / Chrome / Safari */
}
/* ===== Effets HOLOGRAPHIQUES pour les fiches flottantes ===== */
/* Scan line qui descend en boucle (typique des écrans holographiques sci-fi) */
@keyframes fsnHoloScan {
  0%   { transform: translateY(-100%); opacity: 0; }
  10%  { opacity: 0.85; }
  90%  { opacity: 0.85; }
  100% { transform: translateY(calc(100vh)); opacity: 0; }
}
/* Pulse de la bordure cyan/violet (effet "data stream") */
@keyframes fsnHoloBorderPulse {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(34, 211, 238, 0.45),
      0 0 24px -2px rgba(34, 211, 238, 0.4),
      0 0 80px -10px rgba(168, 85, 247, 0.3),
      inset 0 0 24px -8px rgba(34, 211, 238, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(168, 85, 247, 0.55),
      0 0 32px -2px rgba(168, 85, 247, 0.5),
      0 0 80px -10px rgba(34, 211, 238, 0.35),
      inset 0 0 28px -8px rgba(168, 85, 247, 0.25);
  }
}
/* Gradient animé de la bordure (effet hologramme arc-en-ciel cyan→violet→cyan) */
@keyframes fsnHoloBorderFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Glitch subtil (très occasionnel — < 5% de chance par cycle) */
@keyframes fsnHoloGlitch {
  0%, 92%, 100% { transform: translate(0, 0); }
  93%  { transform: translate(-1px, 0); }
  94%  { transform: translate(1px, -1px); filter: hue-rotate(20deg); }
  95%  { transform: translate(0, 1px); }
  96%  { transform: translate(0, 0); }
}
/* ===== Pulsation lumineuse VERT FSN (override) ===== */
@keyframes fsnHoloBorderPulseGreen {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(10, 108, 62, 0.55),
      0 0 24px -2px rgba(10, 108, 62, 0.45),
      0 0 80px -10px rgba(34, 197, 94, 0.3),
      inset 0 0 20px -6px rgba(34, 197, 94, 0.2);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(34, 197, 94, 0.65),
      0 0 32px -2px rgba(34, 197, 94, 0.55),
      0 0 80px -10px rgba(10, 108, 62, 0.4),
      inset 0 0 26px -6px rgba(10, 108, 62, 0.25);
  }
}
/* Classe utilitaire à appliquer pour rendre une fiche "holographique VERT FSN" */
.fsn-holo-card {
  position: relative;
  /* ⭐ Fond VERT FONCÉ translucide (au lieu de cyan/violet) */
  background:
    linear-gradient(135deg, rgba(10, 108, 62, 0.85), rgba(6, 58, 34, 0.82)) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid transparent !important;
  background-clip: padding-box;
  animation: fsnHoloBorderPulseGreen 4s ease-in-out infinite;
}
.fsn-holo-card::before {
  /* Bordure gradient animée (vert clair → vert foncé → vert clair) */
  content: '';
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(135deg, #22c55e, #15803d, #0a6c3e, #22c55e);
  background-size: 200% 200%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: fsnHoloBorderFlow 6s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.fsn-holo-card::after {
  /* Scan line qui descend (vert lumineux) */
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #4ade80, #22c55e, #4ade80, transparent);
  box-shadow: 0 0 14px 2px rgba(74, 222, 128, 0.7);
  animation: fsnHoloScan 3.2s linear infinite;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}
/* Coins décoratifs (sci-fi corner brackets) — VERT clair lumineux */
.fsn-holo-corner {
  position: absolute;
  width: 14px; height: 14px;
  pointer-events: none;
  z-index: 2;
}
.fsn-holo-corner::before, .fsn-holo-corner::after {
  content: '';
  position: absolute;
  background: #4ade80;
  box-shadow: 0 0 8px 1px rgba(74, 222, 128, 0.9);
}
.fsn-holo-corner.tl { top: -2px; left: -2px; }
.fsn-holo-corner.tl::before { top: 0; left: 0; width: 12px; height: 1.5px; }
.fsn-holo-corner.tl::after  { top: 0; left: 0; width: 1.5px; height: 12px; }
.fsn-holo-corner.tr { top: -2px; right: -2px; }
.fsn-holo-corner.tr::before { top: 0; right: 0; width: 12px; height: 1.5px; }
.fsn-holo-corner.tr::after  { top: 0; right: 0; width: 1.5px; height: 12px; }
.fsn-holo-corner.bl { bottom: -2px; left: -2px; }
.fsn-holo-corner.bl::before { bottom: 0; left: 0; width: 12px; height: 1.5px; }
.fsn-holo-corner.bl::after  { bottom: 0; left: 0; width: 1.5px; height: 12px; }
.fsn-holo-corner.br { bottom: -2px; right: -2px; }
.fsn-holo-corner.br::before { bottom: 0; right: 0; width: 12px; height: 1.5px; }
.fsn-holo-corner.br::after  { bottom: 0; right: 0; width: 1.5px; height: 12px; }
/* Texte holographique : BLANC pur très lisible sur fond vert foncé */
.fsn-holo-card,
.fsn-holo-card * {
  color: #ffffff !important;
}
.fsn-holo-card .fsn-holo-title {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(74, 222, 128, 0.7), 0 1px 2px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.4px;
  font-weight: 800;
}
.fsn-holo-card .fsn-holo-mono {
  color: #d1fae5 !important;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.5), 0 1px 1px rgba(0, 0, 0, 0.4);
}
.fsn-holo-card .fsn-holo-value {
  color: #fef3c7 !important; /* jaune doré pour les valeurs importantes (montants) */
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.6), 0 1px 1px rgba(0, 0, 0, 0.4);
  font-weight: 800;
}
.fsn-holo-card .fsn-holo-label {
  color: rgba(220, 252, 231, 0.75) !important; /* labels semi-discrets en vert pâle */
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.6px;
}
/* Révélation en cascade : chaque .fsn-card-row apparaît un par un comme "tapé" */
@keyframes fsnRowReveal {
  0%   { opacity: 0; transform: translateY(6px); filter: blur(2px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.fsn-card-row {
  opacity: 0;
  animation: fsnRowReveal 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
/* Reset des styles par défaut de Leaflet.markercluster pour utiliser nos propres icônes */
.fsn-marker-cluster {
  background: transparent !important;
  border: none !important;
}
.fsn-marker-cluster div {
  background: transparent;
}
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background-clip: padding-box;
}
/* Pulse du point de statut (StatusDot) — utilisé pour "Complément requis" et "En instruction" */
@keyframes fsnDotPulse {
  0%   { box-shadow: 0 0 0 2px currentColor, 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 2px transparent, 0 0 0 10px transparent; opacity: 0.85; }
  100% { box-shadow: 0 0 0 2px transparent, 0 0 0 0 transparent; opacity: 1; }
}
/* Animation de dessin pour les courbes SVG (sparkline) */
@keyframes fsnLineDraw {
  from { stroke-dashoffset: var(--fsn-line-length, 500); }
  to   { stroke-dashoffset: 0; }
}
.fsn-sparkline-line {
  stroke-dasharray: var(--fsn-line-length, 500);
  stroke-dashoffset: var(--fsn-line-length, 500);
  animation: fsnLineDraw 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.fsn-sparkline-area {
  opacity: 0;
  animation: fsnFadeIn 0.6s ease-out 0.6s forwards;
}
@keyframes fsnFadeIn { to { opacity: 1; } }
/* Toast de connexion d'agent */
@keyframes toastSlideIn {
  0% { transform: translateX(120%); opacity: 0; }
  10%, 90% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}
.fsn-toast {
  position: fixed; bottom: 20px; right: 20px; z-index: 9999;
  background: white; color: #1f2937;
  border-left: 4px solid #dc2626;
  border-radius: 10px; padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.25);
  min-width: 280px; max-width: 380px;
  font-family: 'Inter', -apple-system, sans-serif;
  animation: toastSlideIn 3.5s ease-out forwards;
}
.fsn-toast .toast-dot { width: 10px; height: 10px; border-radius: 50%; background: #dc2626; flex-shrink: 0; animation: pulseOnline 1.5s infinite; }

/* Star */
.stars-h { display: inline-flex; gap: 2px; }

/* ============= Desktop admin ============= */
.desktop {
  width: 1100px;
  height: 700px;
  border-radius: 14px;
  background: white;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.desktop-bar {
  height: 36px;
  background: #F1F4F8;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center;
  padding: 0 14px; gap: 8px;
}
.desktop-bar .dot { width: 12px; height: 12px; border-radius: 50%; }
.desktop-bar .url {
  margin-left: 16px;
  font-size: 12px;
  color: var(--ink-3);
  background: white;
  padding: 4px 12px;
  border-radius: 6px;
  flex: 1;
  text-align: center;
  max-width: 320px;
}
.desktop-body {
  display: grid;
  /* [v342] 3 colonnes : rail icônes (56px) + sidebar items (220px) + main content (1fr) */
  grid-template-columns: 56px 220px 1fr;
  height: calc(100% - 36px);
  transition: grid-template-columns .22s ease;
  position: relative; /* ancrage pour la poignée .sidebar-handle */
}
/* Mode compact : la sidebar items passe à 64px, le rail reste à 56px */
.desktop-body:has(.sidebar.compact) {
  grid-template-columns: 56px 64px 1fr;
}

/* Sidebar — noir pur (demande user, aucun reflet bleu/vert) */
.sidebar {
  background: #0a0a0a;
  color: rgba(255,255,255,0.85);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 4px;
  /* Ascenseur vertical si le menu dépasse la hauteur (toujours sur sidebar admin) */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.18) transparent;
}

/* ============================================================
   [v342] SIDEBAR RAIL — colonne étroite icônes à gauche de la
   sidebar. Pattern Cloud Dock / VS Code activity bar.
   Une icône par groupe de menu (overview, ops, directory, etc.)
   Cliquer = ouvre ce groupe et ferme les autres (mutex).
   Indicateur "active" = page courante appartient à ce groupe.
   ============================================================ */
.sidebar-rail {
  flex: 0 0 56px;
  background: #000;                 /* noir pur (demande user) */
  border-right: 1px solid rgba(255,255,255,0.05);
  display: flex; flex-direction: column;
  align-items: center;
  padding: 14px 0 14px 0;
  gap: 6px;
  overflow-y: auto;
  overflow-x: hidden;
}
.sidebar-rail::-webkit-scrollbar { width: 0; }
.sidebar-rail-btn {
  appearance: none;
  background: transparent;
  border: none;
  width: 40px; height: 40px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  position: relative;
  transition: background .12s ease, color .12s ease, transform .08s ease;
  flex: 0 0 40px;
}
.sidebar-rail-btn:hover {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.95);
}
.sidebar-rail-btn:active { transform: scale(0.94); }
.sidebar-rail-btn.is-active {
  background: linear-gradient(135deg, #0a6c3e 0%, #0e8a4d 100%);
  color: white;
  box-shadow: 0 4px 12px -4px rgba(10, 108, 62, 0.55);
}
/* Point notif sur rail actif : vert FSN (au lieu d'or) */
.sidebar-rail-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2EB872;
  box-shadow: 0 0 0 2px #000;
  animation: railDotPulse 2s ease-in-out infinite;
}
@keyframes railDotPulse {
  0%, 100% { transform: scale(1);   box-shadow: 0 0 0 2px #000, 0 0 0 0 rgba(46, 184, 114, 0.7); }
  50%      { transform: scale(1.15); box-shadow: 0 0 0 2px #000, 0 0 0 5px rgba(46, 184, 114, 0); }
}
.sidebar-rail-btn .icn { display: inline-flex; align-items: center; justify-content: center; pointer-events: none; }
.sidebar-rail-btn .icn svg { width: 20px; height: 20px; }
/* [v346] Bouton paramètres en bas du rail — plus de margin-top:auto
   (sinon double poussée vers le bas avec .sidebar-rail-spacer → gap).
   Petit espace seulement pour le séparer visuellement des FABs. */
.sidebar-rail-btn-bottom { margin-top: 6px; padding-top: 0; }
.sidebar-rail-btn-bottom::before {
  content: '';
  position: absolute;
  top: -4px; left: 8px; right: 8px;
  height: 1px;
  background: rgba(255,255,255,0.08);
}
/* Badge notifications sur les boutons rail (legacy v342, désormais inutilisé) */
.sidebar-rail-notif {
  position: absolute;
  top: 2px; right: 2px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--orange);
  color: white;
  font-size: 9px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 2px #0a1a2e;
}
/* ============================================================
   [v348] ANIMATION D'APPARITION EN CASCADE
   Séquence : rail (50ms) → items rail (stagger 50ms) → sidebar
   (250ms) → items sidebar (stagger 60ms) → main content (700ms).
   `animation-fill-mode: both` garantit que l'état initial (opacity 0)
   est appliqué avant le delay → pas de flash.
   ============================================================ */
@keyframes onasMenuSlideIn {
  0%   { opacity: 0; transform: translateX(-24px); }
  60%  { opacity: 0.7; }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes onasMenuPop {
  0%   { opacity: 0; transform: translateX(-12px) scale(0.92); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes onasMainFade {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
/* Rail : apparaît en premier, slide depuis la gauche */
.desktop-body .sidebar-rail {
  animation: onasMenuSlideIn 0.42s cubic-bezier(0.22, 0.85, 0.32, 1) both;
  animation-delay: 0.05s;
}
/* Items du rail : stagger 50ms, démarre après que le rail soit visible */
.desktop-body .sidebar-rail > .sidebar-rail-btn {
  animation: onasMenuPop 0.32s cubic-bezier(0.22, 0.85, 0.32, 1) both;
  opacity: 0;
}
.desktop-body .sidebar-rail > .sidebar-rail-btn:nth-child(1)  { animation-delay: 0.18s; }
.desktop-body .sidebar-rail > .sidebar-rail-btn:nth-child(2)  { animation-delay: 0.23s; }
.desktop-body .sidebar-rail > .sidebar-rail-btn:nth-child(3)  { animation-delay: 0.28s; }
.desktop-body .sidebar-rail > .sidebar-rail-btn:nth-child(4)  { animation-delay: 0.33s; }
.desktop-body .sidebar-rail > .sidebar-rail-btn:nth-child(5)  { animation-delay: 0.38s; }
.desktop-body .sidebar-rail > .sidebar-rail-btn:nth-child(6)  { animation-delay: 0.43s; }
.desktop-body .sidebar-rail > .sidebar-rail-btn:nth-child(7)  { animation-delay: 0.48s; }
.desktop-body .sidebar-rail > .sidebar-rail-btn:nth-child(8)  { animation-delay: 0.53s; }
.desktop-body .sidebar-rail > .sidebar-rail-btn:nth-child(9)  { animation-delay: 0.58s; }
.desktop-body .sidebar-rail > .sidebar-rail-btn:nth-child(10) { animation-delay: 0.63s; }
.desktop-body .sidebar-rail > .sidebar-rail-btn:nth-child(11) { animation-delay: 0.68s; }
.desktop-body .sidebar-rail > .sidebar-rail-btn:nth-child(12) { animation-delay: 0.73s; }
/* Sidebar (menu 2) : apparaît après le rail (~250ms), slide depuis la gauche */
.desktop-body .sidebar {
  animation: onasMenuSlideIn 0.5s cubic-bezier(0.22, 0.85, 0.32, 1) both;
  animation-delay: 0.25s;
}
/* [v377] Items de la sidebar : cascade synchronisée et étendue à 20 items.
   Stagger réduit à 30ms (au lieu de 60ms) pour un rythme rapide et coherent.
   Tous les items animent avec le même timing easing, sans rupture. */
.desktop-body .sidebar > .brand,
.desktop-body .sidebar > .menu-section,
.desktop-body .sidebar > .menu-it {
  animation: onasMenuPop 0.34s cubic-bezier(0.22, 0.85, 0.32, 1) both;
  opacity: 0;
}
.desktop-body .sidebar > :nth-child(1)  { animation-delay: 0.40s; }
.desktop-body .sidebar > :nth-child(2)  { animation-delay: 0.43s; }
.desktop-body .sidebar > :nth-child(3)  { animation-delay: 0.46s; }
.desktop-body .sidebar > :nth-child(4)  { animation-delay: 0.49s; }
.desktop-body .sidebar > :nth-child(5)  { animation-delay: 0.52s; }
.desktop-body .sidebar > :nth-child(6)  { animation-delay: 0.55s; }
.desktop-body .sidebar > :nth-child(7)  { animation-delay: 0.58s; }
.desktop-body .sidebar > :nth-child(8)  { animation-delay: 0.61s; }
.desktop-body .sidebar > :nth-child(9)  { animation-delay: 0.64s; }
.desktop-body .sidebar > :nth-child(10) { animation-delay: 0.67s; }
.desktop-body .sidebar > :nth-child(11) { animation-delay: 0.70s; }
.desktop-body .sidebar > :nth-child(12) { animation-delay: 0.73s; }
.desktop-body .sidebar > :nth-child(13) { animation-delay: 0.76s; }
.desktop-body .sidebar > :nth-child(14) { animation-delay: 0.79s; }
.desktop-body .sidebar > :nth-child(15) { animation-delay: 0.82s; }
.desktop-body .sidebar > :nth-child(16) { animation-delay: 0.85s; }
.desktop-body .sidebar > :nth-child(17) { animation-delay: 0.88s; }
.desktop-body .sidebar > :nth-child(18) { animation-delay: 0.91s; }
.desktop-body .sidebar > :nth-child(19) { animation-delay: 0.94s; }
.desktop-body .sidebar > :nth-child(20) { animation-delay: 0.97s; }
/* Main content : fade-in vers le haut après que la sidebar soit posée */
.desktop-body .dashboard-main,
.desktop-body .db-content {
  animation: onasMainFade 0.55s cubic-bezier(0.22, 0.85, 0.32, 1) both;
  animation-delay: 0.70s;
}
/* Respect du prefers-reduced-motion : pas d'animation si l'utilisateur
   a désactivé les animations dans son OS. */
@media (prefers-reduced-motion: reduce) {
  .desktop-body .sidebar-rail,
  .desktop-body .sidebar-rail > .sidebar-rail-btn,
  .desktop-body .sidebar,
  .desktop-body .sidebar > *,
  .desktop-body .dashboard-main,
  .desktop-body .db-content {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   [v356] OFFICE RIBBON — mimique du ruban Microsoft Office
   (Excel / Word). Onglets en haut, groupes de boutons en
   dessous, séparateurs verticaux entre groupes.
   ============================================================ */
.office-ribbon {
  background: #f3f2f1;
  border-bottom: 1px solid #d2d0ce;
  font-family: 'Segoe UI', -apple-system, sans-serif;
  font-size: 12px;
  color: #323130;
  user-select: none;
}
.office-ribbon-tabs {
  display: flex;
  background: #f3f2f1;
  border-bottom: 1px solid #e1dfdd;
  padding: 0 4px;
}
.office-ribbon-tab {
  padding: 8px 16px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #323130;
  border: none;
  background: transparent;
  border-radius: 2px 2px 0 0;
  position: relative;
  font-family: inherit;
  letter-spacing: 0.2px;
}
.office-ribbon-tab:hover { background: rgba(0,0,0,0.04); }
.office-ribbon-tab.is-active {
  background: white;
  font-weight: 700;
  border-bottom: 2px solid var(--office-accent, #217346);
}
.office-ribbon-tab.tab-file {
  background: var(--office-accent, #217346);
  color: white;
  font-weight: 700;
  padding: 8px 22px;
  border-radius: 0;
}
.office-ribbon-tab.tab-file:hover { background: var(--office-accent-hover, #185a36); }
.office-ribbon-body {
  display: flex;
  align-items: stretch;
  padding: 6px 4px;
  gap: 0;
  background: white;
  overflow-x: auto;
  min-height: 76px;
}
.office-ribbon-group {
  display: flex;
  flex-direction: column;
  padding: 0 8px;
  border-right: 1px solid #e1dfdd;
  min-width: 0;
}
.office-ribbon-group:last-child { border-right: none; }
.office-ribbon-group-content {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  flex-wrap: wrap;
}
.office-ribbon-group-label {
  font-size: 10px;
  color: #605e5c;
  text-align: center;
  padding-top: 4px;
  font-weight: 400;
}
.office-btn {
  background: transparent;
  border: 1px solid transparent;
  padding: 4px 6px;
  border-radius: 2px;
  font-family: inherit;
  font-size: 12px;
  color: #323130;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 24px;
  height: 24px;
  justify-content: center;
}
.office-btn:hover { background: #edebe9; border-color: #d2d0ce; }
.office-btn:active { background: #c8c6c4; }
.office-btn.is-active { background: #d2d0ce; border-color: #a19f9d; }
.office-btn-big {
  flex-direction: column;
  height: auto;
  padding: 4px 8px;
  min-width: 50px;
  gap: 2px;
}
.office-btn-big .office-btn-icon { font-size: 18px; line-height: 1; }
.office-btn-big .office-btn-label { font-size: 11px; }
.office-btn-bold { font-weight: 800; }
.office-btn-italic { font-style: italic; }
.office-btn-underline { text-decoration: underline; }
.office-color-btn {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 4px;
  cursor: pointer;
}
.office-color-btn-letter { font-weight: 800; font-size: 14px; line-height: 1; }
.office-color-btn-swatch { display: block; width: 18px; height: 3px; margin-top: 2px; border: 1px solid #d2d0ce; }
.office-color-btn input[type="color"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.office-select {
  background: white;
  border: 1px solid #d2d0ce;
  padding: 2px 6px;
  font-family: inherit;
  font-size: 12px;
  border-radius: 2px;
  height: 24px;
  cursor: pointer;
  min-width: 70px;
}
.office-select:hover { border-color: #605e5c; }
/* Thèmes couleur par app */
.office-ribbon.theme-excel { --office-accent: #217346; --office-accent-hover: #185a36; }
.office-ribbon.theme-word  { --office-accent: #2b579a; --office-accent-hover: #1f4477; }
.office-ribbon.theme-ppt   { --office-accent: #b7472a; --office-accent-hover: #8e3520; }

/* ============================================================
   [v369] OFFICE FILE MENU — Backstage view style MS Office.
   Sidebar gauche colorée par app + panneau droit avec contenu
   selon section sélectionnée (Nouveau / Ouvrir / Enregistrer /
   Imprimer / Partager / Exporter / Compte / Options).
   ============================================================ */
.office-file-overlay {
  position: fixed; inset: 0; z-index: 99999;
  background: white; display: grid; grid-template-columns: 280px 1fr;
  font-family: 'Segoe UI', -apple-system, sans-serif;
}
.office-file-sidebar {
  background: var(--office-accent, #217346); color: white;
  display: flex; flex-direction: column;
  padding: 20px 0;
}
.office-file-back {
  background: rgba(255,255,255,0.15); border: none; color: white;
  width: 40px; height: 40px; margin: 0 16px 20px;
  border-radius: 50%; cursor: pointer; font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.office-file-back:hover { background: rgba(255,255,255,0.25); }
.office-file-section-btn {
  background: transparent; border: none; color: white;
  padding: 10px 24px; font-size: 14px; cursor: pointer;
  text-align: left; font-family: inherit;
  display: flex; align-items: center; gap: 14px;
  border-left: 3px solid transparent;
}
.office-file-section-btn:hover { background: rgba(255,255,255,0.10); }
.office-file-section-btn.is-active {
  background: rgba(255,255,255,0.18);
  border-left-color: white;
  font-weight: 700;
}
.office-file-section-icon { font-size: 16px; width: 22px; text-align: center; }
.office-file-divider {
  border-top: 1px solid rgba(255,255,255,0.18);
  margin: 12px 0;
}
.office-file-content {
  background: white; padding: 40px 60px; overflow-y: auto;
}
.office-file-title {
  font-size: 36px; font-weight: 300; color: #323130;
  margin: 0 0 24px;
}
.office-file-subtitle {
  font-size: 14px; color: #605e5c; margin-bottom: 24px;
}
.office-file-card {
  border: 1px solid #e1dfdd; padding: 16px; margin-bottom: 10px;
  cursor: pointer; border-radius: 4px;
  display: flex; align-items: center; gap: 16px;
  background: white;
}
.office-file-card:hover { background: #f3f2f1; border-color: #c8c6c4; }
.office-file-card-icon {
  font-size: 28px; width: 48px; text-align: center;
}
.office-file-card-text { flex: 1; }
.office-file-card-text-title { font-size: 14px; font-weight: 700; color: #323130; }
.office-file-card-text-desc { font-size: 12px; color: #605e5c; margin-top: 2px; }
.office-file-templates-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px; margin-top: 20px;
}
.office-file-template {
  cursor: pointer; border: 1px solid #e1dfdd; padding: 14px;
  border-radius: 4px; background: white; transition: box-shadow .15s;
}
.office-file-template:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  border-color: var(--office-accent, #217346);
}
.office-file-template-preview {
  height: 110px; background: #f8f8f8; border: 1px solid #f0f0f0;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; margin-bottom: 10px; border-radius: 2px;
}
.office-file-template-name { font-size: 13px; font-weight: 600; color: #323130; }
.office-file-template-desc { font-size: 11px; color: #605e5c; margin-top: 2px; }
.office-file-export-btn {
  background: var(--office-accent, #217346); color: white;
  border: none; padding: 10px 24px; border-radius: 2px;
  cursor: pointer; font-size: 13px; font-weight: 600; font-family: inherit;
  margin-right: 8px;
}
.office-file-export-btn:hover { background: var(--office-accent-hover, #185a36); }
.office-file-export-btn.secondary {
  background: white; color: var(--office-accent, #217346);
  border: 1px solid var(--office-accent, #217346);
}
.office-file-info-row {
  display: flex; padding: 8px 0; border-bottom: 1px solid #f1f3f4;
  font-size: 13px;
}
.office-file-info-label { width: 160px; color: #605e5c; }
.office-file-info-value { flex: 1; color: #323130; font-weight: 500; }
/* ============================================================
   [v361] Améliorations Office — status bar bas + styles visuels
   Word + onglets de feuilles Excel + tooltip d'info utilisateur.
   ============================================================ */
.office-status-bar {
  display: flex; align-items: center;
  background: var(--office-accent, #217346);
  color: white;
  font-family: 'Segoe UI', -apple-system, sans-serif;
  font-size: 11px;
  height: 24px;
  padding: 0 8px;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.office-status-left { display: flex; gap: 14px; align-items: center; flex: 1; }
.office-status-right { display: flex; gap: 4px; align-items: center; }
.office-status-btn {
  background: transparent; border: none; color: white;
  padding: 0 8px; height: 22px; cursor: pointer;
  font-size: 12px; font-family: inherit;
  border-radius: 2px;
  display: inline-flex; align-items: center; gap: 4px;
}
.office-status-btn:hover { background: rgba(255,255,255,0.15); }
.office-status-btn.is-active { background: rgba(255,255,255,0.22); }
.office-status-zoom { display: flex; align-items: center; gap: 6px; padding: 0 8px; }
.office-status-zoom input[type=range] { width: 100px; height: 4px; }
.office-status-zoom-pct { min-width: 40px; text-align: center; font-weight: 700; }
/* Onglets feuilles Excel (bas) */
.office-sheet-tabs {
  display: flex; align-items: center;
  background: #f3f2f1;
  border-top: 1px solid #d2d0ce;
  padding: 0 4px;
  height: 28px;
  font-family: 'Segoe UI', sans-serif;
  font-size: 12px;
}
.office-sheet-tab {
  background: transparent; border: 1px solid transparent;
  padding: 4px 14px; cursor: pointer; font-family: inherit; font-size: 12px;
  color: #323130; border-bottom: 1px solid #d2d0ce;
}
.office-sheet-tab.is-active {
  background: white; border-color: #d2d0ce; border-bottom: 1px solid white;
  font-weight: 700; color: #217346;
}
.office-sheet-tab:hover:not(.is-active) { background: rgba(0,0,0,0.04); }
.office-sheet-add {
  background: transparent; border: none; cursor: pointer;
  padding: 0 8px; height: 22px; color: #605e5c; font-size: 16px;
}
.office-sheet-nav {
  background: transparent; border: none; cursor: pointer;
  padding: 0 6px; height: 22px; color: #605e5c; font-size: 13px;
}
.office-sheet-nav:hover { background: rgba(0,0,0,0.06); border-radius: 2px; }

/* Panneau Styles Word — cartes visuelles avec aperçu */
.office-style-gallery {
  display: flex; gap: 4px; padding: 0 4px; align-items: center; overflow-x: auto;
}
.office-style-card {
  border: 1px solid #d2d0ce;
  background: white;
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  min-width: 80px;
  height: 52px;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  border-radius: 2px;
  transition: border-color .12s, background .12s;
}
.office-style-card:hover { background: #f3f2f1; border-color: #a19f9d; }
.office-style-card.is-active { border-color: #2b579a; background: #eff6fc; }
.office-style-card .preview-normal     { font-size: 11px; }
.office-style-card .preview-h1         { font-size: 18px; font-weight: 700; color: #2e74b5; }
.office-style-card .preview-h2         { font-size: 14px; font-weight: 700; color: #2e74b5; }
.office-style-card .preview-title      { font-size: 16px; font-weight: 700; color: #323130; }
.office-style-card .preview-subtitle   { font-size: 12px; color: #595959; font-style: italic; }
.office-style-card .preview-emphasis   { font-size: 11px; font-style: italic; color: #2b579a; }

/* ============================================================
   [v365] WEBMAIL — design Gmail (top bar search central + sidebar
   compose rouge + liste compacte avec étoiles + compose flottant)
   ============================================================ */
.webmail-app {
  display: flex; flex-direction: column;
  height: calc(100vh - 36px);
  font-family: 'Google Sans', 'Roboto', -apple-system, sans-serif;
  background: #f6f8fc;
}
/* === Top bar Gmail style === */
.gmail-topbar {
  display: flex; align-items: center; gap: 16px;
  background: #f6f8fc; padding: 8px 16px;
  height: 64px; border-bottom: 1px solid #e8eaed;
}
.gmail-burger {
  background: transparent; border: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px; color: #5f6368;
}
.gmail-burger:hover { background: rgba(60,64,67,0.08); }
.gmail-logo {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Product Sans', 'Google Sans', Roboto, sans-serif;
  font-size: 22px; color: #5f6368; font-weight: 400;
  min-width: 180px;
}
.gmail-logo img { width: 36px; height: 36px; }
.gmail-logo-icon {
  width: 36px; height: 36px; background: #ea4335;
  border-radius: 50%; display: inline-flex; align-items: center;
  justify-content: center; color: white; font-weight: 700; font-size: 18px;
}
.gmail-search-bar {
  flex: 1; max-width: 720px;
  display: flex; align-items: center; gap: 10px;
  background: #eaf1fb; padding: 8px 16px; border-radius: 8px;
  transition: background .15s;
}
.gmail-search-bar:focus-within {
  background: white; box-shadow: 0 1px 1px rgba(0,0,0,0.1), 0 1px 4px rgba(0,0,0,0.15);
}
.gmail-search-bar input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: inherit; font-size: 15px; color: #202124;
}
.gmail-search-bar input::placeholder { color: #5f6368; }
.gmail-topbar-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.gmail-apps-btn {
  background: transparent; border: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #5f6368; font-size: 18px;
}
.gmail-apps-btn:hover { background: rgba(60,64,67,0.08); }
.gmail-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, #4285f4, #0f9d58);
  color: white; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}

/* === Body : sidebar + main === */
.gmail-body { display: grid; grid-template-columns: 256px 1fr; flex: 1; overflow: hidden; background: #f6f8fc; }

/* === Sidebar === */
.gmail-sidebar {
  background: #f6f8fc; padding: 8px 0 0 8px;
  overflow-y: auto;
}
.gmail-compose-btn {
  display: flex; align-items: center; gap: 12px;
  background: white; border: 1px solid #dadce0;
  color: #001d35; padding: 16px 24px 16px 16px;
  margin: 4px 8px 16px 4px;
  border-radius: 16px; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500;
  box-shadow: 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
  transition: background .15s, box-shadow .15s;
}
.gmail-compose-btn:hover {
  background: #f0f4ff;
  box-shadow: 0 1px 3px 0 rgba(60,64,67,0.302), 0 4px 8px 3px rgba(60,64,67,0.149);
}
.gmail-compose-icon {
  width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; color: #1967d2;
}
.gmail-sidebar-folder {
  display: flex; align-items: center; gap: 18px;
  padding: 0 12px 0 26px; height: 32px;
  border-radius: 0 16px 16px 0; margin-right: 8px;
  cursor: pointer; color: #202124;
  font-family: inherit; font-size: 14px; font-weight: 500;
}
.gmail-sidebar-folder:hover { background: rgba(32,33,36,0.06); }
.gmail-sidebar-folder.is-active {
  background: #d3e3fd; color: #001d35; font-weight: 700;
}
.gmail-sidebar-folder-icon { width: 20px; text-align: center; font-size: 16px; }
.gmail-sidebar-folder-label { flex: 1; }
.gmail-sidebar-folder-count { font-size: 12px; color: #5f6368; }
.gmail-sidebar-folder.is-active .gmail-sidebar-folder-count { color: #001d35; }
.gmail-sidebar-section {
  font-size: 11px; color: #5f6368; font-weight: 600;
  padding: 16px 12px 4px 26px; text-transform: uppercase; letter-spacing: 0.5px;
}

/* === Main area === */
.gmail-main {
  background: white; margin: 0 8px 8px 0;
  border-radius: 16px; display: flex; flex-direction: column;
  overflow: hidden;
}
.gmail-list-toolbar {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 16px; height: 48px;
  border-bottom: 1px solid #f1f3f4;
}
.gmail-list-toolbar-btn {
  background: transparent; border: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; color: #5f6368;
}
.gmail-list-toolbar-btn:hover { background: rgba(60,64,67,0.08); color: #202124; }
.gmail-list-toolbar-spacer { flex: 1; }
.gmail-list-tabs {
  display: flex; gap: 0;
  border-bottom: 1px solid #f1f3f4;
}
.gmail-list-tab {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 24px; cursor: pointer;
  font-size: 14px; color: #5f6368;
  background: transparent; border: none; border-bottom: 3px solid transparent;
  font-family: inherit; font-weight: 500;
}
.gmail-list-tab.is-active { color: #1a73e8; border-bottom-color: #1a73e8; background: rgba(26,115,232,0.04); }
.gmail-list-tab:hover:not(.is-active) { background: rgba(60,64,67,0.04); }
.gmail-list-tab-icon { font-size: 18px; }

/* === Messages list (Gmail row style) === */
.gmail-list { flex: 1; overflow-y: auto; }
.gmail-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px 0 8px; height: 40px;
  border-bottom: 1px solid #f1f3f4;
  cursor: pointer; font-size: 13px; color: #202124;
  transition: box-shadow .1s;
}
.gmail-list-row:hover {
  box-shadow: inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0, 0 1px 2px 0 rgba(60,64,67,0.302), 0 1px 3px 1px rgba(60,64,67,0.149);
  z-index: 1; position: relative;
}
.gmail-list-row.is-unread { background: white; font-weight: 700; }
.gmail-list-row:not(.is-unread) { background: #f6f8fc; }
.gmail-list-row.is-selected { background: #c2e7ff; }
.gmail-list-check { width: 28px; }
.gmail-list-star {
  width: 28px; cursor: pointer; color: #5f6368; font-size: 16px; text-align: center;
}
.gmail-list-star.is-starred { color: #f9ab00; }
.gmail-list-from-col {
  flex: 0 0 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 14px;
}
.gmail-list-content-col {
  flex: 1; display: flex; gap: 8px; min-width: 0;
  white-space: nowrap; overflow: hidden;
}
.gmail-list-subj { font-weight: inherit; }
.gmail-list-snippet { color: #5f6368; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
.gmail-list-date {
  flex: 0 0 70px; text-align: right;
  font-size: 12px; color: #5f6368;
}
.gmail-list-row.is-unread .gmail-list-date { color: #202124; font-weight: 700; }
/* [v366] Important marker (chevron jaune Gmail) */
.gmail-list-important {
  width: 22px; text-align: center; color: #f9ab00; font-size: 14px; cursor: pointer;
}
.gmail-list-important.is-important { color: #f9ab00; }
.gmail-list-important.not-important { color: #dadce0; }
.gmail-list-important:hover { color: #fb8c00; }
/* Quick actions au hover sur la row */
.gmail-list-row-actions {
  display: none; position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  background: white; padding: 4px; border-radius: 4px; gap: 2px;
  box-shadow: 0 1px 3px 0 rgba(60,64,67,0.3);
}
.gmail-list-row:hover .gmail-list-row-actions { display: flex; }
.gmail-list-row:hover .gmail-list-date { display: none; }
.gmail-list-row-action {
  background: transparent; border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%; color: #5f6368;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.gmail-list-row-action:hover { background: rgba(60,64,67,0.08); color: #202124; }
/* Avatar coloré dans la liste (mini) */
.gmail-list-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  color: white; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
/* Reply inline en bas de la conversation */
.gmail-reply-inline {
  border: 1px solid #dadce0; border-radius: 8px;
  margin: 16px 0; padding: 12px;
  display: flex; gap: 12px; align-items: center;
  background: white; cursor: text;
}
.gmail-reply-inline-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #4285f4, #0f9d58);
  color: white; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; justify-content: center;
}
.gmail-reply-inline-input { flex: 1; color: #5f6368; }
.gmail-reply-inline-actions {
  display: flex; gap: 8px;
}
.gmail-reply-quick-btn {
  background: white; border: 1px solid #dadce0; padding: 6px 16px;
  border-radius: 999px; cursor: pointer; font-family: inherit;
  font-size: 13px; color: #1a73e8; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.gmail-reply-quick-btn:hover { background: #f0f4ff; }
/* Compose : barre format text dans le pied */
.gmail-compose-format {
  display: flex; gap: 2px; padding: 4px 8px;
  border-top: 1px solid #f1f3f4; border-bottom: 1px solid #f1f3f4;
}
.gmail-compose-format-btn {
  background: transparent; border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 4px; color: #5f6368;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
}
.gmail-compose-format-btn:hover { background: rgba(60,64,67,0.08); color: #202124; }
.gmail-compose-format-btn.is-active { background: #d2e3fc; color: #1967d2; }
/* Indicateur "brouillon enregistré" */
.gmail-compose-saved {
  font-size: 11px; color: #5f6368; padding: 0 8px;
  display: inline-flex; align-items: center; gap: 4px;
}
/* Attachments preview */
.gmail-attachment {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid #dadce0; border-radius: 8px; padding: 6px 12px;
  margin: 4px; font-size: 12px; color: #202124;
  background: #f8f9fa;
}
.gmail-attachment-remove {
  background: transparent; border: none; cursor: pointer;
  color: #5f6368; font-size: 14px;
}
/* Conversation thread */
.gmail-thread-item {
  border: 1px solid #dadce0; border-radius: 8px;
  margin-bottom: 8px; padding: 14px 16px;
  background: white; cursor: pointer;
}
.gmail-thread-item.is-collapsed { padding: 10px 16px; }
.gmail-thread-item-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px;
}
.gmail-thread-item-snippet {
  margin-top: 6px; font-size: 12px; color: #5f6368;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* === Reading view (replaces list when message selected) === */
.gmail-reading { padding: 16px 32px; overflow-y: auto; flex: 1; background: white; }
.gmail-reading-back {
  background: transparent; border: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%; color: #5f6368;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.gmail-reading-back:hover { background: rgba(60,64,67,0.08); }
.gmail-reading-subject {
  font-size: 22px; font-weight: 400; color: #202124;
  padding: 20px 8px 16px; line-height: 1.4;
}
.gmail-reading-meta {
  display: flex; align-items: flex-start; gap: 16px; padding: 0 0 16px;
  border-bottom: 1px solid #f1f3f4;
}
.gmail-reading-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: linear-gradient(135deg, #4285f4, #0f9d58);
  color: white; font-weight: 600; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
}
.gmail-reading-meta-info { flex: 1; min-width: 0; }
.gmail-reading-from {
  font-size: 14px; color: #202124; font-weight: 500;
  display: flex; align-items: baseline; gap: 8px;
}
.gmail-reading-from-email { color: #5f6368; font-size: 12px; font-weight: 400; }
.gmail-reading-to { font-size: 12px; color: #5f6368; margin-top: 2px; }
.gmail-reading-date {
  font-size: 12px; color: #5f6368; white-space: nowrap;
}
.gmail-reading-body {
  padding: 20px 0; font-size: 14px; line-height: 1.6; color: #202124;
  white-space: pre-wrap;
}
.gmail-reading-actions {
  display: flex; gap: 12px; padding: 16px 0; border-top: 1px solid #f1f3f4;
}
.gmail-reading-action-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 24px; border-radius: 999px;
  border: 1px solid #dadce0; background: white;
  cursor: pointer; font-family: inherit; font-size: 13px;
  color: #202124; font-weight: 500;
}
.gmail-reading-action-btn:hover { background: rgba(60,64,67,0.04); }

/* === Compose flottant Gmail style (bas-droite) === */
.gmail-compose {
  position: fixed; bottom: 0; right: 24px;
  width: 540px; height: 540px; max-height: 80vh;
  background: white; border-radius: 8px 8px 0 0;
  box-shadow: 0 8px 10px 1px rgba(0,0,0,0.14), 0 3px 14px 2px rgba(0,0,0,0.12), 0 5px 5px -3px rgba(0,0,0,0.2);
  display: flex; flex-direction: column;
  z-index: 9999;
  font-family: 'Google Sans', Roboto, sans-serif;
}
.gmail-compose-head {
  background: #404040; color: white;
  padding: 8px 14px; border-radius: 8px 8px 0 0;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; font-weight: 500;
}
.gmail-compose-head-actions { display: flex; gap: 0; }
.gmail-compose-head-btn {
  background: transparent; border: none; color: white;
  width: 28px; height: 28px; cursor: pointer; font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px;
}
.gmail-compose-head-btn:hover { background: rgba(255,255,255,0.12); }
.gmail-compose-field {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-bottom: 1px solid #f1f3f4;
}
.gmail-compose-field label {
  width: 40px; color: #5f6368; font-size: 13px;
}
.gmail-compose-field input {
  flex: 1; border: none; outline: none;
  font-size: 13px; color: #202124; font-family: inherit;
}
.gmail-compose-body {
  flex: 1; padding: 16px; outline: none; border: none;
  font-size: 13px; color: #202124; line-height: 1.5;
  font-family: inherit; resize: none;
}
.gmail-compose-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; border-top: 1px solid #f1f3f4;
}
.gmail-compose-send {
  background: #1a73e8; color: white;
  padding: 9px 24px; border-radius: 4px;
  border: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.gmail-compose-send:hover { background: #1765cc; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.gmail-compose-tool {
  background: transparent; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: 50%; color: #5f6368;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px;
}
.gmail-compose-tool:hover { background: rgba(60,64,67,0.08); }

/* "Enregistrement automatique" toggle (Excel) */
.office-autosave {
  display: flex; align-items: center; gap: 6px;
  padding: 0 10px; height: 30px; color: white; font-size: 11px;
}
.office-autosave-toggle {
  width: 32px; height: 16px; background: rgba(255,255,255,0.3);
  border-radius: 999px; position: relative; cursor: pointer;
  transition: background .15s;
}
.office-autosave-toggle.on { background: #4caf50; }
.office-autosave-toggle::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%; background: white;
  transition: left .15s;
}
.office-autosave-toggle.on::after { left: 18px; }

/* Search bar au centre du titlebar */
.office-search {
  flex: 0 1 600px;
  display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,0.18);
  border-radius: 4px;
  padding: 3px 10px;
  height: 22px;
}
.office-search input {
  flex: 1; background: transparent; border: none; outline: none;
  color: white; font-family: inherit; font-size: 12px;
}
.office-search input::placeholder { color: rgba(255,255,255,0.7); }

/* [v358] Mode bureautique : pas d'ascenseur visible au démarrage —
   apparition uniquement au hover. dashboard-main et db-content sans scroll
   propre (le grid/editor gère son propre scroll, en mode discret). */
.dashboard-main:has(.office-ribbon) {
  overflow: hidden;
  scrollbar-width: none;
}
.dashboard-main:has(.office-ribbon) .db-content {
  overflow: hidden;
  scrollbar-width: none;
}
/* Le container interne du tableur/editor a un scroll DISCRET : invisible au
   repos, fin et translucide au hover. */
.office-grid-scroll,
.office-grid-scroll * {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.office-grid-scroll::-webkit-scrollbar,
.office-grid-scroll *::-webkit-scrollbar { width: 0; height: 0; background: transparent; }
.office-grid-scroll:hover {
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,0.18) transparent;
}
.office-grid-scroll:hover::-webkit-scrollbar { width: 10px; height: 10px; }
.office-grid-scroll:hover::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 5px; }
.office-grid-scroll:hover::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.32); }
.office-grid-scroll:hover::-webkit-scrollbar-track { background: transparent; }

/* [v357] Barre de titre Office + QAT */
.office-titlebar {
  display: flex; align-items: center;
  height: 30px;
  background: var(--office-accent, #217346);
  color: white;
  padding: 0 4px;
  font-size: 12px;
  font-family: 'Segoe UI', -apple-system, sans-serif;
}
.office-qat {
  display: flex; gap: 0;
  padding: 0 6px;
  height: 100%;
  align-items: center;
}
.office-qat-btn {
  background: transparent; border: none; color: white;
  padding: 0 6px; height: 22px; cursor: pointer;
  border-radius: 2px; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; font-family: inherit;
}
.office-qat-btn:hover { background: rgba(255,255,255,0.18); }
.office-titlebar-name {
  flex: 1; text-align: center;
  font-weight: 600; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.office-titlebar-actions { display: flex; gap: 0; }
.office-titlebar-btn {
  background: transparent; border: none; color: white;
  padding: 0 10px; height: 30px; cursor: pointer;
  font-size: 13px; font-family: inherit;
}
.office-titlebar-btn:hover { background: rgba(255,255,255,0.18); }

/* [v345] Petit dot rouge à la place du chiffre — plus discret sur le rail */
.sidebar-rail-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ce1126;
  box-shadow: 0 0 0 2px #0a1a2e, 0 0 6px rgba(206, 17, 38, 0.7);
  pointer-events: none;
  animation: railDotPulseRed 1.8s ease-in-out infinite;
}
@keyframes railDotPulseRed {
  0%, 100% { transform: scale(1);    box-shadow: 0 0 0 2px #0a1a2e, 0 0 0 0 rgba(206, 17, 38, 0.6); }
  50%      { transform: scale(1.18); box-shadow: 0 0 0 2px #0a1a2e, 0 0 0 6px rgba(206, 17, 38, 0); }
}

/* [v346] Spacer entre les groupes et les FABs IA/Appel/Notif dans le rail */
.sidebar-rail-spacer {
  flex: 1;
  min-height: 12px;
  margin: 4px 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
/* [v347] FABs IA / Appel / Notif dans le rail — fond transparent comme les
   autres boutons rail, seule l'icône a la couleur thématique. Hover idem
   discret. Permet à l'oeil de scanner toutes les icônes uniformément. */
.sidebar-rail-btn-notif { background: transparent; color: #34c97e; box-shadow: none; }
.sidebar-rail-btn-notif:hover { background: rgba(52,201,126,0.10); color: #6ee7a3; }
.sidebar-rail-btn-call  { background: transparent; color: #4a9eff; box-shadow: none; }
.sidebar-rail-btn-call:hover  { background: rgba(74,158,255,0.10); color: #7cb9ff; }
.sidebar-rail-btn-ai    { background: transparent; color: #fb923c; box-shadow: none; }
.sidebar-rail-btn-ai:hover    { background: rgba(251,146,60,0.10); color: #ffb572; }
/* [v348] Bouton "Installer PWA" et "Mise à jour dispo" — couleurs distinctes */
.sidebar-rail-btn-install {
  background: transparent;
  color: #34c97e;
  position: relative;
  animation: onasInstallPulse 2.4s ease-in-out infinite;
}
.sidebar-rail-btn-install:hover { background: rgba(52,201,126,0.12); color: #6ee7a3; }
.sidebar-rail-btn-update {
  background: rgba(251,146,60,0.14);
  color: #fb923c;
  position: relative;
}
.sidebar-rail-btn-update:hover { background: rgba(251,146,60,0.22); color: #ffb572; }
@keyframes onasInstallPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52,201,126,0.45); }
  50%      { box-shadow: 0 0 0 6px rgba(52,201,126,0); }
}
/* Sur mobile, le rail s'efface quand la sidebar n'est pas ouverte */
@media (max-width: 980px) {
  .desktop-body .sidebar-rail { display: none; }
  .desktop-body .sidebar.open ~ .sidebar-rail,
  .sidebar.open + .sidebar-rail { display: flex; }
}
.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.16);
  border-radius: 4px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.28); }
.sidebar .brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 8px;
}
.sidebar .brand .logo-h {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--orange);
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 800;
}
.sidebar .brand .name {
  font-weight: 800; font-size: 14px; color: white;
}
.sidebar .brand .name small { display: block; font-weight: 500; font-size: 10px; opacity: 0.6; }

.sidebar .menu-it {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
}
.sidebar .menu-it:hover { background: rgba(255,255,255,0.06); }
.sidebar .menu-it.active { background: var(--navy); color: white; font-weight: 700; }
.sidebar .menu-it.active .icn { color: var(--orange); }
/* [v378] Drawer Zones géographiques — slide-in droit + overlay fade */
@keyframes onasDrawerSlide { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes onasOverlayFade { from { opacity: 0; } to { opacity: 1; } }
/* [v386] Drawer prestataire (Équipe & parc auto) — slide-in identique au pattern Zones */
@keyframes drawerSlideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

/* [v372] Aligne l'icône avec la 1re ligne de texte (le label) */
.sidebar .menu-it .icn { display: inline-flex; align-items: center; flex-shrink: 0; padding-top: 2px; }
/* [v372] Bloc texte sur 2 lignes : label + description courte sous le label.
   IMPORTANT : display:flex est essentiel pour que les 2 spans s'empilent
   verticalement (sinon les <span> inline collent label+desc bout à bout). */
.sidebar .menu-it .menu-it-text {
  display: flex !important;
  flex-direction: column;
  gap: 1px;
  flex: 1; min-width: 0;
  line-height: 1.25;
}
.sidebar .menu-it .menu-it-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;                  /* blanc pur (demande user) */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* [v373] Description : plus petite (9.5px), couleur GRIS doux (pas blanc tinté),
   pas bold, autorise jusqu'à 2 lignes via line-clamp puis ellipsis sur la 3e. */
.sidebar .menu-it .menu-it-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9.5px;
  font-weight: 400 !important;
  color: #94a3b8;            /* gris doux (slate-400) — lisible sans crier */
  letter-spacing: 0.1px;
  margin-top: 1px;
  white-space: normal;       /* override d'un éventuel nowrap hérité */
  word-break: break-word;
}
.sidebar .menu-it.active .menu-it-desc { color: #cbd5e1; }   /* gris clair quand actif */
.sidebar .menu-it:hover .menu-it-desc { color: #b0b9c4; }   /* gris medium au survol */
.sidebar .menu-it .count {
  margin-left: auto;
  align-self: center;
  background: var(--orange);
  color: white;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Intertitres de section dans la sidebar — chaque section est un TIROIR
   cliquable qui plie/déplie ses items. Couleur orange pour les sections
   opérationnelles, bleu clair pour Vue d'ensemble (couleur injectée
   inline via style={{ color }} dans le JSX). */
.sidebar .menu-section {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px 6px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  cursor: pointer;
  user-select: none;
  transition: opacity .15s ease, background .15s ease;
}
.sidebar .menu-section:first-of-type { padding-top: 10px; }
.sidebar .menu-section:hover { background: rgba(255,255,255,0.05); }
.sidebar .menu-section-chev {
  display: inline-block;
  font-size: 11px;
  transition: transform .2s ease;
  opacity: 0.85;
}
.sidebar .menu-section.is-collapsed .menu-section-chev {
  transform: rotate(-90deg);
}
.sidebar .menu-section.is-collapsed {
  opacity: 0.85;
}
/* [v343] Section "verrouillée" : header non-cliquable (la navigation se fait
   via le rail à gauche). Pas de hover, pas de cursor pointer. */
.sidebar .menu-section.is-locked {
  cursor: default;
  pointer-events: none;
}
.sidebar .menu-section.is-locked:hover {
  background: transparent;
}

/* Poignée de redimensionnement — encoche sur le bord droit de la sidebar.
   Dépasse de 12px à droite pour donner l'impression d'une languette qu'on tire.
   Pulse en boucle pour attirer l'œil sans être agressif. */
/* [v317] Poignée placée hors de la sidebar (sibling) — ancrée sur .desktop-body
   (qui est position:relative). Suit la largeur de la sidebar via left calc.
   [v318] Fond orange + anneau bleu animé qui tourne autour (effet orbite).
   [v320] position:fixed pour que la poignée reste centrée sur la VIEWPORT
   plutôt que sur la hauteur totale du desktop-body (qui peut déborder). */
.sidebar-handle {
  position: fixed;
  /* [v322] Aligné EXACTEMENT avec le logo ONAS (top: 14px, height: 32px) */
  top: 14px;
  /* [v345] left = largeur du rail (56px) + largeur de la sidebar (220px) = 276px
     → la poignée se positionne à la FRONTIÈRE sidebar/main, donc HORS du menu 2 */
  left: 276px;
  transform: none;
  width: 16px;
  height: 32px;
  border: none;
  padding: 0;
  /* [v380] Fond bleu identique à la sidebar (menu 2) + animation supprimée
     pour stopper le flicker constant à l'écran. */
  background: var(--navy-deep);
  color: rgba(255,255,255,0.85);
  /* [v324] Coins gauche carrés (collés au menu) + coins droite arrondis :
     la poignée apparaît comme une extension naturelle de la sidebar. */
  border-radius: 0 10px 10px 0;
  box-shadow: 0 2px 6px -1px rgba(6, 58, 34, 0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  font-family: inherit;
  transition: background .15s ease, color .15s ease, left .22s ease;
  /* animation: SUPPRIMÉE (v380) */
}
/* [v380] pseudo-element ::before SUPPRIMÉ (était l'anneau bleu tournant) */
/* Mode compact : poignée collée au bord droit de la sidebar compacte (64px)
   + largeur du rail (56px) = 120px. Toujours HORS du menu 2. */
.desktop-body:has(.sidebar.compact) .sidebar-handle {
  left: 120px;
}
.sidebar-handle:hover {
  background: #1a3358;       /* navy un peu plus clair au hover */
  color: #fff;
}
.sidebar-handle:active {
  background: #0a1a2e;       /* navy plus foncé au clic */
}
.sidebar-handle:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.sidebar-handle-grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.sidebar-handle-grip svg { display: block; }

/* Pulse subtile : la box-shadow scintille doucement pour suggérer
   l'interactivité, sans clignoter (mouvement trop discret pour distraire). */
/* Rotation infinie pour les icônes "loading" (bouton refresh actif, etc.) */
@keyframes onasSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes onasHandlePulse {
  0%, 100% {
    box-shadow:
      0 6px 16px -4px rgba(6, 58, 34, 0.25),
      0 2px 6px -1px rgba(6, 58, 34, 0.12);
  }
  50% {
    box-shadow:
      0 8px 20px -4px rgba(245, 110, 30, 0.35),
      0 3px 8px -1px rgba(245, 110, 30, 0.18);
  }
}

/* ===== Mode COMPACT — icônes seules, sidebar ~64px ===== */
.sidebar.compact {
  width: 64px;
  padding: 14px 8px;
  align-items: center;
}
/* Logo réduit, sans texte */
.sidebar.compact .brand {
  padding: 0 0 12px;
  justify-content: center;
  width: 100%;
}
.sidebar.compact .brand .name { display: none; }
/* [v442] En mode compact : logo aligne sur la largeur des items menu (44px)
   pour s'aligner visuellement avec les boutons en-dessous (Tableau de bord, etc.). */
.sidebar.compact .brand .logo-h {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 10px !important;
}
.sidebar.compact .brand .logo-h img {
  border-radius: 10px !important;
}
/* Items centrés, sans texte. Le label est dans `title` → tooltip natif. */
.sidebar.compact .menu-it {
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  width: 44px;
  position: relative;
  font-size: 0; /* masque le texte label sans le retirer du DOM */
  gap: 0;
}
.sidebar.compact .menu-it .icn { font-size: 14px; padding-top: 0; }
/* [v372] En mode compact on cache le bloc texte (label + description).
   !important nécessaire pour battre le display:flex!important de l'état étendu. */
.sidebar.compact .menu-it .menu-it-text,
.sidebar.compact .menu-it .menu-it-label,
.sidebar.compact .menu-it .menu-it-desc { display: none !important; }
/* [v375] Centrage parfait de l'icône dans la pastille de 44px */
.sidebar.compact .menu-it { height: 44px; }
.sidebar.compact .menu-it .icn { padding-top: 0 !important; }
/* Compteur en pastille flottante en haut-droite de l'icône */
.sidebar.compact .menu-it .count {
  position: absolute;
  top: 2px; right: 2px;
  margin: 0;
  padding: 0 4px;
  min-width: 14px;
  height: 14px;
  line-height: 14px;
  font-size: 9px;
  text-align: center;
}
/* Sections invisibles (juste un séparateur léger) */
.sidebar.compact .menu-section {
  display: block;
  padding: 6px 0 2px;
  font-size: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  width: 36px;
  margin: 4px auto;
  cursor: default;
  pointer-events: none;
}
.sidebar.compact .menu-section-chev,
.sidebar.compact .menu-section-label,
.sidebar.compact .menu-section-count { display: none; }
/* (les anciennes règles .menu-compact-toggle ne sont plus utilisées —
   remplacées par la poignée .sidebar-handle au bord droit) */
/* Transition douce entre les deux modes (desktop seulement) */
@media (min-width: 901px) {
  .sidebar { transition: width .22s ease, padding .22s ease; }
}
.sidebar .menu-section-label { flex: 1; }
/* Badge "N éléments cachés" — visible quand le tiroir est plié.
   Pastille discrète à droite du label, héritant de la couleur du groupe. */
.sidebar .menu-section-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: currentColor;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: none;
}
/* Petit badge de notifs (orange) si le groupe plié a des compteurs > 0 */
.sidebar .menu-section-notif {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  text-align: center;
  background: var(--orange);
  color: white;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 14px;
}

/* Animations du drawer profil (slide-in depuis la droite). */
@keyframes onasFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes onasSlideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.dashboard-main {
  background: var(--bg);
  overflow-y: auto;
}
.db-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px;
  background: white;
  border-bottom: 1px solid var(--line);
}
.db-top h2 { font-size: 18px; font-weight: 800; color: var(--navy-deep); }
.db-top h2 small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); }

.db-content { padding: 20px 24px; }

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 18px;
}
/* [v413] KPI cards plus compactes (taille reduite sur demande user) */
.kpi-card {
  background: white;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.kpi-card .lbl { font-size: 9px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }
.kpi-card .val { font-size: 19px; font-weight: 800; color: var(--navy-deep); margin: 2px 0 1px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-card .delta { font-size: 10px; font-weight: 600; }

/* Chart */
.chart-h {
  display: flex; gap: 6px; align-items: flex-end;
  height: 140px;
  padding: 10px 4px 0;
}
.chart-h .b {
  flex: 1;
  background: linear-gradient(180deg, var(--navy-2), var(--navy));
  border-radius: 6px 6px 0 0;
  position: relative;
  min-height: 8px;
}
.chart-h .b.alt {
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
}

/* Table */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

/* [v430] Masque la scrollbar horizontale des cards de tables.
   Le contenu reste scrollable au trackpad / shift+wheel, mais on ne voit
   plus de barre grise en bas (ascenseur jugé moche par l'utilisateur). */
.card { scrollbar-width: thin; }
.card:has(> table.tbl),
.card:has(table.tbl) {
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* IE/Edge legacy */
}
.card:has(> table.tbl)::-webkit-scrollbar,
.card:has(table.tbl)::-webkit-scrollbar {
  display: none;                /* Chrome/Safari/Edge moderne */
  width: 0;
  height: 0;
}

/* [v430] Tri colonnes : indicateur visible (auparavant fin et flou).
   Couleur orange marquée + taille augmentée pour rester lisible. */
.tbl thead th .onas-sort-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  height: 14px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 900;
  margin-left: 6px;
  padding: 0 3px;
  background: rgba(243, 198, 74,0.10);
  color: rgba(6, 58, 34,0.45);
  transition: background .15s, color .15s, transform .12s;
}
.tbl thead th:hover .onas-sort-arrow {
  background: rgba(243, 198, 74,0.20);
  color: var(--orange);
  transform: scale(1.06);
}
.tbl thead th .onas-sort-arrow.is-active {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 1px 3px rgba(243, 198, 74,0.40);
}
.tbl th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #F7F9FC;
}
.tbl td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
/* [v348] Hover ligne table — fond orangé doux + transition pour bonne lisibilité */
.tbl tbody tr {
  transition: background-color .15s ease, box-shadow .15s ease;
}
.tbl tbody tr:hover td {
  background: rgba(243, 198, 74, 0.06);
}
.tbl tbody tr:hover td:first-child {
  box-shadow: inset 3px 0 0 var(--orange);
}
/* Ligne SÉLECTIONNÉE (drawer ouvert sur cette ligne) — fond orange tenant + bordure gauche */
.tbl tbody tr.is-selected td,
.tbl tbody tr.row-selected td {
  background: rgba(243, 198, 74, 0.12);
  font-weight: 600;
}
.tbl tbody tr.is-selected td:first-child,
.tbl tbody tr.row-selected td:first-child {
  box-shadow: inset 4px 0 0 var(--orange);
}

/* ── Colonnes responsives — disparaissent quand l'écran rétrécit ──
   Stratégie : on masque par paliers les colonnes les moins critiques
   afin que celles qui restent puissent garder leur largeur naturelle. */
@media (max-width: 1500px) {
  .tbl .col-prio-1 { display: none; }   /* Sexe · Âge · Document */
}
@media (max-width: 1280px) {
  .tbl .col-prio-2 { display: none; }   /* Téléphone · Type */
}
@media (max-width: 1100px) {
  .tbl .col-prio-3 { display: none; }   /* Département · Commune */
}
@media (max-width: 920px) {
  .tbl .col-prio-4 { display: none; }   /* Déposé */
}

/* Donut */
.donut-h {
  width: 110px; height: 110px;
  border-radius: 50%;
  background:
    conic-gradient(
      var(--navy) 0 65%,
      var(--orange) 65% 85%,
      var(--green) 85% 100%
    );
  position: relative;
}
.donut-h::after {
  content: "";
  position: absolute;
  inset: 18px;
  background: white;
  border-radius: 50%;
}
.donut-h .center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  z-index: 1;
}

/* Section title */
.sec-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy-deep);
  margin-bottom: 10px;
}
.sec-title small {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  display: block;
  margin-top: 2px;
}

/* misc */
.row-h { display: flex; align-items: center; gap: 10px; }
.col-h { display: flex; flex-direction: column; gap: 10px; }
.between { justify-content: space-between; }
.grow-h { flex: 1; min-width: 0; }
.muted { color: var(--ink-3); }

/* ============================================================
   Admin sidebar — responsive (collapsible sur mobile)
   ============================================================ */
.admin-hamburger {
  /* Hidden on desktop — only appears < 900px */
  display: none;
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 9050;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--navy-deep);
  color: white;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 6px 16px -4px rgba(6, 58, 34,0.4);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.admin-hamburger:hover { background: var(--navy); }
.admin-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 58, 34, 0.55);
  backdrop-filter: blur(2px);
  z-index: 9000;
  animation: hamburger-fade 0.2s ease;
}
@keyframes hamburger-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   ADMIN — FAB IA Gemini (bouton flottant + drawer chat)
   ============================================================ */
/* [v325] Wrapper de la pile de FABs — permet de cacher/afficher TOUS les
   FABs en même temps via l'encoche. Les FABs gardent leur position fixed
   individuelle (le wrapper n'a pas de layout propre). */
.onas-fab-stack {
  display: contents; /* pas de boîte propre, les enfants restent en position:fixed */
}
.onas-fab-stack.is-hidden .ai-fab,
.onas-fab-stack.is-hidden .internal-call-fab,
.onas-fab-stack.is-hidden .quick-notif-fab {
  transform: translateX(calc(100% + 32px)) !important;
  opacity: 0;
  pointer-events: none;
}
.ai-fab, .internal-call-fab, .quick-notif-fab {
  transition: transform .28s cubic-bezier(0.2, 0.9, 0.3, 1),
              opacity .2s ease,
              right 0.28s cubic-bezier(0.2,0.9,0.3,1),
              bottom 0.18s ease,
              box-shadow 0.18s ease !important;
}

/* Encoche pour toggle les FABs — petit handle qui dépasse du bord droit,
   à hauteur du FAB IA (le plus bas). Quand les FABs sont cachés, l'encoche
   reste seule visible pour pouvoir les rappeler. */
.fab-stack-handle {
  position: fixed;
  right: 0;
  bottom: 44px; /* aligné avec le centre vertical du stack de FABs */
  width: 16px;
  height: 32px;
  border: none;
  padding: 0;
  /* [v329] Fond BLEU navy au lieu d'orange (cohérent avec le bouton Appel) */
  background: linear-gradient(135deg, #2C72B7 0%, #0a6c3e 100%);
  color: #fff;
  border-radius: 10px 0 0 10px; /* coins gauche arrondis, droite collée au bord */
  box-shadow: -4px 0 12px -4px rgba(6, 58, 34, 0.35);
  cursor: pointer;
  /* [v329] z-index PLUS HAUT que les drawers pour rester visible et collé
     au bord du drawer (sans être caché par l'ombre du drawer). */
  z-index: 9100;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background .18s ease, transform .18s ease, width .18s ease, right 0.28s cubic-bezier(0.2,0.9,0.3,1);
}
.fab-stack-handle:hover {
  background: linear-gradient(135deg, #4A9EFF 0%, #2C72B7 100%);
  width: 20px;
}
/* Si un drawer est ouvert (admin ou side), décale l'encoche aussi.
   - drawer-open  : drawers admin (admin-drawer-overlay, 480px)
   - has-side-drawer : drawers side (Notif/Appel/Mon compte, ~400px) */
body.drawer-open .fab-stack-handle {
  right: 480px !important;
}
body.has-side-drawer .fab-stack-handle {
  right: 400px !important;
}
/* Si les DEUX types sont ouverts en même temps, additionner. */
body.drawer-open.has-side-drawer .fab-stack-handle {
  right: calc(480px + 400px) !important;
}

/* [v327] Side drawers (Notif, Appel, Mon compte) — quand un admin-drawer
   est ouvert, ils se décalent à gauche pour ne pas se superposer dessus.
   Transition fluide pour l'effet "push". */
.onas-side-drawer {
  transition: right .28s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
}
body.drawer-open .onas-side-drawer {
  right: 480px !important;
}

/* [v319] Pile de FABs flottants en bas-droite : IA · Appel · Notif.
   Tous strictement identiques en taille / forme / position right,
   seuls la couleur de fond et le label changent. */
.ai-fab,
.internal-call-fab,
.quick-notif-fab {
  position: fixed;
  right: 22px;
  z-index: 9020;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 18px;
  height: 44px;
  min-width: 96px;
  color: white;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: 0.3px;
  box-shadow: 0 10px 24px -6px rgba(6, 58, 34, 0.45), 0 3px 8px -2px rgba(0,0,0,0.15);
  transition: transform 0.18s ease, box-shadow 0.18s ease,
              right 0.28s cubic-bezier(0.2,0.9,0.3,1), bottom 0.18s ease;
}
.ai-fab          { bottom:  22px; background: linear-gradient(135deg, #FF8A5C 0%, #f3c64a 60%, #C53A0A 100%); box-shadow: 0 10px 24px -6px rgba(243, 198, 74, 0.55), 0 3px 8px -2px rgba(0,0,0,0.15); }
.internal-call-fab { bottom: 78px; background: linear-gradient(135deg, #2C72B7 0%, #0a6c3e 100%); box-shadow: 0 10px 24px -6px rgba(10, 108, 62, 0.55), 0 3px 8px -2px rgba(0,0,0,0.15); }
.quick-notif-fab { bottom: 134px; background: linear-gradient(135deg, #10B981 0%, #047857 100%); box-shadow: 0 10px 24px -6px rgba(4, 120, 87, 0.55), 0 3px 8px -2px rgba(0,0,0,0.15); }

.ai-fab:hover,
.internal-call-fab:hover,
.quick-notif-fab:hover {
  transform: translateY(-2px) scale(1.03);
}
.ai-fab:active,
.internal-call-fab:active,
.quick-notif-fab:active {
  transform: translateY(0) scale(0.98);
}

.internal-call-fab-label,
.quick-notif-fab-label,
.ai-fab-label { font-weight: 800; }

.internal-call-fab-pulse,
.quick-notif-fab-pulse {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  animation: aiFabPulse 2.6s ease-out infinite;
  pointer-events: none;
}
.internal-call-fab-pulse { border: 2px solid rgba(74, 158, 255, 0.55); }
.quick-notif-fab-pulse   { border: 2px solid rgba(16, 185, 129, 0.55); }

/* Décalage avec drawer (admin OU side) */
body.drawer-open .internal-call-fab,
body.drawer-open .quick-notif-fab,
body.drawer-open .ai-fab {
  right: calc(480px + 22px) !important;
}
body.has-side-drawer .internal-call-fab,
body.has-side-drawer .quick-notif-fab,
body.has-side-drawer .ai-fab {
  right: calc(400px + 22px) !important;
}
body.map-view-active .internal-call-fab,
body.map-view-active .quick-notif-fab {
  right: auto !important;
  left: 22px !important;
}
/* Sur mobile : icône seule */
@media (max-width: 720px) {
  .ai-fab, .internal-call-fab, .quick-notif-fab {
    min-width: 44px; padding: 0; width: 44px;
  }
  .internal-call-fab-label, .quick-notif-fab-label, .ai-fab-label { display: none; }
}

.ai-fab {
  position: fixed;
  bottom: 22px;
  right: 22px;
  z-index: 9020;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px 14px 16px;
  background: linear-gradient(135deg, #FF8A5C 0%, #f3c64a 60%, #C53A0A 100%);
  color: white;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.3px;
  box-shadow: 0 14px 32px -6px rgba(243, 198, 74, 0.55), 0 4px 10px -2px rgba(0,0,0,0.15);
  transition: transform 0.18s ease, box-shadow 0.18s ease, right 0.28s cubic-bezier(0.2,0.9,0.3,1);
}
/* Quand un drawer interne est ouvert, le bouton FAB se décale à gauche
   pour ne pas être recouvert. La largeur des drawers admin = 560px max. */
body.drawer-open .ai-fab {
  right: calc(480px + 22px) !important;
}
/* Si en plus le chat IA est ouvert (drawer + chat), même comportement
   géré globalement : drawer pousse le chat qui pousse le FAB. */
body.drawer-open .desktop.ai-pushed ~ .ai-fab,
body.drawer-open .ai-fab.with-ai {
  right: calc(480px + 22px) !important;
}
/* [v184] FAB IA bascule à GAUCHE quand on est en mode Carte Déclarations.
   Le drawer Déclarations occupe la droite → le FAB doit être à gauche
   pour ne pas le recouvrir. La classe est togglée par DeclarationsPage. */
body.map-view-active .ai-fab {
  right: auto !important;
  left: 22px !important;
}
.ai-fab:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 18px 40px -6px rgba(243, 198, 74, 0.65), 0 6px 14px -2px rgba(0,0,0,0.2);
}
.ai-fab:active { transform: translateY(0) scale(0.98); }
.ai-fab-icon { font-size: 18px; line-height: 1; filter: drop-shadow(0 0 6px rgba(255,255,255,0.4)); }
.ai-fab-label { font-weight: 800; }
.ai-fab-pulse {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(255, 138, 92, 0.6);
  animation: aiFabPulse 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes aiFabPulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  100% { transform: scale(1.35); opacity: 0; }
}

/* [v194] Badge count-up dans les polygones de la carte heatmap.
   Tooltip permanent Leaflet stylé en cercle/pilule avec animation
   d'apparition (scale + fade) + count-up via class .onas-count-up. */
.leaflet-tooltip.onas-poly-count {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: inherit;
}
.leaflet-tooltip.onas-poly-count::before { display: none !important; } /* arrow caché */
.onas-poly-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 6px 10px;
  background: rgba(6, 58, 34, 0.92);
  color: white;
  border-radius: 999px;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.1;
  box-shadow: 0 4px 12px -2px rgba(0,0,0,0.35);
  border: 2px solid white;
  animation: onasPolyBadgeIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) backwards;
  pointer-events: none;
  text-align: center;
}
.onas-poly-badge.urgent { background: #B91C1C; }
.onas-poly-badge.high   { background: #EA580C; }
.onas-poly-badge.med    { background: #D97706; }
.onas-poly-badge.low    { background: #059669; }
.onas-poly-badge.zero   { background: rgba(110, 132, 151, 0.85); }
.onas-poly-badge .nb { font-size: 16px; }
.onas-poly-badge .lbl { font-size: 8px; font-weight: 700; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 1px; }

/* [v211] Tooltip INLINE — TEXTE FLOTTANT 3D BLANC PUR, AUCUN cadre/pilule
   Le polygone sélectionné est en bleu ONAS (cf. .onas-poly-selected) donc
   le texte ressort par contraste. Effet 3D obtenu par stack de text-shadows
   créant une élévation lumineuse (halo + ombre portée + reflet bas). */
.leaflet-tooltip.onas-poly-inline {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  pointer-events: none;
  z-index: 650 !important;
  /* Légère perspective pour le rendu 3D du texte enfant */
  perspective: 600px;
}
.leaflet-tooltip.onas-poly-inline::before { display: none !important; }
/* [v229] Cache les badges polygones quand zoom < 11 pour eviter la superposition */
.onas-map-zoom-low .leaflet-tooltip.onas-poly-inline { display: none !important; }

/* [v235] Mode choroplethe : SUPPRIME tous les contours de polygones
   (style editorial Le Figaro/Le Monde — couleur de fill uniquement) */
.onas-map-choropleth path.leaflet-interactive {
  stroke: transparent !important;
  stroke-width: 0 !important;
  stroke-opacity: 0 !important;
  filter: none !important;
}
/* [v237] Fond du conteneur Leaflet en mode choroplethe : TRANSPARENT
   (au lieu du gris Leaflet par defaut quand polyOnly cache les tiles) */
.onas-map-choropleth .leaflet-container,
.onas-map-choropleth.leaflet-container {
  background: transparent !important;
}
.onas-map-choropleth path.leaflet-interactive.onas-poly-selected {
  stroke: transparent !important;
  stroke-width: 0 !important;
  animation: none !important;
  filter: none !important;
}

/* [v236] Mode choroplethe : badges polygones TRES COMPACTS pour rester
   dans les limites des polygones (style editorial discret) */
.onas-map-choropleth .leaflet-tooltip.onas-poly-inline .onas-poly-badge {
  max-width: 110px !important;
  padding: 0 !important;
  text-align: center;
}
.onas-map-choropleth .leaflet-tooltip.onas-poly-inline .onas-poly-badge .lbl {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 0.4px !important;
  margin-top: 0 !important;
  line-height: 1.1 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.onas-map-choropleth .leaflet-tooltip.onas-poly-inline .onas-poly-badge .nb {
  font-size: 18px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.5px !important;
  margin-top: 1px !important;
}
.onas-map-choropleth .leaflet-tooltip.onas-poly-inline .onas-poly-badge .nb .suf {
  font-size: 8px !important;
  font-weight: 700 !important;
  margin-left: 2px;
}
/* Sous-textes (top types, date, urgent) caches en mode choroplethe */
.onas-map-choropleth .leaflet-tooltip.onas-poly-inline .onas-poly-badge .sub,
.onas-map-choropleth .leaflet-tooltip.onas-poly-inline .onas-poly-badge .sub.urgent,
.onas-map-choropleth .leaflet-tooltip.onas-poly-inline .onas-poly-badge .sub.date {
  display: none !important;
}
.leaflet-tooltip.onas-poly-inline .onas-poly-badge {
  /* [v214] AUCUN cadre, AUCUN clignotement — texte purement statique 3D
     flotte sur le polygone. Pas d'animation continue (ni float, ni radar). */
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  text-align: center;
  position: relative;
  transform: translateZ(20px);
  transform-style: preserve-3d;
}
.leaflet-tooltip.onas-poly-inline .onas-poly-badge::before,
.leaflet-tooltip.onas-poly-inline .onas-poly-badge::after {
  display: none !important;
}
.leaflet-tooltip.onas-poly-inline .onas-poly-badge .lbl,
.leaflet-tooltip.onas-poly-inline .onas-poly-badge .nb,
.leaflet-tooltip.onas-poly-inline .onas-poly-badge .nb .suf,
.leaflet-tooltip.onas-poly-inline .onas-poly-badge .sub,
.leaflet-tooltip.onas-poly-inline .onas-poly-badge .sub.urgent,
.leaflet-tooltip.onas-poly-inline .onas-poly-badge .sub.date {
  /* [v224] Texte NOIR sans ombre */
  color: #000000 !important;
  text-shadow: none !important;
}
.leaflet-tooltip.onas-poly-inline .onas-poly-badge .nb {
  font-size: 42px !important;
  font-weight: 900 !important;
  line-height: 0.95 !important;
  letter-spacing: -1px;
  color: #000000 !important;
  text-shadow: none !important;
}
.leaflet-tooltip.onas-poly-inline .onas-poly-badge .nb .suf {
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-left: 4px;
  opacity: 0.95;
  vertical-align: top;
}
.leaflet-tooltip.onas-poly-inline .onas-poly-badge .lbl {
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-top: 6px;
  opacity: 1;
}
.leaflet-tooltip.onas-poly-inline .onas-poly-badge .sub {
  font-size: 12px !important;
  font-weight: 800 !important;
  margin-top: 4px;
  opacity: 0.96;
}
.leaflet-tooltip.onas-poly-inline .onas-poly-badge .sub.urgent {
  font-weight: 900 !important;
  color: #B91C1C !important;
  text-shadow: none !important;
}
.leaflet-tooltip.onas-poly-inline .onas-poly-badge .sub.date {
  font-size: 11px !important;
  opacity: 0.88;
}
/* Animation flottement 3D du bloc texte (haut/bas léger + tilt subtil) */
@keyframes onasFloat3d {
  0%, 100% {
    transform: perspective(600px) translateZ(20px) translateY(0) rotateX(0deg);
  }
  50% {
    transform: perspective(600px) translateZ(28px) translateY(-3px) rotateX(2deg);
  }
}
/* Effet AI typewriter : chaque enfant fade-in en cascade comme tapé */
.leaflet-tooltip.onas-poly-typewriter .onas-poly-badge > * {
  opacity: 0;
  transform: translateY(4px);
  animation: onasAiReveal 0.5s ease-out forwards;
}
.leaflet-tooltip.onas-poly-typewriter .onas-poly-badge > *:nth-child(1) { animation-delay: 0.05s; }
.leaflet-tooltip.onas-poly-typewriter .onas-poly-badge > *:nth-child(2) { animation-delay: 0.35s; }
.leaflet-tooltip.onas-poly-typewriter .onas-poly-badge > *:nth-child(3) { animation-delay: 0.65s; }
.leaflet-tooltip.onas-poly-typewriter .onas-poly-badge > *:nth-child(4) { animation-delay: 0.95s; }
.leaflet-tooltip.onas-poly-typewriter .onas-poly-badge > *:nth-child(5) { animation-delay: 1.25s; }
@keyframes onasAiReveal {
  0%   { opacity: 0; transform: translateY(4px); filter: blur(4px); }
  60%  { opacity: 0.6; filter: blur(1px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
/* [v214] Curseur typewriter retiré — plus aucun clignotement sur l'info polygone */
.leaflet-tooltip.onas-poly-typewriter .onas-count-up::after { display: none !important; }

/* [v218] Spider legs (lignes leaflet.markercluster reliant cluster -> markers)
   sont masquees totalement via SVG attributes + display none au cas ou. */
.leaflet-cluster-spider-leg,
path.leaflet-cluster-spider-leg {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  stroke: transparent !important;
  stroke-width: 0 !important;
}

/* [v220] Reticule de ciblage SVG — l'animation CSS doit etre sur l'ENFANT
   (.onas-reticle-inner) PAS sur le wrapper Leaflet (.onas-target-reticle),
   sinon le `transform: translate3d(...)` de Leaflet est ecrase et le
   reticule apparait au coin haut-gauche au lieu du centre du cluster. */
.onas-target-reticle {
  background: transparent !important;
  border: none !important;
  pointer-events: none !important;
}
.onas-target-reticle .onas-reticle-inner {
  width: 260px;
  height: 260px;
  position: relative;
  transform-origin: 130px 130px;
  animation: onasReticleIn 0.5s ease-out forwards;
}
.onas-target-reticle svg {
  filter: drop-shadow(0 0 6px rgba(249, 115, 22, 0.5));
}
.onas-target-reticle .onas-reticle-rings {
  transform-origin: 130px 130px;
  animation: onasReticleSpin 28s linear infinite;
}
@keyframes onasReticleIn {
  0%   { opacity: 0; transform: scale(0.55); }
  60%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes onasReticleSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* [v216] Cluster markers — bulle ronde ONAS avec ANNEAU EXTERNE coloré +
   compteur centré. 6 paliers vibrants : vert→jaune→orange→rouge→bordeaux.
   L'anneau (halo extérieur via box-shadow multi-couches) crée le "cercle"
   qui entoure visuellement la bulle. */
.onas-cluster-icon {
  background: transparent !important;
  border: none !important;
  overflow: visible !important;
}
.onas-cluster-bubble {
  background: var(--bg, #16A34A) !important;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  border: 3px solid rgba(255, 255, 255, 0.95);
  /* ANNEAU EXTERNE coloré (double halo) — c'est le "cercle" autour de la bulle */
  box-shadow:
    0 0 0 4px var(--ring, rgba(22, 163, 74, 0.35)),
    0 0 0 6px rgba(255, 255, 255, 0.7),
    0 0 0 9px var(--ring, rgba(22, 163, 74, 0.18)),
    0 4px 16px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  cursor: pointer;
  position: relative;
}
.onas-cluster-bubble:hover {
  transform: scale(1.10);
  box-shadow:
    0 0 0 5px var(--ring, rgba(22, 163, 74, 0.55)),
    0 0 0 8px rgba(255, 255, 255, 0.85),
    0 0 0 12px var(--ring, rgba(22, 163, 74, 0.25)),
    0 8px 24px rgba(0, 0, 0, 0.5);
}
.onas-cluster-bubble .cnt {
  font-size: 14px;
  line-height: 1;
  letter-spacing: -0.4px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5),
               0 2px 4px rgba(0, 0, 0, 0.3);
  color: white;
}
/* Paliers : le compteur grandit avec la taille de la bulle */
.onas-cluster-bubble.t-lo .cnt    { font-size: 13px; }
.onas-cluster-bubble.t-low .cnt   { font-size: 14px; }
.onas-cluster-bubble.t-med .cnt   { font-size: 15px; }
.onas-cluster-bubble.t-high .cnt  { font-size: 16px; }
.onas-cluster-bubble.t-vhigh .cnt { font-size: 18px; }
.onas-cluster-bubble.t-crit .cnt  { font-size: 20px; }

/* Override defaults markercluster (sinon double bg/border) */
.marker-cluster,
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
  background: transparent !important;
  border: none !important;
}
.marker-cluster > div:not(.onas-cluster-bubble),
.marker-cluster-small > div:not(.onas-cluster-bubble),
.marker-cluster-medium > div:not(.onas-cluster-bubble),
.marker-cluster-large > div:not(.onas-cluster-bubble) {
  background: transparent !important;
  border: none !important;
}
.marker-cluster > span,
.marker-cluster-small > span,
.marker-cluster-medium > span,
.marker-cluster-large > span {
  display: none !important;
}

/* [v208] Animations modal Poly3D detach */
@keyframes onasModalFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes onasPoly3dIn {
  0%   { opacity: 0; transform: perspective(1400px) rotateX(45deg) rotateY(-25deg) scale(0.5) translateY(80px); }
  100% { opacity: 1; transform: perspective(1400px) rotateX(18deg) rotateY(-12deg) scale(1) translateY(0); }
}

/* [v224] Polygone SÉLECTIONNÉ — FOND BLEU CLAIR ONAS plus TRANSPARENT pour
   laisser voir la carte dessous (markers, rues, etc.). */
path.leaflet-interactive.onas-poly-selected {
  stroke: #3B82F6 !important;
  stroke-width: 3.5 !important;
  stroke-opacity: 1 !important;
  fill: #60A5FA !important;
  fill-opacity: 0.25 !important;
  stroke-dasharray: 22 14 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  animation: onasPolyMarch 1.6s linear infinite,
             onasFillPulse 2.8s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(59, 130, 246, 0.5));
  pointer-events: auto;
}
/* "Marching ants" infinies — le pointillé défile le long du contour */
@keyframes onasPolyMarch {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -72; }
}
/* Pulsation douce du remplissage bleu clair (respiration) */
@keyframes onasFillPulse {
  0%, 100% { fill-opacity: 0.45 !important; }
  50%      { fill-opacity: 0.62 !important; }
}

/* [v203] Popup FOCUSED (ouvert via clic sur card) — bleu ONAS + texte blanc */
.leaflet-popup.onas-popup-focused .leaflet-popup-content-wrapper {
  background: #063a22 !important;
  color: white !important;
  border-color: #063a22 !important;
  box-shadow: 0 12px 36px -8px rgba(6, 58, 34, 0.55),
              0 0 0 2px rgba(6, 58, 34, 0.20) !important;
}
.leaflet-popup.onas-popup-focused .leaflet-popup-content,
.leaflet-popup.onas-popup-focused .leaflet-popup-content * {
  color: white !important;
}
.leaflet-popup.onas-popup-focused .leaflet-popup-content small {
  color: rgba(255,255,255,0.75) !important;
}
.leaflet-popup.onas-popup-focused .leaflet-popup-content strong {
  color: white !important;
}
.leaflet-popup.onas-popup-focused .leaflet-popup-close-button {
  background: rgba(255,255,255,0.18) !important;
  color: white !important;
}
.leaflet-popup.onas-popup-focused .leaflet-popup-close-button:hover {
  background: rgba(220, 38, 38, 0.7) !important;
}

/* [v202] Marker focused — bring to front avec animation pulse + scale + glow.
   Activé via .onas-marker-focused sur le wrapper Leaflet marker icon. */
.leaflet-marker-icon.onas-marker-focused {
  z-index: 1000 !important;
  animation: onasMarkerPulse 1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(6, 58, 34, 0.85))
          drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
  transform-origin: center bottom;
}
@keyframes onasMarkerPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}
/* Halo derrière le marker focused (effet radar) */
.leaflet-marker-icon.onas-marker-focused::before {
  content: '';
  position: absolute;
  left: 50%; top: 70%;
  width: 36px; height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  background: rgba(6, 58, 34, 0.18);
  animation: onasMarkerHalo 1.6s ease-out infinite;
  z-index: -1;
  pointer-events: none;
}
@keyframes onasMarkerHalo {
  0%   { transform: scale(0.6); opacity: 0.9; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* [v199] Restyle Leaflet popup global : style HUD glassmorphism, plus moderne */
.leaflet-popup .leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-radius: 10px !important;
  border: 1px solid rgba(6, 58, 34, 0.10);
  box-shadow: 0 8px 32px -8px rgba(6, 58, 34, 0.25),
              0 2px 6px -2px rgba(6, 58, 34, 0.08) !important;
  padding: 2px;
  color: #063a22;
  font-family: 'Inter', -apple-system, sans-serif;
}
.leaflet-popup .leaflet-popup-content {
  margin: 12px 14px !important;
  font-size: 12px;
  line-height: 1.4;
  min-width: 180px;
}
.leaflet-popup .leaflet-popup-tip-container { display: none; }
.leaflet-popup .leaflet-popup-close-button {
  top: 6px !important; right: 8px !important;
  color: #6E8497 !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  background: rgba(6, 58, 34, 0.04) !important;
  border-radius: 4px !important;
  width: 18px; height: 18px;
  line-height: 16px !important;
  text-align: center;
  transition: background 0.15s;
}
.leaflet-popup .leaflet-popup-close-button:hover {
  background: rgba(220, 38, 38, 0.12) !important;
  color: #DC2626 !important;
}
/* Anim entrée popup */
.leaflet-popup { animation: onasPopupIn 0.22s cubic-bezier(0.34, 1.2, 0.64, 1); }
@keyframes onasPopupIn {
  0%   { opacity: 0; transform: translateY(6px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* [v199] Bulle qui apparaît à la DEMANDE (hover) — fade rapide, pas de bounce */
.leaflet-tooltip.onas-poly-count {
  animation: onasTooltipIn 0.18s ease-out;
}
@keyframes onasTooltipIn {
  0%   { opacity: 0; transform: translateY(4px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.leaflet-tooltip.onas-poly-count.leaflet-tooltip-top::before {
  border-top-color: rgba(6, 58, 34, 0.18) !important;
}
/* Override : pas d'animation bouncing sur le badge interne quand affiché en tooltip on-demand */
.leaflet-tooltip.onas-poly-count .onas-poly-badge { animation: none !important; }

/* [v197] Variante .rich — design futur/tech discret :
   - Glassmorphism (backdrop-filter blur + translucide)
   - Bordure 1px très fine, accent bar latéral (LED style)
   - Monospace pour les chiffres
   - Pas de drop shadow visible (juste un halo léger pour profondeur)
   - Texte sombre sur fond clair semi-transparent (style HUD scientifique) */
.onas-poly-badge.rich {
  padding: 6px 10px 6px 14px;
  border-radius: 6px;
  min-width: 96px;
  max-width: 200px;
  text-align: left;
  align-items: stretch;
  gap: 1px;
  background: rgba(255, 255, 255, 0.86);
  color: #063a22;
  border: 1px solid rgba(6, 58, 34, 0.12);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  box-shadow: 0 1px 4px rgba(6, 58, 34, 0.06);
  position: relative;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
}
/* Accent bar latéral (LED) — couleur selon densité */
.onas-poly-badge.rich::before {
  content: '';
  position: absolute;
  left: 4px; top: 6px; bottom: 6px;
  width: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: 0.65;
  box-shadow: 0 0 4px currentColor;
}
.onas-poly-badge.rich.zero    { color: #94A3B8; }
.onas-poly-badge.rich.low     { color: #059669; }
.onas-poly-badge.rich.med     { color: #D97706; }
.onas-poly-badge.rich.high    { color: #EA580C; }
.onas-poly-badge.rich.urgent  { color: #DC2626; }
/* On force le fond restant blanc translucide pour TOUTES les variantes */
.onas-poly-badge.rich.zero,
.onas-poly-badge.rich.low,
.onas-poly-badge.rich.med,
.onas-poly-badge.rich.high,
.onas-poly-badge.rich.urgent {
  background: rgba(255, 255, 255, 0.86);
}
.onas-poly-badge.rich .lbl {
  font-size: 9px;
  font-weight: 700;
  opacity: 1;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border: none;
  padding: 0;
  margin: 0 0 1px;
  color: #6E8497;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  text-align: left;
}
.onas-poly-badge.rich .nb {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: baseline;
  gap: 4px;
  justify-content: flex-start;
  margin: 0;
  color: inherit;
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}
.onas-poly-badge.rich .nb .suf {
  font-size: 8px;
  font-weight: 600;
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6E8497;
}
.onas-poly-badge.rich .sub {
  font-size: 8px;
  font-weight: 500;
  opacity: 0.75;
  line-height: 1.3;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #475569;
  margin-top: 1px;
}
.onas-poly-badge.rich .sub.urgent {
  color: #DC2626;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.onas-poly-badge.rich .sub.date {
  font-size: 8px;
  opacity: 0.55;
  letter-spacing: 0.3px;
}
.onas-poly-badge.rich.zero { opacity: 0.55; }
.onas-poly-badge.rich.zero .sub { display: none; }
.onas-poly-badge.rich.zero .nb .suf { display: none; }
.onas-poly-badge.rich.zero .nb { font-size: 14px; }
@keyframes onasPolyBadgeIn {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}

/* === AI Chat — drawer latéral qui pousse le contenu === */
/* Le wrapper .desktop devient flex avec une zone réservée à droite quand
   .ai-pushed est actif. Le dashboard-main rétrécit, la sidebar reste fixed. */
.desktop.ai-pushed .desktop-body { padding-right: 420px; }
.desktop.ai-pushed .admin-footer { padding-right: 28px; max-width: calc(100% - 420px); box-sizing: border-box; }
/* Quand le chat IA est ouvert, tout drawer interne (admin-drawer) est aussi
   décalé à gauche du chat — il se loge entre le contenu et le chat. */
.desktop.ai-pushed ~ .admin-drawer-overlay,
.desktop.ai-pushed .admin-drawer-overlay {
  right: 420px !important;
  transition: right 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.admin-drawer-overlay { transition: right 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); }

/* ============================================================
   TIMELINE D'UNE DEMANDE — style activity log (Afif Bimantara)
   Ligne verticale avec étapes : créée → cotée → acceptée → enroute
   → sur site → terminée. Chaque étape a un état done/active/upcoming/
   skipped/cancelled. Visuellement épurée avec ronds + couleurs ONAS.
   ============================================================ */
.onas-timeline {
  position: relative;
  padding: 8px 0 4px;
}
.onas-timeline-date-pill {
  margin-bottom: 14px;
  margin-left: 76px;
  animation: onas-timeline-fade-in 0.4s ease-out both;
}
.onas-timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 56px 28px 1fr;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  /* Animation d'entrée séquentielle (delay défini inline par index) */
  opacity: 0;
  transform: translateX(-12px);
  animation: onas-timeline-step-in 0.42s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes onas-timeline-step-in {
  0%   { opacity: 0; transform: translateX(-12px); }
  100% { opacity: 1; transform: translateX(0);     }
}
@keyframes onas-timeline-fade-in {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0);    }
}
/* Ligne verticale entre les étapes — centrée sur le marker (28px / 2 = 14px)
   Calcul : col1 (56px) + gap (12px) + marker centre (14px) - line width/2 (1px) = 81px */
.onas-timeline-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 81px;
  top: 36px;
  bottom: -8px;
  width: 2px;
  background: var(--line);
  border-radius: 2px;
  transition: background 0.4s;
}
.onas-timeline-step.state-done:not(:last-child)::before {
  background: linear-gradient(to bottom,
    rgba(46, 184, 114, 0.55) 0%,
    rgba(46, 184, 114, 0.35) 100%);
}
.onas-timeline-step.state-active:not(:last-child)::before {
  background: linear-gradient(to bottom,
    rgba(243, 198, 74, 0.55) 0%,
    var(--line) 100%);
}
.onas-timeline-time {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3);
  padding-top: 8px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
}
.onas-timeline-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
  flex-shrink: 0;
  z-index: 1;
  position: relative;
  transition: all 0.25s ease;
  font-size: 11px;
  font-weight: 800;
  font-family: 'JetBrains Mono', 'Consolas', monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
}
.onas-timeline-num {
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}
.onas-timeline-num.dim {
  opacity: 0.5;
}
.onas-timeline-check {
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
}
/* Étape DONE : check blanc sur fond couleur, glow doux */
.onas-timeline-step.state-done .onas-timeline-marker {
  box-shadow: 0 2px 6px -2px rgba(46, 184, 114, 0.4),
              0 0 0 0 rgba(46, 184, 114, 0);
}
/* Étape ACTIVE : halo orange pulsant + cercle blanc avec numéro orange */
.onas-timeline-step.state-active .onas-timeline-marker {
  box-shadow:
    0 0 0 6px rgba(243, 198, 74, 0.18),
    0 0 14px 2px rgba(243, 198, 74, 0.35);
  animation: onas-timeline-pulse 1.8s ease-in-out infinite;
}
@keyframes onas-timeline-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 6px rgba(243, 198, 74, 0.18),
      0 0 14px 2px rgba(243, 198, 74, 0.35);
  }
  50% {
    box-shadow:
      0 0 0 9px rgba(243, 198, 74, 0.06),
      0 0 22px 4px rgba(243, 198, 74, 0.18);
  }
}
.onas-timeline-content {
  padding: 4px 0 6px 0;
  min-width: 0;
}
.onas-timeline-event {
  font-size: 12px;
  line-height: 1.4;
}
.onas-timeline-event strong {
  font-weight: 700;
}
.onas-timeline-desc {
  font-size: 11px;
  margin-top: 3px;
  line-height: 1.4;
}
/* [v113] Étapes à VENIR — restent visibles (pas dim) avec un look "pointillé"
   pour indiquer qu'elles ne sont pas encore traitées. Avant : opacity 0.55
   les rendait quasi invisibles, les agents ne voyaient pas la suite du parcours. */
.onas-timeline-step.state-upcoming {
  opacity: 0.85;
}
.onas-timeline-step.state-upcoming .onas-timeline-marker {
  background: white;
  border-style: dashed !important;
  border-color: var(--ink-3) !important;
  color: var(--ink-3);
}
.onas-timeline-step.state-upcoming .onas-timeline-time,
.onas-timeline-step.state-upcoming .onas-timeline-event strong,
.onas-timeline-step.state-upcoming .onas-timeline-desc {
  color: var(--ink-3) !important;
  font-style: italic;
}
/* La ligne entre upcoming steps : pointillés gris (au lieu de gradient plein) */
.onas-timeline-step.state-upcoming:not(:last-child)::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--ink-3) 0px, var(--ink-3) 3px,
    transparent 3px, transparent 7px
  ) !important;
  opacity: 0.4;
}
.onas-timeline-step.state-skipped {
  opacity: 0.4;
}
.onas-timeline-step.state-cancelled .onas-timeline-marker {
  box-shadow: 0 0 0 3px rgba(217, 67, 76, 0.18);
}
/* Badge "En cours" qui apparaît avec animation */
.onas-timeline-live {
  animation: onas-timeline-live-in 0.3s cubic-bezier(0.2, 0.9, 0.3, 1) both;
  animation-delay: 600ms;
}
@keyframes onas-timeline-live-in {
  0%   { opacity: 0; transform: translateY(-2px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ============================================================
   CARTOGRAPHIE — REDESIGN STYLE LAMAR (panneau droite empilé)
   Header flottant en haut-gauche reste minimal. Panneau de droite
   composé de cartes blanches empilées : recherche, calques,
   types de prestation, liste missions. Couleurs ONAS (orange + navy).
   ============================================================ */
.onas-map-header {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(6, 58, 34, 0.06);
  box-shadow: 0 6px 24px -8px rgba(6, 58, 34, 0.18);
  border-radius: 14px;
  max-width: 380px;
  /* [v326] Draggable partout sur la carte */
  cursor: grab;
  user-select: none;
  transition: box-shadow .2s ease;
}
.onas-map-header:active { cursor: grabbing; }
.onas-map-header:hover { box-shadow: 0 10px 32px -8px rgba(6, 58, 34, 0.28); }
.onas-map-header h2 small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  margin-top: 2px;
  letter-spacing: 0;
}

.onas-map-panel {
  padding: 12px !important;
  background: rgba(245, 247, 250, 0.5) !important;
  display: flex; flex-direction: column;
  gap: 10px;
}
.onas-map-section { display: flex; flex-direction: column; }
.onas-map-card {
  background: white;
  border-radius: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(6, 58, 34, 0.06);
  box-shadow: 0 2px 8px -4px rgba(6, 58, 34, 0.08);
}
.onas-map-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(6, 58, 34, 0.06);
}
.onas-map-section-icon {
  /* v113 — icônes monochrome SVG (Feather) au lieu d'emojis avec fond.
     Plus aucun cadre coloré : juste le tracé navy sur fond transparent. */
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  color: var(--navy-deep);
  background: transparent;
  border: none;
}
.onas-map-section-icon svg { width: 18px; height: 18px; display: block; }
.onas-map-section-title {
  flex: 1;
  font-size: 12px;
  font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: 0.2px;
}
.onas-map-section-reset {
  background: transparent;
  border: 1px solid rgba(243, 198, 74, 0.3);
  color: var(--orange);
  border-radius: 999px;
  width: 22px; height: 22px;
  font-size: 12px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.onas-map-section-reset:hover { background: var(--orange); color: white; }

.onas-map-search {
  background: white !important;
  border: 1px solid rgba(6, 58, 34, 0.1) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  box-shadow: 0 2px 8px -4px rgba(6, 58, 34, 0.08);
}
.onas-map-search input {
  border: none; outline: none;
  font-size: 13px; font-family: inherit;
  flex: 1;
  background: transparent;
}
.onas-map-clear {
  background: none; border: none;
  cursor: pointer; color: var(--ink-3);
  padding: 2px;
  display: flex; align-items: center;
}

/* === 2-COLUMN GRID — Calques affichés et Types de prestation ===
   Permet d'afficher 2 toggles côte-à-côte pour gagner de la place verticale.
   Les sous-headers (.onas-map-check-subhead) prennent toute la largeur. */
.onas-map-checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 6px;
  align-items: stretch;
}
.onas-map-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s;
  min-width: 0;
}
.onas-map-check:hover { background: rgba(6, 58, 34, 0.03); }
.onas-map-check input[type="checkbox"] {
  width: 15px; height: 15px;
  accent-color: var(--orange);
  cursor: pointer;
  flex-shrink: 0;
}
.onas-map-check-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.onas-map-check-label {
  flex: 1;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.onas-map-check-count {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 999px;
  min-width: 20px;
  text-align: center;
  flex-shrink: 0;
}
/* Sub-header (séparateur "Infrastructure réseau" / "Surveillance & risque")
   doit occuper les 2 colonnes du grid */
.onas-map-checklist > div:not(.onas-map-check) {
  grid-column: 1 / -1;
}
/* Repli en 1 colonne sur écrans étroits */
@media (max-width: 1100px) {
  .onas-map-checklist { grid-template-columns: 1fr; }
}

/* Liste de missions dans la dernière section (scrollable) */
.onas-map-missions {
  flex: 1; min-height: 0;
  overflow: hidden;
  display: flex; flex-direction: column;
}
/* === 2-COLUMN GRID — missions empilées en grille compacte ===
   Chaque card est plus compacte (avatar + nom au-dessus, métadonnées en bas).
   Sur écran étroit (< 1024px ou panel < 380px), retombe sur 1 colonne. */
.onas-map-missions .map-side-drawer-list {
  flex: 1; min-height: 0;
  overflow-y: auto;
  /* Padding latéral interne pour éviter que les cards collent au bord
     du panneau et soient tronquées sur écrans étroits/zoomés. */
  margin: 0;
  padding: 4px 6px 12px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* Hauteur AUTO : chaque rangée s'adapte au contenu pour éviter tout
     débordement quel que soit l'écran. Les cards d'une même rangée
     restent alignées via align-self: stretch. */
  grid-auto-rows: minmax(120px, auto);
  /* Plus d'espace entre cards : 10px vertical, 8px horizontal — donne
     de la respiration et empêche l'effet "tassé" sur grands écrans. */
  gap: 10px 8px;
  align-content: start;
}
.onas-map-missions .map-side-item {
  background: rgba(245, 247, 250, 0.6);
  border: 1px solid rgba(6, 58, 34, 0.05);
  border-radius: 12px;
  /* Padding interne plus généreux : laisse le contenu respirer et
     ne touche jamais le bord, peu importe la taille de la card. */
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  /* La card s'étire pour matcher la hauteur de sa rangée (row height
     = max content). align-self: stretch + box-sizing: border-box évite
     toute superposition entre rangées. */
  min-width: 0;
  align-self: stretch;
  box-sizing: border-box;
  /* Empêche le contenu de déborder horizontalement : si le grid
     s'écrase sur un petit écran, la card reste contenue. */
  overflow: hidden;
}
.onas-map-missions .map-side-item:hover {
  background: white;
  border-color: var(--orange);
  /* Pas de translateY — empêche la card de chevaucher la voisine. */
  box-shadow: 0 2px 8px -4px rgba(243, 198, 74, 0.25);
}
.onas-map-missions .map-side-item.sel {
  background: rgba(243, 198, 74, 0.06);
  border-color: var(--orange);
  border-width: 2px;
  padding: 11px 13px; /* compense le border-width 2px → bbox identique */
}
/* Compactage du contenu interne pour 2 colonnes :
   - avatar plus petit, badge plus petit, nom tronqué proprement
   - sous-ligne adresse en 1 ligne avec ellipsis
   - footer ID/plaque/vol passe en wrap si nécessaire */
.onas-map-missions .map-side-item .avatar.sm {
  width: 28px; height: 28px;
  font-size: 10px;
}
.onas-map-missions .map-side-item .badge {
  padding: 2px 6px;
  font-size: 9px !important;
}
.onas-map-missions .map-side-item > .row-h:first-child > div:nth-child(2) > div:first-child {
  font-size: 11px !important;
}
.onas-map-missions .map-side-item > .row-h:first-child > div:nth-child(2) > div:nth-child(2) {
  font-size: 10px !important;
}
.onas-map-missions .map-side-item > div:nth-child(2) {
  font-size: 10px !important;
  margin-top: 6px !important;
  padding-top: 6px !important;
  /* Adresse limitée à 2 lignes max — au-delà, ellipsis. Avec
     grid-auto-rows: minmax(120px, auto), la card peut grandir si besoin
     mais la limite ellipsis évite un débordement infini. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.35;
  word-break: break-word;
}
.onas-map-missions .map-side-item > .row-h:last-child {
  font-size: 9px !important;
  margin-top: 6px !important;
  flex-wrap: wrap;
  gap: 4px 6px !important;
  /* Footer (ID/plate/vol) ne doit pas pousser la card au-delà de sa
     ligne — line-height contraint + min-width:0 sur enfants. */
  line-height: 1.3;
  min-width: 0;
}
.onas-map-missions .map-side-item > .row-h:last-child > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* === Repli responsive — préserve les marges sur tous les écrans === */
@media (max-width: 1280px) {
  .onas-map-missions .map-side-drawer-list {
    gap: 8px 6px;
  }
  .onas-map-missions .map-side-item {
    padding: 10px 12px;
  }
  .onas-map-missions .map-side-item.sel {
    padding: 9px 11px;
  }
}
@media (max-width: 1100px) {
  .onas-map-missions .map-side-drawer-list {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 4px 8px 12px;
  }
}

/* ====== HUD MILITAIRE — Précision tactique sur la cartographie ======
   Overlay non-interactif positionné en bas-droite de la carte. Affiche
   les coordonnées du curseur (DMS + décimales), le niveau de zoom, et
   les compteurs missions/markers. Style sombre semi-transparent avec
   police monospace pour ressembler à un radar tactique militaire.

   Le HUD écoute l'événement 'onas-map-cursor' dispatché depuis le
   composant <ONASMap /> (mousemove + zoomend + moveend). */
.onas-map-hud {
  position: absolute;
  /* Repositionné en bas-droite, plus loin de la scale bar Leaflet et de
     l'attribution. Compact (180px) pour ne pas chevaucher le panneau. */
  right: 14px;
  bottom: 50px; /* > 38px → s'éloigne de la scale bar + Leaflet attrib */
  z-index: 540; /* au-dessus des tiles, sous les popups (700) */
  background: rgba(7, 24, 45, 0.92);
  color: #d8eaff;
  border: 1px solid rgba(243, 198, 74, 0.45);
  border-radius: 8px;
  padding: 7px 9px;
  font-family: 'JetBrains Mono', 'Consolas', 'Monaco', monospace;
  font-size: 9.5px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  pointer-events: none;
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.5),
              inset 0 0 0 1px rgba(243, 198, 74, 0.12);
  min-width: 180px;
  max-width: 220px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  user-select: none;
}
/* Cacher le HUD si le viewport est trop étroit (collision avec le panneau droit) */
@media (max-width: 1100px) {
  .onas-map-hud { display: none; }
}
.onas-map-hud-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.onas-map-hud-label {
  color: #ff8a5c;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.onas-map-hud-val {
  color: #fff;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.onas-map-hud-stats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(243, 198, 74, 0.35);
}
.onas-map-hud-stat {
  color: #a8c4e8;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.onas-map-hud-stat b {
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ====== CROSSHAIR — Réticule de visée tactique ======
   Lignes orange fines centrées sur la carte avec un petit cercle au
   milieu. Non-interactif, purement décoratif/repère visuel.
   Inspiré des HUD de drone / FPV. */
.onas-map-crosshair {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 530;
  display: flex;
  align-items: center;
  justify-content: center;
}
.onas-map-crosshair-h,
.onas-map-crosshair-v {
  position: absolute;
  background: rgba(243, 198, 74, 0.55);
  box-shadow: 0 0 4px rgba(243, 198, 74, 0.4);
}
.onas-map-crosshair-h {
  top: 50%;
  left: calc(50% - 22px);
  width: 14px;
  height: 1px;
  transform: translateY(-50%);
  box-shadow: 22px 0 0 rgba(243, 198, 74, 0.55),
              0 0 4px rgba(243, 198, 74, 0.4);
}
.onas-map-crosshair-v {
  left: 50%;
  top: calc(50% - 22px);
  width: 1px;
  height: 14px;
  transform: translateX(-50%);
  box-shadow: 0 22px 0 rgba(243, 198, 74, 0.55),
              0 0 4px rgba(243, 198, 74, 0.4);
}
.onas-map-crosshair-circle {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(243, 198, 74, 0.55);
  border-radius: 50%;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 6px rgba(243, 198, 74, 0.25),
              inset 0 0 4px rgba(243, 198, 74, 0.18);
}
.onas-map-crosshair-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  background: rgba(243, 198, 74, 0.85);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

/* ====== JAUGE DE CHARGEMENT GLOBALE (top progress bar) ======
   Bandeau dégradé orange/navy de 3px qui glisse en haut de la page
   pendant que les fetches API sont en cours. Camouflage UX du temps
   d'attente. Activé automatiquement via window.__onasProgress.start()
   et stoppé via .stop() quand toutes les requêtes sont finies.
   Visible aussi pendant la transition de page (page change).
*/
.onas-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 9999;
  background: transparent;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
.onas-progress-bar.active { opacity: 1; }
.onas-progress-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--orange) 30%,
    var(--orange) 50%,
    var(--navy-deep) 80%,
    transparent 100%);
  border-radius: 0 2px 2px 0;
  animation: onas-progress-slide 1.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes onas-progress-slide {
  0%   { left: -35%; width: 35%; }
  50%  { left: 30%;  width: 45%; }
  100% { left: 100%; width: 30%; }
}
/* Mode déterminé : largeur en % via style inline */
.onas-progress-bar.determinate::before { animation: none; }

/* ====== SKELETON LOADER pour cartes (KPIs, listes) ======
   Affichage doux pendant que la page récupère ses données. */
.onas-skeleton {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.04) 0%,
    rgba(0,0,0,0.08) 50%,
    rgba(0,0,0,0.04) 100%);
  background-size: 200% 100%;
  animation: onas-skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 8px;
  color: transparent !important;
}
@keyframes onas-skeleton-shimmer {
  0%   { background-position: 200% 50%; }
  100% { background-position: -200% 50%; }
}

/* ====== AdminTeamDrawer — messages d'erreur inline par champ ======
   Apparaît directement sous le champ en faute quand validateForm() trouve
   une erreur. Animation discrète pour attirer l'œil sans être agressif. */
.drawer-field-err {
  margin-top: 4px;
  padding: 4px 8px;
  background: rgba(220,38,38,0.08);
  border-left: 3px solid var(--red);
  border-radius: 4px;
  color: var(--red);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  animation: drawer-field-err-shake 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
@keyframes drawer-field-err-shake {
  0%   { transform: translateX(0);    opacity: 0; }
  20%  { transform: translateX(-4px); opacity: 1; }
  40%  { transform: translateX(4px); }
  60%  { transform: translateX(-2px); }
  80%  { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

/* Wrapper du drawer côté droit — fixed pour rester visible quand on scroll */
.ai-chat-side {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 9020;
  display: flex;
  background: white;
  border-left: 1px solid var(--line);
  box-shadow: -16px 0 40px -12px rgba(7, 24, 45, 0.18);
  animation: aiSideSlide 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.ai-chat-drawer {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: white;
  overflow: hidden;
  border-radius: 0;
}
@keyframes aiSideSlide {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* Animation de poussée du contenu (transition du padding) */
.desktop .desktop-body { transition: padding-right 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); }
.desktop .admin-footer  { transition: padding-right 0.28s cubic-bezier(0.2, 0.9, 0.3, 1), max-width 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); }

/* Sur mobile : le drawer reprend en plein écran (pas de poussée) */
@media (max-width: 900px) {
  .desktop.ai-pushed .desktop-body { padding-right: 0 !important; }
  .desktop.ai-pushed .admin-footer  { padding-right: 14px !important; max-width: 100% !important; }
  .ai-chat-side {
    width: 100%;
    border-left: none;
    box-shadow: none;
  }
}
.ai-chat-head {
  flex: 0 0 auto;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #FFF8F5 0%, white 100%);
}
.ai-chat-body {
  flex: 1 1 0;
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
}
.ai-msg { display: flex; max-width: 100%; }
.ai-msg.user { justify-content: flex-end; }
.ai-msg.assistant { justify-content: flex-start; }
.ai-msg-bubble {
  max-width: 90%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 14px;            /* +1pt pour meilleure lisibilité */
  line-height: 1.55;          /* aération des lignes */
  font-weight: 500;
  letter-spacing: -0.1px;
  white-space: pre-wrap;
  word-wrap: break-word;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  box-shadow: 0 2px 6px -2px rgba(6, 58, 34,0.08);
}
.ai-msg.user .ai-msg-bubble {
  background: linear-gradient(135deg, #0a6c3e, #2C72B7);
  color: white;
  font-weight: 500;
  border-bottom-right-radius: 4px;
}
.ai-msg.assistant .ai-msg-bubble {
  background: white;
  color: var(--navy-deep);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.ai-msg.assistant .ai-msg-bubble strong {
  color: var(--orange);
  font-weight: 800;
  letter-spacing: -0.2px;
}
.ai-msg.assistant .ai-msg-bubble em {
  font-style: italic;
  color: var(--ink-2);
}
/* Listes à puces dans les réponses IA */
.ai-msg.assistant .ai-msg-bubble ul,
.ai-msg.assistant .ai-msg-bubble ol {
  margin: 8px 0 4px;
  padding-left: 22px;
}
.ai-msg.assistant .ai-msg-bubble li {
  margin-bottom: 4px;
  line-height: 1.5;
}
/* Code inline */
.ai-msg.assistant .ai-msg-bubble code {
  background: rgba(243, 198, 74,0.08);
  color: var(--orange);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 600;
}
/* Horodatage subtil sous chaque bulle (si présent) */
.ai-msg-time {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 4px;
  opacity: 0.7;
  font-weight: 500;
}

/* Indicateur de frappe */
.ai-typing { display: flex; gap: 4px; padding: 14px 16px; }
.ai-typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ink-3);
  animation: aiTypeDot 1.2s ease-in-out infinite;
}
.ai-typing span:nth-child(2) { animation-delay: 0.2s; }
.ai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiTypeDot {
  0%, 60%, 100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}

/* Suggestions rapides */
.ai-chat-suggestions {
  flex: 0 0 auto;
  padding: 10px 16px 4px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  background: white;
}
.ai-chip {
  padding: 7px 12px;
  background: var(--bg);
  color: var(--navy-deep);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.ai-chip:hover {
  background: rgba(243, 198, 74,0.08);
  border-color: var(--orange);
  color: var(--orange);
}

/* Input */
.ai-chat-input {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: white;
}
.ai-chat-input textarea {
  flex: 1;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: 13px;
  resize: none;
  outline: none;
  max-height: 120px;
  transition: border-color 0.15s;
}
.ai-chat-input textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(243, 198, 74,0.12);
}
.ai-send {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FF8A5C, #f3c64a);
  color: white;
  border: none;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
}
.ai-send:hover:not(:disabled) {
  transform: scale(1.05);
  box-shadow: 0 6px 14px -2px rgba(243, 198, 74,0.4);
}
.ai-send:disabled {
  background: var(--line);
  color: var(--ink-3);
  cursor: not-allowed;
}
.ai-chat-foot {
  flex: 0 0 auto;
  padding: 8px 16px;
  font-size: 10px;
  color: var(--ink-3);
  text-align: center;
  background: var(--bg);
  border-top: 1px solid var(--line);
}

/* Mobile : drawer plein écran */
@media (max-width: 600px) {
  .ai-chat-overlay { padding: 0; }
  .ai-chat-drawer {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
  }
  .ai-fab {
    bottom: 18px;
    right: 18px;
    padding: 12px 16px 12px 14px;
    font-size: 12px;
  }
  .ai-fab-label { display: none; } /* juste l'icône sur mobile pour libérer la place */
  .ai-fab { padding: 14px; }
}

/* ============================================================
   ADMIN — RESPONSIVE LAYER
   3 paliers :
     • < 1100px : tablette landscape — réduit padding, KPIs 3 cols
     • < 900px  : tablette portrait / mobile large — sidebar drawer,
                  grids 2-col stackent, search bar plus petite
     • < 600px  : mobile — tout en 1 colonne, drawer plein écran,
                  tables en scroll horizontal, footer compact
   ============================================================ */

/* ---- Tablette landscape ---- */
@media (max-width: 1100px) {
  .admin-stage .dashboard-main { padding: 18px; }
  .admin-stage .db-content { padding: 0; }
  .admin-stage .kpi-grid { gap: 10px; }
  .admin-stage .kpi-card { padding: 14px; }
  .admin-stage .kpi-card .val { font-size: 22px; }
  /* Charts row : 1.5+1 → 1+1 */
  .admin-stage [style*="1.5fr 1fr"] { grid-template-columns: 1fr 1fr !important; }
}

/* ---- Tablette portrait / Mobile ---- */
@media (max-width: 900px) {
  .admin-hamburger { display: flex; }

  /* Container fixe fullscreen — autorise le scroll vertical */
  .admin-stage {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;       /* dvh = compte vraiment la barre URL mobile */
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  .admin-stage .desktop {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* CRITICAL : .desktop-body est un grid 220px + 1fr en desktop.
     Sur mobile la sidebar passe en position fixed (drawer) — il faut
     écraser le grid en flex 1-col pour que dashboard-main prenne 100%. */
  .admin-stage .desktop-body {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    height: auto !important;
    min-height: calc(100vh - 0px) !important;
    flex: 1 1 auto !important;
  }
  .admin-stage .dashboard-main {
    padding: 64px 12px 24px !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 auto !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  .admin-stage .db-content {
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* PageHeader : titre full width, actions wrap */
  .admin-stage .db-top {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 14px 10px 60px; /* 60px laisse la place au hamburger */
  }
  .admin-stage .db-top h2 { font-size: 18px; }
  .admin-stage .db-top h2 small { font-size: 11px; }
  .admin-stage .db-top > .row-h {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 0;
  }
  /* Toute row-h imbriquée dans db-top (ex. filtres période) wrap aussi */
  .admin-stage .db-top .row-h { flex-wrap: wrap; }
  .admin-stage .db-top .field {
    flex: 1 1 100%;
    min-width: 0;
    order: 99; /* search bar passe en dernier */
  }
  /* Bell + avatar : ordre stable, à droite de la 2e ligne */
  .admin-stage .db-top > .row-h > div:not(.field):not(.row-h) { flex: 0 0 auto; }

  /* KPIs : 4 → 2 colonnes */
  .admin-stage .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .admin-stage .kpi-card { padding: 12px; }
  .admin-stage .kpi-card .val { font-size: 20px; }
  .admin-stage .kpi-card .lbl { font-size: 10px; }

  /* Cards : padding réduit */
  .admin-stage .card { padding: 14px; }

  /* Charts plus compacts */
  .admin-stage .chart-h { height: 140px; }

  /* TOUTES les grilles inline 2/3 cols à ratios non-uniformes → 1 col */
  .admin-stage [style*="grid-template-columns: 1.5fr 1fr"],
  .admin-stage [style*="grid-template-columns: 1fr 2fr"],
  .admin-stage [style*="grid-template-columns: 2fr 1fr"],
  .admin-stage [style*="grid-template-columns: 1fr 1.5fr"],
  .admin-stage [style*="grid-template-columns: 1.3fr 1fr"],
  .admin-stage [style*="grid-template-columns: 1fr 1fr 90px"],
  .admin-stage [style*="grid-template-columns: 1fr 1fr auto"],
  .admin-stage [style*="grid-template-columns:1.5fr 1fr"],
  .admin-stage [style*="grid-template-columns:1fr 2fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Tables : conserve une colonne unique mais permet scroll horizontal */
  .admin-stage .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .admin-stage .tbl { font-size: 11px; min-width: max-content; }
  .admin-stage .tbl th, .admin-stage .tbl td { padding: 8px 8px; white-space: nowrap; }

  /* Sidebar : fixed full-height drawer, slide depuis la gauche */
  .admin-stage .sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 280px;
    max-width: 86vw;
    height: 100vh;
    z-index: 9010;
    transform: translateX(-105%);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 12px 0 32px -8px rgba(6, 58, 34,0.4);
    overflow-y: auto;
  }
  .admin-stage .sidebar.open { transform: translateX(0); }
  .admin-sidebar-overlay { display: block; }

  /* Drawer admin (panneau détail) : plein écran sur mobile large */
  .admin-drawer {
    width: 100% !important;
    max-width: 100% !important;
  }
  .admin-drawer-head { padding: 14px 16px; }
  .admin-drawer-body { padding: 14px 16px 18px; }

  /* Footer du drawer : actions wrap */
  .admin-drawer > div:last-child {
    padding: 12px 16px !important;
    gap: 6px !important;
  }
  .admin-drawer > div:last-child .btn {
    padding: 8px 10px !important;
    font-size: 11px !important;
    flex: 1 1 auto;
  }

  /* Admin footer global : empile + boutons stores compacts */
  .admin-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }
  .admin-stores { width: 100%; gap: 8px; }
  .admin-stores-lbl { font-size: 10px; }
  .store-btn { padding: 6px 10px; flex: 1 1 calc(50% - 4px); justify-content: center; }
  .store-btn small { font-size: 9px; }
  .store-btn strong { font-size: 11px; }

  /* Hamburger : taille adaptée */
  .admin-hamburger { width: 40px; height: 40px; top: 12px; left: 12px; }
}

/* ---- Mobile compact ---- */
@media (max-width: 600px) {
  .admin-stage .dashboard-main { padding: 60px 8px 8px; }
  .admin-stage .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .admin-stage .kpi-card { padding: 10px; }
  .admin-stage .kpi-card .val { font-size: 18px; }
  .admin-stage .kpi-card .lbl { font-size: 9px; letter-spacing: 0.3px; }
  .admin-stage .kpi-card .delta { font-size: 10px; }

  /* Card padding minimal */
  .admin-stage .card { padding: 12px; border-radius: 8px; }

  /* Toutes les grilles inline (incluant 1fr 1fr) → 1 col */
  .admin-stage [style*="grid-template-columns: 1fr 1fr"],
  .admin-stage [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* PageHeader actions encore plus compact */
  .admin-stage .db-top { padding: 12px 10px 10px 56px; }
  .admin-stage .db-top h2 { font-size: 16px; }
  .admin-stage .db-top h2 small { font-size: 10px; }

  /* Drawer : padding minimum */
  .admin-drawer-head { padding: 12px 14px; }
  .admin-drawer-body { padding: 12px 14px 16px; }
  .admin-drawer > div:last-child {
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
  }

  /* Boutons drawer : full-width quand peu de place */
  .admin-drawer > div:last-child .btn {
    flex: 1 1 calc(50% - 3px);
    min-width: 0;
  }

  /* Avatar dans header = plus petit */
  .admin-stage .db-top .avatar.sm { width: 28px; height: 28px; font-size: 11px; }

  /* Charts encore plus petits */
  .admin-stage .chart-h { height: 120px; }
  .admin-stage .donut-h { width: 100px; height: 100px; }

  /* Section labels drawers : plus discrets */
  .admin-drawer-section-lbl { font-size: 10px; margin-bottom: 6px; }

  /* Footer stores : 1 col sur très petit écran */
  .store-btn { flex: 1 1 100%; }

  /* Tables : scroll horizontal préservé */
  .admin-stage .card .tbl { font-size: 10px; }
  .admin-stage .card .tbl th,
  .admin-stage .card .tbl td { padding: 7px 6px; }
}

/* ---- Très petit (< 380px : iPhone SE et smaller) ---- */
@media (max-width: 380px) {
  .admin-stage .kpi-grid { grid-template-columns: 1fr !important; }
  .admin-stage .db-top h2 { font-size: 15px; }
  .admin-stage .dashboard-main { padding: 56px 6px 6px; }
}

/* ============================================================
   DECLARATIONS — VUE CARTE + ZONES (split layout)
   La carte ne prend plus tout l'espace : 60% à gauche, 40% à droite
   pour la liste des zones (sans cadres ni bordures, juste des sections
   empilées avec séparateur fin).
   ============================================================ */
.onas-decl-map-split {
  display: grid;
  /* [v113] Colonnes fixes : carte = flexible (mini 480px), zones = 360px fixe.
     Avant : 1.6fr 1fr — le contenu Leaflet poussait la grid au-delà du viewport
     et écrasait la colonne zones. minmax(0,...) garantit que la grid ne déborde pas. */
  grid-template-columns: minmax(480px, 1fr) 360px;
  gap: 14px;
  align-items: stretch;
  min-height: 580px;
}
.onas-decl-map-side {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(6, 58, 34, 0.04);
  display: flex;
  flex-direction: column;
  min-width: 0;     /* [v113] Permet au flex item de shrinker, évite débordement Leaflet */
}
.onas-decl-map-canvas {
  flex: 1;
  position: relative;
  min-height: 460px;
}
/* Panneau zones — pas de cadre extérieur, juste sections empilées */
.onas-decl-zones-side {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 0 rgba(6, 58, 34, 0.04);
}
.onas-decl-zones-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.onas-decl-zones-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
/* Chaque zone : version COMPACTE — padding réduit, fonts réduites,
   1 seul item par défaut visible (vs 2 avant), bar plus fine. */
.onas-decl-zone-row {
  padding: 8px 14px 9px;
  border-bottom: 1px solid var(--line);
  transition: background 0.15s;
}
.onas-decl-zone-row:last-child { border-bottom: 0; }
.onas-decl-zone-row:hover { background: rgba(6, 58, 34, 0.015); }
.onas-decl-zone-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.onas-decl-zone-rank {
  width: 18px; height: 18px;
  border-radius: 5px;
  color: white;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.onas-decl-zone-name {
  font-size: 12px;
  font-weight: 800;
  color: var(--navy-deep);
  line-height: 1.15;
}
.onas-decl-zone-sub {
  font-size: 9px;
  color: var(--ink-3);
  margin-top: 1px;
  font-weight: 700;
  line-height: 1.2;
}
.onas-decl-zone-count {
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.onas-decl-zone-count-lbl {
  font-size: 8px;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 1px;
  letter-spacing: 0.3px;
}
.onas-decl-zone-bar {
  margin: 5px 0 4px;
  height: 3px;
  background: var(--bg);
  border-radius: 2px;
  overflow: hidden;
}
.onas-decl-zone-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.onas-decl-zone-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  cursor: pointer;
  transition: opacity 0.15s;
}
.onas-decl-zone-item:hover { opacity: 0.7; }
.onas-decl-zone-item-icon {
  width: 18px; height: 18px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
}
.onas-decl-zone-item-title {
  font-size: 10px;
  font-weight: 700;
  color: var(--navy-deep);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.onas-decl-zone-item-sub {
  font-size: 9px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
}
.onas-decl-zone-item .badge {
  font-size: 8px !important;
  padding: 1px 5px !important;
}
.onas-decl-zone-more {
  margin-top: 3px;
  background: transparent;
  border: 0;
  color: var(--orange);
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  padding: 2px 0;
  font-family: inherit;
}
.onas-decl-zone-more:hover { text-decoration: underline; }
@media (max-width: 980px) {
  .onas-decl-map-split {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .onas-decl-zones-side { max-height: 480px; }
}

/* ============================================================
   COLLÈGUES CONNECTÉS — colonne togglable à GAUCHE du chat IA
   Affichée seulement si ai-chat-side a la classe .with-colleagues.
   Animation slide-in depuis la droite (apparaît avant le chat).
   ============================================================ */
.ai-chat-side.with-colleagues {
  width: 660px; /* 240 (collègues) + 420 (chat) */
  max-width: 100%;
}
.onas-colleagues-col {
  width: 240px;
  flex: 0 0 240px;
  background: var(--bg);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: onas-coll-slide-in 0.32s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes onas-coll-slide-in {
  0%   { transform: translateX(20px); opacity: 0; }
  100% { transform: translateX(0);    opacity: 1; }
}
.onas-colleagues-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--line);
  background: white;
}
.onas-colleagues-toggle {
  width: 24px;
  height: 24px;
  border: 1px solid var(--line);
  background: white;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: all 0.15s;
}
.onas-colleagues-toggle:hover {
  background: var(--orange);
  color: white;
  border-color: var(--orange);
}
.onas-colleagues-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.onas-colleague-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  transition: all 0.15s;
}
.onas-colleague-card:hover {
  border-color: rgba(243, 198, 74, 0.4);
  box-shadow: 0 2px 8px -2px rgba(6, 58, 34, 0.08);
}
.onas-colleague-avatar {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--navy-deep);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.onas-colleague-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid white;
  animation: onas-coll-pulse 2s ease-in-out infinite;
}
@keyframes onas-coll-pulse {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.15); opacity: 0.85;}
}
.onas-colleague-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--navy-deep);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onas-colleague-role {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 1px;
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onas-colleague-act {
  flex: 1;
  padding: 6px 0;
  font-size: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
}
.onas-colleague-act:hover {
  background: rgba(243, 198, 74, 0.08);
  border-color: rgba(243, 198, 74, 0.4);
}
.onas-colleague-act.primary {
  background: var(--orange);
  color: white;
  border-color: var(--orange);
}
.onas-colleague-act.primary:hover {
  background: #c89e2c;
}
@media (max-width: 700px) {
  .ai-chat-side.with-colleagues { width: 100%; }
  .onas-colleagues-col {
    width: 100%;
    flex: 0 0 auto;
    max-height: 38%;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .ai-chat-side.with-colleagues { flex-direction: column; }
}

/* ============================================================
   DASHBOARD PRESTATAIRE — Style Call Center (sage cards + day strip)
   Ré-organisation visuelle inspirée du dashboard "Call statistics"
   pour mieux scanner l'activité par entreprise.
   ============================================================ */
.onas-tdb-presta-bg {
  background: linear-gradient(180deg, rgba(214, 235, 226, 0.35) 0%, transparent 100%);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
}
.onas-tdb-day-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 4px;
  scrollbar-width: thin;
}
.onas-tdb-day {
  flex: 0 0 auto;
  min-width: 44px;
  padding: 8px 6px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}
.onas-tdb-day:hover {
  border-color: rgba(243, 198, 74, 0.4);
}
.onas-tdb-day.active {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: white;
  box-shadow: 0 4px 12px -4px rgba(6, 58, 34, 0.3);
}
.onas-tdb-day-num {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.onas-tdb-day-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: 4px;
  font-weight: 700;
  opacity: 0.8;
}
.onas-tdb-day.has-activity::after {
  content: "";
  display: block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--orange);
  margin: 4px auto 0;
}

/* Grille de cartes prestataires (4 cols → 2 cols → 1 col) */
.onas-tdb-presta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.onas-tdb-presta-card {
  background: white;
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(6, 58, 34, 0.04);
}
.onas-tdb-presta-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(6, 58, 34, 0.15);
}
.onas-tdb-presta-card.selected {
  background: linear-gradient(135deg, rgba(243, 198, 74, 0.08), rgba(243, 198, 74, 0.02));
  box-shadow: 0 4px 14px -4px rgba(243, 198, 74, 0.18);
}
.onas-tdb-presta-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.onas-tdb-presta-avatar {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--navy-deep);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}
.onas-tdb-presta-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--navy-deep);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onas-tdb-presta-ninea {
  font-size: 10px;
  color: var(--ink-3);
  font-family: monospace;
  margin-top: 2px;
}
.onas-tdb-presta-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 10px 0;
}
.onas-tdb-presta-stat {
  text-align: center;
  padding: 6px 4px;
  background: var(--bg);
  border-radius: 8px;
}
.onas-tdb-presta-stat-v {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.onas-tdb-presta-stat-l {
  font-size: 8px;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-top: 4px;
}
.onas-tdb-presta-rate {
  height: 6px;
  background: var(--bg);
  border-radius: 3px;
  overflow: hidden;
}
.onas-tdb-presta-rate-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.onas-tdb-presta-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 10px;
  color: var(--ink-3);
}

/* ============================================================
   ACTIVITÉ QUOTIDIENNE — chart de barres + KPIs
   Remplace l'ancien day-strip décoratif. Affiche distribution réelle
   des missions par jour avec barres empilées (vert=terminées,
   orange=en cours), 3 KPIs (Total, Moy/jour, Pic) et tooltip détaillé.
   ============================================================ */
.onas-tdb-activity-card {
  background: linear-gradient(180deg, rgba(214, 235, 226, 0.35) 0%, white 100%);
  border-radius: 14px;
  padding: 16px 18px;
}
.onas-tdb-activity-stats {
  display: flex;
  gap: 14px;
  align-items: center;
}
.onas-tdb-activity-stat {
  text-align: center;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.65);
  border-radius: 10px;
  border: 1px solid rgba(6, 58, 34, 0.05);
}
.onas-tdb-activity-stat-v {
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.onas-tdb-activity-stat-l {
  font-size: 9px;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-top: 4px;
}
/* Chart proprement dit — grid 14 colonnes égales */
.onas-tdb-activity-chart {
  display: grid;
  grid-template-columns: repeat(14, 1fr);
  gap: 6px;
  align-items: end;
  height: 130px;
  padding: 0 4px;
}
.onas-tdb-bar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: default;
  min-width: 0;
}
.onas-tdb-bar-track {
  position: relative;
  width: 100%;
  height: 90px;
  background: rgba(6, 58, 34, 0.04);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.onas-tdb-bar-fill {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  background: var(--orange);
  border-radius: 4px 4px 0 0;
  transition: height 0.5s cubic-bezier(0.2, 0.9, 0.3, 1);
  animation: onas-tdb-bar-grow 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
.onas-tdb-bar-fill-done {
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  background: var(--green);
  border-radius: 4px 4px 0 0;
  transition: height 0.5s cubic-bezier(0.2, 0.9, 0.3, 1);
  animation: onas-tdb-bar-grow 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes onas-tdb-bar-grow {
  0%   { transform: scaleY(0); transform-origin: bottom; }
  100% { transform: scaleY(1); transform-origin: bottom; }
}
.onas-tdb-bar-count {
  position: absolute;
  top: 4px; left: 0; right: 0;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  color: var(--navy-deep);
  font-variant-numeric: tabular-nums;
  z-index: 1;
}
.onas-tdb-bar-col:hover .onas-tdb-bar-track {
  background: rgba(243, 198, 74, 0.08);
}
.onas-tdb-bar-day-num {
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.onas-tdb-bar-day-num.today-num {
  color: white;
  background: var(--navy-deep);
  padding: 2px 5px;
  border-radius: 4px;
}
.onas-tdb-bar-day-lbl {
  font-size: 8px;
  color: var(--ink-3);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.4px;
}
.onas-tdb-bar-col.today .onas-tdb-bar-track {
  outline: 2px solid var(--navy-deep);
  outline-offset: 1px;
}

/* ============================================================
   PRESTA CARDS — Style wellness/finance dashboard
   Inspiré des cards Glucose/Activity/Heart Rate (Apple Health style).
   Cards blanches épurées avec icône ronde colorée + 3 grandes stats
   horizontales + sparkline mini + barre de taux. Très scannable.
   ============================================================ */
.onas-presta-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.onas-presta-card {
  background: white;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 1px 0 rgba(6, 58, 34, 0.04),
              0 4px 14px -8px rgba(6, 58, 34, 0.08);
  transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
  border: 1px solid rgba(6, 58, 34, 0.04);
}
.onas-presta-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 0 rgba(6, 58, 34, 0.04),
              0 12px 24px -8px rgba(6, 58, 34, 0.14);
}
.onas-presta-card-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.onas-presta-card-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.onas-presta-card-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--navy-deep);
  letter-spacing: -0.2px;
  line-height: 1.2;
}
.onas-presta-card-trend {
  font-size: 10px;
  font-weight: 700;
  margin-top: 3px;
  letter-spacing: 0.2px;
}
.onas-presta-card-action {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}
.onas-presta-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
.onas-presta-card-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.onas-presta-card-stat-v {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.5px;
}
.onas-presta-card-stat-l {
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 600;
  text-transform: lowercase;
}
/* Sparkline mini-bar chart — 7 jours d'activité */
.onas-presta-card-spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
  padding: 4px 0;
  margin-bottom: 10px;
}
.onas-presta-card-spark-bar {
  flex: 1;
  border-radius: 2px;
  min-height: 2px;
  transition: height 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
  animation: onas-presta-spark-grow 0.5s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes onas-presta-spark-grow {
  0%   { transform: scaleY(0); transform-origin: bottom; }
  100% { transform: scaleY(1); transform-origin: bottom; }
}
/* Footer : taux de réalisation */
.onas-presta-card-foot {
  padding-top: 10px;
  border-top: 1px solid rgba(6, 58, 34, 0.06);
}
.onas-presta-card-rate-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.onas-presta-card-rate-lbl {
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 600;
}
.onas-presta-card-rate-v {
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.onas-presta-card-rate-bar {
  height: 4px;
  background: rgba(6, 58, 34, 0.06);
  border-radius: 2px;
  overflow: hidden;
}
.onas-presta-card-rate-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.6s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* Repli responsive : moins de colonnes visibles (utile sur mobile) */
@media (max-width: 760px) {
  .onas-tdb-activity-chart {
    grid-template-columns: repeat(7, 1fr); /* affiche que les 7 derniers jours */
  }
  .onas-tdb-activity-chart .onas-tdb-bar-col:nth-child(-n+7) {
    display: none;
  }
  .onas-tdb-activity-stats {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ============================================================
   SIG ASSAINISSEMENT — Panel surveillance temps réel (top-right)
   Style futuriste/tactique avec fond sombre semi-transparent +
   accents néon orange/cyan. Affiche live : pluvio, saturation,
   capteurs en alerte, zones critiques.
   ============================================================ */
.onas-sig-status-panel {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 540;
  width: 290px;
  background: linear-gradient(160deg, rgba(7, 24, 45, 0.94) 0%, rgba(11, 32, 58, 0.92) 100%);
  border: 1px solid rgba(243, 198, 74, 0.35);
  border-radius: 12px;
  padding: 12px;
  color: #d8eaff;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  box-shadow: 0 8px 28px -8px rgba(0, 0, 0, 0.5),
              inset 0 0 0 1px rgba(243, 198, 74, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: onas-sig-panel-in 0.4s cubic-bezier(0.2, 0.9, 0.3, 1) both;
}
@keyframes onas-sig-panel-in {
  0%   { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0);    }
}
.onas-sig-status-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #d8eaff;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(243, 198, 74, 0.25);
}
.onas-sig-status-time {
  background: #DC2626;
  color: white;
  font-size: 9px;
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 1px;
  animation: onas-sig-live-blink 1.4s ease-in-out infinite;
}
@keyframes onas-sig-live-blink {
  0%, 100% { opacity: 1;   }
  50%      { opacity: 0.5; }
}
.onas-sig-status-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.onas-sig-stat {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.onas-sig-stat-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.onas-sig-stat-v {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.onas-sig-stat-l {
  font-size: 9px;
  color: #a8c4e8;
  text-transform: uppercase;
  font-weight: 700;
  margin-top: 2px;
  letter-spacing: 0.4px;
}
.onas-sig-status-alerts {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed rgba(243, 198, 74, 0.25);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.onas-sig-alert-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.onas-sig-alert-row strong {
  color: #fff;
  font-weight: 800;
  font-size: 9px;
}

/* Capteur IoT pulse animation (visible quand .alert) */
.onas-sensor-pulse {
  animation: onas-sensor-pulse-anim 1.6s ease-in-out infinite;
  transform-origin: 9px 9px;
}
@keyframes onas-sensor-pulse-anim {
  0%, 100% { transform: scale(1);   opacity: 0.6;  }
  50%      { transform: scale(1.4); opacity: 0.15; }
}

/* Capteur IoT marker — petit halo discret */
.onas-sensor-icon { background: transparent !important; }
.onas-lift-icon { background: transparent !important; }

/* Repositionnement responsive du SIG panel sur écrans étroits */
@media (max-width: 1100px) {
  .onas-sig-status-panel {
    width: 230px;
    padding: 10px;
  }
  .onas-sig-stat-v { font-size: 13px; }
}
@media (max-width: 760px) {
  .onas-sig-status-panel {
    position: static;
    width: 100%;
    margin-bottom: 8px;
  }
}

/* ============================================================
   TRACK 3 — Quick wins UX productivité opérateur
   - Recherche globale Ctrl+K (.onas-gs-*)
   - Toast notifications (.onas-toast-*)
   - Bouton trigger PageHeader avec kbd Ctrl+K
   ============================================================ */

/* === PageHeader — bouton trigger « Rechercher » avec kbd === */
.onas-gs-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  border-radius: 10px;
  border: 1px solid var(--line);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.onas-gs-trigger:hover {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(243, 198, 74, 0.10);
}
.onas-gs-trigger-lbl {
  flex: 1;
  text-align: left;
  font-size: 13px;
  color: var(--ink-3);
}
.onas-gs-trigger-kbd {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: var(--ink-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 7px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  white-space: nowrap;
}

/* === Modal recherche globale === */
.onas-gs-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 58, 34, 0.55);
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: onasGsFadeIn 0.15s ease-out;
}
@keyframes onasGsFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.onas-gs-modal {
  width: min(640px, 92vw);
  max-height: 70vh;
  background: white;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(6, 58, 34, 0.30);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: onasGsSlideIn 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes onasGsSlideIn {
  from { transform: translateY(-12px) scale(0.98); opacity: 0; }
  to   { transform: translateY(0) scale(1);        opacity: 1; }
}
.onas-gs-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.onas-gs-icon {
  color: var(--ink-3);
  display: flex;
}
.onas-gs-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: transparent;
  padding: 4px 0;
}
.onas-gs-input::placeholder {
  color: var(--ink-3);
}
.onas-gs-kbd {
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-3);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 8px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
}
.onas-gs-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.onas-gs-empty {
  padding: 32px 24px;
  text-align: center;
  color: var(--ink-3);
}
.onas-gs-tips {
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--ink-3);
}
.onas-gs-tips kbd {
  display: inline-block;
  padding: 1px 7px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-2);
  margin-right: 4px;
}
.onas-gs-group {
  padding: 4px 0 8px;
}
.onas-gs-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px 4px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.onas-gs-count {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3);
  background: var(--bg);
  padding: 1px 6px;
  border-radius: 8px;
}
.onas-gs-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  border-left: 3px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.onas-gs-item.active {
  background: var(--blue-pale);
  border-left-color: var(--orange);
}
.onas-gs-item-ic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex: 0 0 auto;
}
.onas-gs-item-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.onas-gs-item-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy-deep);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onas-gs-item-sub {
  font-size: 11px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.onas-gs-item-arrow {
  opacity: 0;
  font-size: 14px;
  color: var(--orange);
  font-weight: 800;
  transition: opacity 0.1s;
}
.onas-gs-item.active .onas-gs-item-arrow {
  opacity: 1;
}
.onas-gs-foot {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
}
.onas-gs-foot kbd {
  display: inline-block;
  padding: 1px 5px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-2);
  margin: 0 2px;
}

/* === Toast notifications — pile bas-droite ===
   Décalé vers le haut pour ne pas masquer le FAB IA (bottom: 22px). */
.onas-toast-stack {
  position: fixed;
  right: 18px;
  bottom: 90px;
  z-index: 10001;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 380px;
  pointer-events: none;
}
.onas-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(6, 58, 34, 0.20);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy-deep);
  border-left: 4px solid var(--navy-deep);
  pointer-events: auto;
  animation: onasToastSlide 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes onasToastSlide {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.onas-toast-success { border-left-color: var(--green); }
.onas-toast-error   { border-left-color: var(--red);   }
.onas-toast-info    { border-left-color: var(--navy);  }
.onas-toast-warn    { border-left-color: var(--amber); }
.onas-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 800;
  color: white;
  flex: 0 0 auto;
}
.onas-toast-success .onas-toast-icon { background: var(--green); }
.onas-toast-error   .onas-toast-icon { background: var(--red);   }
.onas-toast-info    .onas-toast-icon { background: var(--navy);  }
.onas-toast-warn    .onas-toast-icon { background: var(--amber); }
.onas-toast-msg {
  flex: 1;
  line-height: 1.35;
}
.onas-toast-x {
  background: transparent;
  border: none;
  color: var(--ink-3);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  flex: 0 0 auto;
}
.onas-toast-x:hover { color: var(--ink); }

/* Mobile : remonte les toasts au-dessus de la nav bottom éventuelle */
@media (max-width: 760px) {
  .onas-toast-stack {
    right: 10px;
    left: 10px;
    bottom: 80px;
    max-width: none;
  }
  .onas-gs-overlay { padding-top: 6vh; }
  .onas-gs-modal   { width: 96vw; max-height: 86vh; }
  .onas-gs-input   { font-size: 15px; }
}

/* ============================================================
   BACKUP / IMPORT SECTION — Paramètres → Sauvegarde & Import
   Palette ONAS : --orange / --navy-deep / --green / --red
   ============================================================ */
.onas-backup-section {
  background: linear-gradient(135deg, #FFFFFF 0%, #F5F9FC 100%);
  border: 1px solid var(--line);
  position: relative;
}
.onas-backup-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--orange) 0%, var(--navy) 100%);
  border-radius: 12px 12px 0 0;
}

/* === Skeleton de chargement liste tables === */
.onas-backup-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}
.onas-backup-skeleton-row {
  height: 46px;
  border-radius: 8px;
  background: linear-gradient(90deg, #e5f4ec 0%, #F5F9FC 50%, #e5f4ec 100%);
  background-size: 200% 100%;
  animation: onas-backup-shimmer 1.4s linear infinite;
}
@keyframes onas-backup-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* === Drop zone import === */
.onas-backup-dropzone {
  border: 2px dashed var(--line-2, #CBD5E1);
  border-radius: 12px;
  padding: 24px 18px;
  text-align: center;
  background: white;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
  cursor: default;
}
.onas-backup-dropzone:hover {
  border-color: var(--orange);
  background: rgba(243, 198, 74, 0.03);
}
.onas-backup-dropzone.is-over {
  border-color: var(--orange);
  background: rgba(243, 198, 74, 0.08);
  transform: scale(1.005);
}
.onas-backup-dropzone.is-filled {
  border-style: solid;
  border-color: var(--green);
  background: var(--green-soft, #E0F4EA);
}

/* === Tableau résultats import === */
.onas-backup-result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: white;
  border-radius: 8px;
  overflow: hidden;
}
.onas-backup-result-table thead th {
  background: var(--navy-deep);
  color: white;
  text-align: left;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.onas-backup-result-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}
.onas-backup-result-table tbody tr:last-child td { border-bottom: none; }
.onas-backup-result-table tbody tr.has-errors {
  background: rgba(217, 67, 76, 0.06);
}
.onas-backup-result-table td.ok    { color: var(--green); font-weight: 700; }
.onas-backup-result-table td.upd   { color: var(--navy);  font-weight: 700; }
.onas-backup-result-table td.muted { color: var(--ink-3); }
.onas-backup-result-table td.err   { color: var(--red);   font-weight: 800; }

/* === Historique items === */
.onas-backup-history-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  transition: border-color .15s ease, transform .15s ease;
}
.onas-backup-history-item:hover {
  border-color: var(--orange);
  transform: translateX(2px);
}
.onas-backup-history-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex: 0 0 auto;
}

/* === Pulse anim sur le bouton "Télécharger" — attire l'attention === */
.onas-backup-btn-pulse {
  position: relative;
  animation: onas-backup-pulse 2.4s ease-in-out infinite;
}
.onas-backup-btn-pulse:disabled { animation: none; opacity: 0.6; }
@keyframes onas-backup-pulse {
  0%, 100% { box-shadow: 0 4px 12px -2px rgba(243, 198, 74, 0.35); }
  50%      { box-shadow: 0 4px 22px 2px  rgba(243, 198, 74, 0.55); }
}

/* === Responsive === */
@media (max-width: 760px) {
  .onas-backup-dropzone { padding: 16px 12px; }
  .onas-backup-result-table { font-size: 11px; }
  .onas-backup-result-table thead th,
  .onas-backup-result-table tbody td { padding: 6px 8px; }
}

/* ============================================================
   AUDIT & TRAÇABILITÉ — carte live + journal serveur (Phase 2)
   ============================================================ */

/* Marker serveur central — disque navy avec pulsation halo */
.onas-audit-server-marker {
  position: relative;
  width: 40px; height: 40px;
  background: var(--navy-deep);
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 4px 18px rgba(6, 58, 34, 0.45);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.onas-audit-server-marker::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--orange);
  opacity: 0.85;
  animation: onasAuditServerPulse 2.2s ease-out infinite;
  pointer-events: none;
}
.onas-audit-server-marker::after {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 2px solid var(--orange);
  opacity: 0;
  animation: onasAuditServerPulse 2.2s ease-out 0.6s infinite;
  pointer-events: none;
}
@keyframes onasAuditServerPulse {
  0%   { transform: scale(0.7); opacity: 0.85; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Marker client en orbite — petit disque coloré par acteur_type.
   Source 'geo_ip' → opacité réduite + bord pointillé. */
.onas-audit-client-marker {
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  position: relative;
}
.onas-audit-client-marker.is-geoip {
  opacity: 0.6;
  border-style: dashed;
}
.onas-audit-client-marker::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.4;
  animation: onasAuditClientPulse 1.8s ease-out infinite;
}
@keyframes onasAuditClientPulse {
  0%   { transform: scale(0.9); opacity: 0.55; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* Liens animés serveur ↔ clients — pointillé qui circule */
.onas-audit-link {
  animation: onasAuditLinkMarch 3.5s linear infinite;
  stroke-linecap: round;
}
@keyframes onasAuditLinkMarch {
  to { stroke-dashoffset: -32; }
}

/* [v329] Marker "MOI" — position GPS réelle de l'utilisateur courant */
.onas-audit-me-marker {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #2C72B7;
  border: 3px solid white;
  box-shadow: 0 0 0 4px #2C72B7, 0 6px 16px -2px rgba(14, 138, 77,0.45);
  animation: onasAuditMePulse 2s ease-in-out infinite;
}
@keyframes onasAuditMePulse {
  0%, 100% { box-shadow: 0 0 0 4px #2C72B7, 0 6px 16px -2px rgba(14, 138, 77,0.45); }
  50%      { box-shadow: 0 0 0 7px rgba(14, 138, 77,0.5), 0 8px 22px -2px rgba(14, 138, 77,0.55); }
}

/* [v327][v330] Marker FOCUS — étoile + halo pulsant (fond vert v330) */
.onas-audit-focus-marker {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid white;
  box-shadow: 0 0 0 4px #22c55e, 0 6px 16px -2px rgba(34,197,94,0.5);
  animation: onasAuditFocusPulse 1.6s ease-in-out infinite;
}

/* [v330] Tooltip RTT (latence + débit) au milieu de la ligne de connexion.
   Mis à jour toutes les 2 secondes via fetch /api/healthz. */
.onas-rtt-tooltip {
  background: rgba(6, 58, 34, 0.92) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  box-shadow: 0 4px 12px -3px rgba(0,0,0,0.4) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
}
.onas-rtt-tooltip::before { display: none !important; } /* hide arrow */
.onas-rtt-label {
  color: white;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.onas-rtt-label .rtt-ms { letter-spacing: 0.3px; }
.onas-rtt-label .rtt-kbps {
  color: rgba(255,255,255,0.7);
  font-size: 9px;
  padding-left: 6px;
  border-left: 1px solid rgba(255,255,255,0.25);
}
.onas-rtt-label.rtt-ok  .rtt-ms { color: #4ade80; }   /* vert (<80ms) */
.onas-rtt-label.rtt-mid .rtt-ms { color: #fbbf24; }   /* jaune (80-200ms) */
.onas-rtt-label.rtt-bad .rtt-ms { color: #f87171; }   /* rouge (>200ms) */
.onas-rtt-label.rtt-na  .rtt-ms { color: rgba(255,255,255,0.5); }
@keyframes onasAuditFocusPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
/* Lien focus — pointillé plus marqué qui défile + glow */
.onas-audit-focus-link {
  animation: onasAuditLinkMarch 1.4s linear infinite;
  stroke-linecap: round;
  filter: drop-shadow(0 0 4px currentColor);
}
/* Ligne audit-log highlightee quand focusee */
.onas-audit-log-row.is-focused {
  background: rgba(255, 138, 92, 0.10) !important;
  border-left: 3px solid var(--orange);
  padding-left: 11px;
}

/* Badge LIVE — pastille rouge clignotante */
.onas-audit-live-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(217, 67, 76, 0.1);
  color: var(--red);
  border: 1px solid rgba(217, 67, 76, 0.3);
  border-radius: 14px;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.4px;
}
.onas-audit-live-badge::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 0 rgba(217, 67, 76, 0.7);
  animation: onasAuditLiveDot 1.6s ease-out infinite;
}
.onas-audit-live-badge.is-paused::before {
  background: var(--ink-3);
  animation: none;
  box-shadow: none;
}
@keyframes onasAuditLiveDot {
  0%   { box-shadow: 0 0 0 0 rgba(217, 67, 76, 0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(217, 67, 76, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 67, 76, 0); }
}

/* Carte container avec hauteur étendue pour vue d'ensemble du Sénégal.
   620px = ~63% d'un écran 1080p, laisse de la place aux filtres+logs. */
.onas-audit-map {
  height: 620px;
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #f0f4f8;
}

/* Légende couleurs */
.onas-audit-legend {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 10px 12px;
  font-size: 11px;
}
.onas-audit-legend-item {
  display: inline-flex; align-items: center; gap: 6px;
}
.onas-audit-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Groupes temporels collapsibles */
.onas-audit-group-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}
.onas-audit-group-header:hover {
  background: #eef3fa;
}
.onas-audit-group-chevron {
  display: inline-block;
  transition: transform 0.2s;
  color: var(--ink-3);
  font-size: 11px;
}
.onas-audit-group-header.is-collapsed .onas-audit-group-chevron {
  transform: rotate(-90deg);
}

/* Lignes de log */
.onas-audit-log-row {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  cursor: pointer;
  transition: background 0.1s;
}
.onas-audit-log-row:hover {
  background: var(--bg);
}
.onas-audit-log-row.is-expanded {
  background: #f5f8fc;
}
.onas-audit-log-meta {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 3px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.onas-audit-log-detail {
  margin-top: 8px;
  padding: 10px 12px;
  background: #063a22;
  color: #e2e8f0;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Barres mini-stats (sparkline simple) */
.onas-audit-spark {
  display: flex; align-items: flex-end; gap: 2px;
  height: 36px;
}
.onas-audit-spark-bar {
  flex: 1;
  min-width: 4px;
  background: linear-gradient(180deg, var(--orange-2), var(--orange));
  border-radius: 2px 2px 0 0;
  transition: background 0.2s;
}
.onas-audit-spark-bar:hover {
  background: linear-gradient(180deg, var(--orange), var(--navy-deep));
}

/* [v402] Theme dark SUPPRIMÉ — retour au mode clair unique (demande user). */

/* [v406] Jauge indéterminée pour les chargements API (DeclarationsPage etc.) */
@keyframes onasProgIndet {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(150%); }
  100% { transform: translateX(250%); }
}

/* [v407] Pulse de la pastille LiveDuration (timer en cours) */
@keyframes onasDurPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

/* =============================================================================
   [v418] LiveDuration — pills raffinees. Typo Inter, poids 600 sur les chiffres
   (plus elegant que 700), labels lowercase (plus doux que UPPERCASE),
   chiffres en featured-numbers, espace interne plus aere.
============================================================================= */
.onas-livedur { line-height: 1; display: inline-flex; align-items: center; }
.onas-livedur-pills { display: inline-flex; gap: 4px; }
.onas-livedur-seg {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px 7px;
  min-width: 24px;
  border-radius: 6px;
  font-family: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-feature-settings: 'tnum' 1, 'ss01' 1, 'cv11' 1;
  background: var(--navy-deep);
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(6, 58, 34, 0.18);
  letter-spacing: 0;
}
.onas-livedur-seg .num {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
}
.onas-livedur-seg .lbl {
  font-size: 8px;
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0.4px;
  text-transform: lowercase;
  opacity: 0.7;
  line-height: 1;
}
.onas-livedur[data-sev="navy"]   .onas-livedur-seg { background: var(--navy-deep); }
.onas-livedur[data-sev="orange"] .onas-livedur-seg { background: var(--orange); box-shadow: 0 1px 4px rgba(243, 198, 74, 0.28); }
.onas-livedur[data-sev="red"]    .onas-livedur-seg { background: var(--red, #d04a3b); box-shadow: 0 1px 4px rgba(208, 74, 59, 0.32); }
.onas-livedur-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  margin-right: 4px;
  animation: onasDurPulse 1.6s ease-in-out infinite;
}
.onas-livedur[data-sev="navy"]   .onas-livedur-dot { background: var(--navy-deep); }
.onas-livedur[data-sev="orange"] .onas-livedur-dot { background: var(--orange); }
.onas-livedur[data-sev="red"]    .onas-livedur-dot { background: var(--red, #d04a3b); }
.onas-livedur-suffix {
  margin-left: 5px;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.55;
  font-family: 'Inter', system-ui, sans-serif;
}
/* [v417] Icone validation seule — gros tampon vert sans texte */
.onas-livedur-done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #059669;
  flex-shrink: 0;
}
.onas-livedur-done-icon svg { display: block; }

/* =============================================================================
   [v412] Animation séquentielle des lignes de tables (demandes / déclarations).
   Au lieu d'afficher 50+ lignes d'un coup (saccade visible), chaque ligne
   apparaît avec un léger décalage : fade + translateY → effet de cascade fluide.
   Le délai est piloté par --row-idx (passé en inline-style depuis React).
   Cap à 30 pour éviter un délai >1s sur les longues listes.
============================================================================= */
@keyframes onasRowStaggerIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.onas-row-stagger {
  animation: onasRowStaggerIn 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(min(var(--row-idx, 0), 30) * 28ms);
  will-change: opacity, transform;
}
/* Variante "cards" : même effet sur les cartes / tuiles. */
.onas-card-stagger {
  animation: onasRowStaggerIn 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(min(var(--row-idx, 0), 30) * 36ms);
  will-change: opacity, transform;
}
/* Respect motion preferences : si l'utilisateur a "reduce motion", on désactive. */
@media (prefers-reduced-motion: reduce) {
  .onas-row-stagger,
  .onas-card-stagger {
    animation: none;
  }
}

/* =============================================================================
   [v412] Arbre de filtre par date (sidebar, sous les boutons du menu 2).
   Affiché uniquement sur les pages Demandes / Déclarations. Hiérarchie :
   Année > Mois > Jour, avec count par bucket. Click = filtre la liste.
============================================================================= */
.onas-date-tree-wrap {
  margin: 6px 6px 12px 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 8px;
}
/* =============================================================================
   [v418] DateTrendChart — courbe mensuelle au-dessus du filtre par date.
   Animation : area fade-in + line stroke-dash draw + dots stagger entree.
============================================================================= */
.onas-date-trend {
  margin: 8px 8px 0 8px;
  padding: 10px 6px 6px 6px;
  background: transparent;
  border: none;
  border-radius: 0;
  animation: onasTrendIn 360ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  position: relative;
}
.onas-date-trend-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  gap: 8px;
}
.onas-date-trend-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.55);
}
.onas-date-trend-total {
  font-size: 10px;
  font-weight: 700;
  color: #FED7AA;
  font-variant-numeric: tabular-nums;
}
.onas-date-trend-svg {
  display: block;
  width: 100%;
  height: 56px;
  overflow: visible;
}
.onas-date-trend-area {
  animation: onasTrendAreaIn 700ms ease-out 100ms both;
  transform-origin: bottom;
}
.onas-date-trend-line {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  animation: onasTrendLineDraw 1100ms cubic-bezier(0.65, 0, 0.35, 1) 150ms forwards;
}
.onas-date-trend-dot {
  opacity: 0;
  animation: onasTrendDotIn 280ms ease-out forwards;
}
.onas-date-trend-xaxis {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  padding: 0 4px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: rgba(255, 255, 255, 0.32);
  font-family: 'Inter', system-ui, sans-serif;
}
.onas-date-trend-x.is-current { color: #FED7AA; }
.onas-date-trend-x.is-hover {
  color: #ffffff;
  font-weight: 800;
  transform: scale(1.2);
  transition: transform 0.15s ease, color 0.15s ease;
}
/* [v419] Tooltip detaille au survol des points */
.onas-date-trend-tip {
  position: absolute;
  z-index: 10;
  width: 120px;
  padding: 7px 10px;
  background: rgba(6, 58, 34, 0.96);
  border: 1px solid rgba(243, 198, 74, 0.4);
  border-radius: 8px;
  color: #ffffff;
  pointer-events: none;
  box-shadow: 0 6px 18px -4px rgba(0, 0, 0, 0.5);
  font-family: 'Inter', system-ui, sans-serif;
  animation: onasTrendTipIn 180ms ease-out both;
}
.onas-date-trend-tip .tip-month {
  font-size: 9px;
  font-weight: 700;
  color: #FED7AA;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 3px;
}
.onas-date-trend-tip .tip-count {
  font-size: 13px;
  font-weight: 800;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.onas-date-trend-tip .tip-count .tip-unit {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.6);
}
.onas-date-trend-tip .tip-meta {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.55);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.onas-date-trend-tip .tip-meta .is-up   { color: #34D399; }
.onas-date-trend-tip .tip-meta .is-down { color: #FB923C; }
@keyframes onasTrendTipIn {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
/* [v425] Pulse de presence (pastille verte "en ligne" sur avatars) — leger,
   pas d'animation infinie couteuse, juste un halo qui pulse doucement. */
@keyframes onasPresencePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 184, 114, 0.4); }
  50%      { box-shadow: 0 0 0 4px rgba(46, 184, 114, 0); }
}

/* [v424] Ligne table cloturee / resolue / terminee -> fond vert clair discret.
   S'applique sur les <tr.is-closed> dans les tables Demandes + Declarations. */
table.tbl tbody tr.is-closed {
  background: rgba(16, 185, 129, 0.05);
}
table.tbl tbody tr.is-closed:hover {
  background: rgba(16, 185, 129, 0.09);
}
table.tbl tbody tr.is-closed.is-selected {
  background: rgba(243, 198, 74, 0.08);
}
/* [v421/v423] Mini sparkline dans les type cards (Demandes + Declarations) */
.onas-mini-spark-wrap { width: 100%; }
.onas-mini-spark { display: block; overflow: visible; }
.onas-mini-spark-line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: onasMiniSparkDraw 900ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
.onas-mini-spark-area {
  opacity: 0;
  animation: onasMiniSparkArea 600ms ease-out 200ms forwards;
  transform-origin: bottom;
}
.onas-mini-spark-xaxis {
  display: flex;
  justify-content: space-between;
  padding: 2px 1px 0 1px;
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--ink-3);
  font-family: 'Inter', system-ui, sans-serif;
  line-height: 1;
}
.onas-mini-spark-x {
  opacity: 0.45;
  transition: opacity 0.2s, color 0.2s;
}
.onas-mini-spark-x.has-data { opacity: 0.8; }
.onas-mini-spark-x.is-current {
  opacity: 1;
  font-weight: 800;
}
@keyframes onasMiniSparkDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes onasMiniSparkArea {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}
@keyframes onasTrendIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes onasTrendAreaIn {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}
@keyframes onasTrendLineDraw {
  to { stroke-dashoffset: 0; }
}
@keyframes onasTrendDotIn {
  from { opacity: 0; transform: scale(0.3); }
  to   { opacity: 1; transform: scale(1); }
}

/* [v413] Toggle Filtre par date — fond orange degrade anime + UX filtre actif */
.onas-date-tree-toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 10px;
  background: linear-gradient(115deg, #f3c64a 0%, #f06b3d 35%, #c89e2c 70%, #f3c64a 100%);
  background-size: 200% 100%;
  animation: onasDateTreeGradient 6s ease-in-out infinite;
  border: 1px solid rgba(243, 198, 74, 0.55);
  border-radius: 8px;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 6px -2px rgba(243, 198, 74, 0.35);
  overflow: hidden;
}
.onas-date-tree-toggle::before {
  /* halo blanc subtil qui glisse sur le bouton */
  content: '';
  position: absolute;
  top: 0; left: -40%;
  width: 35%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.18) 50%, transparent 100%);
  animation: onasDateTreeShine 4.5s ease-in-out infinite;
  pointer-events: none;
}
.onas-date-tree-toggle:hover {
  box-shadow: 0 3px 10px -2px rgba(243, 198, 74, 0.5);
  transform: translateY(-1px);
  transition: transform 0.15s, box-shadow 0.15s;
}
.onas-date-tree-toggle-left {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  z-index: 1;
}
.onas-date-tree-toggle .caret {
  display: inline-flex;
  align-items: center;
  opacity: 0.85;
  transition: transform 0.2s;
  z-index: 1;
}
.onas-date-tree-toggle.is-open .caret {
  transform: rotate(180deg);
}
.onas-date-tree-toggle .badge {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: none;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.onas-date-tree-clear-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  z-index: 1;
}
.onas-date-tree-clear-x:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: scale(1.1) rotate(90deg);
}
@keyframes onasDateTreeGradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
@keyframes onasDateTreeShine {
  0%   { left: -40%; }
  60%  { left: 110%; }
  100% { left: 110%; }
}
.onas-date-tree {
  margin-top: 6px;
  max-height: 38vh;
  overflow-y: auto;
  padding: 4px 2px 4px 4px;
  animation: onasMenuSlideIn 220ms ease both;
}
.onas-date-tree::-webkit-scrollbar { width: 5px; }
.onas-date-tree::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 999px; }
.onas-date-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 8px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  border-radius: 6px;
  user-select: none;
  transition: background 0.1s;
}
.onas-date-tree-node:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}
.onas-date-tree-node.is-active {
  background: rgba(243, 198, 74, 0.22);
  color: #FED7AA;
  font-weight: 700;
}
.onas-date-tree-node .lbl { display: inline-flex; align-items: center; gap: 6px; }
.onas-date-tree-node .lbl .chev { font-size: 8px; opacity: 0.6; transition: transform 0.15s; }
.onas-date-tree-node.is-open .lbl .chev { transform: rotate(90deg); }
.onas-date-tree-node .cnt {
  font-size: 9px;
  background: rgba(255, 255, 255, 0.1);
  padding: 1px 5px;
  border-radius: 999px;
  font-weight: 700;
}
.onas-date-tree-node.depth-1 { padding-left: 18px; }
.onas-date-tree-node.depth-2 { padding-left: 32px; font-size: 10px; }