:root {
  --bg: #0f1420;
  --panel: #171e2e;
  --panel-2: #1f293d;
  --border: #2a3550;
  --text: #e8ecf5;
  --text-dim: #8b96ad;
  /* Couleurs de marque Surplus Recyclage, reprises du logo et de l'ancienne appli (css.css : #1488ca / #1eb751) */
  --brand-blue: #1488ca;
  --brand-blue-light: #29a3e6;
  --brand-green: #1eb751;
  --brand-green-light: #6acc00;
  /* Vert GSR officiel : rgb(154,195,49) */
  --gsr-green: #9ac331;
  --gsr-green-dark: #6f8f22;
  --gsr-green-light: #eef5df;
  --accent: var(--brand-blue);
  --vert: #2fbf71;
  --jaune: #f4c430;
  --orange: #ff8c3b;
  --rouge: #ef4444;

  /* Echelle neutre : remplace les hex dupliques ad hoc (#1a1b1e, #868e96,
     #ecedef...) pour une coherence visuelle de base a travers tous les
     composants plutot que des variantes proches-mais-differentes. */
  --gray-50: #f8f9fa;
  --gray-100: #f1f3f5;
  --gray-200: #e9ecef;
  --gray-300: #dee2e6;
  --gray-400: #ced4da;
  --gray-500: #adb5bd;
  --gray-600: #868e96;
  --gray-700: #495057;
  --gray-800: #343a40;
  --gray-900: #1a1b1e;

  /* Echelles d'espacement et d'arrondi/ombre partagees par les composants
     "carte" (emplacement, panneau admin, stat, login, poste). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Coins nets plutot qu'arrondis genereux : lecture "outil industriel",
     pas "appli mobile grand public". */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;

  /* Ombres aplaties : le relief vient de la bordure, pas d'un flou doux. */
  --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.06);
  --shadow-md: 0 1px 2px rgba(20, 24, 31, 0.08);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.22);

  /* Ton technique/graphite pour les barres de titre et accents structurels :
     le vert GSR reste reserve aux vrais indicateurs actifs, pas au decor. */
  --graphite: #1f2937;
  --graphite-dark: #111827;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  /* min-height en vh (pas % ni height fixe) : un % a besoin d'une hauteur de
     reference definie sur le parent pour se calculer correctement (peu fiable
     selon navigateurs), et une height fixe se fait depasser par un contenu plus
     grand qu'un ecran. Le vh est toujours relatif a la fenetre, donc couvre le
     fond correctement que le contenu soit plus court OU plus long que l'ecran
     (bug constate dans les deux sens : bandes noires en bas de page courte,
     ou passe le premier ecran sur une page longue). */
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
  /* Desactive le "tirer pour actualiser" natif mobile : un rechargement complet
     de page reinitialise l'AudioContext et refait apparaitre l'overlay de
     deverrouillage audio a chaque geste accidentel. L'appli a deja son propre
     polling + bouton actualiser, ce geste natif n'apporte rien. */
  overscroll-behavior-y: contain;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
}

.icone {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

/* ---------- Login (inspire de l'ERP maison, portail.koena.fr) ---------- */

.login-screen {
  --login-bg: #eef3f6;
  --login-card-bg: #d9f0e6;
  --login-blob: #9ac331;
  --login-text: #2c2c2c;
  --login-text-dim: #6b7280;

  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--login-bg);
}

/* Formes organiques vertes dans les coins, comme sur le portail ERP */
.login-blob {
  position: absolute;
  width: 220px;
  height: 220px;
  fill: var(--login-blob);
  pointer-events: none;
}
.login-blob.top-right { top: 0; right: 0; }
.login-blob.bottom-left { bottom: 0; left: 0; }

.login-card {
  position: relative;
  z-index: 1;
  background: var(--login-card-bg);
  border-radius: 18px;
  padding: 30px 32px 34px;
  width: 340px;
  box-shadow: 0 20px 50px rgba(20, 60, 40, 0.12);
}

