/* ============================================================
   AQUILON — style.css
   Styles personnalisés, animations et composants visuels
   Charte Graphique : Divine Blue
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   VARIABLES CSS — SOURCE UNIQUE DE VÉRITÉ
   ─────────────────────────────────────────────────────────────
   Ces variables sont les SEULES sources de couleur d'accent.
   Aucune couleur codée en dur ne doit exister ailleurs dans le
   projet pour les états primaires, secondaires et d'alerte.

   Bleu Abysse    : #1E293B  — titres, labels, fonds foncés
   Bleu Étincelle : #1979B2  — accents, icônes actives, gradients
   Rouge Danger   : #df4454  — alertes, OUVERT, déconnexion, erreurs
══════════════════════════════════════════════════════════════ */
:root {
  /* ── Dimensions layout ── */
  --nav-width:          76px;
  --topbar-height:      64px;
  --panel-right-width:  340px;

  /* ── Palette AQUILON (source unique) ── */
  --color-deep:         #1E293B;   /* Bleu Abysse */
  --color-spark:        #1979B2;   /* Bleu Étincelle */
  --color-alert:        #df4454;   /* Rouge Danger — remplace l'ancien Bronze Doré */
  --color-bg-dark:      #121212;

  /* ── Aliases sémantiques (pointent vers la palette) ── */
  --primary-deep:       var(--color-deep);
  --primary-light:      var(--color-spark);
  --bg-dark:            var(--color-bg-dark);
  --text-divine:        #F0FDFF;

  --color-primary:      var(--color-deep);
  --color-accent:       var(--color-spark);
  --color-danger:       var(--color-alert);
  --color-disconnected: var(--color-alert);
  --color-success:      var(--color-spark);
  --color-warning:      var(--color-alert);
  --color-dark:         var(--color-bg-dark);
  --color-sidebar:      #1E293B;
  --transition:         0.25s ease;

  /* ── Alias principal (pour composants autonomes) ── */
  --primary-blue:       var(--color-spark);   /* #1979B2 — Ocean Blue */

  /* ── Apple HIG palette ── */
  --bg-app:             #F5F5F7;              /* Fond système Apple */
  --text-label:         #86868B;              /* Labels / méta Apple */
  --text-value:         #1D1D1F;              /* Valeurs / corps Apple */

  /* ── Transition premium cubic-bezier ── */
  --transition:         0.25s cubic-bezier(0.25, 0.8, 0.25, 1);

  /* ── Glassmorphism Apple ── */
  --glass-bg:           rgba(255, 255, 255, 0.90);
  --glass-blur:         blur(20px) saturate(120%);
  --glass-border:       1px solid rgba(255, 255, 255, 0.6);
  --shadow-card:        0 4px 20px rgba(0, 0, 0, 0.06);
  --shadow-hover:       0 10px 32px rgba(0, 0, 0, 0.10);

  /* ════════════════════════════════════════════════════════════
     MATRICE COGNITIVE HSE — Module Sentinelle
     Source unique de vérité pour TOUS les états de risque.
     ════════════════════════════════════════════════════════════ */
  --status-safe:        #23C0E8;  /* Cyan Pur      — SÉCURISÉ              */
  --status-info:        #1979B2;  /* Bleu Océan    — INTERVENTION          */
  --status-warn:        #1979B2;  /* Bleu Océan    — INTERVENTION (alias)  */
  --status-critical:    #1E293B;  /* Ardoise Nuit  — INTRUSION             */
  --status-danger:      #df4454;  /* Rouge Danger  — ALERTE GAZ (chimique) */

  /* Glassmorphism HSE popup (légèrement plus opaque que les cartes) */
  --popup-glass:        rgba(255, 255, 255, 0.85);
  --popup-blur:         blur(20px) saturate(110%);
  --popup-radius:       12px;
  --popup-shadow:       0 8px 32px rgba(0, 0, 0, 0.08);
}

.font-exo { font-family: 'Exo 2', sans-serif; font-weight: 800; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  background-color: var(--bg-app);
}

/* Modal Wrapper générique */
.modal-wrapper {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(15,23,42,0.6); backdrop-filter: blur(3px);
  display: none; align-items: center; justify-content: center;
}
.modal-wrapper.open { display: flex; }
.modal-box { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,0.12); border: var(--glass-border); overflow: hidden; animation: modalIn 0.2s ease; }
@keyframes modalIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.popup-action-btn.copy-btn { background: #f1f5f9; color: #475569; margin-left: 5px; }
.popup-action-btn.copy-btn:hover { background: #e2e8f0; color: #1E293B; }

/* ── Boutons de mode de transport (Voiture / Marche) ─────────── */
.mode-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 6px;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
  background: #f8fafc;
  border: 2px solid rgba(25,121,178,0.15);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--transition);
  line-height: 1.3;
}
.mode-btn i { font-size: 15px; }
.mode-btn:hover {
  background: rgba(25,121,178,0.07);
  border-color: rgba(25,121,178,0.35);
  color: var(--primary-blue);
}
.mode-btn.active {
  background-color: var(--primary-blue);
  color: #ffffff;
  border: 2px solid var(--primary-blue);
  box-shadow: 0 3px 10px rgba(25,121,178,0.35);
}
.mode-btn.active i { color: #ffffff; }

/* ══════════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL
══════════════════════════════════════════════════════════════ */

#app {
  display: grid;
  grid-template-areas:
    "sidebar topbar"
    "sidebar main";
  grid-template-columns: var(--nav-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  height: 100vh;
  width: 100vw;
}

#main-area {
  grid-area: main;
  position: relative;
  overflow: hidden;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 1;
  /* Note : contain:layout et will-change:transform ont été retirés —
     ils étaient hérités de la phase MapLibre/WebGL et peuvent interférer
     avec le rendu des tuiles <img> de Leaflet sur certains navigateurs. */
}

/* ── Barre latérale gauche — Glassmorphism ──────────────────── */
#sidebar {
  grid-area: sidebar;
  background: rgba(248, 250, 252, 0.95);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  gap: 4px;
  z-index: 100;
  border-right: 1px solid rgba(25, 121, 178, 0.10);
  box-shadow: 2px 0 20px rgba(25, 121, 178, 0.06);
}

#sidebar .logo {
  width: 38px;
  height: 38px;
  background: var(--color-primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  flex-shrink: 0;
}

#sidebar .logo i { color: #fff; font-size: 18px; }

.nav-btn {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: #002B5B;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background var(--transition), color var(--transition);
  position: relative;
  flex-shrink: 0;
}

.nav-btn i { font-size: 22px; line-height: 1; }
.nav-btn span { font-size: 9px; font-weight: 600; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; }

.nav-btn:hover {
  background: rgba(0, 43, 91, 0.07);
  color: #002B5B;
}

.nav-btn.active {
  background: linear-gradient(135deg, rgba(0,43,91,0.10) 0%, rgba(25,121,178,0.08) 100%);
  box-shadow: inset 4px 0 0 #002B5B;
  color: #002B5B;
}

.nav-btn .badge {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 16px;
  height: 16px;
  background: var(--color-danger);
  border-radius: 99px;
  font-size: 9px;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.nav-btn .badge.hidden { display: none; }

#sidebar .spacer { flex: 1; }

/* ─── Mode Simulation — Toggle Sidebar ───────────────────────── */
.sim-mode-btn {
  color: #64748b;
  border-top: 1px solid rgba(25, 121, 178, 0.10);
  margin-top: 6px;
  padding-top: 6px;
  position: relative;
}

/* Quand actif : reprend exactement le style .nav-btn.active
   (surbrillance bleue + barre gauche), géré par la classe `.active`
   déjà définie sur .nav-btn.active — aucun override nécessaire.
   .sim-active sert uniquement à rendre le point pulsant visible. */

/* Point d'activité — visible uniquement quand .sim-active est présent */
.sim-dot {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #df4454;
  box-shadow: 0 0 6px rgba(223, 68, 84, 0.75);
  animation: sim-pulse 1.4s ease-in-out infinite;
}

.sim-active .sim-dot { display: block; }

@keyframes sim-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);    }
  50%       { opacity: 0.35; transform: scale(0.7); }
}

/* ── Top Bar — Glassmorphism ────────────────────────────────── */
#topbar {
  grid-area: topbar;
  background: rgba(248, 250, 252, 0.95);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  gap: 12px;
  border-bottom: 1px solid rgba(25, 121, 178, 0.10);
  z-index: 10000 !important; /* Au-dessus de Leaflet et de map-toolbar */
  box-shadow: 0 2px 20px rgba(25, 121, 178, 0.06);
  position: relative;
}

#topbar .brand {
  font-size: 17px;
  font-weight: 800;
  color: #1E293B;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Logo Squircle Premium (Windows 11 style) ──────────────── */
.app-logo-container {
  width: 40px;
  height: 40px;
  border-radius: 22%;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(25, 121, 178, 0.12);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(25, 121, 178, 0.08);
}
.app-logo-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#topbar .brand span.accent { color: var(--color-primary); }
#topbar .spacer { flex: 1; }

/* ── Brand block — nom + copyright ── */
.brand-text-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1;
}
.brand-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: #1E293B;
  white-space: nowrap;
}
.brand-name span {
  color: #1979B2;
}
.brand-copyright {
  font-size: 7px;
  font-weight: 500;
  color: #94a3b8;
  letter-spacing: 0.04em;
  margin-top: 3px;
  white-space: nowrap;
}

/* ── Tagline parfaitement centrée dans la topbar ────────────────────────────
   Approche position:absolute → le texte est toujours au centre optique exact
   du topbar, indépendamment des largeurs asymétriques des blocs gauche/droite.
   pointer-events:none → ne bloque aucun clic sur les boutons en dessous.
   z-index:0 → reste sous les éléments interactifs (cloche, bouton Nouveau site).
────────────────────────────────────────────────────────────────────────────── */
.topbar-tagline-center {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  /* Typographie Galtek */
  font-family: 'Exo 2', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #1979B2;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 220px; /* marge de sécurité pour ne pas chevaucher logo/boutons */
}

/* Le spacer reprend son rôle pour pousser la cloche et le bouton à droite */
#topbar .spacer {
  display: block;
  flex: 1;
}

#mqtt-status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: background var(--transition), color var(--transition);
  border: 1.5px solid transparent;
}

#mqtt-status-badge.connected {
  background: rgba(25,121,178,0.12);
  color: var(--primary-light);
  border-color: rgba(223, 68, 84, 0.55);           /* bordure rouge signature #df4454 */
  box-shadow: 0 0 10px rgba(223, 68, 84, 0.55);   /* halo rouge signature #df4454    */
}

#mqtt-status-badge.connecting {
  background: rgba(25, 121, 178, 0.08);
  color: var(--primary-light);
  border-color: rgba(25, 121, 178, 0.25);
  animation: pulseBadge 1.4s ease-in-out infinite;
}

@keyframes pulseBadge {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

#mqtt-status-badge.disconnected {
  background: rgba(100, 116, 139, 0.10);
  color: #64748b;
  border-color: rgba(100, 116, 139, 0.28);
  box-shadow: none;
}

#mqtt-status-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

#mqtt-status-badge.connected .dot {
  background: #df4454;              /* rouge signature — override currentColor */
  animation: pulse-dot 1.8s infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.7); }
}

.btn-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(180deg, #1A85C2 0%, #1979B2 100%);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(25,121,178,0.30);
}

.btn-primary:hover {
  background: linear-gradient(180deg, #2291d0 0%, #1A85C2 100%);
  box-shadow: 0 6px 20px rgba(25,121,178,0.40);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════
   POPUP ALTIMÈTRE — Compact AQUILON premium
   ═══════════════════════════════════════════════════════════════ */
.aq-elevation-popup .leaflet-popup-content-wrapper {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(10, 25, 49, 0.15);
  border-radius: 10px !important;
  box-shadow:
    0 6px 20px rgba(15, 23, 42, 0.18),
    0 2px 6px  rgba(25, 121, 178, 0.10);
}
.aq-elevation-popup .leaflet-popup-tip {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.aq-elevation-popup .leaflet-popup-content {
  font-size: 14px !important;
  font-weight: 600;
  font-family: sans-serif;
  color: #0A1931;
  margin: 10px 15px !important;
}

/* ═══════════════════════════════════════════════════════════════
   CURSEUR PLAN DE COUPE — crosshair quand l'outil est actif
   ═══════════════════════════════════════════════════════════════ */
.aq-profile-active,
.aq-profile-active .leaflet-grab,
.aq-profile-active .leaflet-interactive {
  cursor: crosshair !important;
}

/* ═══════════════════════════════════════════════════════════════
   PANNEAU GRAPHIQUE PLAN DE COUPE — Glassmorphism AQUILON
   ═══════════════════════════════════════════════════════════════ */
#aq-chart-panel {
  position: absolute;
  bottom: 90px;                   /* au-dessus de la barre AQUILOT (50 + marge) */
  left: 50%;
  transform: translateX(-50%);
  width: min(680px, calc(100vw - 40px));
  height: 240px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(10, 25, 49, 0.12);
  border-radius: 14px;
  z-index: 1000;
  padding: 10px 14px 8px;
  box-shadow:
    0 14px 40px rgba(15, 23, 42, 0.20),
    0 3px 10px  rgba(25, 121, 178, 0.10);
  display: flex;
  flex-direction: column;
  /* Animation supprimée — apparition instantanée (anti-slide demandé) */
}

#aq-chart-panel.aq-chart-hidden { display: none; }
#aq-chart-panel.aq-chart-no-anim { animation: none !important; }

@keyframes aqChartIn {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0);   }
}

.aq-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  flex-shrink: 0;
  cursor: grab;
  user-select: none;
}
.aq-chart-head.aq-dragging { cursor: grabbing; }
.aq-chart-head .aq-chart-close { cursor: pointer; }   /* le bouton X garde son curseur */
.aq-chart-head h4 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #0A1931;
  letter-spacing: 0.04em;
}
.aq-chart-head h4 i { color: #1979B2; font-size: 13px; }

.aq-chart-close {
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #64748b;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.aq-chart-close:hover { background: rgba(223, 68, 84, 0.10); color: #df4454; }

.aq-chart-body {
  flex: 1;
  min-height: 0;
  position: relative;
}
.aq-chart-body canvas { max-width: 100%; }

.aq-chart-meta {
  flex-shrink: 0;
  font-size: 10px;
  color: #475569;
  text-align: center;
  margin-top: 4px;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.04em;
}
.aq-chart-meta strong { color: #0A1931; font-weight: 700; }
.aq-chart-meta .meta-sep { color: rgba(10, 25, 49, 0.30); margin: 0 8px; }
.aq-chart-meta .meta-slope { color: #0A1931; font-weight: 600; }
.aq-chart-meta .meta-slope i { color: #1979B2; margin-right: 3px; }

/* ═══════════════════════════════════════════════════════════════
   TOOLTIP MESURE (outil règle — distance permanente sur la ligne)
   ═══════════════════════════════════════════════════════════════ */
.measure-tooltip {
  background: #1E293B;
  border: 2px solid #1979B2;
  border-radius: 16px;
  color: #f0fdff;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}
.measure-tooltip::before { display: none; }   /* masque la flèche par défaut */

/* ═══════════════════════════════════════════════════════════════
   SIDEBAR LÉGENDE — partage la même mise en page que #aq-layer-popup
   (mutuellement exclusifs : un seul panneau visible à la fois)
   ═══════════════════════════════════════════════════════════════ */
#aq-legend-popup {
  position: fixed;
  top: 0;
  right: -280px;                /* Cachée hors écran par défaut */
  height: 100vh;
  width: 280px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-left: 1px solid rgba(25, 121, 178, 0.12);
  border-radius: 0;
  box-shadow: -6px 0 32px rgba(15, 23, 42, 0.16);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: right 0.3s ease;
}

/* Visible quand .open est ajouté */
#aq-legend-popup.open { right: 0; }

/* Sections de légende (dans le body) */
.aq-legend-section {
  padding: 12px 4px;
  border-bottom: 1px solid rgba(10, 25, 49, 0.08);
}
.aq-legend-section:last-child { border-bottom: none; }

.aq-legend-section-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #1979B2;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.aq-legend-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 13px;
  color: #475569;
  line-height: 1.5;
}
.aq-legend-row strong { color: #0A1931; font-weight: 700; }

/* ── Légende OSM enrichie (style officiel openstreetmap.org/key) ── */
.aq-osm-legend {
  font-size: 13px;
  line-height: 1.5;
  color: #334155;
}

/* ════════════════════════════════════════════════════════════
   LÉGENDE OFFICIELLE OSM — Table + SVG intégrés (0 image externe)
   ════════════════════════════════════════════════════════════ */

/* Conteneur scrollable de la légende */
.aq-legend-content {
  padding: 10px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.aq-legend-content::-webkit-scrollbar       { width: 5px; }
.aq-legend-content::-webkit-scrollbar-thumb { background: rgba(25, 121, 178, 0.30); border-radius: 3px; }

/* Table OSM officielle */
.aq-legend-table {
  width: 100%;
  font-size: 13px;
  color: #333;
  border-collapse: collapse;
}
.aq-legend-table td {
  padding: 4px 8px;
  vertical-align: middle;
}
.aq-legend-table td:first-child {
  width: 60px;
  text-align: center;
}
.aq-legend-table svg { display: block; margin: 0 auto; }

/* Titre de section OSM officiel */
.aq-legend-title {
  font-weight: bold;
  color: #0A1931;
  margin-top: 15px;
  margin-bottom: 5px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #eee;
  padding-bottom: 4px;
}
.aq-legend-title:first-child { margin-top: 4px; }

/* Lien externe */
.aq-osm-legend-link {
  color: #0A1931;
  text-decoration: none;
  font-size: 12px;
  font-weight: bold;
  display: block;
  text-align: center;
  margin-top: 15px;
}
.aq-osm-legend-link:hover { text-decoration: underline; }

/* Légende satellite */
.aq-legend-satellite-note {
  color: #64748b;
  font-size: 12px;
  font-style: italic;
  padding: 16px 10px;
  text-align: center;
  line-height: 1.6;
}

/* Légende WMS — images GetLegendGraphic */
.aq-legend-wms-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #1979B2;
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(25, 121, 178, 0.15);
}
.aq-legend-wms-img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 8px;
  border: 1px solid rgba(0,0,0,0.08);
}


/* ── Symboles de lignes (Routes) ── */
.aq-osm-legend .line {
  width: 36px;
  flex-shrink: 0;
  display: inline-block;
}
.aq-osm-legend .line.autoroute {
  background: #e892a2;
  border-top: 1px solid #c24e6b;
  border-bottom: 1px solid #c24e6b;
  height: 8px;
  border-radius: 2px;
}
.aq-osm-legend .line.principale {
  background: #f9b96e;
  border-top: 1px solid #d4874a;
  border-bottom: 1px solid #d4874a;
  height: 6px;
  border-radius: 2px;
}
.aq-osm-legend .line.secondaire {
  background: #f6e56b;
  border-top: 1px solid #c9b93a;
  border-bottom: 1px solid #c9b93a;
  height: 5px;
  border-radius: 2px;
}
.aq-osm-legend .line.cyclable {
  border-top: 3px dashed #3b82f6;
  background: transparent;
  height: 3px;
}
.aq-osm-legend .line.fer {
  background: repeating-linear-gradient(
    90deg, #555 0px, #555 6px, transparent 6px, transparent 10px
  );
  border-top: 2px solid #555;
  height: 4px;
}
.aq-osm-legend .line.metro {
  background: #374151;
  height: 5px;
  border-radius: 2px;
}

/* ── Symboles carré (Zones/Nature) ── */
.aq-osm-legend .swatch {
  width: 24px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.12);
  display: inline-block;
}
.aq-osm-legend .swatch.foret    { background: #2d6a4f; }
.aq-osm-legend .swatch.parc     { background: #95d5b2; border-color: #52b788; }
.aq-osm-legend .swatch.eau      { background: #a8d8ea; border-color: #6baed6; }
.aq-osm-legend .swatch.batiment { background: #d1d5db; border-color: #9ca3af; }
.aq-osm-legend .swatch.industrie { background: #ddd6fe; border-color: #a78bfa; }

/* ── Symboles icône (Transports ponctuels) ── */
.aq-osm-legend .leg-icon {
  width: 24px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.aq-osm-legend .leg-icon.bus    { color: #2563eb; }
.aq-osm-legend .leg-icon.train  { color: #374151; }

/* Carré arrêt de bus */
.aq-osm-legend .bus-stop {
  width: 14px;
  height: 14px;
  background: #2563eb;
  border-radius: 3px;
  flex-shrink: 0;
}

.aq-osm-legend-link {
  color: #1979B2;
  text-decoration: none;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-weight: 600;
}
.aq-osm-legend-link:hover { text-decoration: underline; color: #0A1931; }

/* ── Tooltip LIVE pendant le dessin (suit le curseur) ──
   Variante du tooltip de mesure avec un contour plus marqué pour
   indiquer un état "en cours" (vs un dessin déjà fixé).            */
.measure-tooltip.aq-live-tip {
  background: rgba(10, 25, 49, 0.95);
  border: 2px solid #df4454;
  box-shadow: 0 4px 14px rgba(223, 68, 84, 0.40);
  pointer-events: none;
  white-space: nowrap;
}
.measure-tooltip.aq-live-tip small {
  font-weight: 500;
  margin-left: 6px;
  font-size: 10px;
}

/* ─── Masquage TOTAL du tooltip natif Leaflet.Draw ───
   Le composant L.Draw affiche "Click to draw a polyline / polygon" en
   haut à gauche pendant l'activation d'un outil. Ce message est
   redondant avec nos toasts AQUILON et nuit à la lisibilité.          */
.leaflet-draw-tooltip,
.leaflet-draw-tooltip-single,
.leaflet-draw-tooltip-subtext {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   COUCHE LIGNES DE NIVEAU IGN — rendu naturel (sans filtre)
   Le filtre magenta a été retiré : les utilisateurs cherchant un
   relief vraiment lisible disposent désormais du fond OpenTopoMap
   qui possède des courbes de niveau natives bien plus exploitables.
   ═══════════════════════════════════════════════════════════════ */
.contour-lines-layer {
  /* aucun filtre — couleur d'origine IGN */
}

/* ═══════════════════════════════════════════════════════════════
   AQUILOT — Barre de commande style AutoCAD (en bas)
   Pilule flottante centrée horizontalement, ancrée près du bas.
   Glassmorphism bleu abyssal, prompt à gauche, input central, bouton.
   ═══════════════════════════════════════════════════════════════ */
#aq-command-bar {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  /* 100% = largeur de #main-area (hors sidebar) → centrage optique parfait */
  width: min(720px, calc(100% - 60px));
  height: 50px;
  z-index: 1000;
  background: rgba(10, 25, 49, 0.88);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  border: 1px solid rgba(56, 189, 248, 0.28);
  border-radius: 14px;
  box-shadow:
    0 12px 32px rgba(15, 23, 42, 0.40),
    0 2px  6px  rgba(56, 189, 248, 0.10);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #e2e8f0;
  user-select: none;
  /* ── Mode veille : transparence automatique quand non sollicité ── */
  opacity: 0.28;
  transition: opacity    0.40s cubic-bezier(0.4, 0, 0.2, 1),
              width      0.35s cubic-bezier(0.4, 0, 0.2, 1),
              padding    0.35s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.30s ease,
              border-color 0.30s ease;
}
/* Plein opaque dès qu'on survole ou qu'on focus l'input / les boutons */
#aq-command-bar:hover,
#aq-command-bar:focus-within {
  opacity: 1;
  border-color: rgba(56, 189, 248, 0.55);
  box-shadow:
    0 12px 40px rgba(15, 23, 42, 0.55),
    0 0   18px  rgba(56, 189, 248, 0.15),
    0 2px  6px  rgba(56, 189, 248, 0.18);
}

/* ── Corps rétractable (input + mic + send) ── */
#aq-cp-body {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 10px;
  overflow: hidden;
  transition: max-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity    0.25s ease;
  max-width: 700px;
  opacity: 1;
}

/* ── État rétracté ── */
#aq-command-bar.aq-cp-collapsed {
  width: auto;
  min-width: 0;
  padding: 0 14px;
  gap: 10px;
}
#aq-command-bar.aq-cp-collapsed #aq-cp-body {
  max-width: 0;
  opacity: 0;
  pointer-events: none;
}

/* ── Bouton toggle réduire / déployer ── */
#aq-cp-toggle {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid rgba(56, 189, 248, 0.28);
  color: rgba(56, 189, 248, 0.70);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  user-select: none;
}
#aq-cp-toggle:hover {
  background: rgba(56, 189, 248, 0.16);
  border-color: #38bdf8;
  color: #38bdf8;
}
#aq-cp-toggle:active { transform: scale(0.92); }

#aq-cp-prompt {
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #38bdf8;
  font-size: 12px;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.30);
}

/* État "Analyse spatiale en cours…" — placeholder grisé italique animé */
#aq-cp-input.aq-cp-analyzing::placeholder {
  color: rgba(148, 163, 184, 0.55);
  font-style: italic;
  animation: aqCpAnalyzing 1.4s ease-in-out infinite;
}
@keyframes aqCpAnalyzing {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}

#aq-cp-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 14px;
  font-family: inherit;
  caret-color: #38bdf8;
  padding: 0;
}

#aq-cp-input::placeholder {
  color: rgba(255, 255, 255, 0.36);
  font-style: italic;
  font-family: inherit;
}

#aq-cp-send {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(56, 189, 248, 0.18);
  border: 1px solid rgba(56, 189, 248, 0.40);
  color: #ffffff;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.10s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#aq-cp-send:hover    { background: rgba(56, 189, 248, 0.32); border-color: #38bdf8; }
#aq-cp-send:active   { transform: scale(0.94); }
#aq-cp-send:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── Bouton micro (commande vocale Web Speech API) ── */
#aq-cp-mic {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.10s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

#aq-cp-mic:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.30);
  color: #ffffff;
}
#aq-cp-mic:active   { transform: scale(0.94); }
#aq-cp-mic:disabled { opacity: 0.30; cursor: not-allowed; }

/* État écoute : pulsation rouge douce */
#aq-cp-mic.aq-cp-mic-listening {
  background: rgba(223, 68, 84, 0.22);
  border-color: #df4454;
  color: #ffffff;
  animation: aqMicPulse 1.2s ease-in-out infinite;
}

@keyframes aqMicPulse {
  0%, 100% {
    box-shadow: 0 0 0 0   rgba(223, 68, 84, 0.55),
                inset 0 0 0 0 rgba(223, 68, 84, 0);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(223, 68, 84, 0),
                inset 0 0 0 1px rgba(223, 68, 84, 0.40);
  }
}

/* ── AQUILOT : état "IA en cours de réflexion" ──────────────────────────
   La classe .aq-bar-thinking est posée sur #aq-command-bar par JS
   pendant le fetch Groq. Glow bleu électrique + opacité pleine.      ── */
#aq-command-bar.aq-bar-thinking {
  opacity: 1 !important;
  border-color: rgba(56, 189, 248, 0.70) !important;
  animation: aqBarThink 1.8s ease-in-out infinite;
}
@keyframes aqBarThink {
  0%, 100% { box-shadow: 0 12px 32px rgba(15,23,42,.45), 0 0 0   rgba(56,189,248,0); }
  50%       { box-shadow: 0 12px 40px rgba(15,23,42,.55), 0 0 22px rgba(56,189,248,.22); }
}

/* ── Toast élargi : RAPPORT AQUILON (briefing) ── */
.aq-cp-toast-briefing {
  background: rgba(10, 25, 49, 0.95);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow:
    0 16px 40px rgba(15, 23, 42, 0.50),
    0 4px 12px  rgba(56, 189, 248, 0.18);
  width: 100%;
  max-width: 720px;
  padding: 14px 18px;
  align-items: stretch;
  flex-direction: column;
  gap: 8px;
}

.aq-cp-toast-briefing .aq-cp-briefing-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: #38bdf8;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(56, 189, 248, 0.22);
  padding-bottom: 8px;
}
.aq-cp-toast-briefing .aq-cp-briefing-head i { color: #38bdf8; font-size: 15px; }

.aq-cp-toast-briefing .aq-cp-briefing-body {
  font-size: 13px;
  line-height: 1.6;
  color: #e2e8f0;
}

.aq-cp-toast-briefing .aq-cp-briefing-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 4px;
}