.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.login-logo svg { display: block; }
.login-logo img {
  /* Cercle deja compose dans le fichier (logo-login-circle.png, fond
     transparent hors du rond) : pas besoin de object-fit/padding pour
     recadrer en CSS, ce qui evitait un rognage impossible a fiabiliser
     entre navigateurs. border-radius reste en securite (n'a plus d'effet
     visuel sur le contenu, mais garde l'ombre portee circulaire). */
  display: block;
  width: 220px;
  height: 220px;
  max-width: 100%;
  border-radius: 50%;
  box-shadow: 0 6px 18px rgba(20, 60, 40, 0.15);
}

.login-card h1 {
  margin: 4px 0 22px;
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  color: var(--login-text);
  font-family: "Baloo 2", "Segoe UI", sans-serif;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--login-text);
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: #fff;
  color: var(--login-text);
  font-size: 15px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.field input::placeholder { color: #b7c0cc; }

.field input:focus {
  outline: none;
  border-color: var(--login-blob);
  box-shadow: 0 0 0 3px rgba(154, 195, 49, 0.25);
}

.btn-primary {
  width: 100%;
  padding: 13px;
  border-radius: 8px;
  background: var(--login-blob);
  color: white;
  font-size: 15px;
  font-weight: 700;
  transition: filter 0.15s, transform 0.1s;
}

.btn-primary:active { filter: brightness(0.92); transform: scale(0.99); }

.error-msg {
  color: var(--rouge);
  font-size: 13px;
  margin-top: 10px;
  min-height: 16px;
}

/* ---------- App shell (dashboard + poste) ---------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}

.topbar .left, .topbar .right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.topbar-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #fff;
  padding: 3px;
  object-fit: contain;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .topbar-logo { width: 28px; height: 28px; }
}

.topbar .title {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.3px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 8px;
}

.topbar-entite {
  font-weight: 600;
  opacity: 0.55;
}

/* Petits ecrans (telephone) : boutons plus compacts pour laisser de la place
   au titre plutot que de tout ecraser. */
@media (max-width: 480px) {
  .topbar { padding: 10px 12px; }
  .icon-btn { width: 34px; height: 34px; font-size: 15px; }
  .topbar .left, .topbar .right { gap: 6px; }
  .topbar .title { font-size: 14px; }
}

.icon-btn {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}

.icon-btn:active { background: var(--accent); }

.icon-btn.active {
  background: var(--accent);
  border-color: var(--accent);
}

.badge-alerte {
  background: var(--orange);
  color: #1a1200;
  font-weight: 700;
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  animation: pulse 1.4s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.content {
  padding: 20px;
}

/* ---------- Cariste : style "Mantine" (cartes blanches, ombres douces, radius
   genereux, badges light/filled), couleur de marque GSR rgb(154,195,49).
   Les alertes restent en blocs pleinement satures ("filled") pour rester
   lisibles au soleil/de nuit — le reste de l'UI suit l'esthetique moderne. */

body.cariste {
  background: #f7f8fa;
  color: #1a1b1e;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* Barre de titre graphite plutot que blanche : lecture "poste de controle"
   plutot que "appli mobile". */
body.cariste .topbar {
  background: var(--graphite);
  border-bottom: 1px solid var(--graphite-dark);
}
body.cariste .topbar .title { color: #fff; font-weight: 700; }
body.cariste .topbar-entite { color: rgba(255, 255, 255, 0.55); }

body.cariste .icon-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e5e7eb;
  border-radius: var(--radius-sm);
}
body.cariste .icon-btn:active,
body.cariste .icon-btn.active {
  background: var(--gsr-green);
  border-color: var(--gsr-green);
  color: #fff;
}

body.cariste .empty-state { color: #868e96; }

/* ---------- Section "A traiter" : postes actifs, toutes activites confondues,
   tries par anciennete. Peu nombreux, doivent sauter aux yeux. ---------- */

.section-a-traiter { margin-bottom: var(--space-6); }

.section-a-traiter h3 {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--rouge);
  margin: 0 0 14px;
}

.grille-active {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

.emplacement-card .secteur-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-500);
}

/* ---------- Dashboard grid (postes libres, groupes par activite/secteur,
   repere compact plutot qu'une carte pleine puisqu'il n'y a rien a y faire) ---------- */

.secteurs {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.secteur-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.emplacement-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  padding: 6px 12px 6px 8px;
  font-size: 13px;
}

.emplacement-chip .pastille-libre {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gsr-green);
  flex-shrink: 0;
}

.emplacement-chip .nom { font-weight: 700; color: var(--gray-900); }

.emplacement-chip .operateur {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-500);
  padding-left: 6px;
  border-left: 1px solid var(--gray-200);
}

/* Chaque secteur est un ilot physique reel sur le parc (une zone dediee a une
   activite : demontage carrosserie, mecanique...) : traite comme un vrai
   panneau de zone plutot qu'un simple libelle au-dessus d'une liste. */
.secteur-panel {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}

.secteur-entete {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.secteur-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--gray-200);
  color: var(--gsr-green-dark);
  flex-shrink: 0;
}

.secteur-entete h3 {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--gray-800);
  margin: 0;
  padding: 0;
  border: none;
}

.secteur-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* Carte composite, esprit Mantine "Card" : blanc, radius genereux, ombre douce,
   bordure quasi invisible plutot qu'un trait epais. */
.emplacement-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  box-shadow: var(--shadow-md);
}

.emplacement-card .en-tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px;
}

.emplacement-card .nom {
  font-weight: 700;
  font-size: 16px;
  color: var(--gray-900);
}

.emplacement-card .operateur {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
}
.emplacement-card .operateur .icone svg { width: 12px; height: 12px; }

.emplacement-card .operateur.vide {
  color: var(--gray-500);
  font-style: italic;
  font-weight: 500;
}

.chariot-zone {
  border: none;
  border-left: 3px solid var(--gsr-green);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  width: 100%;
  transition: transform 0.1s, filter 0.15s;
  /* "vide" : plat (bordure d'accent) plutot que fond pastel plein - lecture
     "tableau de bord technique". */
  background: #fff;
  color: var(--gsr-green-dark);
}

.chariot-zone:active { transform: scale(0.97); }
/* Alertes actives : variante "filled" (bloc plein sature), pour rester tres
   visibles au soleil/de nuit malgre l'esthetique plate du reste de l'UI. */