.aq-cp-toast-briefing .aq-cp-stat {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.aq-cp-toast-briefing .aq-cp-stat-value {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  font-family: ui-monospace, monospace;
}
.aq-cp-toast-briefing .aq-cp-stat-label {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
}
.aq-cp-toast-briefing .aq-cp-stat.aq-cp-stat-danger  { border-color: rgba(223, 68, 84, 0.45); }
.aq-cp-toast-briefing .aq-cp-stat.aq-cp-stat-danger  .aq-cp-stat-value  { color: #ff8a99; }
.aq-cp-toast-briefing .aq-cp-stat.aq-cp-stat-warn    { border-color: rgba(251, 146, 60, 0.40); }
.aq-cp-toast-briefing .aq-cp-stat.aq-cp-stat-warn    .aq-cp-stat-value  { color: #fbbf24; }
.aq-cp-toast-briefing .aq-cp-stat.aq-cp-stat-success { border-color: rgba(56, 189, 248, 0.40); }
.aq-cp-toast-briefing .aq-cp-stat.aq-cp-stat-success .aq-cp-stat-value  { color: #93e8ff; }

/* ── Zone toasts (réponses IA éphémères, juste au-dessus de la barre) ──
   Centrée horizontalement pour rester alignée avec la barre flottante. */
#aq-cp-feedback {
  position: absolute;
  bottom: 80px;                       /* au-dessus de la barre (50px + 18px de gap + marge) */
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 1050;
  display: flex;
  flex-direction: column-reverse;     /* dernier message visible en bas */
  gap: 8px;
  align-items: center;
  pointer-events: none;
  width: min(720px, calc(100vw - 60px));
}

.aq-cp-toast {
  background: rgba(10, 25, 49, 0.92);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid rgba(56, 189, 248, 0.30);
  color: #e2e8f0;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.40);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  animation: aqToastIn 0.30s cubic-bezier(.22, .84, .25, 1.04);
  max-width: 100%;
}

.aq-cp-toast.aq-cp-toast-leaving {
  animation: aqToastOut 0.40s ease forwards;
}

@keyframes aqToastIn {
  from { opacity: 0; transform: translateY(10px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes aqToastOut {
  to { opacity: 0; transform: translateY(8px) scale(0.97); }
}

.aq-cp-toast i { font-size: 16px; flex-shrink: 0; }
.aq-cp-toast strong { color: #ffffff; font-weight: 700; }
.aq-cp-toast code   {
  background: rgba(56, 189, 248, 0.18);
  color: #93e8ff;
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}

.aq-cp-toast-user     { background: rgba(15, 23, 42, 0.85); border-color: rgba(255,255,255,0.10); }
.aq-cp-toast-user i   { color: #94a3b8; }

.aq-cp-toast-thinking { background: rgba(10, 25, 49, 0.85); border-color: rgba(56, 189, 248, 0.40); }
.aq-cp-toast-thinking i { color: #38bdf8; }

.aq-cp-toast-success  { border-color: rgba(56, 189, 248, 0.45); }
.aq-cp-toast-success i { color: #38bdf8; }

/* Charte AQUILON stricte : les warnings utilisent le Rouge officiel #df4454.
   L'ancien orange Tailwind a été retiré (cohérence visuelle B2B Souveraine). */
.aq-cp-toast-warn     { border-color: rgba(223, 68, 84, 0.45); background: rgba(40, 12, 18, 0.92); }
.aq-cp-toast-warn i   { color: #df4454; }

.aq-cp-toast-error    { border-color: rgba(223, 68, 84, 0.50); background: rgba(40, 12, 18, 0.92); }
.aq-cp-toast-error i  { color: #df4454; }

/* ══════════════════════════════════════════════════════════════
   Toast INTERACTIF — suggestions Levenshtein, désambiguïsation IA
   Boutons cyan industriels alignés sous le message principal.
══════════════════════════════════════════════════════════════ */
.aq-cp-toast.aq-cp-toast-actionable {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 12px 16px 10px;
}
.aq-cp-toast .aq-cp-toast-msg {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.aq-cp-toast .aq-cp-toast-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.aq-cp-toast-action-btn {
  font: 600 12px/1 'Inter', system-ui, sans-serif;
  color: #93e8ff;
  background: rgba(56, 189, 248, 0.10);
  border: 1px solid rgba(56, 189, 248, 0.35);
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.10s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}
.aq-cp-toast-action-btn i { font-size: 11px; color: #38bdf8; }
.aq-cp-toast-action-btn:hover {
  background: rgba(56, 189, 248, 0.22);
  border-color: rgba(56, 189, 248, 0.60);
}
.aq-cp-toast-action-btn:active {
  transform: scale(0.97);
}
.aq-cp-toast-action-btn.is-primary {
  background: rgba(56, 189, 248, 0.25);
  border-color: rgba(56, 189, 248, 0.65);
  color: #ffffff;
}
.aq-cp-toast-action-btn.is-primary i { color: #93e8ff; }
.aq-cp-toast-action-btn.is-primary:hover {
  background: rgba(56, 189, 248, 0.40);
}

/* ── Indicateur "AQUILON réfléchit" — 3 points qui sautent ── */
.aq-typing {
  display: inline-flex;
  gap: 4px;
  padding: 2px 0;
}
.aq-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #38bdf8;
  animation: aqTyping 1.2s infinite ease-in-out;
}
.aq-typing span:nth-child(2) { animation-delay: 0.2s; }
.aq-typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes aqTyping {
  0%, 60%, 100% { transform: translateY(0);   opacity: 0.4; }
  30%           { transform: translateY(-4px); opacity: 1;  }
}

/* ═══════════════════════════════════════════════════════════════
   AQUILON BARRE D'OUTILS VERTICALE (style OSM officiel)
   Position : top-right de la carte. Glassmorphism cohérent.
   Comporte : Zoom+, Zoom-, Localiser, Couches, Légende, Capture.
   ═══════════════════════════════════════════════════════════════ */
#aq-vertical-toolbar {
  position: fixed;
  top: 80px;                    /* Position OSM officielle */
  right: 15px;
  z-index: 1200;                /* au-dessus des sidebars (z-index 1001) */
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 12px;
  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.14),
    0 2px 6px  rgba(25, 121, 178, 0.08);
  /* Effet PUSH OSM : décalage via right (pas transform) */
  transition: right 0.3s ease;
}

/* EFFET PUSH — la toolbar se colle au bord gauche de la sidebar */
#aq-vertical-toolbar.pushed {
  right: calc(280px + 8px); /* largeur sidebar + léger espace */
}

.aq-tb-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(25, 121, 178, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.85);
  color: #1E293B;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.10s ease, border-color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.aq-tb-btn:hover {
  background: #ffffff;
  color: #1979B2;
  border-color: rgba(25, 121, 178, 0.45);
  box-shadow: 0 2px 10px rgba(25, 121, 178, 0.14), 0 1px 3px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.aq-tb-btn:active   { transform: scale(0.94); }
.aq-tb-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.aq-tb-btn.aq-active {
  background: linear-gradient(160deg, #1979B2 0%, #0A1931 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(10, 25, 49, 0.30);
}

.aq-tb-divider {
  height: 1px;
  background: rgba(10, 25, 49, 0.12);
  margin: 2px 4px;
}

/* Pulsation rouge DOUCE sur le bouton "Localiser" pendant la recherche GPS */
.aq-tb-btn.aq-tb-locating {
  color: #df4454;
  border-color: rgba(223, 68, 84, 0.40);
  animation: aqLocatePulse 2.2s ease-in-out infinite;
}
@keyframes aqLocatePulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(223, 68, 84, 0.30); }
  50%      { box-shadow: 0 0 0 6px rgba(223, 68, 84, 0);    }
}

/* ── Marqueur GPS sur la carte — point bleu pulsant ── */
.aq-locate-marker {
  animation: aqLocatePing 2.2s ease-out infinite;
}
@keyframes aqLocatePing {
  0%   { box-shadow: 0 0 0 0   rgba(25, 121, 178, 0.55); }
  70%  { box-shadow: 0 0 0 14px rgba(25, 121, 178, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(25, 121, 178, 0);    }
}

/* ═══════════════════════════════════════════════════════════════
   POPUP COUCHES — opens to LEFT of the toolbar
   ═══════════════════════════════════════════════════════════════ */
#aq-layer-control {
  position: relative;
}

#aq-layer-btn {
  /* hérite des styles .aq-tb-btn (même classe appliquée dans le HTML) */
}

#aq-layer-btn.aq-active {
  background: linear-gradient(160deg, #1979B2 0%, #0A1931 100%);
  color: #ffffff;
  border-color: transparent;
}

/* ── SIDEBAR DES COUCHES (style OSM officiel) ──
   Ancrée à right:0, glisse SOUS la barre d'outils verticale
   (toolbar z-index:1000 > sidebar z-index:990). Padding-right
   généreux pour que le contenu reste lisible à côté de la toolbar. */
#aq-layer-popup {
  position: fixed;
  top: 0;
  right: -280px;                /* Cachée hors écran par défaut */
  height: 100vh;
  width: 280px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-left: 1px solid rgba(25, 121, 178, 0.12);
  border-radius: 0;
  box-shadow: -6px 0 32px rgba(15, 23, 42, 0.16);
  z-index: 1001;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: right 0.3s ease;
}

/* Visible quand .open est ajouté */
#aq-layer-popup.open { right: 0; }

/* Header de la sidebar */
.aq-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(10, 25, 49, 0.10);
  background: linear-gradient(160deg, rgba(238, 245, 251, 0.70) 0%, rgba(230, 240, 248, 0.70) 100%);
  flex-shrink: 0;
}
.aq-sidebar-head h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #0A1931;
  letter-spacing: 0.04em;
}
.aq-sidebar-head h3 i { color: #1979B2; font-size: 14px; }

.aq-sidebar-close {
  width: 28px;
  height: 28px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #64748b;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.aq-sidebar-close:hover { background: rgba(223, 68, 84, 0.10); color: #df4454; }

/* Les onglets ont été supprimés : la sidebar affiche un seul panneau à
   la fois, choisi par les boutons de la barre verticale. On garde la
   règle de masquage du panneau inactif.                              */
.aq-tab-panel.aq-hidden { display: none; }

/* Corps scrollable de la sidebar */
.aq-sidebar-body {
  flex: 1;                      /* prend toute la hauteur disponible */
  min-height: 0;                /* ← indispensable pour qu'overflow-y fonctionne en flex */
  overflow-y: auto;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Empilage vertical strict des vignettes & checkboxes */
#aq-basemap-group,
#aq-overlay-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.aq-sidebar-body::-webkit-scrollbar       { width: 6px; }
.aq-sidebar-body::-webkit-scrollbar-thumb { background: rgba(25, 121, 178, 0.30); border-radius: 3px; }
.aq-sidebar-body::-webkit-scrollbar-thumb:hover { background: rgba(25, 121, 178, 0.50); }

/* #aq-layer-popup visibility gérée par right:-280px/.open — pas de display:none */


@keyframes aqPopIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* ── Transition directionnelle entre panneaux sidebar (Fonds / Tuiles) ── */
@keyframes aqPanelDown {
  /* contenu descend depuis le haut — utilisé quand on remonte dans la liste */
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0);     }
}
@keyframes aqPanelUp {
  /* contenu monte depuis le bas — utilisé quand on descend dans la liste */
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}
.aq-panel-enter-down {
  animation: aqPanelDown 0.22s cubic-bezier(.22, .84, .25, 1.04) both;
}
.aq-panel-enter-up {
  animation: aqPanelUp 0.22s cubic-bezier(.22, .84, .25, 1.04) both;
}

.aq-pop-section { display: flex; flex-direction: column; }

.aq-pop-title {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: #0A1931;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(10, 25, 49, 0.12);
}

.aq-pop-divider {
  height: 1px;
  background: rgba(25, 121, 178, 0.18);
  margin: 12px 0;
}

.aq-radio-group, .aq-check-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Custom RADIO (fond de carte) ── */
.aq-radio,
.aq-check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #475569;
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.aq-radio:hover,
.aq-check:hover {
  background: rgba(25, 121, 178, 0.07);
  color: #1E293B;
}

/* ── VIGNETTES DE FOND DE CARTE (Cards style OSM officiel) ──
   Chaque option est un bloc horizontal 60 px avec aperçu réel de la
   tuile en background-image + libellé en surimpression. Sélection
   indiquée par bordure Bleu Abyssal + chevron de validation.          */
.aq-bm-card {
  position: relative;
  display: block;
  height: 60px;
  margin-bottom: 8px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  background: #f1f5f9;          /* fallback si la tuile ne charge pas */
  transition: border-color 0.15s ease, transform 0.10s ease, box-shadow 0.15s ease;
}
.aq-bm-card:last-child { margin-bottom: 0; }

.aq-bm-card:hover {
  border-color: rgba(10, 25, 49, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

/* Input radio caché (mais reste accessible au clavier/A11y) */
.aq-bm-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0; height: 0;
}

/* ── Mini-carte MapLibre (approche OSM officielle) ──────────────────────
   Chaque vignette basemap contient une vraie instance MapLibre.
   Le canvas remplit le conteneur, aucune interaction n'est possible.    */
.aq-bm-mini-map {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;     /* non-interactif : seul le <label> capte les clics */
  background: #d1d5db;      /* fallback pendant le chargement des tuiles         */
}
/* Leaflet mini-carte : remplit le conteneur, clics traversent vers le <label> */
.aq-bm-mini-map .leaflet-container {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  /* Clics traversent pour activer le <input type=radio> via le <label> parent */
  pointer-events: none !important;
}
/* Pas d'attribution / contrôles sur les vignettes */
.aq-bm-mini-map .leaflet-control-attribution,
.aq-bm-mini-map .leaflet-control-zoom { display: none !important; }

/* Compatibilité ascendante (fallback si MapLibre non dispo) */
.aq-bm-thumb {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #cbd5e1;
}

/* Libellé en surimpression — fond noir semi-transparent dégradé pour
   garantir la lisibilité quel que soit l'aperçu derrière.            */
.aq-bm-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 6px 12px;
  background: linear-gradient(0deg, rgba(15, 23, 42, 0.78) 0%, rgba(15, 23, 42, 0.30) 75%, transparent 100%);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.50);
  pointer-events: none;
}

/* Check de validation (visible sur la carte sélectionnée uniquement) */
.aq-bm-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  background: #0A1931;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 2px 6px rgba(10, 25, 49, 0.40);
  pointer-events: none;
}

/* État sélectionné — bordure Bleu Abyssal AQUILON + chevron actif */
.aq-bm-card:has(input:checked) {
  border-color: #0A1931;
  box-shadow: 0 0 0 2px rgba(10, 25, 49, 0.18), 0 4px 14px rgba(15, 23, 42, 0.14);
}
.aq-bm-card:has(input:checked) .aq-bm-check {
  opacity: 1;
  transform: scale(1);
}

/* Le span .aq-radio-mark devient inutile — neutralisation pour ne rien
   casser si du code legacy l'injecte encore.                          */
.aq-radio-mark { display: none !important; }

/* La case checkbox conserve sa logique avec span (cf. plus bas) */
.aq-check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.aq-radio:has(input:checked) {
  background: rgba(25, 121, 178, 0.10);
  color: #0056b3;
  font-weight: 600;
}

/* Toggle switch iOS-style — tuiles overlay */
.aq-toggle-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: #cbd5e1;
  border: 1.5px solid #94a3b8;
  transition: background 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
  cursor: pointer;
}
.aq-toggle-thumb {
  position: absolute;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.22);
  transition: transform 0.22s cubic-bezier(.4,0,.2,1);
}
.aq-check input:checked + .aq-toggle-track {
  background: #1979B2;
  border-color: #1565a8;
  box-shadow: 0 0 0 3px rgba(25,121,178,0.18);
}
.aq-check input:checked + .aq-toggle-track .aq-toggle-thumb {
  transform: translateX(16px);
}

.aq-check:has(input:checked) {
  background: rgba(25, 121, 178, 0.08);
  color: #0056b3;
  font-weight: 600;
}


/* État import en cours (bouton Import SIG dans la map-toolbar) */
#tool-import.tool-importing {
  pointer-events: none;
  opacity: 0.75;
}
#tool-import.tool-importing i {
  animation: importSpin 0.8s linear infinite;
}
@keyframes importSpin { to { transform: rotate(360deg); } }

/* ── Zone principale ──────────────────────────────────────── */
#main-area {
  grid-area: main;
  position: relative;
  overflow: hidden;
}

#map {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.view-panel {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--bg-app);
  overflow-y: auto;
  padding: 24px;
  display: none;
}

.view-panel.active { display: block; }

/* ══════════════════════════════════════════════════════════════
   BARRE D'OUTILS FLOTTANTE
══════════════════════════════════════════════════════════════ */

#map-toolbar {
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900 !important; /* Sous le topbar (10000) mais au-dessus de la carte */
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(248, 250, 252, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  padding: 6px 10px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
}

.tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 7px 12px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: #475569;
  cursor: pointer;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

.tool-btn i { font-size: 15px; }

.tool-btn:hover {
  background: rgba(25, 121, 178, 0.07);
  color: #1E293B;
}

.tool-btn.aq-active {
  background: linear-gradient(160deg, #1979B2 0%, #0A1931 100%);
  color: #ffffff;
  font-weight: 700;
  border-color: transparent;
}

.tool-btn.danger { color: #df4454; }
.tool-btn.danger:hover { background: rgba(223,68,84,0.09); color: #a05e10; }

.tool-separator {
  width: 1px;
  height: 28px;
  background: rgba(25, 121, 178, 0.10);
  margin: 0 4px;
}

/* ══════════════════════════════════════════════════════════════
   PANNEAU DONNÉES GÉOMÉTRIQUES (SHAPE PANEL)
══════════════════════════════════════════════════════════════ */

#aq-shape-panel {
  position: absolute;
  top: 80px;
  right: 20px;
  min-width: 340px !important;
  width: max-content;
  padding: 16px 20px !important;
  border-radius: 12px;
  /* Ombre INDUSTRIELLE SOLIDE — plus de halo "néon".
     Référence Tailwind shadow-md/shadow-lg : courte, nette, professionnelle. */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10),
              0 2px 4px -1px rgba(0, 0, 0, 0.06);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(10, 25, 49, 0.10);
  z-index: 2000;
  /* Police Inter unifiée — cohérence visuelle avec popups capteur */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-variant-numeric: tabular-nums;
  /* ⛔ ZÉRO transition / animation : le panneau doit apparaître INSTANTANÉMENT
     sous le curseur. L'utilisateur a explicitement banni tout effet de glisse. */
  transition: none !important;
  animation: none !important;
  display: none;
  flex-direction: column;
}
/* Hérite Inter SAUF sur les icônes FontAwesome (qui ont leur propre font-family).
   Le sélecteur :not(i) :not([class*="fa-"]) exclut <i class="fas fa-..."></i>.   */
#aq-shape-panel *:not(i):not([class*="fa-"]):not([class*=" fa-"]) {
  font-family: inherit !important;
}
#aq-shape-panel .aq-stat-value,
#aq-shape-panel .aq-stat-label,
#aq-shape-panel .aq-line-cell,
#aq-shape-panel td,
#aq-shape-panel th { font-variant-numeric: tabular-nums; }

#aq-shape-panel .panel-content {
  font-size: 13px !important;
  line-height: 1.5;
  max-height: none !important;
  overflow: visible !important;
}

/* L'en-tête du panneau (Titre et Croix) — la croix doit avoir un VRAI espace
   par rapport au titre pour éviter l'effet "collé" critiqué par l'utilisateur. */
.aq-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;                            /* ← gap explicite Titre ⇄ Croix */
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #eaeaea;
  font-size: 14px;
  font-weight: 700;
  color: #0A1931;
  cursor: grab; /* Indique visuellement que c'est déplaçable */
}
/* Petite marge supplémentaire à gauche de la croix (filet de sécurité)        */
.aq-panel-header .aq-chart-close { margin-left: 12px; flex-shrink: 0; }

.aq-panel-header:active {
  cursor: grabbing;
}

/* Le corps du texte (Les données) */
#aq-shape-body {
  font-size: 14px !important;
  color: #333;
  max-height: 250px;
  overflow-y: auto;
}

/* Espacement entre chaque ligne de donnée (Rayon, Périmètre...) */
#aq-shape-body div, 
#aq-shape-body p {
  margin-bottom: 8px !important; /* Respire, mais sans excès */
  line-height: 1.4;
}

/* Mise en évidence des libellés */
#aq-shape-body strong,
#aq-shape-body b {
  color: #0A1931;
  display: inline-block;
  width: 90px; /* Aligne les ':' de manière compacte */
}

path.leaflet-interactive:focus {
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════════
   MARQUEURS CAPTEURS
   FIX : sensor-ring demarre a scale(0.3) au lieu de scale(0.5)
   pour eviter que l'etat initial soit deja trop grand si
   l'animation reprend depuis un etat intermediaire.
   La combinaison avec visibility:hidden sur .app-hidden
   garantit que Leaflet a les bonnes dimensions au demarrage.
══════════════════════════════════════════════════════════════ */

/* ── FERMÉ (statut OK) — aucun halo, jamais instancié ─────────── */
/* .sensor-pulse-safe n'est plus créé pour les capteurs FERMÉS   */

/* ── Pulse OUVERT (alerte) — halo rouge danger progressif (sonar) ─── */
/* ══════════════════════════════════════════════════════════════
   ANIMATIONS HSE — Matrice cognitive
   ══════════════════════════════════════════════════════════════ */

/* ── INTRUSION (critical-vandal) — Bleu Abyssal #020617, rapide 1.2s ──
   Charte AQUILON ultra-premium : ardoise nuit remplacée par Abyssal pur. */
@keyframes hse-critical-sonar {
  0%   { transform: scale(0.3); opacity: 0.95; }
  100% { transform: scale(3.0); opacity: 0;    }
}
/* Respiration lumineuse subtile — amplitude réduite, sans stroboscopie */
@keyframes hse-critical-glow {
  0%, 100% { box-shadow: 0 0 0 0   rgba(2, 6, 23, 0.0);  }
  50%       { box-shadow: 0 0 0 4px rgba(2, 6, 23, 0.32); }
}

/* ── ALERTE GAZ (critical-gas) — Rouge Danger #df4454, très rapide 1.0s ── */
@keyframes hse-danger-sonar {
  0%   { transform: scale(0.3); opacity: 0.95; }
  100% { transform: scale(3.4); opacity: 0;    }
}
@keyframes hse-danger-glow {
  0%, 100% { box-shadow: 0 0 0 0   rgba(223, 68, 84, 0.0);  }
  50%       { box-shadow: 0 0 0 4px rgba(223, 68, 84, 0.22); }
}

/* ── INTERVENTION (info) — Bleu Océan #1979B2, très lent 3s, amplitude très faible ── */
@keyframes hse-info-sonar {
  0%   { transform: scale(0.5); opacity: 0.6; }
  100% { transform: scale(2.2); opacity: 0;   }
}
@keyframes hse-info-breathe {
  0%, 100% { box-shadow: 0 0 0 0   rgba(25, 121, 178, 0.0);  }
  50%       { box-shadow: 0 0 0 4px rgba(25, 121, 178, 0.14); }
}

/* ── WARN — Bleu Océan, modéré ── */
@keyframes hse-warn-breathe {
  0%, 100% { box-shadow: 0 0 0 0   rgba(25, 121, 178, 0.0);  }
  50%       { box-shadow: 0 0 0 6px rgba(25, 121, 178, 0.22); }
}

/* ── Marqueurs Leaflet — halos de pulsation ── */
/* INTRUSION (critical-vandal) — Charte AQUILON DÉFINITIVE :
   - dot carte (circleMarker) = #020617  ← Bleu Abyssal pur (COLOR_CRITICAL)
   - halo (pulse ring)        = #020617  ← ci-dessous (Abyssal rapide 1.2s)
   - badge popup + bouton     = #020617  ← cohérence totale sur tous les écrans
   Identité Abyssal uniforme — élégance B2B Souveraine.                       */
.sensor-pulse-critical {
  border-radius: 50%;
  border: 2.5px solid #020617;
  background: transparent;
  animation: hse-danger-sonar 1.2s ease-out infinite;
}

/* Rouge Danger #df4454 — ALERTE GAZ, très rapide 1.0s */
.sensor-pulse-danger {
  border-radius: 50%;
  border: 2.5px solid #df4454;
  background: transparent;
  animation: hse-danger-sonar 1.0s ease-out infinite;
}

/* Bleu Océan #1979B2 — INTERVENTION, lent 3s */
.sensor-pulse-info {
  border-radius: 50%;
  border: 1.5px solid #1979B2;
  background: transparent;
  animation: hse-info-sonar 3s ease-out infinite;
}

/* ── Classes utilitaires (cartes, badges) ── */
.pulse-critical { animation: hse-critical-glow 1.2s ease-in-out infinite; }
.pulse-info     { animation: hse-info-breathe  3.0s ease-in-out infinite; }

/* Ancien alias conservé — Bleu Abyssal AQUILON (aligne sur hse-critical) */
.sensor-pulse-alert {
  border-radius: 50%;
  border: 2.5px solid #020617;
  background: transparent;
  animation: hse-critical-sonar 1.2s ease-out infinite;
}

/* ── Contraste dynamique : fond de carte sombre (Dark Matter, Satellite) ──
   Le marqueur Intrusion #020617 (noyau + halo) est invisible sur fond noir.
   En mode sombre, on bascule sur Blanc Pur pour une visibilité maximale.

   Halo pulsant (divIcon, CSS) : border = onde radar blanche.
   Noyau (circleMarker canvas) : recoloré via JS dans _applyIntrusionTheme()
   car preferCanvas:true rend les marqueurs sur <canvas>, pas dans le DOM SVG.  */
.theme-dark .sensor-pulse-critical,
.theme-dark .sensor-pulse-alert {
  border-color:     #ffffff !important;   /* onde radar blanche */
  background-color: transparent !important; /* fond transparent → effet sonar conservé */
}

/* ── Bordures des dessins vectoriels (polygones, cercles, lignes) ──
   En mode sombre, seul le trait passe en blanc ; le fill translucide reste intact. */
.theme-dark .leaflet-overlay-pane path.leaflet-interactive {
  stroke: #ffffff !important;
}

@keyframes pulse-alert {
  0%   { transform: scale(0.3); opacity: 0.85; }
  75%  { transform: scale(2.8); opacity: 0;    }
  100% { transform: scale(0.3); opacity: 0;    }
}

/* ══════════════════════════════════════════════════════════════
   POPUP LEAFLET — Glassmorphism Ultra-Premium
══════════════════════════════════════════════════════════════ */

.leaflet-popup-content-wrapper {
  border-radius: 16px !important;
  box-shadow: 0 16px 48px rgba(25,121,178,0.22), 0 0 0 1px rgba(255,255,255,0.55) !important;
  padding: 0 !important;
  overflow: hidden;
  background: rgba(248, 250, 252, 0.95) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
}

.leaflet-popup-content { margin: 0 !important; width: auto !important; }
.leaflet-popup-tip-container { display: none; }

/* ── Égout Popup — Design Métier Sewer Monitoring ────────────── */
.sewer-popup {
  min-width: 265px;
  font-family: 'Inter', system-ui, sans-serif;
}

/* En-tête compact — ID + badge sur la même ligne */
.sewer-popup-header {
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(25,121,178,0.07);
}

/* Ligne titre : ID à gauche, badge à droite */
.sewer-popup-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

/* ── Popup HSE glassmorphism ── */
.sewer-popup {
  background: var(--popup-glass);
  backdrop-filter: var(--popup-blur);
  -webkit-backdrop-filter: var(--popup-blur);
  border-radius: var(--popup-radius);
  box-shadow: var(--popup-shadow);
}

/* HSE Safe — Cyan Pur doux */
.sewer-popup-header.hse-safe {
  background: linear-gradient(135deg, rgba(35,192,232,0.12) 0%, rgba(35,192,232,0.03) 100%);
}
/* HSE Info — Bleu Océan (Intervention) */
.sewer-popup-header.hse-info {
  background: linear-gradient(135deg, rgba(25,121,178,0.14) 0%, rgba(25,121,178,0.04) 100%);
}
/* HSE Critical — Ardoise Nuit + respiration subtile (Intrusion) */
.sewer-popup-header.hse-critical {
  background: linear-gradient(135deg, rgba(30,41,59,0.16) 0%, rgba(30,41,59,0.04) 100%);
  animation: hse-critical-glow 3s ease-in-out infinite;
}
/* HSE Danger — Rouge Danger + respiration subtile (Alerte Gaz) */
.sewer-popup-header.hse-danger {
  background: linear-gradient(135deg, rgba(223,68,84,0.14) 0%, rgba(223,68,84,0.04) 100%);
  animation: hse-danger-glow 3s ease-in-out infinite;
}
/* Rétrocompat */
.sewer-popup-header.ferme  { background: linear-gradient(135deg, rgba(35,192,232,0.10) 0%, rgba(35,192,232,0.03) 100%); }
.sewer-popup-header.ouvert { background: linear-gradient(135deg, rgba(223,68,84,0.16) 0%, rgba(223,68,84,0.04) 100%); }

/* Logo Galtek dans le popup */
.sewer-popup-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 6px rgba(25,121,178,0.18));
}