.chariot-zone.attente-chargement { background: var(--orange); color: #2a1400; border-left-color: transparent; }
.chariot-zone.attente-dechargement { background: var(--jaune); color: #2e2500; border-left-color: transparent; }
.chariot-zone.maintenance { background: var(--rouge); color: #fff; border-left-color: transparent; }
.chariot-zone.vide { background: #fff; color: var(--gsr-green-dark); border-left-color: var(--gsr-green); }

.chariot-zone .picto { font-size: 20px; margin-bottom: 2px; }

.chariot-zone .statut-txt {
  font-size: 12px;
  font-weight: 700;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.chariot-zone .chrono {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.chariot-zone .vehicule {
  font-size: 11px;
  margin-top: 4px;
  font-weight: 600;
}

.bacplein-liste {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bacplein-badge {
  border: none;
  border-left: 3px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  width: 100%;
  text-align: left;
  background: #fff;
  color: var(--gray-600);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  transition: transform 0.1s, filter 0.15s;
}

.bacplein-badge:active { transform: scale(0.97); }
.bacplein-badge.actif { background: var(--jaune); color: #2e2500; border-left-color: transparent; }
.bacplein-badge .chrono { font-variant-numeric: tabular-nums; font-weight: 700; }
.bacplein-badge .bacplein-label { display: flex; align-items: center; gap: 6px; }

.pastille-ancienne {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4263eb;
  box-shadow: 0 0 0 4px rgba(66, 99, 235, 0.18);
  z-index: 1;
}

/* ---------- Backdrop d'alertes (plein ecran, premier plan, façon MUI Backdrop) ----------
   But : sur une grille chargee, une alerte isolee peut passer inaperçue si
   c'est juste un bandeau. Ici c'est un vrai backdrop qui assombrit tout le
   reste de l'ecran et met une seule alerte, en tres grand, au centre — le
   cariste ne peut pas la manquer. "Voir la grille" la minimise en un badge
   flottant (pas de blocage total : le cariste doit pouvoir travailler),
   qui rouvre le backdrop au clic. Toute nouvelle alerte le rouvre automatiquement. */
.alerte-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(10, 14, 9, 0.6);
  backdrop-filter: blur(2px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
}
.alerte-backdrop[hidden] { display: none; }

@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(255, 255, 255, 0); }
  50% { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 0 14px rgba(255, 255, 255, 0.25); }
}

.alerte-carousel-card {
  width: min(92vw, 520px);
  border-radius: 24px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  cursor: pointer;
  animation: glow-pulse 1.8s ease-in-out infinite;
}
.alerte-carousel-card:active { transform: scale(0.98); }

.alerte-carousel-card.attente-chargement { background: var(--orange); color: #2a1400; }
.alerte-carousel-card.attente-dechargement { background: var(--jaune); color: #2e2500; }
.alerte-carousel-card.bac-plein { background: var(--jaune); color: #2e2500; }
.alerte-carousel-card.maintenance { background: var(--rouge); color: #fff; cursor: default; }

.alerte-carousel-card .picto { line-height: 1; }
.alerte-carousel-card .picto .icone { width: 64px; height: 64px; }

.alerte-carousel-card .emplacement {
  font-size: 42px;
  font-weight: 800;
  line-height: 1.1;
}

.alerte-carousel-card .type {
  font-size: 19px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  opacity: 0.9;
}

.alerte-carousel-card .chrono {
  font-size: 22px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

.alerte-carousel-card .vehicule {
  font-size: 15px;
  font-weight: 700;
  margin-top: 8px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 10px;
}

.alerte-carousel-card .action-btn {
  margin-top: 12px;
  background: rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(20, 24, 31, 0.25);
  border-radius: 14px;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 800;
  color: inherit;
  white-space: nowrap;
}

.alerte-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.alerte-carousel-dots .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transition: background 0.2s, transform 0.2s;
}
.alerte-carousel-dots .dot.actif {
  background: #fff;
  transform: scale(1.4);
}

.alerte-minimiser {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 700;
}

.alerte-badge-mini {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 35;
  background: var(--orange);
  color: #2a1400;
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  animation: glow-pulse 1.8s ease-in-out infinite;
}
.alerte-badge-mini[hidden] { display: none; }

/* ---------- Confirmation d'acquittement (backdrop + icone, auto-disparait) ---------- */

.connexion-badge {
  position: fixed;
  left: 50%;
  top: 76px;
  transform: translateX(-50%) translateY(-12px);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--brand-blue);
  color: #fff;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 10px 28px rgba(20, 136, 202, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.connexion-badge.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  animation: connexion-pulse 1.6s infinite;
}
.connexion-badge::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
  animation: connexion-dot 1s infinite;
}
@keyframes connexion-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
@keyframes connexion-pulse {
  0%, 100% { box-shadow: 0 10px 28px rgba(20, 136, 202, 0.45); }
  50% { box-shadow: 0 10px 36px rgba(20, 136, 202, 0.75); }
}

.confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(20, 24, 31, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s;
  padding: 20px;
}
.confirm-overlay.visible { opacity: 1; }

.confirm-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  transform: scale(0.9);
  transition: transform 0.15s;
}
.confirm-overlay.visible .confirm-card { transform: scale(1); }

.confirm-texte {
  font-size: 15px;
  font-weight: 600;
  color: #14181f;
  margin-bottom: 20px;
  line-height: 1.4;
}

.aide-card {
  max-width: 460px;
  width: 100%;
  text-align: left;
  max-height: 80vh;
  overflow-y: auto;
}

.aide-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}
.aide-entete h2 { margin: 0; font-size: 18px; color: var(--gray-900); }

.aide-contenu {
  font-size: 14px;
  line-height: 1.6;
  color: var(--gray-700);
}
.aide-contenu p { margin: 0 0 var(--space-3); }
.aide-contenu strong { color: var(--gray-900); }

.legende-couleurs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.legende-couleurs li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 13px;
  color: var(--gray-700);
}
.legende-couleurs .pastille {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  flex-shrink: 0;
}

.confirm-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.confirmation-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(20, 24, 31, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.confirmation-overlay[hidden] { display: none; }
.confirmation-overlay.visible { opacity: 1; }

.confirmation-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 32px 44px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
  transform: scale(0.85);
  transition: transform 0.18s;
}
.confirmation-overlay.visible .confirmation-card { transform: scale(1); }

.confirmation-icone {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 10px;
}

.confirmation-texte {
  font-size: 18px;
  font-weight: 800;
  color: var(--gsr-green-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---------- Unlock audio overlay ---------- */

.unlock-overlay {
  position: fixed;
  inset: 0;
  background: rgba(238, 241, 244, 0.97);
  color: #14181f;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 50;
  text-align: center;
  padding: 20px;
}

.unlock-overlay.hidden { display: none; }

.unlock-overlay .pulse-icon {
  font-size: 48px;
  margin-bottom: 16px;
  animation: pulse 1.6s infinite;
}

.unlock-overlay button {
  margin-top: 18px;
  padding: 14px 28px;
  border-radius: var(--radius-sm);
  background: var(--gsr-green);
  color: white;
  font-size: 16px;
  font-weight: 700;
}

/* ---------- Poste informatique (widget compact, meme identite que le login) ---------- */

body.poste {
  --poste-bg: #eef3f6;
  --poste-card: #ffffff;
  --poste-text: #2c2c2c;
  --poste-text-dim: #6b7280;
  --poste-border: rgba(0, 0, 0, 0.08);

  background: var(--poste-bg);
  color: var(--poste-text);
}

body.poste .topbar {
  background: var(--graphite);
  border-bottom: 1px solid var(--graphite-dark);
}

body.poste .topbar .title { color: #fff; }

body.poste .icon-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e5e7eb;
  border-radius: var(--radius-sm);
}
body.poste .icon-btn:active,
body.poste .icon-btn.active {
  background: var(--login-blob, #9ac331);
  border-color: var(--login-blob, #9ac331);
  color: #fff;
}

body.poste .empty-state { color: var(--poste-text-dim); }

.poste-widget {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 18px 14px;
}

/* Poste ouvert en petite popup a cote d'Atemo (cf poste.js, ?popup=1) :
   moins de marge, boutons plus bas, pour tenir dans une fenetre compacte
   sans espace vertical perdu. */
.popup-mode .topbar { padding: 8px 12px; }
.popup-mode .poste-widget { padding: 10px 10px; }
.popup-mode .poste-btn { padding: 12px 14px; margin-bottom: 8px; }

.poste-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--poste-text-dim);
}

.poste-header .poste-nom {
  color: var(--poste-text);
  font-weight: 700;
  font-size: 15px;
}

/* Banniere bien visible pour signaler qu'une tache/maintenance est en cours */
.tache-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--poste-border);
  border-left: 3px solid var(--brand-green);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.tache-banner.maintenance {
  border-left-color: var(--orange);
}

.tache-banner .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-green);
  flex-shrink: 0;
  animation: pulse 1.4s infinite;
}
.tache-banner.maintenance .dot { background: var(--orange); }

.tache-banner .texte {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: #1b5e2c;
}
.tache-banner.maintenance .texte { color: #8a4a10; }

.tache-banner .chrono {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #1b5e2c;
}
.tache-banner.maintenance .chrono { color: #8a4a10; }

.poste-btn {
  width: 100%;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
  color: white;
  background: var(--brand-blue);
  display: flex;
  align-items: center;
  gap: 12px;
  text-align: left;
}

.poste-btn .picto { font-size: 22px; line-height: 1; }
.poste-btn .libelle { flex: 1; }
.poste-btn .chrono {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  opacity: 0.8;
  font-weight: 600;
}

.poste-btn.vert { background: var(--brand-green); }
.poste-btn.rouge { background: var(--rouge); }
.poste-btn.ambre { background: var(--orange); }
.poste-btn.attente {
  background: #f2f5f7;
  color: var(--poste-text-dim);
  border: 1px dashed rgba(0, 0, 0, 0.15);
}
.poste-btn:active { filter: brightness(0.92); }
.poste-btn:disabled { cursor: default; }

.vehicule-form {
  background: var(--poste-card);
  border: 1px solid var(--poste-border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 12px;
}

.vehicule-form .field label { color: var(--poste-text); }
.vehicule-form .field input {
  margin-bottom: 4px;
  background: #fff;
  border: 1px solid var(--poste-border);
  color: var(--poste-text);
}

.matiere-form {
  background: var(--poste-card);
  border: 1px solid var(--poste-border);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin-bottom: 12px;
}
.matiere-form p { margin: 0 0 12px; font-weight: 700; color: var(--poste-text); }
.poste-btn.matiere-btn { background: #fff; color: var(--poste-text); border: 2px solid; }

/* Pastille de couleur generique (matiere) : catalogue admin, alertes dashboard, poste. */
.pastille-couleur {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}
.pastille-couleur.pastille-grande { width: 48px; height: 48px; }

.checkboxes-matieres {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.checkbox-matiere {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
}
.checkbox-matiere input { margin: 0; }

.empty-state {
  text-align: center;
  color: var(--text-dim);
  padding: 60px 20px;
  font-size: 14px;
}

/* ---------- Vue d'ensemble admin (meme identite claire "Mantine" que le reste) ---------- */

.activite-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 720px;
}

.activite-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s;
}
.activite-row:hover { box-shadow: var(--shadow-md); }

.activite-row .who {
  flex: 1;
  min-width: 0;
}

.activite-row .who .nom {
  font-weight: 700;
  font-size: 14px;
  color: var(--gray-900);
}

.entite-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--brand-blue-light, #29a3e6);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}

.activite-row .who .meta {
  font-size: 12px;
  color: var(--gray-600);
  margin-top: 2px;
}

.statut-pill {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 5px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.statut-pill.tache { background: #e7f0ff; color: #1d5fd6; }
.statut-pill.maintenance { background: #fff2e0; color: #b5620a; }
.statut-pill.inactif { background: var(--gray-100); color: var(--gray-600); }

.activite-row .chrono-mini {
  font-size: 12px;
  color: var(--gray-700);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 64px;
  text-align: right;
}

.activite-row .attente-info {
  font-size: 11px;
  font-weight: 600;
  color: #b5620a;
  margin-top: 3px;
}

/* ---------- Administration (utilisateurs / secteurs / emplacements) ----------
   Meme identite claire "Mantine" que le dashboard cariste (body.cariste). */

.admin-entite-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.admin-entite-selector label {
  font-weight: 700;
  font-size: 14px;
  color: var(--gray-700);
}

.admin-entite-selector select {
  flex: 1;
  max-width: 320px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gray-300);
  font-size: 14px;
  font-weight: 600;
}

.admin-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--gray-700);
  font-weight: 600;
}

.admin-tab {
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  background: var(--gray-100);
  color: var(--gray-700);
  font-size: 13px;
  font-weight: 700;
  border: none;
}
.admin-tab.actif {
  background: var(--gsr-green);
  color: #fff;
}

.admin-panel {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
  box-shadow: var(--shadow-sm);
}

.admin-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.admin-panel-header h2 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
  color: var(--gray-900);
}

.btn-sm {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  background: var(--gsr-green);
  color: #fff;
}
.btn-sm.secondaire { background: var(--gray-100); color: var(--gray-700); }
.btn-sm.danger { background: #fdeeee; color: #c0392b; }
.btn-sm:active { filter: brightness(0.94); }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.admin-hint {
  font-size: 12px;
  color: var(--gray-600);
  margin: 0 0 var(--space-4);
}

.emplacements-groupe { margin-bottom: var(--space-5); }
.emplacements-groupe:last-child { margin-bottom: 0; }

.admin-table-draggable tr[draggable] { cursor: grab; }
.admin-table-draggable tr.en-glissement { opacity: 0.4; background: var(--gray-100); }
.grip-cell {
  width: 24px;
  color: var(--gray-400);
  padding-right: 0 !important;
}
.grip-cell .icone { display: block; }

.admin-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-600);
  font-weight: 700;
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-200);
}

.admin-table td {
  padding: 10px;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-900);
  vertical-align: middle;
}

.admin-table tr:last-child td { border-bottom: none; }
.admin-table tbody tr:hover td { background: var(--gray-50); }

.admin-table .actions { display: flex; gap: 6px; white-space: nowrap; }

/* Etiquettes de statut en contour plutot qu'en pastille pleine : lecture
   "tag technique" plutot que "badge d'appli mobile". */
.badge-actif, .badge-inactif {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  font-size: 11px;
  font-weight: 700;
  background: #fff;
}
.badge-actif { border-color: var(--gsr-green); color: var(--gsr-green-dark); }
.badge-inactif { border-color: var(--gray-300); color: var(--gray-600); }

.admin-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.admin-form .field { margin-bottom: 0; }
.admin-form .field.full { grid-column: 1 / -1; }

.admin-form label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 6px;
}

.admin-form input,
.admin-form select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  background: #fff;
  color: var(--gray-900);
  font-size: 14px;
  font-family: inherit;
}

.admin-form input:focus,
.admin-form select:focus {
  outline: none;
  border-color: var(--gsr-green);
  box-shadow: 0 0 0 3px rgba(154, 195, 49, 0.2);
}

.admin-zones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.admin-zones label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-900);
  background: var(--gray-100);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.admin-form-actions {
  display: flex;
  gap: 10px;
}