.sewer-popup-title { flex: 1; min-width: 0; }
.sewer-popup-id   {
  font-size: 13px;
  font-weight: 800;
  color: #1E293B;
  letter-spacing: 0.04em;
}
.sewer-popup-sector {
  font-size: 10px;
  color: #64748b;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge statut FERMÉ / OUVERT */
.sewer-status-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  white-space: nowrap;
  flex-shrink: 0;
}
/* ── Badges HSE ── */
.sewer-status-badge.hse-safe {
  background: rgba(35, 192, 232, 0.14);
  color: #0891b2;
  border: 1px solid rgba(35, 192, 232, 0.38);
}
.sewer-status-badge.hse-info {
  background: rgba(25, 121, 178, 0.14);
  color: #1979B2;
  border: 1px solid rgba(25, 121, 178, 0.40);
  animation: hse-info-breathe 3s ease-in-out infinite;
}
.sewer-status-badge.hse-critical {
  background: #1E293B;           /* Solid fill Ardoise Nuit — même charte que hseBadgeHTML() */
  color: #FFFFFF;                /* Texte blanc pur — contraste 15.3:1 ✅ WCAG AAA           */
  border: 1px solid #1E293B;
  animation: hse-critical-glow 3s ease-in-out infinite;
}
.sewer-status-badge.hse-danger {
  background: rgba(223, 68, 84, 0.13);
  color: #df4454;
  border: 1px solid rgba(223, 68, 84, 0.42);
  animation: hse-danger-glow 3s ease-in-out infinite;
}
/* Rétrocompat */
.sewer-status-badge.ferme  { background:rgba(35,192,232,0.12);  color:#0891b2; border:1px solid rgba(35,192,232,0.35); }
.sewer-status-badge.ouvert { background:rgba(223,68,84,0.15);  color:#df4454; border:1px solid rgba(223,68,84,0.45); animation:hse-critical-glow 1.4s ease-in-out infinite; }

@keyframes blink-badge {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.35; }
}

/* Bannière alerte OUVERT */
.sewer-alert-banner {
  padding: 7px 14px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1.4;
}

/* HSE Info — Bleu Océan (Intervention) */
.sewer-alert-banner--hse-info {
  background: linear-gradient(90deg, rgba(25,121,178,0.12), rgba(25,121,178,0.03));
  border-left: 3px solid var(--status-warn);
  color: #1979B2;
}

/* HSE Critical — Ardoise Nuit, respiration subtile (Intrusion) */
.sewer-alert-banner--hse-critical {
  background: linear-gradient(90deg, rgba(30,41,59,0.16), rgba(30,41,59,0.04));
  border-left: 3px solid var(--status-critical);
  color: #1E293B;
  animation: hse-critical-glow 3s ease-in-out infinite;
}
.sewer-alert-banner--hse-critical i { color: #1E293B; }

/* HSE Danger — Rouge Danger, respiration subtile (Alerte Gaz) */
.sewer-alert-banner--hse-danger {
  background: linear-gradient(90deg, rgba(223,68,84,0.13), rgba(223,68,84,0.04));
  border-left: 3px solid var(--status-danger);
  color: #b02233;
  animation: hse-danger-glow 3s ease-in-out infinite;
}
.sewer-alert-banner--hse-danger i { color: #df4454; }
.sewer-alert-banner i { color: #1E293B; }

/* Corps des données */
.sewer-popup-body {
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255,255,255,0.55);
}

/* Rangées de données — Grid 3 colonnes : icône | label | valeur */
.popup-row {
  display: grid;
  grid-template-columns: 18px 132px 1fr;
  align-items: start;
  gap: 4px 8px;
  font-size: 12px;
  min-height: 22px;
  padding: 3px 0;
}
.popup-row i {
  width: 18px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
  justify-self: center;
  margin-top: 2px;
}
.popup-row .label {
  color: var(--text-label);
  font-size: 0.68rem;
  font-weight: 600;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding-top: 1px;
}
.popup-row .value {
  font-weight: 600;
  color: var(--text-value);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pied du popup — boutons d'action */
.sensor-popup-footer {
  padding: 10px 14px;
  border-top: 1px solid rgba(25,121,178,0.07);
  display: flex;
  gap: 6px;
  background: rgba(255,255,255,0.40);
}

.popup-action-btn {
  flex: 1;
  padding: 7px 10px;
  border-radius: 8px;
  border: none;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background var(--transition), transform 0.1s;
}
.popup-action-btn:active { transform: scale(0.97); }
.popup-action-btn.route-btn { background: rgba(25,121,178,0.10); color: #1E293B; border: 1px solid rgba(25,121,178,0.25); }
.popup-action-btn.route-btn:hover { background: rgba(25,121,178,0.20); }

/* Bouton "Tournée" — ajoute/retire le capteur du Tour Builder TSP */
.popup-action-btn.tour-btn  { background: rgba(14,165,233,0.10); color: #0c4a6e; border: 1px solid rgba(14,165,233,0.30); }
.popup-action-btn.tour-btn:hover { background: rgba(14,165,233,0.22); color: #075985; }

/* ══════════════════════════════════════════════════════════════
   VUES LATÉRALES
══════════════════════════════════════════════════════════════ */

.view-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.view-header h1 {
  font-size: 20px;
  font-weight: 800;
  color: #1E293B;
}

.view-header .subtitle {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
  line-height: 1.5;
}

/* ── View header — zones info / actions ── */
.view-header-info {
  flex: 1;
  min-width: 180px;
}
.view-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

/* ── Boutons d'action de vue — Ghost (contour) / Solid (plein) ── */
.view-btn-ghost {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(25,121,178,0.08);
  color: #1979B2;
  border: 1.5px solid rgba(25,121,178,0.25);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
  font-family: inherit;
}
.view-btn-ghost:hover { background: rgba(25,121,178,0.16); }

.view-btn-solid {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: #1979B2;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(25,121,178,0.30);
  transition: background .15s, box-shadow .15s, transform .1s;
  font-family: inherit;
}
.view-btn-solid:hover {
  background: #1464a0;
  box-shadow: 0 4px 14px rgba(25,121,178,0.40);
  transform: translateY(-1px);
}
.view-btn-solid:active { transform: scale(0.97); }

/* ── Champ de recherche dans les vues ── */
.view-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.view-search-wrap > i {
  position: absolute;
  left: 9px;
  color: #94a3b8;
  font-size: 12px;
  pointer-events: none;
}
.view-search {
  padding: 7px 10px 7px 28px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: 12px;
  outline: none;
  background: #f8fafc;
  color: #1E293B;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.view-search:focus {
  border-color: #1979B2;
  box-shadow: 0 0 0 3px rgba(25,121,178,0.10);
}
.view-search::placeholder { color: #94a3b8; }

/* ══════════════════════════════════════════════════════════════
   MODE TABLEUR — Table Capteurs (style Excel)
══════════════════════════════════════════════════════════════ */

/* Ligne : hover CSS (remplace les inline onmouseenter/onmouseleave) */
.mapping-row { transition: background .12s; }
.mapping-row:hover { background: #f8fafc; }

/* Cellule éditable : curseur texte + positionnement pour l'input absolu */
.mapping-cell {
  cursor: text;
  position: relative;
  user-select: none;
}

/* Indicateur discret : l'icône crayon apparaît au hover */
.mapping-cell::after {
  content: '\f303';               /* fa-pen */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 9px;
  color: #cbd5e1;
  position: absolute;
  top: 6px;
  right: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s;
}
.mapping-row:hover .mapping-cell::after { opacity: 1; }

/* État actif (style Excel : fond très léger + soulignement bleu bas) */
.mapping-cell--active {
  background: rgba(25,121,178,0.04) !important;
  box-shadow: inset 0 -2px 0 0 #1979B2;
}
.mapping-cell--active::after { opacity: 0 !important; }

/* Input borderless qui se superpose au span en mode édition */
.cell-input {
  position: absolute;
  inset: 0;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 12px;
  color: inherit;
  padding: 9px 12px;
  box-sizing: border-box;
  cursor: text;
}
/* Alignement centré pour les colonnes Adresse / Arrondissement */
.mapping-cell--center .cell-input { text-align: center; }
/* Gras pour la colonne Alias */
.mapping-cell[data-field="sensor_alias"] .cell-input { font-weight: 600; }

/* ── Conteneur de tableau dans les vues (fond blanc + bordure) ── */
.view-table-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
}

/* ── En-tête de tableau standardisé ── */
.view-th {
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.view-th--center { text-align: center; }
.view-th--sm     { padding: 9px 12px; }

#sensors-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* ── Table Logs — centrage vertical ET horizontal de toutes les cellules ── */
#logs-tbody td {
  text-align: center !important;
  vertical-align: middle !important;
}

/* ── Filtre select — Charte Bleu Océan (partagé) ── */
.hse-select,
#logs-status-filter {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 32px 7px 10px !important;
  border: 1.5px solid rgba(25,121,178,0.30) !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  background-color: #f8fafc !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231979B2' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  color: #374151 !important;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.hse-select:focus,
#logs-status-filter:focus {
  outline: none !important;
  border-color: #1979B2 !important;
  box-shadow: 0 0 0 3px rgba(25,121,178,0.14) !important;
  color: #1979B2 !important;
}

.sensor-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 16px;
  padding: 18px;
  border: var(--glass-border);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
  position: relative;
  overflow: hidden;
}

.sensor-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 3px 0 0 3px;
}

.sensor-card.safe::before   { background: var(--color-primary); }
.sensor-card.danger::before { background: var(--color-danger); animation: bar-blink 1s step-end infinite; }

/* ── HSE State Cards ── */
.sensor-card.hse-safe::before    { background: #23C0E8; }
.sensor-card.hse-info::before    { background: #1979B2; animation: hse-info-breathe 3s ease-in-out infinite; }
.sensor-card.hse-critical::before {
  background: #1E293B;
  animation: bar-blink 1.2s step-end infinite;
}
.sensor-card.hse-danger::before {
  background: #df4454;
  animation: bar-blink 1.0s step-end infinite;
}

.sensor-card.hse-safe     .sensor-card-icon { background: rgba(35,192,232,0.10);  color: #23C0E8; }
.sensor-card.hse-info     .sensor-card-icon { background: rgba(25,121,178,0.10);  color: #1979B2; }
.sensor-card.hse-critical .sensor-card-icon { background: rgba(30,41,59,0.12);    color: #1E293B; }
.sensor-card.hse-danger   .sensor-card-icon { background: rgba(223,68,84,0.11);   color: #df4454; }

/* Flash d'état sur la card entière — Intrusion */
.sensor-card.hse-critical {
  box-shadow: 0 0 0 0 rgba(30,41,59,0);
  animation: hse-card-critical-pulse 2.4s ease-out infinite;
}
@keyframes hse-card-critical-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(30,41,59,0.25); }
  60%  { box-shadow: 0 0 0 7px rgba(30,41,59,0); }
  100% { box-shadow: 0 0 0 0   rgba(30,41,59,0); }
}

/* Flash d'état sur la card entière — Alerte Gaz */
.sensor-card.hse-danger {
  box-shadow: 0 0 0 0 rgba(223,68,84,0);
  animation: hse-card-danger-pulse 2.0s ease-out infinite;
}
@keyframes hse-card-danger-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(223,68,84,0.30); }
  60%  { box-shadow: 0 0 0 8px rgba(223,68,84,0); }
  100% { box-shadow: 0 0 0 0   rgba(223,68,84,0); }
}

@keyframes bar-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

.sensor-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.sensor-card-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.sensor-card-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.sensor-card.safe   .sensor-card-icon { background: rgba(25,121,178,0.08); color: #1E293B; }
.sensor-card.danger .sensor-card-icon { background: rgba(223,68,84,0.10);  color: #df4454; }

.sensor-card-id     { font-size: 13px; font-weight: 700; color: #1E293B; }
.sensor-card-sector { font-size: 11px; color: #64748b; }

.sensor-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.stat-chip {
  background: #f8fafc;
  border-radius: 7px;
  padding: 5px 8px;
  font-size: 10px;
  color: #64748b;
}

.stat-chip .val {
  font-size: 13px;
  font-weight: 700;
  color: #1E293B;
  display: block;
}

#alerts-list { display: flex; flex-direction: column; gap: 8px; }

.alert-item {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 16px;
  padding: 14px 16px;
  border: var(--glass-border);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: box-shadow var(--transition), transform var(--transition);
}

.alert-item:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

.alert-icon {
  width: 34px; height: 34px;
  background: rgba(223,68,84,0.10);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #df4454;
  font-size: 15px;
  flex-shrink: 0;
}

.alert-content { flex: 1; }
.alert-id   { font-size: 13px; font-weight: 700; color: #1E293B; }
.alert-meta { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.alert-time { font-size: 10px; color: #94a3b8; white-space: nowrap; }

.alert-item .go-arrow {
  color: #cbd5e1;
  font-size: 13px;
  transition: color var(--transition), transform var(--transition);
}

.alert-item:hover .go-arrow {
  color: #df4454;
  transform: translateX(3px);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: #94a3b8;
}

.empty-state i { font-size: 40px; opacity: 0.4; }
.empty-state p { font-size: 14px; font-weight: 500; }

/* ══════════════════════════════════════════════════════════════
   VUE RAPPORTS
══════════════════════════════════════════════════════════════ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

.stat-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-radius: 16px;
  padding: 20px 22px;
  border: var(--glass-border);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  transition: box-shadow var(--transition), transform var(--transition);
}

.stat-card .stat-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  min-height: 2.2rem;          /* force toutes les cartes à la hauteur du label le plus long (2 lignes) */
  display: flex;
  align-items: flex-start;
}

.stat-card .stat-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--text-value);
  line-height: 1;
  letter-spacing: -0.5px;
}

.stat-card .stat-value.danger       { color: var(--color-danger); }
.stat-card .stat-value.safe         { color: #1979B2; }
.stat-card .stat-value.info         { color: var(--color-primary); }

/* ── HSE KPI colors ── */
.stat-card .stat-value.hse-info     { color: #1979B2; }
.stat-card .stat-value.hse-warn     { color: var(--status-warn, #1979B2); }
.stat-card .stat-value.hse-critical { color: var(--status-critical, #1E293B); }

.stat-card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════════════════════════
   NOTIFICATIONS TOAST
══════════════════════════════════════════════════════════════ */

#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(248, 250, 252, 0.97);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  color: #1E293B;
  padding: 10px 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(25, 121, 178, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.5);
  animation: toastIn 0.3s ease forwards;
  pointer-events: auto;
  min-width: 220px;
  max-width: 360px;
  border-left: 3px solid var(--primary-light);
}

.toast.danger  { border-left-color: var(--color-danger); }
.toast.success { border-left-color: var(--color-success); }
.toast.warning { border-left-color: var(--color-warning); }

@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
  to { opacity: 0; transform: translateY(10px) scale(0.97); }
}

.toast.removing { animation: toastOut 0.25s ease forwards; }

/* ══════════════════════════════════════════════════════════════
   MODAL "Créer un site" — Divine Light Glassmorphism
══════════════════════════════════════════════════════════════ */

#modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 8000;
  background: rgba(25, 121, 178, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#modal-overlay.open { display: flex; }

/* Carte vitrée principale */
#site-modal-card {
  background: linear-gradient(160deg, rgba(248,250,252,0.97) 0%, rgba(224,242,254,0.88) 100%);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 22px;
  box-shadow: 0 28px 70px rgba(25,121,178,0.20), 0 0 0 1px rgba(255,255,255,0.65);
  width: 100%;
  max-width: 440px;
  overflow: hidden;
  animation: modalIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
  border: 1px solid rgba(255,255,255,0.6);
}

/* En-tête avec gradient divin */
#site-modal-header {
  background: linear-gradient(135deg, #1E293B 0%, #0a4a8c 60%, rgba(25,121,178,0.85) 100%);
  padding: 20px 22px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
}

#site-modal-header::before {
  content: '';
  position: absolute;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(25,121,178,0.20) 0%, transparent 65%);
  top: -60px; right: -40px;
  pointer-events: none;
}

#site-modal-logo {
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);   /* disque blanc pur — logo visible sur fond bleu */
  box-shadow: 0 2px 12px rgba(0,0,0,0.18), 0 0 0 1px rgba(255,255,255,0.6);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
#site-modal-logo img { width: 34px; height: 34px; object-fit: contain; }

#site-modal-header-text { flex: 1; }
#site-modal-header-text h2 {
  font-size: 15px; font-weight: 800;
  color: #fff;
  letter-spacing: 0.03em;
  margin: 0;
}
#site-modal-header-text p {
  font-size: 10px; color: rgba(25,121,178,0.85);
  margin-top: 2px; letter-spacing: 0.06em; text-transform: uppercase;
}

#modal-close {
  width: 30px; height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.80);
  cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
  z-index: 1; position: relative;
  flex-shrink: 0;
}
#modal-close:hover { background: rgba(223,68,84,0.35); color: #fff; }

/* Corps du formulaire */
#site-modal-body {
  padding: 22px 22px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Fieldset glass */
.site-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.site-field label {
  font-size: 11px;
  font-weight: 700;
  color: #1E293B;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}

.site-field label i { color: #1979B2; font-size: 11px; }

.site-field input, .site-field select {
  padding: 10px 14px;
  border: 1px solid #E5E5EA;
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-value);
  background: #F0F0F2;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  outline: none;
  font-family: inherit;
}

.site-field input::placeholder { color: #94a3b8; }

.site-field input:focus, .site-field select:focus {
  border-color: #1979B2;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(25,121,178,0.18);
}

/* Pied de modal */
#site-modal-footer {
  padding: 18px 22px 22px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.btn-cancel {
  padding: 9px 18px;
  border-radius: 10px;
  border: 1.5px solid rgba(25,121,178,0.14);
  background: rgba(255,255,255,0.6);
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
  font-family: 'Inter', sans-serif;
}
.btn-cancel:hover { background: rgba(25,121,178,0.05); color: #1E293B; }

.btn-submit-site {
  padding: 10px 22px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(180deg, #1A85C2 0%, #1979B2 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: all var(--transition);
  box-shadow: 0 4px 15px rgba(25,121,178,0.30);
  font-family: inherit;
  letter-spacing: 0.02em;
}
.btn-submit-site:hover { background: linear-gradient(180deg, #2291d0 0%, #1A85C2 100%); box-shadow: 0 8px 24px rgba(25,121,178,0.45); transform: translateY(-1px); }
.btn-submit-site:active { transform: scale(0.97); }

/* ── Styles génériques modal (routing, compte...) ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-header {
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(25,121,178,0.04) 0%, rgba(25,121,178,0.04) 100%);
  border-bottom: 1px solid rgba(25,121,178,0.08);
  display: flex;
  align-items: center;
  gap: 10px;
}

.modal-header h2 { font-size: 15px; font-weight: 700; color: #1E293B; flex: 1; }

.modal-close {
  width: 28px; height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.modal-close:hover { background: rgba(223,68,84,0.09); color: #df4454; }

.modal-body { padding: 20px; display: flex; flex-direction: column; gap: 14px; }

.form-group { display: flex; flex-direction: column; gap: 5px; }

.form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-group input, .form-group select {
  padding: 9px 12px;
  border: 1px solid #E5E5EA;
  border-radius: 8px;
  font-size: 13px;
  color: var(--text-value);
  background: #F0F0F2;
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
  outline: none;
  font-family: inherit;
}

.form-group input:focus, .form-group select:focus {
  border-color: #1979B2;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(25,121,178,0.18);
}

.modal-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(25,121,178,0.07);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.btn-secondary {
  padding: 7px 16px;
  border-radius: 8px;
  border: 1.5px solid rgba(25,121,178,0.14);
  background: rgba(255,255,255,0.7);
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition);
}

.btn-secondary:hover { background: rgba(25,121,178,0.05); color: #1E293B; }

/* ══════════════════════════════════════════════════════════════
   OVERRIDES LEAFLET
══════════════════════════════════════════════════════════════ */


/* Leaflet place .leaflet-top/.leaflet-bottom à z-index 1000 par défaut.
   On les abaisse sous le topbar (10000) pour que le dropdown les recouvre. */
.leaflet-top,
.leaflet-bottom {
  z-index: 900 !important;
}

.leaflet-control-zoom {
  border-radius: 10px !important;
  overflow: hidden;
  border: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
}

.leaflet-control-zoom a {
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  font-size: 16px !important;
  color: #374151 !important;
}

.leaflet-bar { border: none !important; }
.leaflet-routing-container { display: none !important; }
.leaflet-routing-alt { font-size: 12px !important; }

/* ══════════════════════════════════════════════════════════════
   RÉSULTATS PANNEAU POLYGONE
══════════════════════════════════════════════════════════════ */

.polygon-result-header {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.badge-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
}

.badge-count.total  { background: rgba(25,121,178,0.10); color: #1E293B; }
.badge-count.danger { background: rgba(223,68,84,0.12); color: #df4454; }
.badge-count.safe   { background: rgba(25,121,178,0.10); color: #1E293B; }

.polygon-sensor-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition);
  border: 1px solid #f1f5f9;
  margin-bottom: 5px;
}

.polygon-sensor-item:hover { background: rgba(25,121,178,0.04); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }

.polygon-sensor-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.polygon-sensor-dot.safe   { background: #1979B2; }
.polygon-sensor-dot.danger { background: #df4454; animation: blink-dot 1s step-end infinite; }

@keyframes blink-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.polygon-sensor-info { flex: 1; }
.polygon-sensor-id   { font-size: 12px; font-weight: 600; color: #1E293B; }
.polygon-sensor-sub  { font-size: 10px; color: #94a3b8; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════ */

@media (max-width: 640px) {
  :root {
    --nav-width: 56px;
    --panel-right-width: calc(100vw - 72px);
  }

  #map-toolbar { top: 14px; padding: 5px 7px; }
  .tool-btn { padding: 5px 8px; font-size: 9px; }
  .tool-btn span { display: none; }
  #right-panel { right: 8px; left: 8px; width: auto; }

  /* Topbar — réduction du titre sur petits écrans */
  .topbar-tagline-center {
    font-size: 9px;
    letter-spacing: 0.10em;
    padding: 0 130px;
  }
  .brand-name { font-size: 15px; }
}

@media (max-width: 900px) {
  /* Masque la tagline sur écrans intermédiaires si elle déborde */
  .topbar-tagline-center {
    font-size: 10px;
    letter-spacing: 0.15em;
    padding: 0 180px;
  }
}

/* Sur viewport < 1200px (console DevTools ouverte par ex.) la tagline
   centrale chevauche logo et boutons. On la masque proprement plutôt
   que de la laisser se superposer. Le logo "AQUILON" suffit. */
@media (max-width: 1200px) {
  .topbar-tagline-center {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   AQUILOT BAR — Toggle Ctrl+I (show/hide pour libérer la carte)
══════════════════════════════════════════════════════════════ */
#aquilot-input-wrapper.is-bar-hidden {
  transform: translate(-50%, calc(100% + 40px)) !important;
  opacity: 0;
  pointer-events: none;
}

/* Icône discrète "AQUILOT dort" en bas-gauche — pictogramme cozy
   au lieu d'un texte verbeux. Hover : tooltip explicatif.            */
.aq-bar-restore-hint {
  position: fixed;
  bottom: 18px;
  left: 18px;
  width: 48px;
  height: 48px;
  background: rgba(10, 25, 49, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 50%;
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  z-index: 1002;
  cursor: pointer;
  user-select: none;
  animation: aqRestoreFadeIn 0.30s ease;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease;
  overflow: visible;
}
.aq-bar-restore-hint:hover {
  background: rgba(56, 189, 248, 0.22);
  border-color: rgba(56, 189, 248, 0.65);
  transform: scale(1.06);
}
.aq-bar-restore-hint:active { transform: scale(0.96); }

/* Lune endormie au centre */
.aq-bar-restore-hint .aq-zzz-moon {
  width: 22px;
  height: 22px;
  color: #93e8ff;
  opacity: 0.92;
}

/* "Z" flottants au-dessus pour signaler le sommeil */
.aq-bar-restore-hint .aq-zzz {
  position: absolute;
  font-family: 'Exo 2', sans-serif;
  font-weight: 800;
  color: #93e8ff;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
}
.aq-bar-restore-hint .aq-zzz-1 { top: -2px;  right: -2px; font-size: 11px; opacity: 0.85; animation: aqZzzFloat 2.6s ease-in-out infinite; }
.aq-bar-restore-hint .aq-zzz-2 { top: -10px; right:  5px; font-size: 9px;  opacity: 0.6;  animation: aqZzzFloat 2.6s ease-in-out infinite 0.4s; }
.aq-bar-restore-hint .aq-zzz-3 { top: -16px; right: 11px; font-size: 7px;  opacity: 0.35; animation: aqZzzFloat 2.6s ease-in-out infinite 0.8s; }

@keyframes aqZzzFloat {
  0%, 100% { transform: translateY(0)    rotate(-8deg); opacity: 0; }
  20%      { opacity: 1; }
  100%     { transform: translateY(-10px) rotate(8deg); opacity: 0; }
}

/* Tooltip Ctrl+I au survol */
.aq-bar-restore-hint::after {
  content: 'Galtek AI en veille · Ctrl+I pour réveiller';
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  white-space: nowrap;
  background: rgba(2, 6, 23, 0.92);
  border: 1px solid rgba(56, 189, 248, 0.35);
  color: #93e8ff;
  padding: 5px 10px;
  border-radius: 6px;
  font: 600 10px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.4px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.aq-bar-restore-hint:hover::after {
  opacity: 1;
  transform: translateY(0);
}

@keyframes aqRestoreFadeIn {
  from { opacity: 0; transform: translateY(8px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* ══════════════════════════════════════════════════════════════
   AQUILON — Stabilisation UX (AutoCAD & Hybrid)
   ══════════════════════════════════════════════════════════════ */

.aq-force-crosshair, 
.aq-force-crosshair .leaflet-container,
.aq-force-crosshair .leaflet-container canvas,
.aq-force-crosshair .leaflet-container .maplibregl-canvas {
  cursor: crosshair !important;
}

.aq-custom-popup .leaflet-popup-content-wrapper {
  background: var(--primary-deep);
  color: #fff;
  border-radius: 12px;
  padding: 0;
}

.aq-custom-popup .leaflet-popup-tip {
  background: var(--primary-deep);
}

.aq-custom-popup .popup-header {
  background: rgba(255,255,255,0.1);
  padding: 10px 15px;
  font-weight: 800;
  font-size: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.aq-custom-popup .popup-body {
  padding: 12px 15px;
  font-size: 12px;
  line-height: 1.6;
}

.aq-alt-popup {
  text-align: center;
  padding: 5px;
}

.aq-alt-popup .alt-val {
  font-size: 24px;
  font-weight: 900;
  color: #1979B2;
}

.aq-alt-popup .alt-label {
  font-size: 9px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: 0.1em;
}

.aq-alt-popup .alt-coords {
  font-size: 10px;
  color: #64748b;
  margin-top: 4px;
}

/* ══════════════════════════════════════════════════════════════
   AUTH WALL — AQUILON
   ════════════════════════════════════════════════════════════ */

/*
 * FIX CRITIQUE — visibility:hidden au lieu de display:none
 * ─────────────────────────────────────────────────────────
 * display:none  → #map = 0×0px → Leaflet calcule tout faux
 *                 → gros cercles géants au chargement.
 *
 * visibility:hidden → #app garde ses vraies dimensions
 *                     → Leaflet s'initialise correctement
 *                     → plus de cercles géants.
 */
.app-hidden {
  pointer-events: none !important;
}

/* Conteneur plein écran */
#login-wall {
  position: fixed;
  inset: 0;
  /* Au-dessus du topbar (10000) et de la cloche (10001) — couvre toute l'appli */
  z-index: 10002;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Marge interne : évite que la carte touche les bords sur petits écrans */
  padding: 20px;
  background: linear-gradient(180deg, #FFFFFF 0%, #E0F2FE 100%);
  overflow: hidden;
}

#login-wall.hidden {
  display: none;
}

/* Reflet lumineux bas-droit — ambiance premium */
#login-wall::after {
  content: ''; position: absolute; width: 60vw; height: 60vw;
  background: radial-gradient(circle, rgba(25, 121, 178, 0.12) 0%, transparent 65%);
  bottom: -15%; right: -15%; z-index: 0; pointer-events: none;
}

/* Reflet lumineux haut-gauche */
#login-wall::before {
  content: ''; position: absolute; width: 50vw; height: 50vw;
  background: radial-gradient(circle, rgba(25, 121, 178, 0.06) 0%, transparent 65%);
  top: -10%; left: -10%; z-index: 0; pointer-events: none;
}

/* Animation de sortie */
#login-wall.wall-exit {
  animation: wallExit 0.5s ease-in forwards;
}

@keyframes wallExit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-30px); }
}

/* ── Fond animé avec orbes ── */
.login-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.login-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.22;
  animation: orbFloat 10s ease-in-out infinite;
}

.orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #1979B2 0%, #E0F2FE 70%);
  top: -150px; left: -150px;
  animation-delay: 0s;
}
.orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(25,121,178,0.3) 0%, transparent 70%);
  bottom: -100px; right: -100px;
  animation-delay: -4s;
}
.orb-3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, #1979B2 0%, transparent 70%);
  top: 40%; left: 60%;
  transform: translate(-50%, -50%);
  animation-delay: -7s;
}

@keyframes orbFloat {
  0%, 100% { transform: scale(1) translate(0, 0); }
  33%       { transform: scale(1.05) translate(10px, -10px); }
  66%       { transform: scale(0.95) translate(-10px, 10px); }
}

/* ── Carte de login — Glassmorphism Ultra-Premium ── */
#login-card {
  position: relative;
  z-index: 1;
  width: 100%;
  /* Jamais plus large que 440px, jamais plus large que l'écran moins 40px de marge */
  max-width: min(440px, calc(100vw - 40px));
  padding: clamp(28px, 6vw, 48px) clamp(24px, 5vw, 44px);
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(248, 250, 252, 0.92);
  border-radius: 28px;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  box-shadow:
    0 20px 50px rgba(25, 121, 178, 0.10),
    0 4px 16px rgba(25, 121, 178, 0.08),
    0 0 0 1px rgba(255,255,255,0.6) inset;
  animation: cardIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(30px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

#login-card.shake {
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-8px); }
  40%       { transform: translateX(8px); }
  60%       { transform: translateX(-5px); }
  80%       { transform: translateX(5px); }
}

/* ── Logo ── */
.login-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  margin-bottom: 36px;
}

.login-logo-img {
  max-height: 96px;
  object-fit: contain;
  filter: drop-shadow(0 6px 18px rgba(25, 121, 178, 0.18));
  animation: logoBreath 3.5s ease-in-out infinite;
}

@keyframes logoBreath {
  0%, 100% { transform: scale(1);    filter: drop-shadow(0 6px 18px rgba(25, 121, 178, 0.18)); }
  50%       { transform: scale(1.02); filter: drop-shadow(0 10px 28px rgba(25, 121, 178, 0.28)); }
}

.login-logo-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #1E293B, #1979B2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: white;
  box-shadow: 0 8px 20px rgba(25, 121, 178, 0.5);
  flex-shrink: 0;
}

.login-brand {
  font-family: 'Exo 2', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #1E293B;
  letter-spacing: 0.08em;
  margin-top: 14px;
}

.login-brand span { color: #1979B2; }

.login-tagline {
  font-size: 11px;
  color: #64748b;
  margin-top: 6px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.login-title {
  font-size: 22px;
  font-weight: 800;
  color: #1E293B;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.login-subtitle {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 32px;
  letter-spacing: 0.01em;
  line-height: 1.6;
}

/* ── Champs ── */
.login-field { margin-bottom: 16px; }

.login-field label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}

.login-field label i {
  margin-right: 6px;
  color: #1E293B;
}

.login-field input {
  width: 100%;
  padding: 14px 16px;
  background: #F0F0F2;
  border: 1px solid #E5E5EA;
  border-radius: 12px;
  color: var(--text-value);
  font-size: 14px;
  outline: none;
  transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
  box-sizing: border-box;
  font-family: inherit;
}

.login-field input::placeholder { color: #94a3b8; }

.login-field input:focus {
  border-color: #1979B2;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(25, 121, 178, 0.18);
}

/* ── Erreur ── */
.login-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  color: #fca5a5;
  font-size: 13px;
  margin-bottom: 16px;
}

.login-error.hidden { display: none; }

/* ── Bouton ── */
.login-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: linear-gradient(180deg, #1A85C2 0%, #1979B2 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 8px;
  transition: all var(--transition);
  box-shadow: 0 4px 16px rgba(25, 121, 178, 0.38);
  letter-spacing: 0.02em;
}

.login-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #2291d0 0%, #1A85C2 100%);
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(25, 121, 178, 0.45);
}

.login-btn:active:not(:disabled) { transform: translateY(0); }

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#login-spinner.hidden { display: none; }

/* ── Footer ── */
.login-footer {
  margin-top: 28px;
  text-align: center;
  font-size: 11px;
  color: #64748b;
  letter-spacing: 0.02em;
}

.login-footer a {
  color: #1E293B;
  font-weight: 700;
  text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════
   POPUP MULTI-GAZ — Séparateurs, valeurs, boutons intervention
══════════════════════════════════════════════════════════════ */

.popup-gas-separator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px;
  font-size: 9.5px;
  font-weight: 700;
  color: #86868B;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.popup-gas-separator::before,
.popup-gas-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(0,0,0,0.07);
}

.gas-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-value);
  font-variant-numeric: tabular-nums;
}
.gas-value.alert { color: var(--color-alert); }
.gas-value.warn  { color: var(--status-warn); }
.gas-value.ok    { color: var(--color-spark); }

/* ─────────────────────────────────────────────────────────────
   Bouton Intervenir — couleur héritée du statut HSE via style inline
   (background + border-color injectés par map.js selon hse.color)
   ───────────────────────────────────────────────────────────── */
.popup-action-btn.intervenir-btn {
  color: #fff;
  font-weight: 700;
  font-size: 11px;
  border: 1.5px solid transparent;   /* couleur overridée par inline */
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.14);
  transition: all var(--transition);
  letter-spacing: 0.02em;
  font-family: inherit;
}
.popup-action-btn.intervenir-btn:hover:not(:disabled) {
  filter: brightness(1.10);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.20);
}
.popup-action-btn.intervenir-btn:disabled {
  cursor: not-allowed;
  opacity: 0.70;
  filter: saturate(0.55);
}

/* ══════════════════════════════════════════════════════════════
   MODULE SENTINELLE — Vue complète
══════════════════════════════════════════════════════════════ */

/* ── KPI chips ─────────────────────────────────────────────── */
.sent-stats-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.sent-stat-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  box-shadow: var(--shadow-card);
  flex: 1;
  min-width: 120px;
  transition: box-shadow var(--transition);
}
.sent-stat-chip:hover { box-shadow: var(--shadow-hover); }

.sent-stat-chip > i {
  font-size: 18px;
  flex-shrink: 0;
}

.sent-stat-chip--active  > i { color: #1979B2; }   /* Bleu Galtek — dans le regard */
.sent-stat-chip--enattente > i { color: #23C0E8; }   /* Bleu clair — en déplacement  */
.sent-stat-chip--over    > i { color: #df4454; }   /* Rouge Alerte — dépassement   */
.sent-stat-chip--closed  > i { color: #94a3b8; }   /* Gris neutre — archivé        */

.sent-stat-chip > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sent-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sent-stat-val {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-value);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ── Carte configuration ────────────────────────────────────── */
.sent-config-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  margin-bottom: 18px;
}

.sent-config-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-value);
  background: rgba(25,121,178,0.03);
}

.sent-config-body {
  padding: 14px 16px;
}

.sent-config-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-label);
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

.sent-config-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sent-config-input {
  flex: 1;
  padding: 9px 12px;
  background: #F0F0F2;
  border: 1px solid #E5E5EA;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-value);
  outline: none;
  transition: all var(--transition);
  font-family: inherit;
}
.sent-config-input:focus {
  background: #fff;
  border-color: rgba(25,121,178,0.45);
  box-shadow: 0 0 0 3px rgba(25,121,178,0.12);
}

.sent-config-apply-btn {
  padding: 9px 18px;
  background: linear-gradient(180deg, #1A85C2 0%, #1979B2 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 4px 12px rgba(25,121,178,0.28);
  transition: all var(--transition);
  white-space: nowrap;
  font-family: inherit;
  letter-spacing: 0.02em;
}
.sent-config-apply-btn:hover {
  background: linear-gradient(180deg, #2291d0 0%, #1A85C2 100%);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(25,121,178,0.36);
}

/* ── En-tête liste ───────────────────────────────────────────── */
.sent-list-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-value);
  margin-bottom: 10px;
  padding-left: 2px;
}

/* ── Liste interventions ─────────────────────────────────────── */
.sent-interventions-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
}

/* ── Carte intervention ─────────────────────────────────────── */
.sent-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.sent-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

/* ── Niv.2 CRITIQUE — Rouge Danger pulsant ── */
.sent-card--alert2 {
  border-left: 4px solid #df4454;
  box-shadow: 0 4px 20px rgba(223,68,84,0.18);
  animation: hse-critical-glow 1.8s ease-in-out infinite;
}

/* ── Niv.1 WARN — jaune ambre ── */
.sent-card--alert1 {
  border-left: 4px solid var(--status-warn);
  animation: hse-warn-breathe 2s ease-in-out infinite;
}
.sent-card--closed {
  opacity: 0.70;
}

.sent-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  background: rgba(25,121,178,0.03);
}

.sent-card-id-block {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sent-intervention-id {
  font-size: 13px;
  font-weight: 800;
  color: var(--text-value);
  letter-spacing: 0.04em;
}

/* ── Badges ─────────────────────────────────────────────────── */
.sent-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
}
/* Badges Sentinelle — matrice HSE */
.sent-badge--ok       { background: rgba(25,121,178,0.10);  color: var(--status-info);     }
.sent-badge--warn     {
  background: rgba(0,43,91,0.12);
  color: #002B5B;
  animation: hse-warn-breathe 1.8s ease-in-out infinite;
}
.sent-badge--critical {
  background: rgba(223,68,84,0.14);
  color: #df4454;
  animation: hse-critical-glow 1.4s ease-in-out infinite;
}
.sent-badge--closed   { background: rgba(134,134,139,0.10); color: #86868B;                }
.sent-badge--terminee { background: rgba(35,192,232,0.12); color: #23C0E8; border: 1px solid rgba(35,192,232,0.25); }

/* ── Bouton clôturer ─────────────────────────────────────────── */
.sent-close-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(223,68,84,0.08);
  color: #df4454;
  border: 1.5px solid rgba(223,68,84,0.25);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  white-space: nowrap;
}
.sent-close-btn:hover {
  background: rgba(223,68,84,0.16);
  border-color: rgba(223,68,84,0.40);
}

/* ── Corps de carte ─────────────────────────────────────────── */
.sent-card-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}

.sent-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text-label);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  width: 80px;
  flex-shrink: 0;
}
.sent-label i { font-size: 10px; color: #B0B0B5; }

.sent-value {
  color: var(--text-value);
  font-weight: 600;
  font-size: 12px;
}

/* ── Ligne RSSI ─────────────────────────────────────────────── */
.sent-rssi-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
  border-top: 1px solid rgba(0,0,0,0.05);
  margin-top: 2px;
}

/* ── État vide ──────────────────────────────────────────────── */
.sent-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: #94a3b8;
}
.sent-empty i {
  font-size: 40px;
  opacity: 0.25;
  margin-bottom: 14px;
}
.sent-empty p {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 6px;
}
.sent-empty span {
  font-size: 12px;
  color: #94a3b8;
  max-width: 280px;
  line-height: 1.5;
}

.login-footer a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   MODULE SENTINELLE — Tactical Command Centre (v2)
   Inline config · KPI chips · Section labels · Tactical grid
   Archive accordion · Clôture modal
══════════════════════════════════════════════════════════════ */

/* ── Config inline (durée moy.) ─────────────────────────────── */
.sent-inline-config {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  flex-shrink: 0;
}
.sent-inline-input {
  width: 52px;
  border: 1px solid rgba(25,121,178,0.30);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
  font-family: inherit;
  color: #1E293B;
  text-align: center;
  background: #fff;
  outline: none;
  font-weight: 600;
  -moz-appearance: textfield;
}
.sent-inline-input::-webkit-outer-spin-button,
.sent-inline-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sent-inline-input:focus {
  border-color: #1979B2;
  box-shadow: 0 0 0 3px rgba(25,121,178,0.12);
}
.sent-inline-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: #1979B2;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 11px;
  font-family: inherit;
  transition: background var(--transition);
  flex-shrink: 0;
}
.sent-inline-apply:hover { background: #1464a0; }

/* ── KPI chips row ──────────────────────────────────────────── */
.sent-stats-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.sent-stat-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  flex: 1;
  min-width: 80px;
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.sent-stat-chip i { font-size: 18px; flex-shrink: 0; }
.sent-stat-chip--active  i { color: #1979B2; }   /* Bleu Galtek */
.sent-stat-chip--enattente i { color: #23C0E8; }   /* Bleu clair  */
.sent-stat-chip--over    i { color: #df4454; }   /* Rouge Alerte */
.sent-stat-chip--closed  i { color: #94a3b8; }   /* Gris neutre */
.sent-stat-label {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  line-height: 1;
  margin-bottom: 3px;
}
.sent-stat-val {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  display: block;
}
.sent-stat-chip--active  .sent-stat-val { color: #1979B2; }
.sent-stat-chip--enattente .sent-stat-val { color: #23C0E8; }
.sent-stat-chip--over    .sent-stat-val { color: #df4454; }
.sent-stat-chip--closed  .sent-stat-val { color: #94a3b8; }

/* ── Label de section + point live ─────────────────────────── */
.sent-section-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 10px;
}
.sent-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1979B2;
  box-shadow: 0 0 0 0 rgba(25,121,178,0.5);
  animation: live-dot-pulse 1.5s ease-out infinite;
  margin-left: 2px;
}
@keyframes live-dot-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(25,121,178,0.5); }
  70%  { box-shadow: 0 0 0 7px rgba(25,121,178,0.0); }
  100% { box-shadow: 0 0 0 0   rgba(25,121,178,0.0); }
}

/* ── Chrono HSE — alerte dépassement (rouge clignotant) ──────── */
.sent-chrono--alert {
  color      : #df4454;
  font-weight: 800;
  font-size  : 11px;
  animation  : sentChronoAlert 0.7s ease-in-out infinite alternate;
  display    : inline-flex;
  align-items: center;
}
@keyframes sentChronoAlert {
  from { opacity: 1; }
  to   { opacity: 0.25; }
}

/* ── Section "En Attente" — Bleu clair #23C0E8 ─────────────────── */
.sent-enattente-header {
  display    : flex;
  align-items: center;
  gap        : 6px;
  font-size  : 11px;
  font-weight: 700;
  color      : #23C0E8;
  text-transform : uppercase;
  letter-spacing : 0.5px;
  margin     : 4px 0 8px;
}
.sent-enattente-list {
  display   : flex;
  flex-wrap : wrap;
  gap       : 8px;
  margin-bottom: 14px;
}
.sent-enattente-chip {
  display    : flex;
  align-items: center;
  gap        : 7px;
  padding    : 6px 12px;
  background : rgba(35,192,232,0.07);
  border     : 1px solid rgba(35,192,232,0.30);
  border-radius: 99px;
  font-size  : 11px;
}
.sent-enattente-name {
  font-weight: 700;
  color      : #1E293B;
}
.sent-enattente-sensor {
  color      : #64748b;
  font-size  : 10px;
}
.sent-enattente-est {
  color      : #23C0E8;
  font-weight: 600;
  font-size  : 10px;
  margin-left: 2px;
}

/* ══════════════════════════════════════════════════════════════
   GRILLE TACTIQUE (cartes d'intervention live)
══════════════════════════════════════════════════════════════ */

.sent-tactical-grid {
  display: grid;
  /* 380px min assure que la section "Liaison Agent" ne tronque jamais sur phases longues */
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
  margin-bottom: 20px;

  /* ── Défilement indépendant : jusqu'à 10+ missions sans cacher les KPIs ── */
  max-height: 62vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;       /* compense la largeur de la scrollbar */

  /* Scrollbar discrète (Chrome/Safari) */
  scrollbar-width: thin;
  scrollbar-color: rgba(25,121,178,0.25) transparent;
}
.sent-tactical-grid::-webkit-scrollbar { width: 5px; }
.sent-tactical-grid::-webkit-scrollbar-track { background: transparent; }
.sent-tactical-grid::-webkit-scrollbar-thumb {
  background: rgba(25,121,178,0.25);
  border-radius: 99px;
}
.sent-tactical-grid::-webkit-scrollbar-thumb:hover {
  background: rgba(25,121,178,0.50);
}

/* ── Carte tactique ─────────────────────────────────────────── */
.sent-tc-card {
  background: rgba(255,255,255,0.90);
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
  /* Empêche les éléments enfants de déclencher des événements de survol individuels (évite le jitter) */
  pointer-events: auto;
}
.sent-tc-card > * {
  pointer-events: none; /* Seule la carte parente capte le hover */
}
.sent-tc-card .sent-tc-footer {
  pointer-events: auto; /* Mais les boutons en bas doivent rester cliquables */
}
.sent-tc-card .sent-tc-footer button {
  pointer-events: auto;
}

.sent-tc-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  transform: scale(1.01) translateY(-1px);
  border-color: rgba(25, 121, 178, 0.2);
}
.sent-tc-card--alert1 {
  border-left: 4px solid #002B5B;
  animation: hse-warn-breathe 2s ease-in-out infinite;
}
.sent-tc-card--alert2 {
  border-left: 4px solid #df4454;
  box-shadow: 0 4px 20px rgba(223,68,84,0.18);
  animation: hse-critical-glow 1.8s ease-in-out infinite;
}

/* En-tête de carte */
.sent-tc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  background: rgba(25,121,178,0.03);
  gap: 8px;
}
.sent-tc-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.sent-tc-agent {
  font-size: 14px;
  font-weight: 800;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sent-tc-sensor-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: #1979B2;
  background: rgba(25,121,178,0.10);
  padding: 2px 7px;
  border-radius: 5px;
  letter-spacing: 0.03em;
  align-self: flex-start;
}

/* Barre de progression */
.sent-tc-progress-section {
  padding: 10px 14px 6px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sent-tc-progress-track {
  width: 100%;
  height: 5px;
  background: rgba(0,0,0,0.07);
  border-radius: 99px;
  overflow: hidden;
}
.sent-tc-progress-fill {
  height: 100%;
  border-radius: 99px;
  transition: width 0.5s ease, background 0.5s ease;
  min-width: 4px;
}
@keyframes sent-bar-pulse {
  0%, 100% { opacity: 1;    }
  50%       { opacity: 0.45; }
}
.sent-bar-critical { animation: sent-bar-pulse 0.9s ease-in-out infinite; }

/* Temps écoulé / restant */
.sent-tc-times {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.sent-tc-elapsed {
  font-size: 11px;
  color: #64748b;
  font-weight: 600;
}
.sent-tc-remain {
  font-size: 11px;
  font-weight: 700;
}

/* Ligne gaz */
.sent-tc-gas-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 14px;
  border-top: 1px solid rgba(0,0,0,0.04);
}
.sent-tc-gas-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  background: rgba(0,0,0,0.03);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 6px;
  padding: 3px 8px;
}

/* Ligne RSSI */
.sent-tc-rssi {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px 6px;
  border-top: 1px solid rgba(0,0,0,0.04);
}

/* Métadonnées agent (rôle + matricule) */
.sent-tc-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin: 2px 0 2px;
}
.sent-tc-role-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 600;
  color: #64748b;
  background: rgba(0,0,0,0.05);
  padding: 2px 6px;
  border-radius: 4px;
}
.sent-tc-matricule {
  font-size: 9px;
  font-weight: 800;
  color: #1979B2;
  letter-spacing: 0.04em;
  background: rgba(25,121,178,0.10);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Pied de carte — deux boutons */
.sent-tc-footer {
  padding: 8px 14px 12px;
  border-top: 1px solid rgba(0,0,0,0.05);
  margin-top: auto;
  display: flex;
  gap: 6px;
}
.sent-tc-contact-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  padding: 7px 10px;
  background: rgba(0,43,91,0.07);
  color: #002B5B;
  border: 1.5px solid rgba(0,43,91,0.18);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.sent-tc-contact-btn:hover {
  background: rgba(0,43,91,0.13);
  border-color: rgba(0,43,91,0.32);
}
.sent-tc-danger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  padding: 7px 10px;
  background: rgba(223, 68, 84, 0.07);
  color: #df4454;
  border: 1.5px solid rgba(223, 68, 84, 0.22);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  white-space: nowrap;
}
.sent-tc-danger-btn:hover {
  background: rgba(223, 68, 84, 0.14);
  border-color: rgba(223, 68, 84, 0.40);
  box-shadow: 0 0 10px rgba(223, 68, 84, 0.2);
}

.sent-tc-validate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1;
  padding: 7px 10px;
  /* Charte AQUILON : ambre #d97706 retiré → Rouge officiel #df4454           */
  background: rgba(223, 68, 84, 0.07);
  color: #df4454;
  border: 1.5px solid rgba(223, 68, 84, 0.22);
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  white-space: nowrap;
}
.sent-tc-validate-btn:hover {
  background: rgba(217, 119, 6, 0.14);
  border-color: rgba(217, 119, 6, 0.40);
  box-shadow: 0 0 10px rgba(217, 119, 6, 0.2);
}

.sent-modal-btn-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 18px;
  background: rgba(223, 68, 84, 0.1);
  color: #df4454;
  border: 1.5px solid rgba(223, 68, 84, 0.3);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
}
.sent-modal-btn-danger:hover {
  background: #df4454;
  color: white;
  box-shadow: 0 4px 15px rgba(223, 68, 84, 0.3);
}

/* ══════════════════════════════════════════════════════════════
   ARCHIVE ACCORDION (interventions clôturées)
══════════════════════════════════════════════════════════════ */

.sent-archive-details {
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}
.sent-archive-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  list-style: none;
  transition: background var(--transition);
}
.sent-archive-summary::-webkit-details-marker { display: none; }
.sent-archive-summary:hover { background: rgba(0,0,0,0.03); }
.sent-archive-summary > i:first-child { font-size: 13px; color: #64748b; }
.sent-archive-badge {
  margin-left: 4px;
  background: rgba(0,0,0,0.06);
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 99px;
}
.sent-archive-chevron {
  margin-left: auto;
  font-size: 11px;
  color: #94a3b8;
  transition: transform 0.2s ease;
}
details.sent-archive-details[open] .sent-archive-chevron {
  transform: rotate(180deg);
}
.sent-archive-list {
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sent-archive-card {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 8px 12px;
}

/* ── Bloc audio (rapport vocal terrain) ────────────────────── */
.sent-archive-audio-block {
  border-bottom: 1px solid rgba(25,121,178,0.08);
  padding: 9px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(25,121,178,0.03);
}
.sent-archive-audio-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #1979B2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sent-archive-audio-player {
  width: 100%;
  height: 30px;
  border-radius: 6px;
  accent-color: #1979B2;
  outline: none;
}

/* ── Archive card étendue (notes + PDF) ────────────────────── */
/* ── Archive card simplifiée (Infos essentielles) ───────────────── */
.sent-archive-card--simplified {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(25, 121, 178, 0.12);
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.sent-archive-card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 9px 12px;
}

.sent-archive-content {
  display: flex;
  gap: 16px;
  padding: 12px;
  border-top: 1px solid rgba(0,0,0,0.05);
  background: rgba(248,250,252,0.6);
}

.sent-archive-media-photo {
  flex-shrink: 0;
}
.sent-archive-media-photo img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 1.5px solid #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.2s ease;
}
.sent-archive-media-photo img:hover {
  transform: scale(1.05);
}

.sent-archive-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sent-archive-notes-display {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sent-archive-notes-text {
  font-size: 11.5px;
  line-height: 1.5;
  color: #475569;
  font-style: italic;
  background: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.04);
  max-width: 100%;
}
.gantt-mission-bar {
  position: absolute;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  padding: 0 6px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  z-index: 2;
  border: 1px solid rgba(255,255,255,0.15);
  pointer-events: auto;
}
.gantt-mission-bar > * { pointer-events: none; }
.gantt-mission-bar:hover {
  transform: scaleY(1.15);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
  z-index: 10;
}
.gantt-next-day-arrow {
  position: absolute;
  right: 4px;
  font-size: 8px;
  color: rgba(255,255,255,0.8);
  animation: nextDayPoint 1.5s infinite;
}
@keyframes nextDayPoint {
  0%, 100% { transform: translateX(0); opacity: 0.8; }
  50% { transform: translateX(3px); opacity: 1; }
}
.sent-archive-pdf-btn:hover { background: rgba(0,43,91,0.13); }
.sent-archive-pdf-btn--locked {
  color: #92400e;
  background: rgba(217,119,6,0.07);
  border-color: rgba(217,119,6,0.22);
  cursor: not-allowed;
}
.sent-archive-pdf-lock-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  /* Charte AQUILON : orange #f59e0b retiré → Rouge officiel #df4454          */
  background: #df4454;
  flex-shrink: 0;
  vertical-align: middle;
}
.sent-archive-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  background: rgba(0,0,0,0.05);
  padding: 2px 7px;
  border-radius: 5px;
}
.sent-archive-empty {
  font-size: 12px;
  color: #94a3b8;
  text-align: center;
  padding: 16px 10px;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   MODALE — Rapport de Fin d'Intervention (Clôture)
══════════════════════════════════════════════════════════════ */

.sent-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.sent-modal {
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.24);
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: modal-appear 0.22s cubic-bezier(.34,1.56,.64,1) both;
  overflow: hidden;
}
/* Responsive — laisse de l'air sur tablette, plein écran sur mobile */
@media (max-width: 960px)  { .sent-modal { max-width: calc(100vw - 40px); } }
@media (max-width: 540px)  { .sent-modal { max-width: 100%; border-radius: 12px; } }
@keyframes modal-appear {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Corps scrollable — isole header et footer sticky */
.sent-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-width: thin;
  scrollbar-color: rgba(25,121,178,0.22) transparent;
}
.sent-modal-body::-webkit-scrollbar { width: 5px; }
.sent-modal-body::-webkit-scrollbar-thumb {
  background: rgba(25,121,178,0.25);
  border-radius: 4px;
}
.sent-modal-body::-webkit-scrollbar-track { background: transparent; }

/* En-tête modal */
.sent-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: rgba(25,121,178,0.03);
}
.sent-modal-title {
  font-size: 15px;
  font-weight: 800;
  color: #1E293B;
  flex: 1;
  margin: 0;
}
.sent-modal-close-x {
  width: 30px;
  height: 30px;
  border: none;
  background: rgba(0,0,0,0.06);
  border-radius: 8px;
  cursor: pointer;
  color: #64748b;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  flex-shrink: 0;
  font-family: inherit;
}
.sent-modal-close-x:hover { background: rgba(0,0,0,0.12); }

/* Bloc résumé */
.sent-modal-summary {
  padding: 14px 20px;
  background: rgba(0,43,91,0.03);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sent-modal-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  gap: 8px;
}
.sent-modal-summary-row > span {
  color: #64748b;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
}
.sent-modal-summary-row > span i { font-size: 10px; color: #1979B2; }
.sent-modal-summary-row > strong {
  font-size: 12px;
  font-weight: 700;
  color: #1E293B;
}

/* ══════════════════════════════════════════════════════════
   Rapports terrain — styles utilitaires (loading / empty)
══════════════════════════════════════════════════════════ */
.sent-cm-reports-loading {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: #64748b;
  padding: 16px 20px;
}
.sent-cm-reports-empty {
  font-size: 11.5px;
  color: #94a3b8;
  padding: 14px 20px;
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════
   TABLEAU DE RÉVISION — Contributions terrain (modale de clôture)
   Colonnes : Agent | Médias | Note initiale | Synthèse QG
   RÈGLE : tous les éléments d'un rapport sur UNE SEULE ligne.
══════════════════════════════════════════════════════════ */

/* Conteneur général */
.sent-cm-reports {
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Barre d'en-tête : titre section + bouton save */
.sent-cm-table-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 10px;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(226,232,240,0.6);
}
.sent-cm-table-title {
  font-size: 14px;
  font-weight: 800;
  color: #1E293B;
  letter-spacing: -0.01em;
}
.sent-cm-table-count {
  font-size: 11px;
  font-weight: 500;
  color: #94a3b8;
}
.sent-cm-save-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: inherit;
  color: #fff;
  background: #1979B2;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(25,121,178,0.22);
}
.sent-cm-save-all-btn:hover:not(:disabled) {
  background: #1464a0;
  box-shadow: 0 4px 12px rgba(25,121,178,0.30);
  transform: translateY(-1px);
}
.sent-cm-save-all-btn:active   { transform: translateY(0); }
.sent-cm-save-all-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.sent-cm-save-all-btn--saved {
  background: #059669;
  box-shadow: 0 2px 8px rgba(5,150,105,0.22);
}

/* Table principale */
.sent-cm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  table-layout: fixed;
}

/* ── En-tête sticky — fond navy sombre (style "dashboard") ── */
.sent-cm-th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 12px;
  background: #002B5B;                 /* Navy Galtek */
  color: rgba(255,255,255,0.75);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  text-align: left;
  white-space: nowrap;
  border: none;
}
.sent-cm-th:first-child { border-radius: 0; }

/* ── Cellules — alignement MILIEU vertical strict ── */
.sent-cm-td {
  padding: 11px 12px;
  vertical-align: middle;             /* ← clé : tout sur une ligne */
  border-bottom: 1px solid rgba(226,232,240,0.65);
  word-break: break-word;
}
.sent-cm-tr:hover .sent-cm-td       { background: rgba(25,121,178,0.03); }
.sent-cm-tr-alt .sent-cm-td         { background: rgba(248,250,252,0.7); }
.sent-cm-tr-alt:hover .sent-cm-td   { background: rgba(25,121,178,0.05); }