/* ---------- Statistiques admin ---------- */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}

/* Tuile KPI plate avec accent en bordure gauche plutot qu'un fond pastel
   plein : lecture "tableau de bord technique". */
.stat-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  text-align: left;
}
.stat-card.accent { border-left-color: var(--gsr-green); }

.stat-valeur {
  font-size: 22px;
  font-weight: 800;
  color: var(--gray-900);
  font-variant-numeric: tabular-nums;
}
.stat-card.accent .stat-valeur { color: var(--gsr-green-dark); }

.stat-libelle {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray-600);
  margin-top: 2px;
}
.stat-card.accent .stat-libelle { color: var(--gsr-green-dark); opacity: 0.8; }

.stats-bars {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.stats-bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 40px;
  align-items: center;
  gap: 12px;
}

.stats-bar-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--gray-900);
}

.stats-bar-track {
  background: var(--gray-100);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.stats-bar-fill {
  height: 100%;
  background: var(--gsr-green);
  border-radius: 999px;
  transition: width 0.3s;
}

.stats-bar-valeur {
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  color: var(--gray-700);
}

/* ---------- Toast (remplace window.alert) ---------- */

.toast-conteneur {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(90vw, 420px);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.18s, transform 0.18s;
}
.toast.visible { opacity: 1; transform: translateY(0); }

.toast-erreur { background: #fdeeee; color: #a13a32; }
.toast-succes { background: #eaf6ec; color: #1b5e2c; }
.toast-icone { flex-shrink: 0; display: flex; }
.toast-texte { line-height: 1.4; }