/* ── Colonne 1 : Agent — 120px fixe ── */
.sent-cm-th:nth-child(1),
.sent-cm-td-agent { width: 120px; min-width: 100px; }
.sent-cm-agent-name {
  font-size: 12px;
  font-weight: 700;
  color: #1E293B;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.sent-cm-agent-date {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

/* ── Colonne 2 : Médias — 120px fixe, FLEX ROW strict ── */
.sent-cm-th:nth-child(2),
.sent-cm-td-media { width: 120px; min-width: 100px; }
/* Wrapper interne : photo + audio CÔTE À CÔTE */
.sent-cm-media-inner {
  display: flex;
  flex-direction: row;               /* ← ROW = pas d'empilement */
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: nowrap;                 /* interdit le retour à la ligne */
}

/* Miniature photo 48×48 */
.sent-cm-thumb-sm {
  width: 48px;
  height: 48px;
  min-width: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 1.5px solid rgba(25,121,178,0.22);
  background: #f1f5f9;
  display: block;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.12s;
  flex-shrink: 0;
}
.sent-cm-thumb-sm:hover { opacity: 0.85; transform: scale(1.06); }
.sent-cm-thumb-placeholder {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 6px;
  border: 1.5px dashed rgba(148,163,184,0.35);
  background: rgba(241,245,249,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  flex-shrink: 0;
}

/* Bouton play / pause circulaire */
.sent-cm-audio-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  border: 1.5px solid rgba(25,121,178,0.28);
  background: rgba(25,121,178,0.08);
  color: #1979B2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  font-family: inherit;
  padding: 0;
  flex-shrink: 0;
}
.sent-cm-audio-btn:hover  { background: rgba(25,121,178,0.18); transform: scale(1.07); }
.sent-cm-audio-btn:active { transform: scale(0.93); }
.sent-cm-audio-btn.playing {
  background: rgba(25,121,178,0.22);
  border-color: #1979B2;
  color: #1464a0;
  box-shadow: 0 0 0 3px rgba(25,121,178,0.12);
}
.sent-cm-audio-btn--disabled { opacity: 0.28; cursor: not-allowed; pointer-events: none; }
.sent-cm-audio-el { display: none; }

/* ── Colonne 3 : Note initiale — 22% de la largeur totale ── */
.sent-cm-th:nth-child(3),
.sent-cm-td-notes { width: 22%; min-width: 140px; }
.sent-cm-raw-notes {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  font-style: italic;
  font-size: 11px;
  color: #64748b;
  line-height: 1.55;
}
.sent-cm-raw-notes::before { content: '\201C'; color: #1979B2; font-style: normal; font-weight: 700; }
.sent-cm-raw-notes::after  { content: '\201D'; color: #1979B2; font-style: normal; font-weight: 700; }
.sent-cm-raw-notes--empty  {
  font-style: italic;
  color: #cbd5e1;
}
.sent-cm-raw-notes--empty::before,
.sent-cm-raw-notes--empty::after { content: ''; }

/* ── Colonne 4 : Synthèse QG — prend tout l'espace restant ── */
.sent-cm-td-revision { min-width: 140px; }
.sent-cm-qg-ta {
  width: 100%;
  min-height: 68px;
  resize: vertical;
  font-size: 11.5px;
  font-family: inherit;
  line-height: 1.55;
  color: #1E293B;
  background: #fff;
  border: 1.5px solid rgba(25,121,178,0.16);
  border-radius: 8px;
  padding: 7px 10px;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sent-cm-qg-ta:focus {
  outline: none;
  border-color: #1979B2;
  box-shadow: 0 0 0 3px rgba(25,121,178,0.10);
}
.sent-cm-qg-ta::placeholder { color: #b0bec5; font-style: italic; }

/* Checkbox de validation sécurité */
.sent-modal-check-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 600;
  color: #334155;
  cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  background: rgba(0,0,0,0.01);
  transition: background var(--transition), color var(--transition);
  line-height: 1.5;
}
.sent-modal-check-label:hover { background: rgba(25,121,178,0.04); }
.sent-modal-check-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: #1979B2;
  cursor: pointer;
}
.sent-modal-check-label:has(input:checked) {
  background: rgba(25,121,178,0.06);
  color: #1979B2;
}

/* Zone textarea (observations terrain) */
.sent-modal-field-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 14px 20px 5px;
}
.sent-modal-field-label span {
  font-weight: 400;
  color: #94a3b8;
  text-transform: none;
  letter-spacing: 0;
  font-size: 10px;
}
.sent-modal-textarea {
  display: block;
  width: calc(100% - 40px);
  min-height: 80px;
  max-height: 140px;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 12px;
  font-family: inherit;
  color: #1E293B;
  background: rgba(255,255,255,0.9);
  resize: vertical;
  box-sizing: border-box;
  outline: none;
  margin: 0 20px 14px;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.sent-modal-textarea:focus {
  border-color: #1979B2;
  box-shadow: 0 0 0 3px rgba(25,121,178,0.12);
}
.sent-modal-textarea::placeholder { color: #b0bec5; }

/* Boutons d'actions — pied de page fixe (sticky footer) */
.sent-modal-actions {
  display: flex;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(0,0,0,0.08);
  background: rgba(255,255,255,0.97);
  flex-shrink: 0;
  box-shadow: 0 -4px 12px rgba(15,23,42,0.04);
}
.sent-modal-btn-cancel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  background: rgba(0,0,0,0.06);
  color: #64748b;
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition);
  flex-shrink: 0;
}
.sent-modal-btn-cancel:hover { background: rgba(0,0,0,0.10); }
.sent-modal-btn-validate {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1;
  padding: 9px 18px;
  background: #1979B2;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition), opacity var(--transition);
}
.sent-modal-btn-validate:hover:not(:disabled) { background: #1464a0; }
.sent-modal-btn-validate:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* ══════════════════════════════════════════════════════════════
   DOUBLE VALIDATION — Bannière de statut terrain
   ─────────────────────────────────────────────────────────────
   État bloqué  → fond ambré / texte brun foncé / Shield-Alert
   État débloqué→ fond émeraude / texte vert foncé / Check-Circle
══════════════════════════════════════════════════════════════ */
.sent-dv-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 20px 14px;
  padding: 11px 12px 11px 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition:
    background       0.30s ease,
    border-color     0.30s ease,
    color            0.30s ease;
}
.sent-dv-banner--blocked {
  background   : rgba(217, 119, 6, 0.07);
  border-color : rgba(217, 119, 6, 0.28);
  color        : #78350f;
}
.sent-dv-banner--unlocked {
  background   : rgba(16, 185, 129, 0.07);
  border-color : rgba(16, 185, 129, 0.30);
  color        : #064e3b;
}

.sent-dv-icon {
  flex-shrink : 0;
  width       : 18px;
  height      : 18px;
  margin-top  : 1px;
  display     : flex;
  align-items : center;
}

.sent-dv-body {
  flex    : 1;
  min-width: 0;
}
.sent-dv-title {
  display       : block;
  font-size     : 10.5px;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom : 2px;
  line-height   : 1.3;
}
.sent-dv-subtitle {
  display    : block;
  font-size  : 11px;
  font-weight: 400;
  line-height: 1.55;
  opacity    : 0.88;
}

/* Bouton Actualiser */
.sent-dv-refresh-btn {
  flex-shrink     : 0;
  width           : 26px;
  height          : 26px;
  border          : 1px solid currentColor;
  border-radius   : 6px;
  background      : transparent;
  cursor          : pointer;
  display         : flex;
  align-items     : center;
  justify-content : center;
  color           : inherit;
  opacity         : 0.55;
  padding         : 0;
  transition      : opacity 0.15s ease, background 0.15s ease;
  font-family     : inherit;
}
.sent-dv-refresh-btn:hover {
  opacity    : 1;
  background : rgba(0,0,0,0.06);
}
/* Animation de rotation pendant le chargement */
.sent-dv-refresh-btn.spinning svg {
  animation: _dvSpin 0.75s linear infinite;
}
@keyframes _dvSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════
   SENTINELLE — Centre opérationnel pleine largeur
══════════════════════════════════════════════════════════════ */

.sent-command-layout {
  display: block;
}
.sent-main {
  width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   EFFECTIFS TERRAIN — Sidebar RH
══════════════════════════════════════════════════════════════ */

.teams-sidebar {
  width: 230px;
  flex-shrink: 0;
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 16px;
  overflow: hidden;
  position: sticky;
  top: 0;
  transition: width 0.24s cubic-bezier(0.4,0,0.2,1);
}
.teams-sidebar.collapsed {
  width: 46px;
}
.teams-sidebar.collapsed #teams-add-form,
.teams-sidebar.collapsed .teams-agents-list {
  display: none;
}
.teams-sidebar.collapsed .teams-sidebar-title {
  display: none;
}

.teams-sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: rgba(25,121,178,0.04);
  font-size: 12px;
  font-weight: 700;
  color: #1E293B;
}
.teams-sidebar-title { flex: 1; }

.teams-toggle-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: rgba(0,0,0,0.05);
  border-radius: 6px;
  cursor: pointer;
  color: #64748b;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  flex-shrink: 0;
  font-family: inherit;
}
.teams-toggle-btn:hover { background: rgba(0,0,0,0.10); }

.teams-add-form {
  padding: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.teams-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.teams-field label {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.teams-field-input,
.teams-field-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 10px;
  border: 1.5px solid rgba(0,0,0,0.09);
  border-radius: 8px;
  font-size: 11px;
  font-family: inherit;
  color: #1E293B;
  background: #f8fafc;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
  box-sizing: border-box;
}
.teams-field-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 28px;
  cursor: pointer;
}
.teams-field-input:focus,
.teams-field-select:focus {
  border-color: #1979B2;
  box-shadow: 0 0 0 3px rgba(25,121,178,0.10);
}

.teams-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: #1979B2;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background var(--transition);
  margin-top: 2px;
}
.teams-add-btn:hover { background: #1464a0; }

.teams-agents-list {
  overflow-y: auto;
  max-height: 420px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.teams-agent-card {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius: 10px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.teams-agent-name {
  font-size: 12px;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.2;
}
.teams-agent-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.teams-agent-role {
  font-size: 10px;
  color: #64748b;
  font-weight: 500;
}
.teams-agent-id {
  font-size: 10px;
  font-weight: 800;
  color: #1979B2;
  background: rgba(25,121,178,0.10);
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.03em;
}
.teams-agent-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 99px;
  align-self: flex-start;
}
.teams-agent-status--available {
  background: rgba(25,121,178,0.10);
  color: #1979B2;
}
.teams-agent-status--deployed {
  background: rgba(25,121,178,0.12);
  color: #1979B2;
}
.teams-agent-remove {
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: #cbd5e1;
  cursor: pointer;
  font-size: 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition), color var(--transition);
  flex-shrink: 0;
  font-family: inherit;
}
.teams-agent-remove:hover { background: rgba(223,68,84,0.10); color: #df4454; }

.teams-empty {
  text-align: center;
  padding: 20px 10px;
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   MODULE EFFECTIFS — Onglet dédié
══════════════════════════════════════════════════════════════ */

.effectifs-toggle-form-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: #1979B2;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.effectifs-toggle-form-btn:hover { background: #1464a0; }
.effectifs-toggle-form-btn.active { background: #002B5B; }

.effectifs-add-form {
  background: rgba(25,121,178,0.04);
  border: 1px solid rgba(25,121,178,0.15);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.effectifs-form-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.effectifs-form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 160px;
}
.effectifs-form-field label {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.02em;
}
.effectifs-input {
  height: 34px;
  padding: 0 10px;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  color: #1E293B;
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
.effectifs-input:focus { border-color: #1979B2; }
.effectifs-select {
  height: 34px;
  padding: 0 10px;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  color: #1E293B;
  background: #fff;
  outline: none;
  cursor: pointer;
  transition: border-color .15s;
}
.effectifs-select:focus { border-color: #1979B2; }
.effectifs-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 16px;
  background: #1979B2;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background .15s;
  flex-shrink: 0;
}
.effectifs-add-btn:hover { background: #1464a0; }

.effectifs-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 12px;
}
.effectifs-filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.effectifs-filter-select {
  height: 30px;
  padding: 0 10px;
  border: 1.5px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  font-size: 11px;
  font-family: inherit;
  color: #1E293B;
  background: #fff;
  cursor: pointer;
  outline: none;
  transition: border-color .15s;
}
.effectifs-filter-select:focus { border-color: #1979B2; }

/* ── Groupe filtre texte : conteneur avec bordure (icône + input fusionné) ── */
.effectifs-filter-group--search {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 0 10px 0 8px;
  transition: border-color .15s, box-shadow .15s;
}
.effectifs-filter-group--search:focus-within {
  border-color: #1979B2;
  box-shadow: 0 0 0 3px rgba(25,121,178,0.10);
}
.effectifs-filter-input {
  height: 30px;
  border: none;
  background: transparent;
  outline: none;
  font-size: 11px;
  font-family: inherit;
  color: #1E293B;
  min-width: 160px;
}
.effectifs-filter-input::placeholder { color: #94a3b8; }

.effectifs-filter-count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
}

.effectifs-table-wrap {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
}
.effectifs-table {
  width: 100%;
  border-collapse: collapse;
}
.effectifs-table thead tr {
  background: #f8fafc;
  border-bottom: 2px solid #f1f5f9;
}
.effectifs-table thead th {
  padding: 10px 14px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.effectifs-row {
  border-bottom: 1px solid #f1f5f9;
  transition: background .12s;
}
.effectifs-row:last-child { border-bottom: none; }
.effectifs-row:hover { background: rgba(25,121,178,0.03); }
.effectifs-table td {
  padding: 11px 14px;
  font-size: 12px;
  color: #1E293B;
  vertical-align: middle;
  text-align: center;
}
/* Les <input> borderless héritent text-align:left par défaut — on force center */
.effectifs-table td input,
.effectifs-table td .eff-inline {
  text-align: center;
}
.effectifs-td-name { font-weight: 600; }
.effectifs-td-mat  { font-family: 'Courier New', monospace; font-size: 11px; color: #64748b; }
.effectifs-td-role { color: #475569; }

/* ── Inline-editing Effectifs (inputs transparents style tableur) ── */
.eff-inline {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  color: #1E293B;
  padding: 3px 6px;
  border-radius: 5px;
  outline: none;
  transition: background .12s, border-color .12s;
  cursor: default;
}
.eff-inline:focus {
  background: rgba(25, 121, 178, 0.06);
  border-color: rgba(25, 121, 178, 0.35);
  cursor: text;
}
.eff-inline:read-only {
  opacity: 0.5;
  cursor: not-allowed;
}
.eff-inline:not(:read-only):hover {
  background: rgba(25, 121, 178, 0.04);
  border-color: rgba(25, 121, 178, 0.15);
}

.effectifs-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}
/* Solid fill — texte blanc — cohérent avec la charte HSE */
.effectifs-status-badge--available {
  background: #1979B2;   /* Bleu Océan — prestataire disponible */
  color: #FFFFFF;
}
.effectifs-status-badge--deployed {
  background: #1E293B;   /* Ardoise Nuit — prestataire en chantier */
  color: #FFFFFF;
}

.effectifs-remove-btn {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: #94a3b8;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  transition: background .12s, color .12s;
}
.effectifs-remove-btn:hover:not([disabled]) { background: rgba(223,68,84,0.10); color: #df4454; }
.effectifs-remove-btn[disabled] { opacity: 0.35; cursor: not-allowed; }

.effectifs-empty-row td {
  text-align: center;
  padding: 36px 20px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   MODALE ÉDITION TABLEUR — Table capteurs_mapping (style Excel)
══════════════════════════════════════════════════════════════ */

.table-edit-overlay {
  position: fixed;
  inset: 0;
  z-index: 9200;
  background: rgba(15,23,42,0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
.table-edit-overlay.open  { opacity: 1; pointer-events: all; }
.table-edit-overlay.closing { opacity: 0; pointer-events: none; }

.table-edit-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0,0,0,0.20), 0 0 0 1px rgba(255,255,255,0.5);
  width: 90%;
  max-width: 920px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96) translateY(12px);
  transition: transform .22s cubic-bezier(0.34,1.56,0.64,1);
}
.table-edit-overlay.open .table-edit-box { transform: scale(1) translateY(0); }

/* ── En-tête ── */
.table-edit-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 14px;
  border-bottom: 1px solid #f1f5f9;
  flex-shrink: 0;
}
.table-edit-title {
  font-size: 16px;
  font-weight: 800;
  color: #1E293B;
  margin: 0;
}
.table-edit-subtitle {
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.5;
}
.table-edit-close-x {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #94a3b8;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.table-edit-close-x:hover { background: rgba(223,68,84,0.09); color: #df4454; }

/* ── Bandeau conseil copier/coller ── */
.table-edit-paste-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 24px;
  background: rgba(25,121,178,0.04);
  border-bottom: 1px solid rgba(25,121,178,0.08);
  font-size: 11.5px;
  color: #475569;
  flex-shrink: 0;
  line-height: 1.5;
}
.table-edit-paste-hint kbd {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-family: 'Courier New', monospace;
  color: #1E293B;
  font-weight: 600;
}

/* ── Corps scrollable ── */
.table-edit-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
}

/* ── Grille Excel ── */
.spreadsheet-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.spreadsheet-th {
  padding: 10px 14px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  background: #f8fafc;
  border-bottom: 2px solid #f1f5f9;
  position: sticky;
  top: 0;
  z-index: 1;
}

.spreadsheet-row {
  border-bottom: 1px solid #f1f5f9;
  transition: background .1s;
}
.spreadsheet-row:hover { background: rgba(25,121,178,0.025); }
.spreadsheet-row:last-child { border-bottom: none; }

.spreadsheet-cell {
  padding: 3px 6px;
  vertical-align: middle;
  text-align: center;
}
.spreadsheet-cell--id {
  padding: 3px 12px;
  white-space: nowrap;
}

/* Input borderless style Excel — données en gris très foncé (#1E293B) */
.spreadsheet-input {
  display: block;
  width: 100%;
  border: 1.5px solid transparent;
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 12px;
  font-family: inherit;
  color: #1E293B;        /* règle stricte : jamais gris clair sur les données */
  background: transparent;
  outline: none;
  text-align: center;
  transition: border-color .12s, background .12s, box-shadow .12s;
  min-width: 0;
}
.spreadsheet-input:hover {
  border-color: rgba(25,121,178,0.22);
  background: rgba(25,121,178,0.02);
}
.spreadsheet-input:focus {
  border-color: #1979B2;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(25,121,178,0.13);
}
.spreadsheet-input::placeholder { color: #cbd5e1; }

/* Flash vert après collage Excel */
@keyframes pasteFlash {
  0%   { background: rgba(35,192,140,0.18); border-color: rgba(35,192,140,0.50); }
  100% { background: transparent;           border-color: transparent; }
}
.spreadsheet-input--pasted {
  animation: pasteFlash 0.9s ease-out forwards;
}

/* ── Pied de modale ── */
.table-edit-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  border-top: 1px solid #f1f5f9;
  flex-shrink: 0;
  background: #fafafa;
  gap: 12px;
}
.table-edit-row-count {
  font-size: 12px;
  color: #94a3b8;
  font-weight: 600;
  white-space: nowrap;
}
.table-edit-btn-cancel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  border: 1.5px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  background: #fff;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .12s, border-color .12s;
}
.table-edit-btn-cancel:hover { background: #f1f5f9; border-color: rgba(0,0,0,0.15); }

.table-edit-btn-save {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 22px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #1E293B 0%, #1979B2 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 3px 12px rgba(25,121,178,0.32);
  transition: box-shadow .15s, transform .1s;
  white-space: nowrap;
}
.table-edit-btn-save:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(25,121,178,0.44);
  transform: translateY(-1px);
}
.table-edit-btn-save:active:not(:disabled) { transform: scale(0.97); }
.table-edit-btn-save:disabled { opacity: 0.65; cursor: not-allowed; transform: none !important; }

/* ══════════════════════════════════════════════════════════════
   TÉLÉMÉTRIE Wi-Fi — Groupe icône+texte (reset strict)
══════════════════════════════════════════════════════════════ */

.sent-tc-wifi-group {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  flex-shrink: 0;     /* groupe SVG+label toujours visible, jamais compressé */
}
.sent-tc-wifi-group i {
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  flex-shrink: 0;
  line-height: 1;
}

/* ══════════════════════════════════════════════════════════════
   BADGES HSE — Tableau Distribution par secteur
══════════════════════════════════════════════════════════════ */

.hse-sector-badge {
  display: inline-block;
  vertical-align: middle;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.hse-sector-badge i {
  font-size: 9px;
  margin-right: 4px;
  vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════
   MODALE ASSIGNATION DE MISSION
══════════════════════════════════════════════════════════════ */

.assign-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.50);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.assign-modal {
  background: rgba(255,255,255,0.97);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  animation: modal-appear 0.22s cubic-bezier(.34,1.56,.64,1) both;
}
.assign-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: rgba(25,121,178,0.03);
}
.assign-modal-title {
  font-size: 14px;
  font-weight: 800;
  color: #1E293B;
  flex: 1;
  margin: 0;
}
.assign-modal-close-x {
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(0,0,0,0.06);
  border-radius: 8px;
  cursor: pointer;
  color: #64748b;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  font-family: inherit;
}
.assign-modal-close-x:hover { background: rgba(0,0,0,0.12); }
.assign-modal-sensor-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  font-size: 12px;
  background: rgba(0,43,91,0.03);
  border-bottom: 1px solid rgba(0,0,0,0.05);
  color: #64748b;
}
.assign-modal-sensor-row strong { color: #1979B2; font-weight: 700; }
.assign-modal-body {
  padding: 14px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.assign-modal-field { display: flex; flex-direction: column; gap: 5px; }
.assign-field-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.assign-field-label i { color: #1979B2; font-size: 10px; }
.assign-select,
.assign-input {
  padding: 8px 12px;
  border: 1.5px solid rgba(0,0,0,0.10);
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  color: #1E293B;
  background: #fff;
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  width: 100%;
  box-sizing: border-box;
}
.assign-select:focus,
.assign-input:focus {
  border-color: #1979B2;
  box-shadow: 0 0 0 3px rgba(25,121,178,0.12);
}
.assign-modal-actions {
  display: flex;
  gap: 10px;
  padding: 12px 20px 16px;
  border-top: 1px solid rgba(0,0,0,0.05);
}
.assign-btn-cancel {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: rgba(0,0,0,0.06);
  color: #64748b;
  border: 1px solid rgba(0,0,0,0.09);
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition);
  flex-shrink: 0;
}
.assign-btn-cancel:hover { background: rgba(0,0,0,0.10); }
.assign-btn-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: 1;
  padding: 9px 16px;
  background: #1979B2;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition);
}
.assign-btn-confirm:hover { background: #1464a0; }

/* ── Picker Multi-Agent (Squad Mode) ──────────────────────── */
.assign-agent-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 188px;
  overflow-y: auto;
  border: 1.5px solid rgba(0,0,0,0.09);
  border-radius: 10px;
  padding: 6px;
  background: #fafbfc;
  scrollbar-width: thin;
  scrollbar-color: rgba(25,121,178,0.18) transparent;
}
.assign-agent-picker::-webkit-scrollbar { width: 4px; }
.assign-agent-picker::-webkit-scrollbar-thumb {
  background: rgba(25,121,178,0.22);
  border-radius: 4px;
}
.assign-agent-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background var(--transition);
  user-select: none;
}
.assign-agent-row:hover { background: rgba(25,121,178,0.06); }
.assign-agent-row:has(input:checked) {
  background: rgba(25,121,178,0.10);
  border: 1px solid rgba(25,121,178,0.22);
}
/* Checkbox custom */
.assign-agent-cb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid #cbd5e1;
  border-radius: 5px;
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: border-color var(--transition), background var(--transition);
}
.assign-agent-cb:checked {
  background: #1979B2;
  border-color: #1979B2;
}
.assign-agent-cb:checked::after {
  content: '';
  position: absolute;
  top: 2px; left: 4px;
  width: 5px; height: 8px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.assign-agent-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.assign-agent-name {
  font-size: 12px;
  font-weight: 700;
  color: #1E293B;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.assign-agent-sub {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 500;
}
.assign-no-agents {
  font-size: 11px;
  color: #94a3b8;
  text-align: center;
  padding: 16px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
}
.assign-squad-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  color: #94a3b8;
  padding: 4px 2px;
  transition: color var(--transition);
}

/* ── Badge "Chef d'équipe" (Squad Picker) ──────────────────── */
.assign-chef-badge {
  display: none;
  align-items: center;
  margin-left: auto;
  padding: 2px 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #92400e;
  background: rgba(217,119,6,0.10);
  border: 1px solid rgba(217,119,6,0.28);
  border-radius: 99px;
  white-space: nowrap;
  pointer-events: none;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.assign-chef-badge--visible {
  display: flex;
}

/* ── Mode Planifié — champs verrouillés ───────────────────── */
.assign-input--readonly {
  background   : #f1f5f9;
  color        : #64748b;
  cursor       : not-allowed;
  border-color : #e2e8f0;
  pointer-events: none;
}
.assign-agent-row--locked {
  opacity      : 0.92;
  cursor       : default;
  pointer-events: none;
}
.assign-agent-row--locked:hover {
  background   : transparent;
}

/* ── Champ géolocalisation départ ────────────────────────── */
.assign-geo-row {
  display       : flex;
  align-items   : center;
  gap           : 8px;
}
.assign-geo-display {
  flex          : 1;
  padding       : 8px 12px;
  background    : #f8fafc;
  border        : 1.5px solid rgba(0,0,0,0.10);
  border-radius : 8px;
  font-size     : 12px;
  color         : #475569;
  font-family   : 'Courier New', monospace;
  white-space   : nowrap;
  overflow      : hidden;
  text-overflow : ellipsis;
}
.assign-geo-btn {
  flex-shrink   : 0;
  display       : inline-flex;
  align-items   : center;
  gap           : 5px;
  padding       : 7px 12px;
  background    : rgba(25,121,178,0.08);
  border        : 1.5px solid rgba(25,121,178,0.30);
  border-radius : 8px;
  color         : #1979B2;
  font-size     : 11px;
  font-weight   : 600;
  cursor        : pointer;
  white-space   : nowrap;
  transition    : background 0.15s, border-color 0.15s;
  font-family   : inherit;
}
.assign-geo-btn:hover {
  background    : rgba(25,121,178,0.15);
  border-color  : #1979B2;
}
.assign-geo-btn i { font-size: 10px; }

/* ── Bouton danger Sentinelle (Arrêt Mission Forcé) ──────── */
.sent-tc-danger-btn {
  display       : flex;
  align-items   : center;
  justify-content: center;
  gap           : 5px;
  flex          : 1;
  padding       : 7px 12px;
  background    : rgba(223,68,84,0.07);
  border        : 1.5px solid rgba(223,68,84,0.30);
  border-radius : 8px;
  color         : #df4454;
  font-size     : 11px;
  font-weight   : 600;
  cursor        : pointer;
  font-family   : inherit;
  transition    : background var(--transition), border-color var(--transition);
  white-space   : nowrap;
}
.sent-tc-danger-btn:hover {
  background    : rgba(223,68,84,0.15);
  border-color  : #df4454;
}

/* ── Escouade — Carte Tactique (Squad Mode) ───────────────── */
.sent-tc-squad {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 4px;
}
.sent-tc-squad-header {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.sent-tc-squad-member {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 3px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.sent-tc-squad-member:last-child { border-bottom: none; }

/* ══════════════════════════════════════════════════════════════
   CHAT TACTIQUE — Terminal de Communication (Offcanvas)
══════════════════════════════════════════════════════════════ */

.chat-panel-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9300;
}
.chat-panel {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: 360px;
  max-width: calc(100vw - 20px);
  background: rgba(248,250,252,0.98);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  border-left: 1px solid rgba(0,0,0,0.09);
  box-shadow: -4px 0 32px rgba(0,0,0,0.14);
  z-index: 9350;
  display: flex;
  flex-direction: column;
  animation: chat-slide-in 0.26s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes chat-slide-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0);    }
}

.chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  background: rgba(255,255,255,0.92);
  flex-shrink: 0;
}
.chat-panel-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}
.chat-panel-subtitle {
  font-size: 10px;
  font-weight: 600;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0 0 2px;
}
.chat-panel-agent-id {
  font-size: 14px;
  font-weight: 800;
  color: #1E293B;
  display: block;
}
.chat-panel-close-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: rgba(0,0,0,0.06);
  border-radius: 8px;
  cursor: pointer;
  color: #64748b;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  transition: background var(--transition);
}
.chat-panel-close-btn:hover { background: rgba(0,0,0,0.12); }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #f1f5f9;
}
.chat-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 160px;
  text-align: center;
  color: #94a3b8;
  gap: 8px;
}
.chat-empty-state i    { font-size: 32px; opacity: 0.22; }
.chat-empty-state p    { font-size: 13px; font-weight: 600; color: #64748b; margin: 0; }
.chat-empty-state span { font-size: 11px; color: #94a3b8; max-width: 220px; line-height: 1.5; }

.chat-message {
  display: flex;
  flex-direction: column;
  max-width: 80%;
}
.chat-message--sent     { align-self: flex-end;  align-items: flex-end;  }
.chat-message--received { align-self: flex-start; align-items: flex-start; }
.chat-bubble {
  padding: 9px 13px;
  border-radius: 16px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
  word-break: break-word;
}
.chat-message--sent .chat-bubble {
  background: #1979B2;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-message--received .chat-bubble {
  background: #fff;
  color: #1E293B;
  border: 1px solid rgba(0,0,0,0.07);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  border-bottom-left-radius: 4px;
}
.chat-time {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 500;
  margin-top: 4px;
  padding: 0 3px;
}

.chat-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px 12px;
  border-top: 1px solid rgba(0,0,0,0.07);
  background: rgba(255,255,255,0.95);
  flex-shrink: 0;
}
.chat-input {
  flex: 1;
  padding: 9px 14px;
  border: 1.5px solid rgba(0,0,0,0.10);
  border-radius: 22px;
  font-size: 12px;
  font-family: inherit;
  outline: none;
  background: #f8fafc;
  color: #1E293B;
  transition: border-color var(--transition);
}
.chat-input:focus { border-color: #1979B2; background: #fff; }
.chat-input::placeholder { color: #b0bec5; }
.chat-send-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: #1979B2;
  color: #fff;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  flex-shrink: 0;
  font-family: inherit;
}
.chat-send-btn:hover { background: #1464a0; }
.chat-buzz-btn {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(223,68,84,0.30);
  background: rgba(223,68,84,0.08);
  color: #df4454;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
  flex-shrink: 0;
  font-family: inherit;
}
.chat-buzz-btn:hover {
  background: rgba(223,68,84,0.18);
  border-color: rgba(223,68,84,0.55);
}

/* ── Topic MQTT dans le terminal de communication ──────── */
.chat-mqtt-topic {
  display: inline-block;
  font-size: 9px;
  font-family: 'Courier New', monospace;
  color: #1979B2;
  background: rgba(25,121,178,0.08);
  border: 1px solid rgba(25,121,178,0.20);
  border-radius: 4px;
  padding: 1px 5px;
  margin-top: 3px;
  letter-spacing: 0.3px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  user-select: text;
}

/* ── Indicateur de livraison MQTT (barre de saisie chat) ── */
.chat-mqtt-delivery {
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 9px;
  flex-shrink: 0;
  transition: opacity 0.3s ease;
}
.chat-mqtt-delivery--ok {
  color: #1979B2;
  background: rgba(25,121,178,0.12);
}
.chat-mqtt-delivery--warn {
  color: #df4454;
  background: rgba(223,68,84,0.12);
}

/* ── Télémétrie Wi-Fi Direct + Batterie (carte tactique) ──── */
.sent-tc-telemetry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 14px 2px;   /* 14px gauche = même axe que .sent-tc-gas-row */
  border-top: 1px solid rgba(0,0,0,0.05);
  margin-top: 6px;
}
.sent-tc-wifi {
  display: flex;
  align-items: center;
  gap: 8px;           /* alignement strict icône ↔ texte */
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  /* aucune marge négative, aucun padding asymétrique */
  margin: 0;
  padding: 0;
  min-width: 0;       /* autorise le rétrécissement flex (évite l'overflow) */
  overflow: hidden;   /* bloque tout débordement hors de la carte */
}
.sent-tc-wifi i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;        /* zone fixe pour l'icône */
  flex-shrink: 0;
  line-height: 1;
}
.sent-tc-battery {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 600;
  flex: 1;
  margin: 0;
  padding: 0;
}
.sent-tc-battery i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  flex-shrink: 0;
  line-height: 1;
}
.sent-tc-bat-bar {
  flex: 1;
  height: 5px;
  background: rgba(0,0,0,0.08);
  border-radius: 3px;
  overflow: hidden;
  min-width: 36px;
  max-width: 64px;
}
.sent-tc-bat-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s ease, background 0.4s;
}

/* ── Badge Relais Wi-Fi (Roaming) ── */
.sent-tc-relay {
  font-size: 9px;
  color: #94a3b8;
  font-weight: 500;
  padding: 1px 6px;
  background: rgba(0,0,0,0.04);
  border-radius: 4px;
  letter-spacing: 0.01em;
  margin-left: 2px;

  /* Ellipsis sur les sous-titres longs (ex: "Connexion agent non établie") */
  flex: 1 1 auto;           /* prend l'espace restant disponible */
  min-width: 0;             /* autorise le flex shrink en-dessous du contenu */
  white-space: nowrap;      /* requis pour text-overflow: ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Mode Évacuation — perte de signal totale ── */
.sent-tc-card--evac {
  border: 2px solid #df4454 !important;
  animation: evac-pulse 1.1s ease-in-out infinite !important;
}
@keyframes evac-pulse {
  0%,100% { box-shadow: 0 0 0   0  rgba(223,68,84,0.10); border-color: rgba(223,68,84,0.50); }
  50%     { box-shadow: 0 0 0 8px rgba(223,68,84,0.00); border-color: rgba(223,68,84,1.00); }
}
.sent-tc-evac-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(223,68,84,0.10);
  border-bottom: 1px solid rgba(223,68,84,0.25);
  font-size: 10px;
  font-weight: 800;
  color: #df4454;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 12px 12px 0 0;
}
.sent-tc-evac-banner i { font-size: 11px; animation: evac-pulse 1.1s ease-in-out infinite; }

/* ── Variante rouge : ALERTE PERTE LIAISON AGENT ── */
@keyframes liaison-alarm {
  0%, 100% { opacity: 1;    box-shadow: 0 0 0   0  rgba(239,68,68,0.15); }
  50%      { opacity: 0.25; box-shadow: 0 0 0 10px rgba(239,68,68,0.00); }
}
.sent-tc-evac-banner--liaison {
  background:    rgba(239,68,68,0.10);
  border-bottom: 1px solid rgba(239,68,68,0.30);
  color: #dc2626;
}
.sent-tc-evac-banner--liaison i {
  animation: liaison-alarm 0.75s ease-in-out infinite;  /* clignotement rapide */
}

/* ── Label "Liaison Agent" ── */
.sent-tc-liaison-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

/* ── Badge statut (Excellente / Instable / PERTE) ── */
.sent-tc-liaison-status {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 7px;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* ── Clignotement rouge pour état PERTE ── */
@keyframes liaison-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.20; }
}
.sent-tc-liaison-blink {
  animation: liaison-blink 0.7s step-start infinite;
}

/* ── Canal de Communication (Chat) ── */
.chat-canal-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(0,0,0,0.07);
  background: rgba(248,250,252,0.95);
  flex-shrink: 0;
}
.chat-canal-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.chat-canal-label i { color: #1979B2; }
.chat-canal-select {
  flex: 1;
  padding: 5px 10px;
  border: 1.5px solid rgba(0,0,0,0.09);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #1E293B;
  background: #fff;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color var(--transition);
}
.chat-canal-select:focus { border-color: #1979B2; }

/* ── Nom de l'expéditeur (messages reçus) ── */
.chat-sender {
  font-size: 9px;
  font-weight: 700;
  color: #1979B2;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
  display: block;
}

/* ── Texte blanc sur fond --status-warn ── */
.sent-badge--warn,
[style*="background:#002B5B"],
[style*="background: #002B5B"] {
  color: #ffffff !important;
}

/* ── Widget Météo Surface (Prévention des crues) ── */
.weather-widget {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px) saturate(120%);
  border-radius: 10px;
  border: 1px solid rgba(25,121,178,0.18);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  font-size: 12px;
  font-weight: 600;
  color: #1979B2;
  transition: color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, background 0.15s;
  white-space: nowrap;
  cursor: pointer;
}
.weather-widget:hover {
  background: rgba(25,121,178,0.06);
}
.weather-widget i {
  font-size: 14px;
  flex-shrink: 0;
  transition: color 0.4s ease;
}
.weather-widget-text {
  display: flex;
  flex-direction: column;
  gap: 0px;
  line-height: 1.25;
}
.weather-widget-label {
  font-size: 9px;
  font-weight: 500;
  opacity: 0.65;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.weather-widget-value {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ── États dynamiques du widget météo (basculés par JS selon prob) ──── */

/* État Sécurisé : risque ≤ 10 % — Bleu Galtek */
.weather-safe i,
.weather-safe #weather-value { color: #1979B2 !important; }
.weather-safe {
  background: rgba(25,121,178,0.08) !important;
  border: 1px solid rgba(25,121,178,0.2) !important;
}
.weather-safe:hover { background: rgba(25,121,178,0.13) !important; }

/* État Alerte : risque > 10 % — Rouge Danger */
.weather-alert i,
.weather-alert #weather-value { color: #df4454 !important; }
.weather-alert {
  background: rgba(223,68,84,0.08) !important;
  border: 1px solid rgba(223,68,84,0.2) !important;
}
.weather-alert:hover { background: rgba(223,68,84,0.13) !important; }

/* ══════════════════════════════════════════════════════════════
   MODALE MÉTÉO 7 JOURS — Open-Meteo
══════════════════════════════════════════════════════════════ */
.weather-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9300;
  background: rgba(15,23,42,0.54);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.weather-modal-box {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0,0,0,0.20);
  width: 100%;
  max-width: 760px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.weather-modal-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid #f1f5f9;
  background: #f8fafc;
}
.weather-modal-hdr-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.weather-modal-title {
  font-size: 15px;
  font-weight: 800;
  color: #1E293B;
  margin: 0 0 2px;
}
.weather-modal-sub {
  font-size: 10px;
  color: #94a3b8;
  font-weight: 500;
}
.weather-modal-close-btn {
  background: rgba(0,0,0,0.05);
  border: none;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #64748b;
  font-size: 14px;
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.weather-modal-close-btn:hover { background: rgba(220,38,38,0.10); color: #dc2626; }

.weather-modal-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  overflow-x: auto;
  min-height: 220px;
}
.weather-day-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 8px 16px;
  border-right: 1px solid #f1f5f9;
  gap: 7px;
  transition: background .15s;
}
.weather-day-card:last-child { border-right: none; }
.weather-day-card:hover { background: #f8fafc; }
.weather-day-card--today {
  background: rgba(25,121,178,0.04);
  border-top: 3px solid #1979B2;
}
.weather-day-name {
  font-size: 11px;
  font-weight: 800;
  color: #1E293B;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.weather-day-date {
  font-size: 10px;
  color: #94a3b8;
  margin-top: -4px;
}
.weather-day-icon {
  font-size: 26px;
  color: #1979B2;
  margin: 2px 0;
}
.weather-day-label {
  font-size: 10px;
  color: #475569;
  font-weight: 600;
  text-align: center;
  line-height: 1.3;
}
.weather-day-temps {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.weather-temp-max {
  font-size: 16px;
  font-weight: 800;
  color: #1E293B;
}
.weather-temp-sep {
  font-size: 10px;
  color: #cbd5e1;
}
.weather-temp-min {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
}
.weather-day-precip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.weather-precip-bar-bg {
  width: 75%;
  height: 4px;
  background: #e2e8f0;
  border-radius: 99px;
  overflow: hidden;
}
.weather-precip-bar-fill {
  height: 100%;
  border-radius: 99px;
  transition: width .5s ease;
}
.weather-precip-pct {
  font-size: 10px;
  font-weight: 700;
}
.weather-modal-footer {
  padding: 9px 20px;
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  font-size: 10px;
  color: #94a3b8;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════
   MODULE PLANNING — Notifications & Calendrier & Gantt
   ══════════════════════════════════════════════════════════════ */

/* ── Cloche de notification (topbar) ──────────────────────────── */
#notif-bell-wrap {
  position: relative !important;
  z-index: 10001 !important; /* Au-dessus du topbar lui-même */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  flex-shrink: 0;
}

#notif-bell {
  background: none;
  border: none;
  cursor: pointer;
  padding: 7px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease;
  position: relative;
  color: #1E293B;
}
#notif-bell:hover {
  background: rgba(30, 41, 59, 0.08);
}
#notif-bell i {
  font-size: 18px;
  color: #1E293B;
}

/* ── Point rouge badge ──────────────────────────────────────── */
#notif-dot {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 9px;
  height: 9px;
  background: #df4454;
  border-radius: 50%;
  border: 2px solid #fff;
  display: none;
  animation: notif-pulse 2s ease-in-out infinite;
}
#notif-dot.visible {
  display: block;
}
@keyframes notif-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(223,68,84,0.55); }
  50%       { box-shadow: 0 0 0 5px rgba(223,68,84,0); }
}

/* ── Compteur numérique ─────────────────────────────────────── */
#notif-count {
  position: absolute;
  top: 0;
  right: -2px;
  min-width: 16px;
  height: 16px;
  background: #df4454;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  border-radius: 99px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  border: 1.5px solid #fff;
}
#notif-count.visible {
  display: flex;
}

/* ── Dropdown notifications ─────────────────────────────────── */
#notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 420px !important;
  max-width: 95vw !important;
  padding: 12px !important;
  background: #fff;
  border-radius: 14px !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.15) !important;
  z-index: 999999 !important; /* Valeur extrême — passe au-dessus de tout */
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
#notif-dropdown.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.notif-header {
  padding: 12px 16px 12px !important;
  background: #1E293B;
  color: #fff;
  font-size: 11px;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #f1f5f9 !important;
  margin-bottom: 10px !important;
}
.notif-header i {
  font-size: 12px;
  color: #df4454;
}

.notif-body {
  max-height: 300px;
  overflow-y: auto;
  padding: 8px 0;
}
/* Cible l'ID réel du DOM (id="notif-dropdown-body") */
#notif-dropdown-body {
  max-height: 350px !important;
  overflow-y: auto !important;
  padding: 5px 0 !important;
  padding-right: 8px !important;
}
.notif-body::-webkit-scrollbar { width: 4px; }
.notif-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 99px; }
/* Scrollbar premium pour le body réel */
#notif-dropdown-body::-webkit-scrollbar { width: 6px; }
#notif-dropdown-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }

.notif-empty {
  padding: 24px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.notif-empty i {
  font-size: 22px;
  color: #cbd5e1;
}

/* ── Carte mission dans le dropdown ─────────────────────────── */
.notif-mission-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s ease;
}
.notif-mission-card:last-child { border-bottom: none; }
.notif-mission-card:hover { background: #f8fafc; }

.notif-mission-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(25,121,178,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.notif-mission-icon i {
  font-size: 13px;
  color: #1979B2;
}

.notif-mission-info {
  flex: 1;
  min-width: 0;
}
.notif-mission-sensor {
  font-size: 11px;
  font-weight: 700;
  color: #1E293B;
  white-space: normal;
  word-break: break-word;
}
.notif-mission-prestataire {
  font-size: 10px;
  color: #64748b;
  margin-top: 1px;
}
.notif-mission-time {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.notif-mission-time i { font-size: 9px; }

/* ── Bouton Lancer dans dropdown ─────────────────────────────── */
.notif-launch-btn {
  margin-top: 6px;
  background: #1979B2;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s ease, transform 0.1s ease;
}
.notif-launch-btn:hover {
  background: #1565a0;
  transform: translateY(-1px);
}
.notif-launch-btn i { font-size: 9px; }

/* ── Footer dropdown ─────────────────────────────────────────── */
.notif-footer {
  margin-top: 10px !important;
  padding: 10px 16px;
  padding-top: 10px !important;
  border-top: 1px solid #f1f5f9 !important;
  text-align: center;
  background: #f8fafc;
}
.notif-footer a {
  font-size: 11px;
  color: #1979B2;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
}
.notif-footer a:hover { text-decoration: underline; }
.notif-footer button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  color: #1979B2;
  background: transparent;
  border: 1px solid #1979B2;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.notif-footer button:hover {
  background: #1979B2;
  color: #fff;
}


/* ══════════════════════════════════════════════════════════════
   VUE PLANNING — Layout principal
   ══════════════════════════════════════════════════════════════ */

#view-planning {
  display: none;
  flex-direction: column;
  background: #f5f7fa;
  overflow: hidden;          /* CRUCIAL : flex-fit — empêche tout débordement vertical */
}
#view-planning.active {
  display: flex;
}

/* ── Header planning : réduit le margin pour maximiser la place calendrier ── */
#view-planning .view-header {
  flex-shrink: 0;
  margin-bottom: 10px;
}

/* ── Barre d'outils Planning ─────────────────────────────────── */
.pln-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px 10px;
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
}
.pln-toolbar-title {
  font-size: 15px;
  font-weight: 700;
  color: #1E293B;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.pln-toolbar-title i {
  color: #1979B2;
  font-size: 16px;
}

.pln-btn-new {
  background: #1979B2;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}
.pln-btn-new:hover {
  background: #1565a0;
  transform: translateY(-1px);
}
.pln-btn-new i { font-size: 11px; }

/* ── Toggle Calendrier / Gantt ───────────────────────────────── */
.pln-view-toggle {
  display: flex;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}

.pln-tab {
  border: none;
  background: none;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.pln-tab i { font-size: 11px; }
.pln-tab:hover { color: #1E293B; }
.pln-tab.active {
  background: #fff;
  color: #1979B2;
  box-shadow: 0 1px 4px rgba(30,41,59,0.10);
}

/* ── Stack des sous-vues Planning ────────────────────────────────
   Les deux sous-vues (calendrier + gantt) sont empilées en
   position:absolute dans ce wrapper. On bascule uniquement le
   z-index — jamais display:none sur le calendrier, ce qui
   permettrait à FullCalendar de conserver ses dimensions en
   permanence et évite le bug "grille blanche après Gantt→Cal".
   ────────────────────────────────────────────────────────────── */
.pln-views-stack {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

/* Les deux enfants directs remplissent exactement le stack */
.pln-views-stack > .view-table-card {
  position: absolute;
  inset: 0;
  margin: 0;
}

/* Calendrier — visible par défaut (onglet actif au démarrage) */
#pln-view-cal  { z-index: 2; pointer-events: auto; }
/* Gantt — masqué derrière le calendrier par défaut */
#pln-view-gantt { z-index: 1; pointer-events: none; overflow-x: auto; overflow-y: auto; }

/* ── Conteneur FullCalendar ──────────────────────────────────── */
.pln-calendar-wrap {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(30,41,59,0.07);
  padding: 14px 16px;
  /* position:absolute (via .pln-views-stack) — flex:1 ignoré, mais
     display:flex+flex-direction:column restent nécessaires pour FC */
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Le div racine de FullCalendar doit remplir tout le conteneur */
#planning-calendar {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   Override FullCalendar — Charte AQUILON
   ═══════════════════════════════════════════════════════════════ */

/* ── Toolbar principale ────────────────────────────────────────── */
.fc .fc-header-toolbar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;         /* une seule ligne — jamais d'empilement */
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 2px 10px !important;
  gap: 10px !important;
  flex-shrink: 0 !important;            /* le toolbar ne se compresse pas */
}

/* Chaque chunk = ligne horizontale stricte */
.fc .fc-toolbar-chunk {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Centrage du titre */
.fc .fc-toolbar-chunk:nth-child(2) {
  flex: 1 !important;
  text-align: center !important;
  justify-content: center !important;
}
/* Root FC — remplit le conteneur flex qui lui est alloué */
.fc {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
/* La zone scrollable de la grille prend tout l'espace restant */
.fc .fc-view-harness {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.fc .fc-toolbar-title {
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #1E293B !important;
  letter-spacing: -0.01em !important;
}

/* ── Boutons de navigation ──────────────────────────────────────── */
.fc .fc-button-primary {
  background: #1E293B !important;
  border-color: #1E293B !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 7px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 5px 13px !important;
  transition: background 0.16s ease, border-color 0.16s ease !important;
  box-shadow: none !important;
}
.fc .fc-button-primary:hover {
  background: #1979B2 !important;
  border-color: #1979B2 !important;
}
.fc .fc-button-primary.fc-button-active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background: #1e293b !important;      /* Bleu marine — vue active nettement identifiable */
  border-color: #1e293b !important;
  color: #ffffff !important;
}
.fc .fc-button-primary:focus {
  box-shadow: 0 0 0 3px rgba(25,121,178,0.25) !important;
}
.fc .fc-button-primary:disabled {
  background: #cbd5e1 !important;
  border-color: #cbd5e1 !important;
  opacity: 0.7 !important;
}

/* ── Boutons prev / next (‹ ›) — style discret, taille lisible ── */
.fc .fc-prev-button,
.fc .fc-next-button {
  background: transparent !important;
  border-color: #e2e8f0 !important;
  color: #1E293B !important;
  font-size: 18px !important;
  line-height: 1 !important;
  padding: 3px 10px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}
.fc .fc-prev-button:hover,
.fc .fc-next-button:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
  color: #1979B2 !important;
}

/* ── Bouton "Aujourd'hui" — accent bleu ── */
.fc .fc-today-button {
  font-size: 11px !important;
  padding: 5px 12px !important;
}
.fc .fc-today-button:not(:disabled) {
  background: rgba(25,121,178,0.10) !important;
  border-color: rgba(25,121,178,0.30) !important;
  color: #1979B2 !important;
  font-weight: 700 !important;
}
.fc .fc-today-button:not(:disabled):hover {
  background: #1979B2 !important;
  border-color: #1979B2 !important;
  color: #fff !important;
}

/* Espacement inter-boutons dans les groupes (Semaine / Mois / Année) */
.fc .fc-button-group {
  display: flex !important;
  gap: 4px !important;
}
.fc .fc-button-group .fc-button {
  border-radius: 7px !important;  /* override le radius collé du groupe FC */
}

/* ── En-têtes colonnes (LUN. MAR. ...) ─────────────────────────── */
.fc .fc-col-header-cell {
  background: #f1f5f9 !important;
  border-bottom: 2px solid #64748b !important;
}
.fc .fc-col-header-cell-cushion {
  font-size: 11px !important;
  font-weight: 800 !important;
  color: #0f172a !important;           /* Noir profond — haute lisibilité */
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
  text-decoration: none !important;
  padding: 10px 0 !important;
}

/* ── Grille — suppression des marques résiduelles ──────────────── */
.fc .fc-scrollgrid {
  border: 1px solid #94a3b8 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
.fc .fc-scrollgrid td,
.fc .fc-scrollgrid th {
  border-color: #94a3b8 !important;
}
/* Supprime les doubles bordures internes de FC */
.fc .fc-scrollgrid-section > td {
  border: none !important;
}
.fc .fc-daygrid-body {
  border: none !important;
}

/* ── Cellule jour ───────────────────────────────────────────────── */
.fc .fc-daygrid-day {
  transition: background 0.18s ease !important;
  cursor: pointer !important;
}
.fc .fc-daygrid-day-frame {
  min-height: 76px !important;
  padding: 0 !important;
}
.fc .fc-daygrid-day-top {
  padding: 5px 7px !important;
  justify-content: flex-end !important; /* numéro à droite */
}

/* ── Numéro du jour ─────────────────────────────────────────────── */
.fc .fc-daygrid-day-number {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1e293b !important;           /* Slate 800 — quasi noir */
  text-decoration: none !important;
  width: 28px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

/* ── Jour actuel ────────────────────────────────────────────────── */
.fc .fc-daygrid-day.fc-day-today {
  background: rgba(25,121,178,0.15) !important; /* Bleu Galtek visible mais non agressif */
}
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
  background: #1979B2 !important;
  color: #fff !important;
  font-weight: 800 !important;
}

/* ── Jours hors mois en cours (grisés) ─────────────────────────── */
.fc .fc-day-other {
  background: #fafafa !important;
}
.fc .fc-day-other .fc-daygrid-day-number {
  color: #d1d5db !important;
}

/* ── HOVER cellule : fond #df4454, texte blanc ─────────────────── */
.fc .fc-daygrid-day:not(.fc-day-today):hover {
  background: #df4454 !important;
}
.fc .fc-daygrid-day:not(.fc-day-today):hover .fc-daygrid-day-number {
  color: #fff !important;
  background: rgba(255,255,255,0.18) !important;
}
.fc .fc-daygrid-day:not(.fc-day-today):hover .fc-daygrid-day-events {
  opacity: 0.92 !important;
}

/* ── Événements ─────────────────────────────────────────────────── */
.fc .fc-event {
  border-radius: 5px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  border: none !important;
  padding: 2px 6px !important;
  cursor: pointer !important;
  box-shadow: none !important;         /* Suppression des ombres superflues */
  transition: transform 0.1s ease !important;
}
.fc .fc-event:hover {
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}
.fc .fc-event-title {
  font-size: 10px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* ── Lien "+ N autres" ──────────────────────────────────────────── */
.fc .fc-daygrid-more-link {
  font-size: 10px !important;
  color: #1979B2 !important;
  font-weight: 600 !important;
}

/* ── Vue multimonth (Année) ─────────────────────────────────────── */
.fc .fc-multimonth {
  border: none !important;
}
.fc .fc-multimonth-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #1E293B !important;
  text-transform: capitalize !important;
  padding: 8px 0 4px !important;
}
.fc .fc-multimonth-daygrid-table .fc-daygrid-day-number {
  font-size: 10px !important;
  width: 20px !important;
  height: 20px !important;
}


/* ══════════════════════════════════════════════════════════════
   GANTT — Vue horaire journalière (06h–20h)
   Architecture : 1 colonne capteur (sticky) + 14 colonnes heure
   ══════════════════════════════════════════════════════════════ */

/* ── Conteneur scrollable ────────────────────────────────────── */
.gantt-container {
  overflow-x: auto;
  overflow-y: auto;
  max-width: 100%;
  position: relative;
  border-radius: 0 0 8px 8px;
}

/* ── Table principale ────────────────────────────────────────── */
.gantt-table {
  width: 100%;
  min-width: 2070px;     /* 150px capteur + 24 × 80px heures (00h–23h) */
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 11px;
}

/* ── Bordures universelles ───────────────────────────────────── */
.gantt-table th,
.gantt-table td {
  border: 1px solid #e2e8f0;
  position: relative;
}

/* ── En-têtes colonnes (fond sombre) ────────────────────────── */
.gantt-table thead tr th {
  background: #1E293B;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 4px;
  text-align: center;
  border: 1px solid rgba(255,255,255,0.12);
  position: sticky;
  top: 0;
  z-index: 2;
}

/* ── Colonne capteur — EN-TÊTE (double sticky : top + left) ─── */
.gantt-th-sensor,
.gantt-table th:first-child {
  text-align: left !important;
  min-width: 150px;
  width: 150px;
  padding-left: 12px !important;
  position: sticky;
  left: 0;
  z-index: 11 !important;    /* au-dessus de tous les autres th */
  background: #1E293B !important;
}

/* ── Colonne capteur — CORPS (sticky left) ───────────────────── */
.gantt-sensor-label,
.gantt-table td:first-child {
  padding: 8px 6px 8px 12px;
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: sticky;
  left: 0;
  background: #f8fafc;
  z-index: 1;
  border-right: 2px solid #cbd5e1;
  max-width: 150px;
}

/* ── Colonne heure (1 par heure : 06h → 19h) ─────────────────── */
.gantt-th-hour {
  min-width: 80px;
  width: 80px;
  text-align: center;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 7px 2px !important;
  letter-spacing: 0.03em;
}

/* ── Lignes du corps ─────────────────────────────────────────── */
.gantt-table tbody tr {
  transition: background 0.10s ease;
}
.gantt-table tbody tr:hover .gantt-sensor-label { background: #f1f5f9; }
.gantt-table tbody tr:hover .gantt-timeline-cell { background: rgba(25,121,178,0.025); }

/* ── Cellule timeline (colspan="14", position: relative) ──────── */
.gantt-timeline-cell {
  position: relative;
  padding: 0;
  height: 36px;
  overflow: visible;
  cursor: pointer;
  background: #fff;
  vertical-align: top;
}

/* ── Ligne de grille verticale (injectée par JS) ─────────────── */
.gantt-hour-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(203,213,225,0.7);
  pointer-events: none;
  z-index: 0;
}

/* ── Barre de mission (créée par JS via createElement) ───────── */
.gantt-mission-bar {
  position: absolute;
  border-radius: 4px;
  display: flex;
  align-items: center;
  overflow: hidden;
  cursor: pointer;
  z-index: 5;
  transition: filter 0.15s ease, transform 0.10s ease, box-shadow 0.15s ease;
  box-sizing: border-box;
  min-width: 4px;
}
.gantt-mission-bar:hover {
  filter: brightness(1.14);
  transform: scaleY(1.08);
  box-shadow: 0 3px 10px rgba(30,41,59,0.28);
  z-index: 10;
}

/* ── Label texte dans la barre ───────────────────────────────── */
.gantt-mission-bar-label {
  font-size: 10px;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 6px;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,0.22);
}

/* ── État vide ───────────────────────────────────────────────── */
.gantt-empty-row td {
  text-align: center;
  padding: 40px;
  color: #94a3b8;
  font-size: 12px;
}


/* ══════════════════════════════════════════════════════════════
   MODALES PLANNING — Actions & Détail
   (Display géré par .modal-wrapper + .open — cf. ligne 89)
   ══════════════════════════════════════════════════════════════ */

/* ── Ligne de détail ─────────────────────────────────────────── */
.pln-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 12px;
  color: #1E293B;
}
.pln-detail-row:last-child { border-bottom: none; }

.pln-detail-icon {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: rgba(25,121,178,0.09);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pln-detail-icon i { font-size: 12px; color: #1979B2; }

.pln-detail-label {
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 2px;
}
.pln-detail-value {
  font-size: 12px;
  font-weight: 600;
  color: #1E293B;
}

/* ── Bouton Lancer la mission ─────────────────────────────────── */
.pln-launch-btn {
  background: #1979B2;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.pln-launch-btn:hover {
  background: #1565a0;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(25,121,178,0.30);
}
.pln-launch-btn:active { transform: translateY(0); }
.pln-launch-btn i { font-size: 12px; }
.pln-launch-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Bouton Annuler la mission ──────────────────────────────── */
.pln-cancel-btn {
  background: none;
  border: 1.5px solid #df4454;
  color: #df4454;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: background 0.15s ease, color 0.15s ease;
}
.pln-cancel-btn:hover {
  background: #df4454;
  color: #fff;
}
.pln-cancel-btn i { font-size: 12px; }

/* ── Bouton Supprimer la mission (danger) ─────────────────────── */
.pln-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: #df4454;
  background: rgba(223,68,84,0.07);
  border: 1px solid rgba(223,68,84,0.28);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pln-delete-btn:hover {
  background: #df4454;
  color: #fff;
  border-color: #df4454;
}
.pln-delete-btn i { font-size: 11px; }

/* ── Badge statut planning ────────────────────────────────────── */
.pln-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pln-status-badge.planifiee  { background: rgba(25,121,178,0.12);  color: #1979B2; }
.pln-status-badge.lancee     { background: rgba(35,192,232,0.14);  color: #0e8fab; }
.pln-status-badge.terminee   { background: rgba(34,197,94,0.14);   color: #16a34a; }
.pln-status-badge.annulee    { background: rgba(223,68,84,0.12);   color: #df4454; }


/* ══════════════════════════════════════════════════════════════
   NAV PLANNING — Bouton sidebar
   ══════════════════════════════════════════════════════════════ */

#nav-planning .nav-icon i { color: inherit; }

/* ── Badge "Aujourd'hui" sur le bouton nav ──────────────────── */
#nav-planning .pln-nav-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background: #df4454;
  border-radius: 50%;
  border: 1.5px solid #1E293B;
  display: none;
  animation: notif-pulse 2s ease-in-out infinite;
}
#nav-planning .pln-nav-badge.visible {
  display: block;
}

/* ══════════════════════════════════════════════════════════════
   FULLCALENDAR — THÈME HAUTE LISIBILITÉ (contraste renforcé)
   Variables CSS natives de FullCalendar v6 — valeurs nettes
   pour une grille bien dessinée et des textes quasi noirs.
   ══════════════════════════════════════════════════════════════ */
:root {
  --fc-border-color:                 #64748b !important; /* Slate 500 — bordures grises foncées */
  --fc-page-bg-color:                #ffffff !important; /* Fond blanc pur                      */
  --fc-neutral-bg-color:             #f1f5f9 !important; /* Fond en-têtes jours (Slate 100)     */
  --fc-today-bg-color:               rgba(25,121,178,0.15) !important; /* Bleu Galtek visible  */
  --fc-event-border-color:           rgba(0,0,0,0.10) !important;
  --fc-daygrid-event-dot-width:      8px !important;
  --fc-list-event-hover-bg-color:    #f8fafc !important;
}

/* Grille principale — chaque cellule a une bordure visible */
.fc-theme-standard td,
.fc-theme-standard th,
.fc-theme-standard .fc-scrollgrid {
  border: 1px solid #94a3b8 !important; /* Slate 400 — grille bien dessinée */
}

/* Police cohérente avec la charte Galtek */
.fc {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ══════════════════════════════════════════════════════════════
   PRIORITÉ ABSOLUE — OVERLAYS DE MODALES
   ─────────────────────────────────────────────────────────────
   Le #topbar est à z-index 10000. Tous les overlays doivent être
   au-dessus pour recouvrir intégralement l'application (topbar
   compris) avec le voile sombre + effet blur premium.
   Cette règle groupée est déclarée en fin de fichier pour avoir
   le dernier mot dans la cascade, même avec d'autres !important.
══════════════════════════════════════════════════════════════ */
.assign-modal-overlay,
.sent-modal-overlay,
.modal-wrapper,
.weather-modal-overlay,
#modal-overlay {
  z-index: 9999999 !important;              /* Au-dessus de tout — topbar inclus    */
  background-color: rgba(15,23,42,0.6) !important; /* Slate 900 semi-transparent    */
  backdrop-filter: blur(6px) !important;    /* Flou premium sur toute la page       */
  -webkit-backdrop-filter: blur(6px) !important;
}

/* ══════════════════════════════════════════════════════════════
   FIN MODULE PLANNING
   ══════════════════════════════════════════════════════════════ */

/* ── UI Fluidity Fixes ── */
/* (background-image supprimé — les vignettes sont maintenant des mini-cartes MapLibre) */

/* ── Interactive Shapes & Geometric Popups ── */
path.leaflet-interactive:focus {
  outline: none !important;
}

.aq-custom-popup .leaflet-popup-content {
  width: max-content !important;
  min-width: 250px;
  font-size: 13px;
}

.aq-coord-table { width: 100%; border-collapse: collapse; font-size: 12px; text-align: left; margin-top: 10px; }
.aq-coord-table th { background: #0A1931; color: white; padding: 4px 8px; }
.aq-coord-table td { border-bottom: 1px solid #eee; padding: 4px 8px; }

/* ── Aération Popup Altimétrique ── */
.aq-elevation-popup .leaflet-popup-content {
    width: max-content !important;
    min-width: auto !important;
    padding: 6px 12px !important;
    font-size: 13px;
    line-height: 1.4;
}

/* ── Adaptation Popup Contextuel ── */
.aq-shape-context-popup .leaflet-popup-content {
    width: max-content !important;
    padding: 12px !important;
}

/* --- LE BOUCLIER LEAFLET (Méthode OSM) --- */

/* 1. Isoler complètement la carte du reste du CSS de l'application */
#map,
.leaflet-container,
.leaflet-pane,
.leaflet-tile,
.leaflet-layer {
    transition: none !important; 
    animation: none !important;
}

/* 2. Forcer l'accélération matérielle 3D stricte (Ce qui donne la glisse) */
.leaflet-tile-pane {
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* 3. Ne réactiver les transitions QUE pour le zoom natif */
.leaflet-zoom-anim .leaflet-zoom-animated {
    transition: transform 0.25s cubic-bezier(0,0,0.25,1) !important;
}

/* --- POPUP MAPLIBRE (UX POLISH) --- */
.aq-elevation-popup .mapboxgl-popup-content {
    padding: 10px 14px 10px 10px !important;
    min-width: 150px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.mapboxgl-popup-close-button {
    font-size: 16px;
    color: #333;
    right: 4px;
    top: 2px;
    padding: 2px 6px;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.mapboxgl-popup-close-button:hover {
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
}

/* --- CUSTOM DELETE POPUP --- */
.aq-custom-delete-popup .mapboxgl-popup-content {
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.delete-menu-container button {
    display: block;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 6px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    color: white;
    cursor: pointer;
    transition: 0.2s;
}
.btn-delete-single { background-color: #D34354; }
.btn-delete-single:hover { background-color: #b53847; }
.btn-delete-single { background-color: #D34354; }
.btn-delete-single:hover { background-color: #b53847; }
.btn-delete-all { background-color: #0A1931 !important; margin-bottom: 0 !important; }
.btn-delete-all:hover { background-color: #162a4d !important; }

/* --- CURSEUR CAO (Priorité absolue) --- */
body.aq-force-crosshair .mapboxgl-canvas-container,
body.aq-force-crosshair .mapboxgl-canvas-container * {
    cursor: crosshair !important;
}

/* --- CURSEUR DESSIN MapLibre / MapboxDraw ---
   Classe portée par document.body → bat les styles inline de MapboxDraw
   qui ciblent .mapboxgl-canvas-container.mapboxgl-interactive */
body.aq-drawing-mode,
body.aq-drawing-mode .mapboxgl-canvas-container,
body.aq-drawing-mode .mapboxgl-canvas-container.mapboxgl-interactive,
body.aq-drawing-mode .mapboxgl-canvas-container.mapboxgl-interactive:active {
    cursor: crosshair !important;
}

/* --- POPUPS PREMIUM AQUILON --- */
.aq-custom-popup .mapboxgl-popup-content {
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    padding: 12px;
    min-width: 220px;
    font-family: system-ui, -apple-system, sans-serif;
    border-top: 3px solid #0A1931;
}
.aq-custom-popup .mapboxgl-popup-close-button {
    font-size: 16px;
    padding: 4px 8px;
    color: #666;
}
.aq-custom-popup h6 { 
    font-weight: 700; 
    color: #0A1931; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 8px; 
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.aq-custom-popup .popup-info-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    line-height: 1.8;
}
.aq-custom-popup .popup-info-row b { color: #0A1931; }

/* ══════════════════════════════════════════════════════════════════════════════
   ANTI-GLIDE — Désactivation des transitions sur conteneurs Leaflet
   ----------------------------------------------------------------------------
   BUG : les popups (Altitude, Points, Infos dessin) "glissent" depuis la
   gauche au lieu d'apparaître instantanément sous la souris. Cause : une
   transition globale (souvent `transition: all` héritée d'une classe utility)
   anime `top`, `left` ou `transform: translate3d(...)` sur les panes Leaflet.
   Fix STRICT : on coupe TOUTE transition sur les couches positionnées par
   Leaflet (popup, control, pane). Les popups apparaissent désormais "à plat"
   exactement sous le curseur, sans animation de déplacement.
   On préserve cependant les transitions sur le CONTENU des popups
   (boutons, hover) en ciblant uniquement les conteneurs racines.
   ══════════════════════════════════════════════════════════════════════════════ */
.leaflet-popup,
.leaflet-control,
.leaflet-pane,
.leaflet-map-pane,
.leaflet-tile-pane,
.leaflet-overlay-pane,
.leaflet-marker-pane,
.leaflet-popup-pane,
.leaflet-tooltip-pane,
.leaflet-shadow-pane,
.leaflet-marker-icon,
.leaflet-marker-shadow,
.leaflet-zoom-anim .leaflet-zoom-animated {
  transition: none !important;
  animation: none !important;
}

/* Le wrapper interne du popup peut conserver son box-shadow figé sans
   transition de couleur (sinon "fade-in" visuel non désiré).            */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  transition: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   ANTI-SLIDING POPUP — Sélecteur ULTRA spécifique
   ----------------------------------------------------------------------------
   Bug observé : quand on clique successivement à différents endroits d'un
   polygone, la popup d'info "glisse" depuis sa position précédente vers le
   nouveau point de clic au lieu de "popper" instantanément. Cause : Leaflet
   modifie `transform: translate3d(...)` et une transition CSS (transition-all
   héritée) anime le déplacement.
   Solution : sélecteur fort `.leaflet-container .leaflet-popup` qui écrase
   toute classe utility appliquée plus haut dans la cascade. `transform-style:
   flat` empêche tout effet 3D résiduel hérité d'un parent transformé.
   ══════════════════════════════════════════════════════════════════════════════ */
.leaflet-container .leaflet-popup {
  transition: none !important;
  -webkit-transition: none !important;
  transform-style: flat !important;
  will-change: auto !important;
  animation: none !important;
}
.leaflet-container .leaflet-popup-content-wrapper,
.leaflet-container .leaflet-popup-tip,
.leaflet-container .leaflet-popup-content {
  transition: none !important;
  -webkit-transition: none !important;
  animation: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BOUTON FERMER POPUP — Style ÉPURÉ universel
   ----------------------------------------------------------------------------
   Le X natif de Leaflet hérite parfois d'une bordure / soulignement / outline
   focus disgracieux. On le force à être une simple icône texte propre, qui
   ne se superpose JAMAIS au titre (padding & line-height contrôlés).
   ══════════════════════════════════════════════════════════════════════════════ */
.leaflet-container .leaflet-popup-close-button {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  border-right: none !important;
  border-left: none !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  -webkit-text-decoration-line: none !important;
          text-decoration-line: none !important;
  -webkit-appearance: none !important;
          appearance: none !important;
  font-weight: 600 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: #94a3b8 !important;
  /* Position : top-right propre, éloignée du contenu (≥12 px de marge interne
     côté droit) — évite TOUTE superposition avec le titre du popup.         */
  padding: 10px 14px 0 14px !important;
  margin: 0 !important;
  cursor: pointer;
  /* Garde aucune pseudo-élément (parfois un :before/:after dessine une "barre") */
}
.leaflet-container .leaflet-popup-close-button::before,
.leaflet-container .leaflet-popup-close-button::after {
  display: none !important;
  content: none !important;
}
.leaflet-container .leaflet-popup-close-button:focus,
.leaflet-container .leaflet-popup-close-button:active,
.leaflet-container .leaflet-popup-close-button:hover {
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  color: #df4454 !important;            /* Rouge AQUILON officiel au hover    */
}

/* ═══════════════════════════════════════════════════════════════════════════
   VUE TACTIQUE 3D — Mapbox GL JS v3 (Jumeau Numérique)
   ─────────────────────────────────────────────────────────────────────────
   Composants : bouton topbar #btn-toggle-3d + conteneur #map3d-container
   + marqueurs custom .sensor-sphere-3d (sphères 3 états — charte AQUILON).
═══════════════════════════════════════════════════════════════════════════ */

/* Bouton topbar — Vue Tactique 3D */
.btn-topbar {
  background: linear-gradient(135deg, #1E293B 0%, #0A1931 100%);
  color: #F0FDFF;
  border: 1.5px solid rgba(35, 192, 232, 0.35);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  font-family: 'Inter', -apple-system, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  letter-spacing: 0.02em;
  box-shadow: 0 3px 12px rgba(10, 25, 49, 0.22);
  transition: background .2s, border-color .2s, transform .15s, box-shadow .2s;
  margin-right: 10px;
}
.btn-topbar:hover {
  background: linear-gradient(135deg, #0A1931 0%, #020617 100%);
  border-color: rgba(35, 192, 232, 0.65);
  box-shadow: 0 5px 18px rgba(35, 192, 232, 0.28);
  transform: translateY(-1px);
}
.btn-topbar.active {
  background: linear-gradient(135deg, #df4454 0%, #b03540 100%);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
  box-shadow: 0 4px 16px rgba(223, 68, 84, 0.45);
}
.btn-topbar.active:hover {
  background: linear-gradient(135deg, #b03540 0%, #8a2832 100%);
}

/* Conteneur Mapbox plein-écran — Mapbox prend tout l'espace du parent */
#map3d-container.aq-3d-open { display: block !important; }
#map3d-container .mapboxgl-canvas { outline: none; }

/* ────────────────────────────────────────────────────────────────────
   Mode 3D actif (body.aq-3d-mode posé par map3d.js _toggle3D) :
   En 3D, la pilule AQUILOT et tout son écosystème de suggestions
   n'ont plus aucun sens — la majorité des commandes (dessin,
   périmètres, profil, filtres marqueurs Leaflet…) ne fonctionne
   pas sur le canvas Mapbox. On les MASQUE totalement pour rendre
   l'immersion 3D pure ; l'opérateur sort de la 3D via le bouton
   « Retour 2D » de la topbar.
─────────────────────────────────────────────────────────────────────── */
body.aq-3d-mode #aquilot-input-wrapper { display: none !important; }
body.aq-3d-mode #aquilot-chat-wrapper  { display: none !important; }
body.aq-3d-mode .aq-autocomplete       { display: none !important; }

/* ── Marqueur Capteur 3D — Sphère ancrée AQUILON ──────────────────────────
   Charte stricte du client (3 états, ZÉRO orange) :
     • status-blue     → Bleu radial (Safe / Normal)
     • status-abyssal  → Bleu Abyssal #020617 (Gaz / Hors ligne)
     • status-red      → Rouge particulier #dc2626 (Intrusion / Critique)

   Architecture anti-glissement : l'onde radar est portée par un pseudo
   ::after en `position: absolute`. La sphère elle-même ne s'anime jamais
   → Mapbox conserve son point d'ancrage au sol sans dérive de pixels.   */
.sensor-sphere-3d {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: 0 5px 10px rgba(0,0,0,0.6);
}

/* Onde radar invisible par défaut — n'affecte JAMAIS la taille de la base */
.sensor-sphere-3d::after {
  content: '';
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  border-radius: 50%;
  border: 2px solid transparent;
  opacity: 0;
}

/* COULEUR 1 — Bleu (Safe / Normal) */
.sensor-sphere-3d.status-blue {
  background: radial-gradient(circle at 30% 30%, #ffffff, #007bff 60%, #004085 100%);
}

/* COULEUR 2 — Bleu Abyssal (Gaz / état spécifique) */
.sensor-sphere-3d.status-abyssal {
  background: radial-gradient(circle at 30% 30%, #475569, #020617 60%, #000000 100%);
}
.sensor-sphere-3d.status-abyssal::after {
  border-color: #020617;
  animation: sphere-pulse-3d 1.5s infinite ease-out;
}

/* COULEUR 3 — Rouge particulier (Intrusion / Critique) */
.sensor-sphere-3d.status-red {
  background: radial-gradient(circle at 30% 30%, #ffffff, #dc2626 60%, #7f1d1d 100%);
}
.sensor-sphere-3d.status-red::after {
  border-color: #dc2626;
  animation: sphere-pulse-3d 0.8s infinite ease-out;
}

@keyframes sphere-pulse-3d {
  0%   { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   POPUP CAPTEUR 3D — Glassmorphism premium AQUILON
   ─────────────────────────────────────────────────────────────────────────
   Override des classes Mapbox natives (.mapboxgl-popup-*) via le wrapper
   .aq-3d-popup. Aucune dépendance émoji — icônes SVG via currentColor.
═══════════════════════════════════════════════════════════════════════════ */

.aq-3d-popup .mapboxgl-popup-content {
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.aq-3d-popup .mapboxgl-popup-tip { display: none !important; }

.aq-3d-popup-card {
  width: 304px;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  color: #F0FDFF;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 123, 255, 0.18);
  overflow: hidden;
}

/* En-tête : pastille état + titre + bouton fermeture */
.aq-3d-popup-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.aq-3d-popup-state-dot {
  flex-shrink: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-top: 4px;
  background: #007bff;
  box-shadow: 0 0 8px currentColor;
}
.aq-3d-popup-card.is-abyssal .aq-3d-popup-state-dot {
  background: #020617;
  border: 1.5px solid #475569;
  box-shadow: 0 0 12px rgba(2, 6, 23, 0.9);
  animation: aq-3d-dot-pulse 1.5s infinite ease-out;
}
.aq-3d-popup-card.is-red .aq-3d-popup-state-dot {
  background: #dc2626;
  box-shadow: 0 0 14px rgba(220, 38, 38, 0.85);
  animation: aq-3d-dot-pulse 0.8s infinite ease-out;
}
@keyframes aq-3d-dot-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.65; }
}

.aq-3d-popup-title-block { flex: 1; min-width: 0; }
.aq-3d-popup-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.01em;
  color: #F0FDFF;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aq-3d-popup-title svg { color: #dc2626; flex-shrink: 0; }
.aq-3d-popup-card.is-abyssal .aq-3d-popup-title svg { color: #93c5fd; }
.aq-3d-popup-sub {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(240, 253, 255, 0.6);
}

.aq-3d-popup-close {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: rgba(240, 253, 255, 0.7);
  width: 26px; height: 26px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.aq-3d-popup-close:hover {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.55);
  color: #fff;
}

/* Actions — 3 boutons verticaux */
.aq-3d-popup-actions {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px;
}
.aq-3d-popup-btn {
  display: inline-flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  color: #F0FDFF;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  text-align: left;
  transition: background .15s, border-color .15s, transform .12s, color .15s;
}
.aq-3d-popup-btn svg {
  flex-shrink: 0;
  color: #93c5fd;
  transition: color .15s;
}
.aq-3d-popup-btn:hover {
  background: rgba(0, 123, 255, 0.14);
  border-color: rgba(0, 123, 255, 0.55);
  transform: translateX(2px);
}
.aq-3d-popup-btn:hover svg { color: #fff; }
.aq-3d-popup-btn.is-primary {
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.32) 0%, rgba(2, 6, 23, 0.55) 100%);
  border-color: rgba(0, 123, 255, 0.65);
}
.aq-3d-popup-btn.is-primary svg { color: #fff; }
.aq-3d-popup-btn.is-primary:hover {
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.55) 0%, rgba(2, 6, 23, 0.55) 100%);
  border-color: rgba(0, 123, 255, 0.95);
  box-shadow: 0 4px 14px rgba(0, 123, 255, 0.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   POPUP FORMULAIRE — Origine / Mode / Action (refonte premium)
   ─────────────────────────────────────────────────────────────────────────
   Wrapper sous .aq-3d-popup-form ; remplace l'ancienne .aq-3d-popup-actions.
═══════════════════════════════════════════════════════════════════════════ */

.aq-3d-popup-form {
  display: flex; flex-direction: column; gap: 12px;
  padding: 12px;
}

.aq-3d-popup-section {
  display: flex; flex-direction: column; gap: 6px;
}
.aq-3d-popup-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(240, 253, 255, 0.55);
  padding-left: 2px;
}

/* ── Section Origine : input + 2 boutons SVG carrés ──────────────────────── */
.aq-3d-popup-origin-row {
  display: flex; gap: 6px; align-items: stretch;
}
.aq-3d-popup-input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9px;
  color: #F0FDFF;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  outline: none;
  transition: background .15s, border-color .15s;
}
.aq-3d-popup-input::placeholder { color: rgba(240, 253, 255, 0.35); }
.aq-3d-popup-input:hover  { background: rgba(255, 255, 255, 0.06); }
.aq-3d-popup-input:focus  {
  background: rgba(0, 123, 255, 0.06);
  border-color: rgba(0, 123, 255, 0.55);
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.18);
}

.aq-3d-popup-icon-btn {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9px;
  color: #93c5fd;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.aq-3d-popup-icon-btn svg { color: inherit; }
.aq-3d-popup-icon-btn:hover {
  background: rgba(0, 123, 255, 0.18);
  border-color: rgba(0, 123, 255, 0.55);
  color: #fff;
}
.aq-3d-popup-icon-btn:active { transform: scale(0.94); }

/* ── Section Mode : Segmented Control (2 boutons attachés) ──────────────── */
.aq-3d-popup-segmented {
  display: flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 9px;
  padding: 3px;
  gap: 2px;
}
.aq-3d-popup-seg-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 7px;
  color: rgba(240, 253, 255, 0.65);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.aq-3d-popup-seg-btn svg { color: rgba(147, 197, 253, 0.7); transition: color .15s; }
.aq-3d-popup-seg-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #F0FDFF;
}
.aq-3d-popup-seg-btn:hover svg { color: #93c5fd; }
.aq-3d-popup-seg-btn.is-active {
  background: rgba(0, 123, 255, 0.22);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 123, 255, 0.45);
}
.aq-3d-popup-seg-btn.is-active svg { color: #fff; }

/* ── Bouton primaire morphable : Calculer → Lancer l'immersion ──────────── */
.aq-3d-popup-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.30) 0%, rgba(2, 6, 23, 0.50) 100%);
  border: 1px solid rgba(0, 123, 255, 0.55);
  border-radius: 10px;
  color: #F0FDFF;
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .18s, border-color .18s, box-shadow .18s, transform .12s, color .18s;
}
.aq-3d-popup-primary-icon { display: inline-flex; }
.aq-3d-popup-primary-icon svg { color: #fff; transition: color .15s; }
.aq-3d-popup-primary:hover {
  background: linear-gradient(135deg, rgba(0, 123, 255, 0.50) 0%, rgba(2, 6, 23, 0.50) 100%);
  border-color: rgba(0, 123, 255, 0.95);
  box-shadow: 0 4px 16px rgba(0, 123, 255, 0.35);
  transform: translateY(-1px);
}
.aq-3d-popup-primary:active { transform: translateY(0); }

/* État Loading : pendant fetch Directions / Geocoding (curseur attente) */
.aq-3d-popup-primary.is-loading {
  pointer-events: none;
  opacity: 0.7;
  cursor: wait;
}

/* État MORPHÉ : route prête → "Lancer l'immersion 3D" (Rouge AQUILON)     */
.aq-3d-popup-primary.is-go-immersion {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.55) 0%, rgba(127, 29, 29, 0.55) 100%);
  border-color: rgba(220, 38, 38, 0.85);
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.35), 0 0 24px rgba(220, 38, 38, 0.20);
  animation: aq-3d-primary-pulse 2s ease-in-out infinite;
}
.aq-3d-popup-primary.is-go-immersion:hover {
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.75) 0%, rgba(127, 29, 29, 0.75) 100%);
  border-color: rgba(220, 38, 38, 1);
  box-shadow: 0 6px 22px rgba(220, 38, 38, 0.50), 0 0 32px rgba(220, 38, 38, 0.32);
}
@keyframes aq-3d-primary-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(220, 38, 38, 0.35), 0 0 24px rgba(220, 38, 38, 0.20); }
  50%      { box-shadow: 0 4px 18px rgba(220, 38, 38, 0.55), 0 0 36px rgba(220, 38, 38, 0.42); }
}

/* ── Bandeau Link-Mode (top) — instruction utilisateur ───────────────────── */
.aq-3d-link-banner {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  z-index: 2100;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: rgba(2, 6, 23, 0.82);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(0, 123, 255, 0.55);
  border-radius: 12px;
  color: #F0FDFF;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 123, 255, 0.2);
  animation: aq-3d-banner-in .25s ease-out;
}
.aq-3d-link-banner-icon { display: inline-flex; color: #93c5fd; }
.aq-3d-link-banner-text { white-space: nowrap; }
.aq-3d-link-banner-close {
  margin-left: 4px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(240, 253, 255, 0.7);
  width: 22px; height: 22px;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.aq-3d-link-banner-close:hover {
  background: rgba(220, 38, 38, 0.20);
  border-color: rgba(220, 38, 38, 0.55);
  color: #fff;
}
@keyframes aq-3d-banner-in {
  from { opacity: 0; transform: translate(-50%, -10px); }
  to   { opacity: 1; transform: translate(-50%,   0);   }
}

/* ── Bouton "Effacer l'itinéraire" (overlay top-droite, sous nav controls) ─
   Toujours présent dans le DOM ; visibilité contrôlée par .is-visible
   (transition opacity 0.3s → fade-in/out fluide sans saccade).            */
.aq-3d-clear-route {
  position: absolute;
  top: 156px; right: 10px;       /* sous NavigationControl + FullscreenControl */
  z-index: 2100;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 10px;
  color: #F0FDFF;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 123, 255, 0.10);
  /* État caché par défaut — la classe .is-visible le révèle */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .3s ease, transform .3s ease,
              background .15s, border-color .15s;
}
.aq-3d-clear-route.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.aq-3d-clear-route svg {
  color: #fca5a5;
  flex-shrink: 0;
  transition: color .15s;
}
.aq-3d-clear-route:hover {
  background: rgba(220, 38, 38, 0.20);
  border-color: rgba(220, 38, 38, 0.55);
}
.aq-3d-clear-route:hover svg { color: #fff; }

/* ── Bouton Quitter Immersion (overlay haut-centre, grand format tactique)
   Pendant l'immersion FPS, ce bouton doit être TRÈS visible et accessible
   d'un seul mouvement de souris vertical. Position centrée en haut +
   format élargi + halo rouge marqué.                                     */
.aq-3d-immersion-exit {
  position: absolute;
  top: 18px; left: 50%;
  transform: translateX(-50%);
  z-index: 2200;                       /* au-dessus du clear-route btn    */
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 22px;                  /* "gros bouton" — surface clic    */
  background: rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1.5px solid rgba(220, 38, 38, 0.65);
  border-radius: 14px;
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(220, 38, 38, 0.30),
    0 0 24px rgba(220, 38, 38, 0.18);
  transition: background .18s, border-color .18s, transform .12s, box-shadow .18s;
  animation: aq-3d-exit-pulse 2.4s ease-in-out infinite;
}
.aq-3d-immersion-exit svg { color: #fca5a5; width: 18px; height: 18px; }
.aq-3d-immersion-exit:hover {
  background: rgba(220, 38, 38, 0.30);
  border-color: rgba(220, 38, 38, 1);
  transform: translateX(-50%) translateY(-2px);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.65),
    0 0 0 1px rgba(220, 38, 38, 0.55),
    0 0 32px rgba(220, 38, 38, 0.45);
}
.aq-3d-immersion-exit:hover svg { color: #fff; }
@keyframes aq-3d-exit-pulse {
  0%, 100% { box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(220, 38, 38, 0.30),
    0 0 24px rgba(220, 38, 38, 0.18); }
  50%      { box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.60),
    0 0 0 1px rgba(220, 38, 38, 0.55),
    0 0 36px rgba(220, 38, 38, 0.42); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HUD D'IMMERSION — Lecteur Vidéo (bottom-center)
   ─────────────────────────────────────────────────────────────────────────
   Bandeau Glassmorphism Bleu Abyssal (opacité 80 %), centré horizontalement.
   Composants : Play/Pause | Vitesse | Range slider | Compteur distance.
═══════════════════════════════════════════════════════════════════════════ */

.aq-3d-hud {
  position: absolute;
  bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 2150;                       /* sous exit button (2200), au-dessus de clear (2100) */
  display: flex; align-items: center; gap: 12px;
  width: clamp(420px, 60vw, 720px);
  padding: 12px 18px;
  background: rgba(2, 6, 23, 0.80);    /* Bleu Abyssal 80 %                    */
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 123, 255, 0.10);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.aq-3d-hud.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Boutons HUD — base commune Play/Speed */
.aq-3d-hud-btn {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 38px; height: 38px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  color: #F0FDFF;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.aq-3d-hud-btn svg { color: #93c5fd; transition: color .15s; }
.aq-3d-hud-btn:hover {
  background: rgba(0, 123, 255, 0.18);
  border-color: rgba(0, 123, 255, 0.55);
}
.aq-3d-hud-btn:hover svg { color: #fff; }
.aq-3d-hud-btn:active { transform: scale(0.96); }

/* Play en lecture → halo cyan */
.aq-3d-hud-play.is-playing {
  background: rgba(0, 123, 255, 0.25);
  border-color: rgba(0, 123, 255, 0.75);
  box-shadow: 0 0 16px rgba(0, 123, 255, 0.35);
}
.aq-3d-hud-play.is-playing svg { color: #fff; }

/* Speed boost (2× / 4×) → halo rouge AQUILON */
.aq-3d-hud-speed.is-boost {
  background: rgba(220, 38, 38, 0.18);
  border-color: rgba(220, 38, 38, 0.60);
  color: #fff;
}
.aq-3d-hud-speed.is-boost svg { color: #fca5a5; }
.aq-3d-hud-speed-label { font-variant-numeric: tabular-nums; }

/* ── Barre de progression — custom range cross-browser ───────────────────
   Astuce : la couleur "filled" est calculée via une CSS variable
   --aq-progress (en %) mise à jour dynamiquement par _syncHUDProgress().
   On bake un linear-gradient dans le track pour montrer la portion
   parcourue (Rouge Particulier) vs reste (Bleu Abyssal track).             */
.aq-3d-hud-progress {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(to right,
    #dc2626 0%,
    #dc2626 var(--aq-progress, 0%),
    rgba(2, 6, 23, 0.90) var(--aq-progress, 0%),
    rgba(2, 6, 23, 0.90) 100%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  cursor: pointer;
  outline: none;
  margin: 0;
  transition: filter .15s;
}
.aq-3d-hud-progress:hover { filter: brightness(1.15); }

/* Curseur WebKit */
.aq-3d-hud-progress::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #dc2626;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 10px rgba(220, 38, 38, 0.55);
  cursor: grab;
  transition: transform .12s;
}
.aq-3d-hud-progress::-webkit-slider-thumb:hover  { transform: scale(1.15); }
.aq-3d-hud-progress::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }

/* Curseur Firefox */
.aq-3d-hud-progress::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #dc2626;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55), 0 0 10px rgba(220, 38, 38, 0.55);
  cursor: grab;
}
.aq-3d-hud-progress::-moz-range-track {
  background: transparent;       /* le gradient est sur l'input lui-même  */
  height: 6px;
  border: none;
}

/* Compteur distance — texte tabulaire pour stabilité visuelle */
.aq-3d-hud-distance {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(240, 253, 255, 0.85);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  min-width: 110px;
  text-align: right;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AQUILOT — Pilule de saisie + Bulle d'historique (mode silencieux)
   ─────────────────────────────────────────────────────────────────────────
   Règle absolue : la bulle d'historique n'est JAMAIS ouverte par le code IA
   (cf. commandEngine.js). Seul le bouton #btn-toggle-history la déploie.
═══════════════════════════════════════════════════════════════════════════ */

/* ── Bulle d'Historique — toujours cachée par défaut ───────────────────── */
#aquilot-chat-wrapper {
  position: absolute;
  bottom: 80px;                              /* juste au-dessus de la pilule */
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  z-index: 1000;
  width: calc(100% - 48px);
  max-width: 700px;
  height: 350px;
  background: rgba(2, 6, 23, 0.65);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.30s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.30s cubic-bezier(0.4, 0, 0.2, 1);
}
#aquilot-chat-wrapper.history-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

#aquilot-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  padding: 15px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#aquilot-chat-messages::-webkit-scrollbar { display: none; }

/* ══ Pilule AQUILOT — Architecture z-index négatif pour visibilité forcée ══
   Le néon (::before) est en z-index: -2 (FOND absolu) ; le masque sombre
   (::after) est en z-index: -1 (intermédiaire) ; le contenu (input + boutons)
   est en z-index: 1 (premier plan). Le wrapper a `background: transparent`
   et `border: none` pour ne PAS recouvrir le néon. Le rendu visuel "halo"
   vient du masque ::after en `inset: 2px` qui laisse exactement 2 px du
   conic-gradient visible tout autour de la pilule.                          */
#aquilot-input-wrapper {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  /* Transition smooth pour Ctrl+I toggle */
  transition: transform 0.32s cubic-bezier(.22, .84, .25, 1.04),
              opacity   0.28s ease;
  display: flex;
  align-items: center;
  padding: 5px 5px 5px 20px;
  border-radius: 50px;
  width: calc(100% - 48px);
  max-width: 700px;
  z-index: 1001;                             /* au-dessus de la carte       */
  overflow: hidden;                          /* clippe le gradient rotatif  */
  background: transparent;                   /* le néon doit transparaître  */
  border: none;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.60);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  /* ── Variables organiques (pilotées par commandEngine.js) ──
        Défauts forcés ULTRA-visibles : la pilule respire en permanence.   */
  --neon-speed:   4s;
  --neon-opacity: 0.8;
}

#aquilot-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: #94a3b8;                            /* gris slate-400 (spec)      */
  font-family: inherit;
  font-size: 14px;
  outline: none;
}
#aquilot-input::placeholder {
  color: rgba(148, 163, 184, 0.55);
}

.aquilot-actions {
  display: flex;
  gap: 5px;
}

.aquilot-btn-icon {
  background: rgba(255, 255, 255, 0.05);
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.aquilot-btn-icon:hover  { background: rgba(255, 255, 255, 0.15); }
.aquilot-btn-icon:active { transform: scale(0.92); }

/* Chevron du toggle : pivote 180° quand l'historique est ouvert */
#btn-toggle-history { transition: transform 0.30s ease, background 0.2s; }
#btn-toggle-history.is-open { transform: rotate(180deg); }

/* ── Bouton voix AQUILOT (TTS) ─ bascule 2 SVG selon .is-muted ───────── */
#btn-toggle-voice .aquilot-icon-voice-on,
#btn-toggle-voice .aquilot-icon-voice-off { display: none; }
#btn-toggle-voice:not(.is-muted) .aquilot-icon-voice-on  { display: block; }
#btn-toggle-voice.is-muted        .aquilot-icon-voice-off {
  display: block;
  color: rgba(255, 255, 255, 0.40);          /* atténué quand muet */
}
/* Activé : halo cyan léger pour signaler que la voix est ON */
#btn-toggle-voice:not(.is-muted) {
  background: rgba(14, 165, 233, 0.18);
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.45);
}
#btn-toggle-voice:not(.is-muted) svg { color: #38bdf8; }

/* État "AQUILOT parle" — la pilule pulse plus intensément pendant le TTS.
   La classe est posée par utt.onstart / retirée par utt.onend.            */
#aquilot-input-wrapper.is-speaking {
  --neon-speed:   1.5s;                      /* rotation rapide cinématique */
  --neon-opacity: 1;                         /* pleine puissance lumineuse  */
}

/* ── Bouton micro AQUILOT (STT) ───────────────────────────────────────
   Affichage piloté par commandEngine.js : la classe .is-unavailable est
   retirée au démarrage SI window.SpeechRecognition est disponible. Sur
   navigateur non-compatible le bouton reste caché (graceful degradation). */
#btn-toggle-mic.is-unavailable { display: none; }

/* État actif "en écoute" : halo rouge AQUILON discret + icône blanche  */
#btn-toggle-mic.is-active {
  background: rgba(220, 38, 38, 0.22);
  box-shadow: 0 0 8px rgba(220, 38, 38, 0.55);
}
#btn-toggle-mic.is-active svg { color: #fecaca; }

/* ── État "AQUILOT écoute" (STT en cours) ─────────────────────────────
   Au lieu de tourner, le néon "respire" : on remplace le conic-gradient
   rotatif par un halo uniforme rouge AQUILON, et l'opacité oscille entre
   0.4 et 1.0 pour simuler la captation audio en direct. Tonalité rouge +
   blanc pur pour différencier visuellement de l'état TTS (cyan + bleu).  */
#aquilot-input-wrapper.is-listening::before {
  /* Halo uniforme — pas de rotation, juste un dégradé radial calme.     */
  background: radial-gradient(
    ellipse at center,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(254, 202, 202, 0.95) 35%,
    rgba(220, 38, 38, 1.00)   60%,
    rgba(220, 38, 38, 0.85)  100%
  );
  animation: aquilot-neon-breathe 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(220, 38, 38, 0.85));
}

@keyframes aquilot-neon-breathe {
  0%, 100% { opacity: 0.40; transform: rotate(0deg); }
  50%      { opacity: 1.00; transform: rotate(0deg); }
}

/* ══ HALO NÉON ORGANIQUE — Architecture z-index négatif ──────────────────
   Le wrapper crée un stacking context (z-index: 1001) qui isole les
   z-index négatifs des pseudos. La pile interne :
       ::before  z-index: -2  → conic-gradient rotatif (le FOND néon)
       ::after   z-index: -1  → masque #020617 (laisse 2 px de halo)
       children  z-index:  1  → input + boutons (interactifs)               */

#aquilot-input-wrapper::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  /* ══ Double conic-gradient — Effet "étoile filante" premium ══
        Layer 1 (au-dessus) : pointe ultra-brillante blanche → cyan, étroite
        (88-100% = ~12° d'arc) qui pulse comme un reflet d'étoile.
        Layer 2 (dessous) : lueur bleue large existante (70-100% = ~108°).
        Les deux rotent ensemble (même ::before, même animation) → la pointe
        blanche surfe en permanence sur le tip cyan du sweep bleu.           */
  background:
    /* ⭐ Étoile filante — pointe blanche compacte */
    conic-gradient(
      from 0deg,
      transparent 0%,
      transparent 88%,
      rgba(255, 255, 255, 0.55) 94%,
      rgba(255, 255, 255, 1)    98%,
      rgba(0, 255, 255, 0.95)   100%
    ),
    /* 🌊 Lueur bleue de base (existant, intacte) */
    conic-gradient(
      from 0deg,
      transparent 70%,
      #0ea5e9 95%,
      #00ffff 100%
    );
  animation: rotateNeon var(--neon-speed) linear infinite;
  opacity: var(--neon-opacity);
  /* drop-shadow blanche qui suit le canal alpha → la pointe brille
     intensément, le sweep bleu reçoit un halo doux. Coût GPU acceptable
     pour une animation lente (4 s). */
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.85));
  transition: opacity 0.3s ease, animation-duration 0.3s ease;
  z-index: -2;                               /* DERRIÈRE tout, fond absolu  */
  pointer-events: none;
}

#aquilot-input-wrapper::after {
  content: '';
  position: absolute;
  inset: 2px;                                /* 2 px de halo visible        */
  background: #020617;                       /* Bleu Abyssal opaque         */
  border-radius: 48px;                       /* 50 − 2 = épouse la pilule   */
  z-index: -1;                               /* au-dessus du néon, sous texte */
  pointer-events: none;
}

/* Contenu (input + boutons mic/send/toggle) — toujours au sommet de la pile */
#aquilot-input, .aquilot-actions {
  position: relative;
  z-index: 1;
}

@keyframes rotateNeon {
  100% { transform: rotate(360deg); }
}

/* ── Bulles de messages (visibles uniquement quand l'utilisateur ouvre) ── */
@keyframes aquilot-msg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.msg-user, .msg-aquilot {
  max-width: 78%;
  padding: 9px 14px;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  animation: aquilot-msg-in 0.22s ease-out;
}

/* ── Bouton supprimer une entrée RÉCENTE du panneau de suggestions ──
   Visible au hover du chip "Récent" (jaune). Click → retire de
   l'historique des commandes + re-render du panneau.                 */
.aq-sug-item[data-section="recent"] {
  position: relative;
  padding-right: 28px;                  /* réserve l'espace pour le X */
}
.aq-sug-recent-del {
  position: absolute;
  top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(2, 6, 23, 0.50);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.80);
  cursor: pointer;
  opacity: 0;
  transition: opacity .14s ease, background .14s ease, transform .14s ease;
  z-index: 3;
}
.aq-sug-item[data-section="recent"]:hover .aq-sug-recent-del { opacity: 1; }
.aq-sug-recent-del:hover {
  background: rgba(239, 68, 68, 0.90);
  border-color: rgba(239, 68, 68, 1);
  color: #fff;
  transform: translateY(-50%) scale(1.12);
}
.aq-sug-recent-del svg { display: block; pointer-events: none; }
.msg-user {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px 14px 4px 14px;
  color: #F0FDFF;
}
.msg-aquilot {
  align-self: flex-start;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25) 0%, rgba(0, 123, 255, 0.20) 100%);
  border: 1px solid rgba(14, 165, 233, 0.50);
  border-radius: 14px 14px 14px 4px;
  color: #F0FDFF;
  box-shadow: 0 2px 12px rgba(14, 165, 233, 0.15);
}
.msg-aquilot::before {
  content: 'GALTEK AI';
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(56, 189, 248, 0.95);
  margin-bottom: 3px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AQUILOT — Popup Premium (utilisé par l'altimétrie middle-click)
   ─────────────────────────────────────────────────────────────────────────
   Glassmorphism léger blanc, fermeture par clic ailleurs (pas de croix UI).
   Compatible avec la classe legacy .aq-elevation-popup (animation off).
═══════════════════════════════════════════════════════════════════════════ */
.aquilot-premium-popup .leaflet-popup-content-wrapper {
  background:        rgba(255, 255, 255, 0.95);
  backdrop-filter:   blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border-radius:     12px;
  box-shadow:        0 8px 25px rgba(0, 0, 0, 0.15);
  border:            1px solid rgba(0, 0, 0, 0.05);
  padding:           5px;
}
.aquilot-premium-popup .leaflet-popup-tip {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10);
}
.aquilot-premium-popup .leaflet-popup-content {
  margin: 15px 20px;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1e293b;
  font-size: 13px;
  line-height: 1.45;
}

/* Highlight de la valeur altitude (le span de chiffre est déjà coloré
   #df4454 inline depuis _showAltitudePopup — ajout d'un léger glow). */
.aquilot-premium-popup .leaflet-popup-content span[style*="#df4454"] {
  text-shadow: 0 0 12px rgba(223, 68, 84, 0.18);
}

/* ── Popups mesure (cercle Rayon / ligne Distance) — padding élargi ── */
.aq-measure-popup .leaflet-popup-content-wrapper {
  padding: 8px 10px !important;
  border-radius: 14px !important;
}
.aq-measure-popup .leaflet-popup-content {
  margin: 6px 10px !important;
  min-width: 130px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOUR BUILDER — Panneau Tournée d'Inspection (Sprint B Phase 2)
   ─────────────────────────────────────────────────────────────────────────
   Glassmorphism Bleu Abyssal cohérent avec la charte AQUILON.
   Position bottom-left de la zone carte → aucun conflit avec :
     • AQUILOT pill (bottom-center, max-width 700)
     • Vertical toolbar #aq-vertical-toolbar (top-right)
     • Layer sidebar #aq-layer-popup (right edge)
   Visible uniquement via la classe .is-visible (fade-in opacity+slide).
═══════════════════════════════════════════════════════════════════════════ */
#aq-tour-builder {
  position: absolute;
  bottom: 24px;
  left: 16px;
  z-index: 950;                              /* sous AQUILOT (1001), sur la carte */
  width: 340px;
  max-width: calc(100vw - 740px);            /* ne déborde pas sur l'AQUILOT pill */
  max-height: min(72vh, 560px);              /* +12vh pour éviter coupure bouton Google Maps */
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 20px;                   /* +6px bas pour respiration sous bouton Google Maps */
  background: rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(14, 165, 233, 0.10);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.30s ease, transform 0.30s ease;
}
#aq-tour-builder.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Hauteur réduite sur petits écrans (mobile portrait) */
@media (max-width: 880px) {
  #aq-tour-builder {
    width: calc(100vw - 32px);
    max-width: 100%;
    bottom: 110px;                           /* au-dessus de l'AQUILOT pill */
  }
}

/* ── Header : titre + sous-titre + bouton close ────────────────────────── */
.aq-tour-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.aq-tour-head-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.aq-tour-title {
  font-size: 13px;
  font-weight: 800;
  color: #F0FDFF;
  letter-spacing: 0.02em;
}
.aq-tour-sub {
  font-size: 11px;
  font-weight: 500;
  color: rgba(240, 253, 255, 0.55);
  margin-top: 2px;
}
.aq-tour-close {
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: rgba(240, 253, 255, 0.70);
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.aq-tour-close:hover {
  background: rgba(223, 68, 84, 0.20);
  border-color: rgba(223, 68, 84, 0.55);
  color: #fca5a5;
}

/* ── Section générique (label + contenu) ─────────────────────────────── */
.aq-tour-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Section Point de départ (dropdown 3 modes + champs conditionnels) ─
   - .aq-tour-origin-select        : mode principal (gps/address/sensor)
   - .aq-tour-origin-input         : champ texte adresse (si address)
   - .aq-tour-origin-sensor-select : dropdown capteur (si sensor)         */
.aq-tour-origin-select {
  width: 100%;
  padding: 8px 30px 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: #F0FDFF;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  /* Custom caret SVG (cyan AQUILON) — pas d'emoji */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2338bdf8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.aq-tour-origin-select:hover {
  background-color: rgba(255, 255, 255, 0.07);
  border-color: rgba(14, 165, 233, 0.35);
}
.aq-tour-origin-select:focus {
  background-color: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.55);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.20);
}
.aq-tour-origin-select option {
  background: #020617;
  color: #F0FDFF;
}

.aq-tour-origin-input {
  width: 100%;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: #F0FDFF;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  outline: none;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.aq-tour-origin-input::placeholder { color: rgba(240, 253, 255, 0.30); }
.aq-tour-origin-input:focus {
  background: rgba(14, 165, 233, 0.08);
  border-color: rgba(14, 165, 233, 0.55);
  box-shadow: 0 0 0 2px rgba(14, 165, 233, 0.20);
}

/* ── Liste des chips capteurs ─────────────────────────────────────────── */
.aq-tour-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  padding: 2px;
  scrollbar-width: thin;
  scrollbar-color: rgba(14, 165, 233, 0.30) transparent;
}
.aq-tour-chips::-webkit-scrollbar       { width: 6px; }
.aq-tour-chips::-webkit-scrollbar-thumb { background: rgba(14, 165, 233, 0.30); border-radius: 3px; }

.aq-tour-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 4px 5px 9px;
  background: rgba(14, 165, 233, 0.16);
  border: 1px solid rgba(14, 165, 233, 0.40);
  border-radius: 999px;
  color: #F0FDFF;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
  max-width: 100%;
  white-space: nowrap;
}
.aq-tour-chip:hover {
  background: rgba(14, 165, 233, 0.28);
  border-color: rgba(14, 165, 233, 0.70);
  transform: translateY(-1px);
}
.aq-tour-chip-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  background: #0ea5e9;
  color: #020617;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 900;
  margin-right: 2px;
  font-variant-numeric: tabular-nums;
}
.aq-tour-chip-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}
.aq-tour-chip-remove {
  flex-shrink: 0;
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  color: rgba(240, 253, 255, 0.60);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.aq-tour-chip-remove:hover {
  background: rgba(223, 68, 84, 0.28);
  color: #fff;
}

/* ── Sélecteur de profil (segmented control) ──────────────────────────── */
.aq-tour-profile-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.aq-tour-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(240, 253, 255, 0.55);
  flex-shrink: 0;
}
.aq-tour-seg-group {
  flex: 1;
  display: flex;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  padding: 2px;
  gap: 2px;
}
.aq-tour-seg {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 6px 4px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(240, 253, 255, 0.60);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.aq-tour-seg i { font-size: 11px; }
.aq-tour-seg:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #F0FDFF;
}
.aq-tour-seg.is-active {
  background: rgba(14, 165, 233, 0.25);
  color: #fff;
  box-shadow: inset 0 0 0 1px rgba(14, 165, 233, 0.55);
}

/* ── Boutons d'action (primary Calculer / secondary Vider) ────────────── */
.aq-tour-actions {
  display: flex;
  gap: 8px;
}
.aq-tour-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 12px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .18s, border-color .18s, transform .12s, box-shadow .18s;
}
.aq-tour-btn:active { transform: scale(0.97); }
.aq-tour-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.aq-tour-btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: rgba(240, 253, 255, 0.75);
}
.aq-tour-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.10);
  color: #F0FDFF;
}
.aq-tour-btn-primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #1979B2 100%);
  border: 1px solid rgba(14, 165, 233, 0.85);
  color: #fff;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.30);
}
.aq-tour-btn-primary:hover {
  background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%);
  box-shadow: 0 6px 22px rgba(14, 165, 233, 0.55);
}

/* ── Style des polylines tournée (cf. _renderTourPolyline) ────────────── */
.aq-tour-glow { filter: drop-shadow(0 0 6px rgba(14, 165, 233, 0.55)); }
.aq-tour-line { filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.45)); }

/* ═══════════════════════════════════════════════════════════════════════════
   TOUR BUILDER — Loader + chip "Départ"
═══════════════════════════════════════════════════════════════════════════ */

/* ── Chip "Départ" : 1ᵉʳ capteur en mode 'sensor' ──────────────────────── */
.aq-tour-chip.is-departure {
  background: rgba(14, 165, 233, 0.30);
  border-color: rgba(14, 165, 233, 0.85);
  box-shadow:
    0 0 0 1px rgba(14, 165, 233, 0.55),
    0 0 12px rgba(14, 165, 233, 0.35);
}
.aq-tour-chip.is-departure .aq-tour-chip-num {
  background: #0ea5e9;
  color: #001025;
  box-shadow: 0 0 8px rgba(14, 165, 233, 0.65);
}

/* ── Spinner SVG du bouton Calculer (animation rotation) ─────────────── */
.aq-tour-spinner {
  display: inline-block;
  animation: aq-tour-spin 0.9s linear infinite;
  color: #fff;
}
@keyframes aq-tour-spin {
  to { transform: rotate(360deg); }
}

/* ── État LOADING du bouton "Calculer la tournée" ──────────────────────
   Combine atténuation visuelle (cursor:wait, opacité légère) + masquage
   du gradient hover. Le bouton reste cliquable visuellement mais
   inactif via l'attribut [disabled].                                       */
.aq-tour-btn-primary.is-loading {
  cursor: wait !important;
  pointer-events: none;                       /* anti double-clic absolu */
  background: linear-gradient(135deg,
              rgba(14, 165, 233, 0.55) 0%,
              rgba(25, 121, 178, 0.55) 100%) !important;
  border-color: rgba(14, 165, 233, 0.65) !important;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.20) !important;
  opacity: 0.92;
}
.aq-tour-btn-primary.is-loading:hover {
  transform: none !important;                 /* annule le translateY hover */
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.20) !important;
}

/* ── Bouton Google Maps (Mission 2.11) ────────────────────────────────────
   Bouton secondaire pleine largeur qui apparaît UNIQUEMENT une fois la
   tournée calculée. Code couleur Google Maps (vert #34a853) pour
   reconnaissance instantanée + accent visuel distinct des boutons cyan
   AQUILON principaux. SVG inline (pas d'émoji, charte stricte).             */
.aq-tour-btn-gmaps {
  width: 100%;
  margin-top: 12px;                          /* +4px séparation visuelle au-dessus */
  margin-bottom: 4px;                        /* respiration sous le bouton */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #34a853 0%, #2d8a44 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 9px;
  color: #fff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow:
    0 4px 14px rgba(52, 168, 83, 0.30),
    0 0 0 1px rgba(52, 168, 83, 0.15);
  transition: background .18s, transform .12s, box-shadow .18s;
}
.aq-tour-btn-gmaps:hover {
  background: linear-gradient(135deg, #2d8a44 0%, #246b35 100%);
  transform: translateY(-1px);
  box-shadow:
    0 6px 18px rgba(52, 168, 83, 0.45),
    0 0 0 1px rgba(52, 168, 83, 0.45);
}
.aq-tour-btn-gmaps:active { transform: translateY(0); }
.aq-tour-btn-gmaps svg    { color: #fff; flex-shrink: 0; }

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  ENTERPRISE POLISH — Sprint UX Snappiness                                ║
   ║  ────────────────────────────────────────────────────────────────────── ║
   ║  Bloc unifié : transition de connexion, fluidification carte,            ║
   ║  Cyber-Scan flight overlay, feedback boutons asynchrones.                ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* ── 1. AUTH TRANSITION — Fade-in du dashboard après connexion ──────────────
   Le mur de login utilise déjà l'animation `wallExit` (cf. ligne ~3324).
   On y répond par un fade-in symétrique du #app afin que les deux écrans se
   "croisent" en douceur. Durée alignée sur 500 ms d'attente côté auth.js.   */
#app.app-fade-in {
  animation: appFadeIn 600ms ease-out both;
}
@keyframes appFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}

/* État "Authentification en cours" du bouton de connexion : visuellement
   neutralisé (curseur wait + opacité réduite) sans casser le layout.       */
#login-btn.is-loading,
#login-btn:disabled {
  cursor: progress;
  opacity: 0.85;
  filter: saturate(0.85);
  pointer-events: none;                       /* sécurité anti double-clic */
}
#login-btn.is-loading .fa-arrow-right { opacity: 0; }

/* ── 2. MAP — Bleu Abyssal + grille tactique unifiée ─────────────────────
   Empilement visuel de profondeur exigé par le client :
     1. Fond Bleu Abyssal (#020617)             — tout au fond
     2. Grille millimétrée cyan (0.08 alpha)    — sur le container
     3. Calque radar LOD (opacity 0.25)         — filigrane translucide
     4. Tuiles HD nettes (opaques)              — par-dessus quand chargées
   Les valeurs 0.08 alpha + 40 px de pitch rendent la grille suffisamment
   présente pour transparaître à travers le calque radar (qui devient un
   simple filigrane à 25 % d'opacité — voir .aquilon-radar-layer ci-bas). */
.leaflet-container {
  background-color: #020617 !important;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.08) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  background-position: center center !important;
}

/* ── 2b. TRANSPARENCE DES TUILES MORTES ─────────────────────────────────
   Leaflet (et certains navigateurs) appliquent un fond gris par défaut
   aux balises <img.leaflet-tile> en attente de chargement. On force la
   transparence absolue pour que le fond Bleu Abyssal + la grille +
   le calque radar restent visibles là où aucune tuile HD n'est encore
   arrivée. AUCUN carré gris ne doit apparaître nulle part.               */
.leaflet-tile {
  background: transparent !important;
}

/* ── 3. MAP — Verrouillage du rendu marqueurs pendant le zoom ────────────
   Pendant la phase d'animation de zoom Leaflet, le canvas étire briève-
   ment les CircleMarkers (effet "gros cercle" disgracieux). On fond la
   pane marker/overlay/halo en sortie de scène le temps du zoom — Leaflet
   les replace correctement à zoomend.                                      */
.leaflet-container.aq-zooming .leaflet-marker-pane,
.leaflet-container.aq-zooming .leaflet-overlay-pane,
.leaflet-container.aq-zooming .leaflet-shadow-pane {
  transition: opacity 0.12s ease-out;
  opacity: 0;
}
.leaflet-container .leaflet-marker-pane,
.leaflet-container .leaflet-overlay-pane,
.leaflet-container .leaflet-shadow-pane {
  transition: opacity 0.18s ease-in;
}

/* ── 4. CYBER-SCAN FLIGHT OVERLAY ────────────────────────────────────────
   Visible uniquement quand l'overlay porte `.is-active` (posé par map.js
   → _beginCinematicFlight). Composition :
     • #aquilon-flight-overlay         → radial gradient (centre transparent,
                                          bords assombris Bleu Abyssal)
     • repeating-linear-gradient cyan  → fines lignes de balayage scanline
     • .aq-flight-scan-grid (enfant)   → grille circuitry respirante (breatheScan)
     • filter: blur(6px) brightness(0.5) sur .leaflet-tile-pane uniquement
                                          → transforme la bouillie en flou
                                          artistique de profondeur de champ. */
#aquilon-flight-overlay {
  position: absolute;
  inset: 0;
  z-index: 1500;                              /* > carte, < panneaux UI    */
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.8s ease-out, visibility 0.8s linear;
  /* Dégradé radial sombre vers les bords + scanlines cyan ultra-fines.
     Stack background : radial (au-dessus) + scanlines (en-dessous).      */
  background:
    radial-gradient(
      ellipse at center,
      rgba(2, 6, 23, 0.00)  0%,
      rgba(2, 6, 23, 0.35) 45%,
      rgba(2, 6, 23, 0.88) 85%,
      rgba(2, 6, 23, 0.98) 100%
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(14, 165, 233, 0.00) 0px,
      rgba(14, 165, 233, 0.00) 3px,
      rgba(14, 165, 233, 0.10) 3px,
      rgba(14, 165, 233, 0.10) 4px
    );
}

/* État actif : posé par map.js. Fade-in rapide (0.3 s) à l'ouverture du
   vol, puis @keyframes breatheScan fait pulser opacité 0.5 ↔ 1.0.        */
#aquilon-flight-overlay.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease-in;
  animation: breatheScan 3.2s ease-in-out infinite;
}

@keyframes breatheScan {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1.0; }
}

/* ── Variante "Satellite Uplink" — Dézoomage majeur (Vue Globale, IA recul)
   Posée en plus de .is-active par map.js → _beginCinematicFlight('uplink').
   Sensation différente du vol drone : pulse concentrique lent (5.5 s) qui
   simule la latence d'une liaison satellite haute altitude, et un anneau
   radial supplémentaire au centre qui s'expand pendant le maintien.       */
#aquilon-flight-overlay.is-satellite-uplink {
  animation: satelliteUplinkBreathe 5.5s ease-in-out infinite;
}
#aquilon-flight-overlay.is-satellite-uplink::before {
  /* Pulse concentrique : disque cyan qui s'expand depuis le centre.
     Effet "signal satellite acquis" plutôt que "drone qui survole".       */
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 60px; height: 60px;
  margin: -30px 0 0 -30px;
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 50%;
  pointer-events: none;
  animation: satelliteUplinkPing 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.5));
}

@keyframes satelliteUplinkBreathe {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.95; }
}
@keyframes satelliteUplinkPing {
  0%   { transform: scale(0.4); opacity: 0.9; border-width: 2px; }
  70%  { opacity: 0.25; }
  100% { transform: scale(8);   opacity: 0.0; border-width: 1px; }
}

/* Grille circuitry minimaliste (lignes cyan néon 40 × 40 px) en surcouche
   pour densifier l'effet "scan de données actives" sans alourdir.        */
.aq-flight-scan-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image:
    linear-gradient(to bottom,
      rgba(14, 165, 233, 0.18) 0px,
      rgba(14, 165, 233, 0.18) 1px,
      transparent 1px,
      transparent 40px),
    linear-gradient(to right,
      rgba(14, 165, 233, 0.18) 0px,
      rgba(14, 165, 233, 0.18) 1px,
      transparent 1px,
      transparent 40px),
    linear-gradient(135deg,
      transparent 0%,
      rgba(56, 189, 248, 0.06) 50%,
      transparent 100%);
  background-size: 40px 40px, 40px 40px, 100% 100%;
  filter: drop-shadow(0 0 4px rgba(14, 165, 233, 0.25));
}

/* ── 4b. FLOU DE PROFONDEUR CINÉMATOGRAPHIQUE ────────────────────────────
   Le blur est appliqué UNIQUEMENT sur la pane des tuiles raster
   (.leaflet-tile-pane) — pas sur le container entier — pour garder les
   contrôles, popups et overlay parfaitement nets pendant le vol.
   Le retrait du blur est calé sur 0.8 s pour rester PARFAITEMENT synchro
   avec le fade-out d'opacité de #aquilon-flight-overlay (0.8 s également)
   → la carte HD se révèle en un seul fondu continu, sans cassure.        */
.is-cinematic-flying .leaflet-pane.leaflet-tile-pane {
  filter: blur(6px) brightness(0.5);
  transition: filter 0.4s ease-in;             /* entrée rapide en flou    */
}
.leaflet-pane.leaflet-tile-pane {
  transition: filter 0.8s ease-out;            /* sortie longue et douce   */
}

/* ── 4c. ANTI-SAUT SVG PENDANT LE ZOOM ──────────────────────────────────
   Pendant la phase `leaflet-zoom-anim`, Leaflet applique un transform au
   pane SVG → les CircleMarkers / Polylines subissent un saut visible si
   une transition CSS est active. On désactive toute transition sur les
   éléments interactifs pour neutraliser l'effet "gros cercle qui pop".  */
.leaflet-zoom-anim .leaflet-interactive {
  transition: none !important;
}

/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║  LOD RADAR — Sous-couche basse définition "acquisition radar"            ║
   ║  ────────────────────────────────────────────────────────────────────── ║
   ║  Couche tileLayer dupliquée avec maxNativeZoom: 6 (cf. _buildRadarLayer  ║
   ║  dans map.js). Toujours présente sous la couche HD, elle remplit les     ║
   ║  vides instantanément pendant le pan/zoom : l'utilisateur ne voit plus   ║
   ║  jamais de fond gris ni de damier — il voit une carte continentale très  ║
   ║  basse résolution, bleutée et pixelisée, qui rappelle un retour radar.   ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

/* Rendu Cyber-Industrial "Blueprint Fantôme" :
   • opacity 0.25  → filigrane translucide qui laisse la grille millimétrée
                     du container respirer en permanence en arrière-plan.
   • grayscale(1) + sepia(1) + hue-rotate(180deg) → teinte cyan technique.
   • brightness(0.7)  → plonge dans l'abyssal sans cramer les contours.
   • contrast(1.3)    → rehausse les traits géographiques malgré
                        l'opacité réduite (compense la perte visuelle).
   AUCUN BLUR : la fatigue visuelle reste éradiquée.
   `!important` forcé pour s'assurer qu'aucune règle hors-bloc ne ré-injecte
   un fond raster opaque sur cette couche.                                 */
.aquilon-radar-layer {
  opacity: 0.25 !important;
  filter: grayscale(1) sepia(1) hue-rotate(180deg) brightness(0.7) contrast(1.3) !important;
  transition: opacity 0.3s ease;
}

/* ── 5. FEEDBACK ASYNC UNIVERSEL — Boutons en attente de promesse ────────
   Toute classe utilitaire `.is-async-loading` ajoutée par JS pendant un
   await transforme le bouton en pilule désactivée + curseur progress.
   Les boutons natifs `disabled` reçoivent le même traitement par défaut.   */
button:disabled:not(.aquilot-btn-icon):not(.aq-tb-btn):not(#login-btn) {
  cursor: not-allowed;
  opacity: 0.65;
  filter: saturate(0.7);
}
.is-async-loading {
  cursor: progress !important;
  opacity: 0.75;
  pointer-events: none;
  position: relative;
}
.is-async-loading::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: aqAsyncSpin 0.7s linear infinite;
}
@keyframes aqAsyncSpin {
  to { transform: rotate(360deg); }
}

/* ══════════════════════════════════════════════════════════════
   MODE APPRENTISSAGE POI — curseur + banner discret
══════════════════════════════════════════════════════════════ */
body.aq-picking-location .leaflet-container {
  cursor: crosshair !important;
}
body.aq-picking-location .leaflet-container::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px dashed rgba(56, 189, 248, 0.55);
  pointer-events: none;
  z-index: 999;
  animation: aqPickPulse 1.8s ease-in-out infinite;
}
@keyframes aqPickPulse {
  0%, 100% { border-color: rgba(56, 189, 248, 0.35); }
  50%      { border-color: rgba(56, 189, 248, 0.85); }
}
.aq-picking-banner {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 25, 49, 0.96);
  backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid rgba(56, 189, 248, 0.60);
  color: #93e8ff;
  padding: 10px 22px;
  border-radius: 999px;
  font: 600 13px/1.3 'Inter', system-ui, sans-serif;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.45), 0 0 22px rgba(56, 189, 248, 0.30);
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: aqToastIn 0.30s cubic-bezier(.22, .84, .25, 1.04);
  pointer-events: auto;
}
.aq-picking-banner i { color: #38bdf8; font-size: 14px; }
.aq-picking-banner strong { color: #ffffff; }
.aq-picking-banner .aq-picking-cancel {
  margin-left: 10px;
  background: rgba(223, 68, 84, 0.18);
  border: 1px solid rgba(223, 68, 84, 0.50);
  color: #ff8a99;
  font: 600 11px/1 'Inter', system-ui, sans-serif;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.aq-picking-banner .aq-picking-cancel:hover {
  background: rgba(223, 68, 84, 0.32);
}

/* ══════════════════════════════════════════════════════════════
   MODE CORRECTION MANUELLE — Sélection d'action par chips
   Overlay modal avec liste filtrable des actions AQUILOT.
══════════════════════════════════════════════════════════════ */
.aq-correction-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(2, 6, 23, 0.78);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: aqCorrFadeIn 0.18s ease;
}
@keyframes aqCorrFadeIn { from { opacity: 0; } to { opacity: 1; } }

.aq-correction-modal {
  background: rgba(10, 25, 49, 0.97);
  border: 1px solid rgba(56, 189, 248, 0.45);
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.65), 0 0 40px rgba(56, 189, 248, 0.20);
  width: min(620px, 92vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.aq-correction-head {
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(56, 189, 248, 0.20);
}
.aq-correction-head h3 {
  margin: 0 0 4px;
  color: #ffffff;
  font: 700 15px/1.3 'Inter', system-ui, sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}
.aq-correction-head h3 i { color: #38bdf8; }
.aq-correction-head .aq-correction-original {
  margin: 0;
  color: #93e8ff;
  font: 500 12px/1.4 'Inter', system-ui, sans-serif;
}
.aq-correction-head .aq-correction-original code {
  background: rgba(56, 189, 248, 0.12);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: ui-monospace, monospace;
  color: #93e8ff;
}
.aq-correction-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: 0;
  color: #94a3b8;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.aq-correction-close:hover { color: #ff8a99; }

.aq-correction-search {
  margin: 10px 18px 0;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(56, 189, 248, 0.30);
  border-radius: 8px;
  padding: 8px 12px;
  color: #e2e8f0;
  font: 500 13px/1.3 'Inter', system-ui, sans-serif;
  outline: none;
}
.aq-correction-search:focus { border-color: rgba(56, 189, 248, 0.70); }

.aq-correction-list {
  padding: 12px 18px 18px;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
}
.aq-correction-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(56, 189, 248, 0.06);
  border: 1px solid rgba(56, 189, 248, 0.25);
  border-radius: 8px;
  color: #e2e8f0;
  cursor: pointer;
  text-align: left;
  font: 500 12.5px/1.3 'Inter', system-ui, sans-serif;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.aq-correction-chip:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: rgba(56, 189, 248, 0.60);
}
.aq-correction-chip:active { transform: scale(0.98); }
.aq-correction-chip i {
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  color: #38bdf8;
  font-size: 13px;
}
.aq-correction-chip .aq-corr-chip-label {
  flex: 1 1 auto;
  color: #ffffff;
  font-weight: 600;
}
.aq-correction-chip .aq-corr-chip-cat {
  font-size: 10px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: auto;
}

/* ══════════════════════════════════════════════════════════════
   AUTOCOMPLETE — Suggestions AQUILOT au-dessus de l'input
══════════════════════════════════════════════════════════════ */
.aq-autocomplete {
  position: fixed;
  /* left, width, bottom calculés dynamiquement par _repositionAutocomplete() */
  /* Cohérence visuelle avec le chat AQUILOT : transparent + flou prononcé */
  background: rgba(2, 6, 23, 0.65);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.55), 0 0 32px rgba(56, 189, 248, 0.18);
  padding: 8px;
  max-height: 360px;
  overflow-y: auto;
  z-index: 9000;
  animation: aqSugFadeIn 0.18s ease;
}

@keyframes aqSugFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.aq-sug-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #e2e8f0;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  font: 500 13px/1.3 'Inter', system-ui, sans-serif;
  border: 1px solid transparent;
}
.aq-sug-item + .aq-sug-item {
  margin-top: 2px;
}
.aq-sug-item:hover,
.aq-sug-item.is-active {
  background: rgba(56, 189, 248, 0.16);
  border-color: rgba(56, 189, 248, 0.45);
}
.aq-sug-item i {
  flex-shrink: 0;
  width: 22px;
  text-align: center;
  color: #38bdf8;
  font-size: 14px;
}
.aq-sug-item .aq-sug-text {
  flex: 1 1 auto;
  color: #ffffff;
  font-weight: 600;
}
.aq-sug-item .aq-sug-cat {
  font-size: 10px;
  color: #93e8ff;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  background: rgba(56, 189, 248, 0.12);
  padding: 3px 8px;
  border-radius: 6px;
  flex-shrink: 0;
}
.aq-sug-item.is-active .aq-sug-cat {
  background: rgba(56, 189, 248, 0.30);
  color: #ffffff;
}

/* Headers de section (Récent / Appris / Suggestions) */
.aq-sug-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 4px 12px;
  font: 700 10px/1 'Inter', system-ui, sans-serif;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #93e8ff;
  border-top: 1px solid rgba(56, 189, 248, 0.18);
  margin-top: 4px;
}
/* Pas de séparateur sur le premier header */
.aq-sug-header:first-child {
  border-top: none;
  margin-top: 0;
}
.aq-sug-header i {
  color: #38bdf8;
  font-size: 10px;
}

/* Distinction visuelle pour les items "Récent" et "Appris" */
.aq-sug-item[data-section="recent"] i {
  color: #fbbf24;   /* jaune doré = récent */
}
.aq-sug-item[data-section="learned"] i {
  color: #a78bfa;   /* violet = appris par l'utilisateur */
}
.aq-sug-item[data-section="recent"] .aq-sug-cat {
  background: rgba(251, 191, 36, 0.16);
  color: #fcd34d;
}
.aq-sug-item[data-section="learned"] .aq-sug-cat {
  background: rgba(167, 139, 250, 0.18);
  color: #c4b5fd;
}

/* Scrollbar custom du dropdown */
.aq-autocomplete::-webkit-scrollbar       { width: 6px; }
.aq-autocomplete::-webkit-scrollbar-track { background: transparent; }
.aq-autocomplete::-webkit-scrollbar-thumb { background: rgba(56,189,248,0.30); border-radius: 3px; }