@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --bg: #08080b;
  --surface: #15151a;
  --surface-2: #1e1e25;
  --surface-3: #26262e;
  --border: #2a2a31;
  --hairline: rgba(255,255,255,0.06);
  --text: #f5f5f7;
  --text-muted: #95959e;
  --primary: #e31937;
  --primary-dark: #b3132b;
  --primary-gradient: linear-gradient(135deg, #f5273f 0%, #c1142e 100%);
  --ring: rgba(227,25,55,0.45);
  --glow-primary: 0 8px 24px -8px rgba(227,25,55,0.55);
  /* Système d'ombres en couches (profondeur douce, look moderne) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 16px -6px rgba(0,0,0,0.5);
  --shadow-lg: 0 20px 44px -14px rgba(0,0,0,0.62);
  /* Halo d'ambiance discret en fond de page */
  --bg-gradient:
    radial-gradient(1200px 620px at 100% -8%, rgba(227,25,55,0.07), transparent 58%),
    radial-gradient(1000px 560px at -8% 108%, rgba(59,130,246,0.05), transparent 60%);
  --affecte-bg: rgba(59,130,246,0.16); --affecte-text: #8fbdfb; --affecte-border: #3b6fc9;
  --libre-bg: rgba(34,197,94,0.16); --libre-text: #74e3a4; --libre-border: #2f9e5b;
  --charge-bg: rgba(245,158,11,0.16); --charge-text: #fcc463; --charge-border: #c9890f;
  --attente-bg: rgba(168,85,247,0.16); --attente-text: #d4a8fb; --attente-border: #9333ea;
  --inop-bg: rgba(255,69,96,0.16); --inop-text: #ff9fb0; --inop-border: #ff4560;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --topbar-h: 64px;
  --sidebar-w: 264px;
}

/* ----- Mode jour (clair) : surcharge des variables ----- */
:root[data-theme="jour"]{
  --bg: #eef1f5;
  --surface: #ffffff;
  --surface-2: #e9edf2;
  --surface-3: #dfe4ea;
  --border: #d4d9e0;
  --hairline: rgba(15,23,42,0.05);
  --text: #14141a;
  --text-muted: #5c626c;
  --glow-primary: 0 8px 22px -8px rgba(227,25,55,0.35);
  --shadow-sm: 0 1px 2px rgba(20,30,50,0.06);
  --shadow-md: 0 6px 18px -8px rgba(20,30,50,0.16);
  --shadow-lg: 0 22px 48px -16px rgba(20,30,50,0.22);
  --bg-gradient:
    radial-gradient(1100px 600px at 100% -10%, rgba(227,25,55,0.05), transparent 58%),
    radial-gradient(900px 520px at -8% 108%, rgba(59,130,246,0.05), transparent 60%);
  --affecte-bg: rgba(59,130,246,0.12); --affecte-text: #1d4ed8; --affecte-border: #3b82f6;
  --libre-bg: rgba(34,197,94,0.14); --libre-text: #15803d; --libre-border: #22c55e;
  --charge-bg: rgba(245,158,11,0.18); --charge-text: #8a5a06; --charge-border: #f59e0b;
  --attente-bg: rgba(168,85,247,0.14); --attente-text: #7e22ce; --attente-border: #a855f7;
  --inop-bg: rgba(239,68,68,0.12); --inop-text: #c0273c; --inop-border: #ef4444;
}
:root[data-theme="jour"] .btn:hover{ background: #dde2e9; }
:root[data-theme="jour"] .auth-card{ box-shadow: 0 24px 60px rgba(20,30,50,0.18); }
:root[data-theme="jour"] .sidebar,
:root[data-theme="jour"] .topbar{ box-shadow: 0 1px 0 rgba(0,0,0,0.04); }

/* Bouton de thème flottant (page de connexion) */
.btn-theme-flottant{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 20;
}

*{box-sizing:border-box;}

html, body{
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Empêche le "pull-to-refresh" et le rebond élastique (effet appli native) */
  overscroll-behavior: none;
}

body{
  margin:0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg-gradient), var(--bg);
  background-repeat: no-repeat;
  color: var(--text);
  min-height: 100vh;
  overscroll-behavior-y: contain;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv11", "ss01";
  letter-spacing: -0.011em;
}

/* Titres : tracking resserré pour un rendu plus net et premium */
h1, h2, h3, .stat-value, .kpi-val, .card-num{ letter-spacing: -0.02em; }

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}

.hidden{ display:none !important; }

/* Accessibilité : anneau de focus clavier net et homogène */
:focus-visible{
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible,
.sidebar-link:focus-visible,
.card:focus-visible{ outline-offset: 3px; }

/* ----- Topbar ----- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-sm);
  padding: 14px 24px;
  position: sticky;
  top:0;
  z-index: 10;
  flex-wrap: wrap;
  gap: 12px;
}
.topbar-left{
  display:flex;
  align-items:center;
  gap:10px;
}
.topbar-left i{
  font-size: 26px;
  color: var(--primary);
}
.topbar-left h1{
  font-size: 18px;
  font-weight: 600;
  margin:0;
}
.topbar-right{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap: wrap;
}

.user-pill{
  background: var(--surface-2);
  border: 1px solid var(--border);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--text-muted);
}
.legend{
  display:flex;
  align-items:center;
  gap:14px;
  font-size: 13px;
  color: var(--text-muted);
  flex-wrap: wrap;
}
.dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:4px;
  vertical-align:middle;
}
.dot-affecte{ background: var(--affecte-border); }
.dot-libre{ background: var(--libre-border); }
.dot-charge{ background: var(--charge-border); }
.dot-inop{ background: var(--inop-border); }

/* ----- Buttons ----- */
.btn{
  border-radius: var(--radius-md);
  padding: 11px 18px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition: background .15s, transform .1s, box-shadow .15s;
}
.btn:hover{ background: var(--surface-3); border-color: color-mix(in srgb, var(--border) 60%, var(--text-muted)); }
.btn:active{ transform: scale(0.98); }
.btn-primary{
  background: var(--primary);
  background-image: var(--primary-gradient);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--glow-primary);
}
.btn-primary:hover{
  background-image: var(--primary-gradient);
  filter: brightness(1.06);
  box-shadow: 0 10px 28px -8px rgba(227,25,55,0.62);
}
.btn-secondary{ background: var(--surface-2); }
.btn-danger{
  background: var(--inop-bg);
  border-color: var(--inop-border);
  color: var(--inop-text);
}
.btn-danger:hover{ background: rgba(255,69,96,0.26); }
.btn-warning{
  background: var(--charge-bg);
  border-color: var(--charge-border);
  color: var(--charge-text);
}
.btn-warning:hover{ background: rgba(245,158,11,0.26); }
.btn-success{
  background: var(--libre-bg);
  border-color: var(--libre-border);
  color: var(--libre-text);
}
.btn-success:hover{ background: rgba(34,197,94,0.26); }
.btn-info{
  background: rgba(56,189,248,0.16);
  border-color: #38bdf8;
  color: #7dd3fc;
}
.btn-info:hover{ background: rgba(56,189,248,0.26); }
:root[data-theme="jour"] .btn-info{ color: #0369a1; }
.btn-block{ width:100%; justify-content:center; }
.btn-pill{ border-radius: var(--radius-pill); padding: 13px 20px; font-size: 15px; font-weight: 600; }
.btn:disabled{ opacity: .6; cursor: default; }

.icon-btn{
  border:none;
  background:none;
  font-size:18px;
  cursor:pointer;
  text-decoration:none;
  color: var(--text-muted);
  padding:4px;
  min-width: 44px;
  min-height: 44px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.icon-btn:hover{ background: var(--surface-2); color: var(--text); }

/* ----- Container / Stats ----- */
.container{
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.stats{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(140px,1fr));
  gap:12px;
  margin-bottom: 24px;
}
.stat-card{
  background:
    linear-gradient(180deg, var(--hairline), transparent 50%),
    var(--surface);
  border:1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display:flex;
  flex-direction:column;
  gap:4px;
  box-shadow: var(--shadow-sm);
}
.stat-label{ font-size:13px; color: var(--text-muted); }
.stat-value{ font-size:24px; font-weight:600; }
.stat-hint{ font-size:11px; font-weight:500; opacity:.7; }
.stat-duo{ display:flex; align-items:baseline; gap:8px; }
.stat-duo-sep{ font-size:20px; font-weight:600; color: var(--text-muted); }
.stat-value-piste{ color: var(--libre-text) !important; }

/* ----- Répartition par zone (modale ouverte depuis la carte Total) ----- */
.zone-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
}
.zone-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:14px 16px;
  border-radius: var(--radius-md);
  border:1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  cursor:pointer;
  transition: border-color .12s, transform .12s;
}
.zone-card:hover{ border-color: var(--primary); transform: translateY(-2px); }
.zone-card-name{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:14px; }
.zone-card-count{ font-size:22px; font-weight:700; color: var(--primary); }

/* Cartes stats colorées par état */
.stat-card.stat-total{ border-color: var(--primary); }
.stat-card.stat-total .stat-value{ color: var(--primary); }
.stat-card.stat-affecte{ background: var(--affecte-bg); border-color: var(--affecte-border); }
.stat-card.stat-affecte .stat-value{ color: var(--affecte-text); }
.stat-card.stat-libre{ background: var(--libre-bg); border-color: var(--libre-border); }
.stat-card.stat-libre .stat-value{ color: var(--libre-text); }
.stat-card.stat-charge{ background: var(--charge-bg); border-color: var(--charge-border); }
.stat-card.stat-charge .stat-value{ color: var(--charge-text); }
.stat-card.stat-inop{ background: var(--inop-bg); border-color: var(--inop-border); }
.stat-card.stat-inop .stat-value{ color: var(--inop-text); }
.stat-card.stat-chargeur{ background: var(--charge-bg); border-color: var(--charge-border); }
.chargeur-stat-lignes{ display:flex; flex-direction:column; gap:4px; margin-top:2px; }
.chargeur-stat-ligne{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  font-size:13px;
  color: var(--text-muted);
}
.chargeur-stat-ligne strong{ font-size:19px; font-weight:700; color: var(--libre-text); }
.chargeur-stat-tot{ color: var(--text-muted); font-size:13px; }
.chargeur-stat-ligne + .chargeur-stat-ligne{ border-top:1px solid var(--border); padding-top:4px; }

/* Cartes stats cliquables → filtrent l'affichage */
.stat-clickable,
.stat-tapis-clickable,
.stat-zone-clickable{
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.stat-clickable:hover,
.stat-tapis-clickable:hover,
.stat-zone-clickable:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -10px rgba(0,0,0,0.6);
  filter: brightness(1.08);
}
.stat-clickable:active,
.stat-tapis-clickable:active,
.stat-zone-clickable:active{ transform: translateY(0); }
.alerte-hint{ font-weight:600; opacity:.85; font-size:.85em; }
.modal-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.modal-head h2{ font-size:16px; margin:0; }
.notifies-liste{ max-height:60vh; overflow:auto; }
.notifie-item{
  border:1px solid var(--border); border-left:3px solid var(--inop-border);
  border-radius: var(--radius-md); padding:10px 12px; margin-bottom:8px;
}
.notifie-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.notifie-meta{ font-size:12px; color: var(--text-muted); }
.notifie-motif{ font-size:13.5px; color: var(--text); }
.notifie-note{ font-size:12px; color: var(--text-muted); margin-top:10px; font-style:italic; }

/* ----- Tabs ----- */
.tabs{
  display:flex;
  gap:10px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 12px;
}
.tab-btn{
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s;
  border-bottom: 2px solid transparent;
  margin-bottom: -14px;
}
.tab-btn:hover{ color: var(--text); }
.tab-btn.active{ color: var(--primary); border-bottom-color: var(--primary); }

/* ----- Grid / Cards ----- */
.grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
  gap:16px;
}

/* Barre de recherche de tracteur (au-dessus de la grille / liste) */
.recherche-bar{
  position:relative;
  margin-bottom:16px;
}
.recherche-bar i{
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  color: var(--text-muted);
  font-size:18px;
  pointer-events:none;
}
.recherche-bar input{
  width:100%;
  padding-left:40px;
}

.card{
  background:
    linear-gradient(180deg, var(--hairline), transparent 42%),
    var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  cursor:pointer;
  transition: transform .16s cubic-bezier(0.4,0,0.2,1), box-shadow .16s, border-color .16s;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height: 150px;
  position: relative;
  box-shadow: var(--shadow-sm);
}
.card:hover{
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}
.card:active{ transform: translateY(0) scale(0.99); }

.grid-readonly .card{ cursor: default; }
.grid-readonly .card:hover{ transform: none; box-shadow: none; }

.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.card-num{
  font-size: 18px;
  font-weight: 600;
  display:inline-flex;
  align-items:center;
  gap:6px;
}
/* Badge « NEW » pour les tracteurs récents (numéro suffixé -N, ex. 6078-N) */
.badge-new{
  font-size:10px;
  font-weight:800;
  letter-spacing:0.06em;
  line-height:1;
  padding:3px 6px;
  border-radius:999px;
  color:#fff;
  background: var(--primary);
  box-shadow:0 0 0 1px rgba(227,25,55,0.35), 0 2px 6px rgba(227,25,55,0.35);
}
.card-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}

.badge{
  align-self:flex-start;
  font-size:12px;
  font-weight:500;
  padding:4px 10px;
  border-radius:20px;
}

.card-badges{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
}
.zone-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-size:12px;
  font-weight:600;
  padding:4px 10px;
  border-radius:20px;
  background: var(--surface-2);
  color: var(--text-muted);
  border:1px solid var(--border);
}
.zone-tag i{ font-size:13px; }

.card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:4px;
}
.card-cariste{
  font-size:15px;
  font-weight:500;
}
.card-sub{
  font-size:13px;
  color: var(--text-muted);
}
/* Cartes de la vue "Zones" (sélecteur de zone) */
.card-zone{ border-color: var(--primary); }
.card-zone .card-num{ display:inline-flex; align-items:center; gap:6px; }
.card-zone .card-num i{ color: var(--primary); }
.card-zone .card-body{ align-items:center; }
.card-zone-nombre{
  font-size:40px;
  font-weight:700;
  color: var(--primary);
  line-height:1;
}

/* Bouton retour (pleine largeur) au-dessus de la grille d'une zone */
.grid-back{
  grid-column: 1 / -1;
  display:inline-flex;
  align-items:center;
  gap:8px;
  align-self:start;
  width:max-content;
  padding:10px 16px;
  border-radius: var(--radius-md);
  border:1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition: border-color .12s;
}
.grid-back:hover{ border-color: var(--primary); }
.grid-back i{ font-size:16px; }

.card-charge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:4px;
  font-size:13px;
  font-weight:600;
  color: var(--libre-text);
}
.card-charge i{ font-size:16px; }

/* Heure d'affectation + durée écoulée (carte affecté) */
.card-heure{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:4px; font-size:12px; font-weight:600; color: var(--text-muted);
}
.card-heure i{ font-size:14px; }

/* Téléphone du cariste sur la carte "affecté" */
.card-tel{ margin-top:5px; }
.tel-lien{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:13px;
  font-weight:600;
  color: var(--text);
  text-decoration:none;
  white-space:nowrap;
}
.tel-lien:hover{ color: var(--primary); text-decoration:underline; }

/* Etats visuels carte */
.card.etat-affecte{ border-color: var(--affecte-border); }
.card.etat-affecte .card-icon{ background: var(--affecte-bg); color: var(--affecte-text); }
.card.etat-affecte .badge{ background: var(--affecte-bg); color: var(--affecte-text); }

.card.etat-libre{ border-color: var(--libre-border); }
.card.etat-libre .card-icon{ background: var(--libre-bg); color: var(--libre-text); }
.card.etat-libre .badge{ background: var(--libre-bg); color: var(--libre-text); }

.card.etat-charge{ border-color: var(--charge-border); }
.card.etat-charge .card-icon{ background: var(--charge-bg); color: var(--charge-text); }
.card.etat-charge .badge{ background: var(--charge-bg); color: var(--charge-text); }
.card.etat-attente{ border-color: var(--attente-border); }
.card.etat-attente .card-icon{ background: var(--attente-bg); color: var(--attente-text); }
.card.etat-attente .badge{ background: var(--attente-bg); color: var(--attente-text); }
/* Pré-affecté : engin préparé, en attente de confirmation de présence */
.card.etat-preaffecte{ border-color: #38bdf8; border-style: dashed; }
.card.etat-preaffecte .badge{ background: rgba(56,189,248,0.16); color: #7dd3fc; }
:root[data-theme="jour"] .card.etat-preaffecte .badge{ color: #0369a1; }

.card.etat-inop{ border-color: var(--inop-border); opacity: 0.85; }
.card.etat-inop .card-icon{ background: var(--inop-bg); color: var(--inop-text); }
.card.etat-inop .badge{ background: var(--inop-bg); color: var(--inop-text); }

.empty-state{
  grid-column: 1/-1;
  text-align:center;
  color: var(--text-muted);
  padding: 60px 20px;
  font-size:14px;
}

/* ----- Modal ----- */
.modal-overlay{
  position: fixed;
  inset:0;
  background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 100;
  padding: 20px;
  animation: overlayFade .18s ease;
}
.modal-overlay.hidden{ display:none; }
@keyframes overlayFade{ from{ opacity: 0; } to{ opacity: 1; } }

.modal{
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  box-shadow: var(--shadow-lg);
  animation: modalPop .2s cubic-bezier(0.4,0,0.2,1);
}
@keyframes modalPop{ from{ transform: translateY(8px) scale(.985); opacity: 0; } to{ transform: none; opacity: 1; } }
.modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}
.modal-header h2{
  font-size:17px;
  font-weight:600;
  margin:0;
}
.modal-body{
  padding: 20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.modal-footer{
  padding: 16px 20px;
  border-top: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Modale de confirmation moderne */
.modal-confirm{
  max-width: 380px;
  padding: 28px 24px 22px;
  align-items: center;
  text-align: center;
  animation: confirmPop .18s ease;
}
@keyframes confirmPop{
  from{ transform: scale(.94); opacity: 0; }
  to{ transform: scale(1); opacity: 1; }
}
.confirm-icon{
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--inop-bg);
  color: var(--inop-text);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 28px;
  margin-bottom: 16px;
}
.modal-confirm h2{
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
}
.confirm-message{
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 22px;
}
/* Confirmation rendue dans la modale standard (régulateur) */
.confirm-modal{ text-align: center; padding: 6px 4px 0; }
.confirm-modal .confirm-icon{ margin: 0 auto 14px; }
.confirm-modal .confirm-message{ margin: 0; }
.confirm-icon-info{ background: var(--affecte-bg); color: var(--affecte-text); }
.confirm-actions{
  display:flex;
  gap: 10px;
  width: 100%;
}
.confirm-actions .btn{ flex: 1; justify-content: center; }

.field-label{
  font-size:11px;
  font-weight:600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
select, input[type="text"], input[type="password"], textarea{
  width:100%;
  padding:11px 12px;
  border-radius: var(--radius-md);
  border:1px solid var(--border);
  font-family: inherit;
  font-size:15px;
  background: var(--surface-2);
  color: var(--text);
  min-height: 44px;
  transition: border-color .15s, box-shadow .15s;
}
textarea{ resize: vertical; line-height: 1.5; }
textarea::placeholder, input::placeholder{ color: var(--text-muted); opacity: .7; }
select:focus, input[type="text"]:focus, input[type="password"]:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}
textarea:focus{
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--ring);
}

.info-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:14px;
  padding: 6px 0;
}
.info-line span:first-child{ color: var(--text-muted); }
.info-line span:last-child{ font-weight:500; }
.info-line.alerte-seuil span{ color: var(--inop-text); font-weight:600; }

.config-liste{ margin-top: 10px; }
.config-liste summary{
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  padding: 6px 0;
  list-style: none;
  user-select: none;
}
.config-liste summary::-webkit-details-marker{ display: none; }
.config-liste summary::before{ content: "▸ "; }
.config-liste[open] summary::before{ content: "▾ "; }

/* ----- Contrôle réception (régulateur) ----- */
.ctrl-titre{ font-size:15px; font-weight:700; margin-bottom:10px; color: var(--text); }
.ctrl-points{ display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.ctrl-ligne{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 0; border-bottom:1px solid var(--border);
}
.ctrl-label{ font-size:13.5px; color: var(--text); flex:1; }
.ctrl-toggle{ display:inline-flex; gap:4px; flex-shrink:0; }
.ctrl-opt{
  border:1px solid var(--border); background: var(--surface-2); color: var(--text-muted);
  font-size:12px; padding:5px 9px; border-radius: var(--radius-md); cursor:pointer;
}
.ctrl-opt.actif{ background: var(--libre-bg); border-color: var(--libre-border); color: var(--libre-text); }
.ctrl-opt.ctrl-nc.actif{ background: var(--inop-bg); border-color: var(--inop-border); color: var(--inop-text); }
.ctrl-photos{ display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; margin-bottom:14px; }
.ctrl-photo{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  border:1px dashed var(--border); border-radius: var(--radius-md);
  padding:10px; font-size:13px; color: var(--text); cursor:pointer;
}
.ctrl-photo-etat{ font-size:12px; color: var(--text-muted); }
.ctrl-photo-etat.ok{ color: var(--libre-text); font-weight:600; }
.ctrl-photo-nc{
  margin:6px 0 2px; border-color: var(--inop-border);
  background: var(--inop-bg); color: var(--inop-text);
}
.ctrl-photo-nc[hidden]{ display:none; }
.ctrl-photo.manquant{
  border-style: solid; border-color: var(--inop-border);
  background: var(--inop-bg); color: var(--inop-text);
  animation: ctrl-manquant-pulse .9s ease;
}
@keyframes ctrl-manquant-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }
.ctrl-hint{ font-weight:400; color: var(--inop-text); font-size:12px; }
#ctrlRemarques{ width:100%; box-sizing:border-box; }

/* ----- Bannière d'alerte (manager / consultation) ----- */
.alerte-controle{
  background: var(--inop-bg);
  border:1px solid var(--inop-border);
  color: var(--inop-text);
  border-radius: var(--radius-md);
  padding:12px 16px;
  margin: 0 0 16px;
  font-size:14px;
}
.alerte-controle strong{ color: var(--inop-text); }
.alerte-controle .alerte-titre{ font-weight:700; display:block; margin-bottom:4px; }

.divider{
  border-top: 1px solid var(--border);
  margin: 4px 0;
}

.section-title{
  font-size:13px;
  font-weight:500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* ----- Zone d'affectation (pills dans la modale régulateur) ----- */
.zone-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:8px 0 2px;
}
.zone-pill{
  flex:0 0 auto;
  padding:7px 14px;
  border-radius: var(--radius-pill);
  border:1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  min-height:36px;
  transition: background .12s, color .12s, border-color .12s;
}
.zone-pill:hover{ border-color: var(--primary); color: var(--text); }
.zone-pill.active{
  background: var(--primary);
  border-color: var(--primary);
  color:#fff;
}

/* Sélecteur de zone du tableau de bord (sépare Piste des zones T1/T2/…) */
.zone-pills-dash{
  margin: 4px 0 12px;
}
.zone-pill-toutes{
  margin-left:auto;
}

/* Répartition par zone dans une carte d'état : grille 2 colonnes (deux sous
   deux) pour des puces plus grandes et lisibles. */
.zone-breakdown{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:6px;
  margin-top:10px;
}
.zone-bd-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  padding:6px 10px;
  border-radius: var(--radius-md);
  border:1px solid var(--border);
  background: rgba(0,0,0,0.18);
  color: var(--text-muted);
  font-size:12px;
  font-weight:600;
  line-height:1.1;
  cursor:pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.zone-bd-nom{ white-space:nowrap; }
.zone-bd-item strong{ color: var(--text); font-size:14px; }
.zone-bd-item:hover{ border-color: var(--primary); color: var(--text); background: rgba(0,0,0,0.28); }

/* Badge de zone à côté du numéro (vue "Toutes les zones") */
.zone-tag{
  display:inline-block;
  vertical-align:middle;
  margin-left:6px;
  padding:2px 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  border:1px solid var(--border);
  color: var(--text-muted);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
}

/* ----- Recherche / liste des caristes (affectation) ----- */
.cariste-liste{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:10px;
  max-height:46vh;
  overflow-y:auto;
}
.cariste-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  padding:12px 14px;
  border-radius: var(--radius-md);
  border:1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size:15px;
  font-weight:500;
  cursor:pointer;
  transition: border-color .12s, background .12s;
}
.cariste-item:hover{ border-color: var(--primary); }
.cariste-item i{ color: var(--text-muted); font-size:18px; }
.cariste-item.actuel{ border-color: var(--affecte-border); background: var(--affecte-bg); }
.cariste-item.occupe{ opacity:.55; cursor:not-allowed; }
.cariste-item.occupe:hover{ border-color: var(--border); }
/* Bouton « nouveau cariste saisi » : liseré pointillé aux couleurs de la marque */
.cariste-item.cariste-nouveau{ border-style:dashed; border-color: var(--primary); margin-top:6px; }
.cariste-item.cariste-nouveau .cariste-nom{ color: var(--primary); font-weight:600; }
.cariste-item.cariste-nouveau i{ color: var(--primary); }
.cariste-occupe-tag{
  font-size:11px; font-weight:600; color: var(--inop-text);
  background: var(--inop-bg); border:1px solid var(--inop-border);
  border-radius: var(--radius-sm); padding:2px 7px; white-space:nowrap;
}
.cariste-matricule{
  font-size:12px;
  font-weight:600;
  color: var(--text-muted);
  margin-left:6px;
}
.cariste-actuel-tag{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.04em;
  color: var(--affecte-text);
}
.cariste-vide{
  padding:14px;
  text-align:center;
  font-size:14px;
  color: var(--text-muted);
}

/* ----- Ligne cariste : bouton de sélection + édition du numéro ----- */
.cariste-row{ display:flex; align-items:stretch; gap:6px; }
.cariste-row .cariste-item{ flex:1 1 auto; min-width:0; }
.cariste-row.occupe .cariste-item{ opacity:.55; cursor:not-allowed; }
.cariste-nom{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cariste-tel-tag{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; white-space:nowrap;
  color: var(--affecte-text);
  background: var(--affecte-bg); border:1px solid var(--affecte-border);
  border-radius: var(--radius-sm); padding:2px 7px;
}
.cariste-tel-tag i{ font-size:13px !important; color: var(--affecte-text) !important; }
.cariste-tel-tag.absent{
  color: var(--text-muted); background: var(--surface-2);
  border-color: var(--border); font-weight:500; text-transform:none;
}
.cariste-edit-tel{
  flex:0 0 auto; width:42px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-2); color: var(--text-muted); cursor:pointer;
}
.cariste-edit-tel:hover{ border-color: var(--primary); color: var(--primary); }
.cariste-edit-tel i{ font-size:18px; }

/* ----- Assistant d'affectation (étapes guidées) ----- */
.etape-fil{
  display:block; margin-bottom:10px;
  font-size:12px; font-weight:700; letter-spacing:.02em;
  color: var(--primary); text-transform:uppercase;
}
/* Carte « Taux de charge » : grand chiffre + % bien visible + raccourcis. */
.charge-card{
  margin:14px 0 4px; padding:18px 16px 16px;
  border:1px solid var(--charge-border); border-radius:var(--radius-lg);
  background:var(--charge-bg);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.charge-card-label{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:700; color:var(--charge-text);
  text-transform:uppercase; letter-spacing:.03em;
}
.charge-card-label i{ font-size:18px; }
.charge-input-wrap{ display:inline-flex; align-items:baseline; gap:6px; }
.charge-input-big{
  width:2.6em; padding:0; border:none; background:transparent;
  color:var(--text); font-size:68px; font-weight:800; line-height:1;
  text-align:right; -moz-appearance:textfield;
}
.charge-input-big:focus{ outline:none; box-shadow:none; }
.charge-input-big::-webkit-outer-spin-button,
.charge-input-big::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.charge-input-big::placeholder{ color:var(--text-muted); opacity:.5; }
.charge-percent{ font-size:40px; font-weight:800; color:var(--charge-text); }
.charge-presets{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.charge-preset{
  padding:7px 14px; border-radius:var(--radius-pill);
  border:1px solid var(--border); background:var(--surface);
  color:var(--text-muted); font-size:14px; font-weight:700; cursor:pointer;
}
.charge-preset:hover{ border-color:var(--charge-border); color:var(--charge-text); }
.charge-preset.active{
  background:var(--charge-bg); border-color:var(--charge-border); color:var(--charge-text);
  box-shadow:inset 0 0 0 1px var(--charge-border);
}
/* Code couleur selon le taux : vert (≥50), rouge (<seuil), ambre (défaut). */
.charge-card.charge-ok{ border-color:var(--libre-border); background:var(--libre-bg); }
.charge-card.charge-ok .charge-card-label,
.charge-card.charge-ok .charge-percent{ color:var(--libre-text); }
.charge-card.charge-bad{ border-color:var(--inop-border); background:var(--inop-bg); }
.charge-card.charge-bad .charge-card-label,
.charge-card.charge-bad .charge-percent{ color:var(--inop-text); }

.etape-confirm{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; padding:14px 10px 4px;
}
.etape-avatar{
  width:56px; height:56px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--affecte-bg); color: var(--affecte-text);
  border:1px solid var(--affecte-border);
}
.etape-avatar i{ font-size:28px; }
.etape-nom{ font-size:19px; font-weight:700; }
.etape-tel{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:4px; font-size:14px; font-weight:600; color: var(--text-muted);
}
.etape-tel i{ font-size:16px; }

/* ----- Vérification PCA (permis de conduite) à l'affectation ----- */
.pca-alerte{
  display:flex; gap:10px; align-items:flex-start;
  margin-top:14px; padding:12px 14px;
  border-radius: var(--radius-md);
  background: var(--inop-bg); border:1px solid var(--inop-border);
}
.pca-alerte i{ font-size:22px; color: var(--inop-text); flex:0 0 auto; margin-top:1px; }
.pca-alerte strong{ display:block; color: var(--inop-text); font-size:14px; }
.pca-alerte span{ display:block; font-size:12.5px; color: var(--text-muted); margin-top:2px; }
.pca-question{
  margin:14px 0 0; text-align:center;
  font-size:16px; font-weight:700; color: var(--text);
}
.pca-bloc{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center; padding:18px 10px 6px;
}
.pca-bloc-icone{
  width:60px; height:60px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--inop-bg); color: var(--inop-text);
  border:1px solid var(--inop-border);
}
.pca-bloc-icone i{ font-size:32px; }
.pca-bloc-titre{ font-size:19px; font-weight:800; color: var(--inop-text); }
.pca-bloc-texte{ margin:0; font-size:14px; color: var(--text); line-height:1.5; }

/* ----- Contrôle du voyant batterie (avant affectation) ----- */
.voyant-batterie{
  display:flex; justify-content:center; gap:22px;
  margin:14px 0 4px; padding:16px 0;
}
.voyant-pastille{
  width:44px; height:44px; border-radius:50%;
  position:relative; opacity:.35;
  box-shadow:0 0 0 4px rgba(255,255,255,0.04);
  animation:voyant-clignote 1.1s ease-in-out infinite;
}
.voyant-pastille.v-vert{ background:#22c55e; box-shadow:0 0 16px 2px rgba(34,197,94,.55); }
.voyant-pastille.v-orange{ background:#f59e0b; box-shadow:0 0 16px 2px rgba(245,158,11,.55); animation-delay:.18s; }
.voyant-pastille.v-rouge{ background:#ff4560; box-shadow:0 0 16px 2px rgba(255,69,96,.55); animation-delay:.36s; }
@keyframes voyant-clignote{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

/* Lien d'appel direct sur la carte d'un tracteur affecté */
.card-tel{
  display:inline-flex; align-items:center; gap:5px;
  margin-top:4px; padding:3px 9px;
  font-size:13px; font-weight:600; text-decoration:none;
  color: var(--primary);
  background: var(--surface-2);
  border:1px solid var(--border); border-radius:999px;
}
.card-tel:hover{ border-color: var(--primary); }
.card-tel i{ font-size:15px; }

/* ----- Onglets Anciens / Nouveaux (modale chargeurs) ----- */
.chargeur-tabs{
  display:flex;
  gap:8px;
  margin-bottom:12px;
}
.chargeur-tab{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 12px;
  border-radius: var(--radius-md);
  border:1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-muted);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.chargeur-tab:hover{ border-color: var(--primary); color: var(--text); }
.chargeur-tab.active{ background: var(--primary); border-color: var(--primary); color:#fff; }
.chargeur-tab-num{
  font-size:13px;
  font-weight:700;
  padding:1px 8px;
  border-radius: var(--radius-pill);
  background: rgba(0,0,0,0.22);
}

/* ----- Liste des chargeurs électriques (modale régulateur) ----- */
.chargeur-liste{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:52vh;
  overflow-y:auto;
}
.chargeur-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-radius: var(--radius-md);
  border:1px solid var(--border);
  background: var(--surface-2);
}
.chargeur-item.op{ border-color: var(--libre-border); }
.chargeur-item.inop{ border-color: var(--inop-border); background: var(--inop-bg); }
.chargeur-info{ display:flex; flex-direction:column; gap:2px; }
.chargeur-nom{ display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:15px; }
.chargeur-etat{ font-size:12px; color: var(--text-muted); }
.chargeur-item.op .chargeur-etat{ color: var(--libre-text); }
.chargeur-item.inop .chargeur-etat{ color: var(--inop-text); }
.chargeur-toggle{ flex:0 0 auto; font-size:13px; padding:8px 12px; }

/* Footer modale pendant un appel réseau */
.modal-footer.en-cours{ opacity:.6; pointer-events:none; }
.modal-footer button:disabled{ cursor:progress; }

/* ----- Panels / Tables (vue manager) ----- */
.panel{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 24px;
  overflow-x: auto;
  box-shadow: var(--shadow-sm);
}
.panel-title{
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 14px;
}

/* En-tête de panneau avec sélecteur de vue (tableau / cartes) */
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.panel-head .panel-title{ margin: 0 0 14px; }
.view-toggle{
  display:inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3px;
  margin-bottom: 14px;
}
.view-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:none;
  background:transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 7px;
  cursor:pointer;
  transition: background .15s, color .15s;
}
.view-btn:hover{ color: var(--text); }
.view-btn.active{
  background: var(--primary);
  color:#fff;
}

/* Bouton supprimer dans une carte (vue cartes du manager) */
.card-delete{ margin-top: auto; }
.table{
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.table th{
  text-align: left;
  color: var(--text-muted);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.table td{
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
}
.table tbody tr:last-child td{ border-bottom: none; }
.table tbody tr:hover{ background: var(--surface-2); }

.badge-table{
  font-size: 12px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 20px;
  display: inline-block;
}
.badge-table.etat-affecte{ background: var(--affecte-bg); color: var(--affecte-text); }
.badge-table.etat-libre{ background: var(--libre-bg); color: var(--libre-text); }
.badge-table.etat-charge{ background: var(--charge-bg); color: var(--charge-text); }
.badge-table.etat-attente{ background: var(--attente-bg); color: var(--attente-text); }
.badge-table.etat-inop{ background: var(--inop-bg); color: var(--inop-text); }
.badge-table.etat-preaffecte{ background: rgba(56,189,248,0.16); color: #7dd3fc; }
:root[data-theme="jour"] .badge-table.etat-preaffecte{ color: #0369a1; }

.inline-form{
  display:flex;
  gap:10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.inline-form input{ flex:1; min-width: 180px; }
.inline-form .btn{ flex-shrink:0; }
.inline-form-comptes input, .inline-form-comptes select{ flex: 1; min-width: 150px; }
.inline-form-comptes .combo{ flex: 1; min-width: 150px; }

/* Combobox de recherche (matricule/nom) dans le formulaire compte */
.combo{ position: relative; }
.combo > input[type="text"]{ width: 100%; }
.combo-liste{
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  max-height: 220px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  padding: 4px;
}
.inline-form-filtres{ margin-bottom: 0; flex-wrap: nowrap; }
.inline-form-filtres select{ width: auto; min-width: 150px; }

.table-delete{
  color: var(--text-muted);
}
.table-delete:hover{ color: var(--inop-text); }

/* ----- Page d'accueil ----- */
.home-container{
  max-width: 720px;
  margin: 60px auto;
  padding: 0 24px;
  text-align: center;
}
.home-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 10px;
}
.home-subtitle{
  color: var(--text-muted);
  margin-bottom: 36px;
}
.home-choices{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap: 20px;
}
.home-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-decoration: none;
  color: var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  transition: transform .12s, box-shadow .12s;
}
.home-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.home-card i{
  font-size: 32px;
  color: var(--primary);
}
.home-card-title{ font-weight: 600; font-size: 16px; }
.home-card-desc{ font-size: 13px; color: var(--text-muted); }

/* ----- Auth (ecran de connexion) ----- */
.auth-page{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 24px;
}
.auth-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
/* Carrousel d'accueil (login) : crossfade + léger Ken Burns */
.auth-carousel{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 22px;
  /* Fond clair « studio » pour les tracteurs détourés (img1-4) */
  background: linear-gradient(180deg, #ffffff 0%, #eceef2 100%);
  box-shadow: 0 10px 26px rgba(0,0,0,0.4);
}
.carousel-track{ position: absolute; inset: 0; }
.carousel-slide{
  position: absolute; inset: 0; margin: 0;
  opacity: 0; transition: opacity .9s ease;
}
.carousel-slide.active{ opacity: 1; }
.carousel-slide img{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* Photos catalogue d'engins (fond blanc) : engin affiché en entier */
.carousel-slide img.carousel-engin{ object-fit: contain; background: #fff; padding: 6%; }
/* Logo à côté du tracteur (coin haut-gauche des slides img1-4) */
.carousel-slide img.carousel-logo-corner{
  position: absolute; top: 12px; left: 12px; z-index: 3;
  width: 34%; max-width: 140px; height: auto; padding: 0; background: none;
  object-fit: contain; animation: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.2));
}

/* Variante « pastille » : logo sur une photo (tapis) — fond blanc pour lisibilité */
.carousel-slide img.carousel-logo-chip{
  width: auto; height: 30px; padding: 6px 9px;
  background: rgba(255,255,255,.94); border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
  filter: none;
}
.carousel-slide.active img{ animation: kenburns 7s ease-in-out forwards; }
@keyframes kenburns{
  0%   { transform: scale(1.09) translate(1.5%, -1%); }
  100% { transform: scale(1)    translate(0, 0); }
}
/* Voile dégradé bas : intégration au thème sombre + lisibilité des puces */
.auth-carousel::after{
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(8,8,11,.55) 100%);
}
.carousel-dots{
  position: absolute; left: 0; right: 0; bottom: 10px; z-index: 2;
  display: flex; justify-content: center; gap: 7px;
}
.carousel-dot{
  width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,.45); cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.carousel-dot:hover{ background: rgba(255,255,255,.75); }
.carousel-dot.active{ background: var(--primary); transform: scale(1.3); }
.carousel-dot:focus-visible{ outline: 2px solid var(--primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  .carousel-slide{ transition: none; }
  .carousel-slide.active img{ animation: none; }
}

.auth-logo{
  width: 168px;
  margin: 0 auto 18px;
  padding: 14px 18px;
  background: #fff;
  border-radius: var(--radius-lg);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--glow-primary);
}
.auth-logo img{ width: 100%; height: auto; display: block; }
.auth-title{ font-size: 18px; font-weight: 600; margin: 0; color: var(--text); }
.auth-brand{
  color: var(--primary);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .08em;
  margin: 2px 0 10px;
}
.auth-subtitle{ color: var(--text-muted); font-size: 13px; margin: 0 0 22px; }
.auth-divider{ border-top: 1px solid var(--border); margin-bottom: 22px; }
.auth-card form{ text-align: left; }
.auth-card form .field-label{ display:block; margin: 16px 0 6px; }
.auth-card form .field-label:first-of-type{ margin-top: 0; }
.auth-card .btn-pill{ margin-top: 20px; }
.auth-error{ color: var(--inop-text); font-size: 13px; margin: 12px 0 0; text-align: left; }

.password-wrapper{ position: relative; }
.password-wrapper input{ padding-right: 44px; }
.password-toggle{
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}

/* ----- Toast ----- */
.toast{
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 18px;
  border-radius: var(--radius-md);
  font-size: 14px;
  z-index: 200;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  max-width: calc(100vw - 32px);
}
.toast.hidden{ display:none; }

/* ----- Layout avec Sidebar (régulateur / consultation / manager) ----- */
.page-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}
.page-wrap .stats{ margin-bottom: 20px; }

/* Mise en page type tableau de bord :
   sidebar pleine hauteur collé à gauche + zone de contenu à droite. */
.app-layout{
  display:flex;
  gap:0;
  align-items: stretch;
  min-height: calc(100vh - var(--topbar-h));
}

/* Bouton pour ouvrir/fermer le sidebar */
.btn-toggle-sidebar{ font-size: 22px; }

/* Sidebar masquée : glisse hors écran vers la gauche (le contenu reprend
   toute la largeur car la sidebar est en position fixe, hors flux). */
.app-layout.sidebar-collapsed .sidebar{
  transform: translateX(-100%);
  pointer-events: none;
}

/* Sidebar = colonne fixe pleine hauteur qui démarre tout en haut (au-dessus
   de la topbar), aussi bien sur bureau que sur mobile. */
.sidebar{
  flex-shrink: 0;
  width: var(--sidebar-w);
  display:flex;
  flex-direction:column;
  gap:16px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  height: 100vh;
  height: 100dvh;
  background: var(--surface);
  border: none;
  border-right: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: var(--shadow-sm);
  padding: 20px 14px;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: nowrap;
  transform: translateX(0);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Quand la sidebar est ouverte (bureau), la topbar et le contenu se décalent
   à droite pour lui faire de la place (mise en page « push », pas overlay). */
@media (min-width: 641px){
  .topbar,
  .app-layout{
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  body.nav-ouverte .topbar,
  body.nav-ouverte .app-layout{
    margin-left: var(--sidebar-w);
  }
}

/* Zone de contenu à droite du sidebar (cartes + tableaux/grille) */
.content-area{
  flex: 1;
  min-width: 0;
  padding: 24px;
}
.content-area > .stats{ margin-bottom: 20px; }

/* Logo de marque */
.sidebar-brand{ display:flex; justify-content:center; }
.sidebar-logo-box{
  width: 100%;
  background: #fff;
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: var(--glow-primary);
}
.sidebar-logo-box img{ max-width: 100%; height: 36px; object-fit: contain; display:block; }
.sidebar-logo-fallback{
  display:none;
  color: var(--primary);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: .08em;
  line-height: 1.1;
  text-align:center;
}

/* Carte utilisateur */
.sidebar-user-section{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.sidebar-user-avatar{
  flex-shrink:0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color:#fff;
  font-weight: 700;
  font-size: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sidebar-user-info{ display:flex; flex-direction:column; min-width:0; }
.sidebar-user-name{
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-user-status{
  font-size: 10px;
  font-weight: 600;
  color: var(--libre-text);
  letter-spacing: .06em;
}

/* Libellé de section */
.sidebar-section-label{
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* Navigation / filtres */
.sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
}
.sidebar-link{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 14px;
  text-align:left;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.sidebar-link:hover{ background: var(--surface-2); color: var(--text); }
.sidebar-link.active{
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow: var(--glow-primary);
}
.sidebar-icon{
  font-size: 16px;
  width: 20px;
  text-align:center;
  flex-shrink:0;
}
.sidebar-link-label{ flex:1; }
.sidebar-badge{
  flex-shrink:0;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sidebar-link.active .sidebar-badge{ background: rgba(255,255,255,0.25); color:#fff; }

/* Bascule de module (Tracteurs / Tapis) dans le sidebar */
.module-switch{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:6px;
  background: var(--surface-2);
  padding: 4px;
  border-radius: var(--radius-md);
}
.module-btn{
  padding: 8px 6px;
  border:none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.module-btn:hover{ color: var(--text); }
.module-btn.active{
  background: var(--primary);
  color:#fff;
  box-shadow: var(--glow-primary);
}
.module-btn-emoji{ font-size:14px; }
.module-badge{
  display:inline-block; min-width:16px; padding:0 5px; margin-left:2px;
  background: var(--inop-border); color:#fff; font-size:11px; font-weight:700;
  border-radius: var(--radius-pill); line-height:16px; text-align:center;
}

/* ----- Passation de relève (régulateur) ----- */
.passation-entete{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-bottom:16px;
}
.passation-h2{ font-size:18px; font-weight:700; margin:0; color: var(--text); }
.passation-sous{ font-size:13px; color: var(--text-muted); margin:2px 0 0; }
.passation-bloc{ margin-bottom:18px; }
.passation-bloc-titre{
  font-size:13px; font-weight:700; color: var(--text-muted);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px;
}
.passation-carte{
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-md); padding:14px; margin-bottom:10px;
}
.passation-carte.courante{ border-color: var(--primary); box-shadow: var(--glow-primary); }
.passation-carte-head{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px;
}
.passation-shift{ font-weight:700; color: var(--text); }
.passation-meta{ font-size:12px; color: var(--text-muted); margin-left:auto; }
.passation-statut{ font-size:12px; font-weight:700; padding:2px 9px; border-radius: var(--radius-pill); }
.passation-statut.attente{ background: var(--charge-bg); color: var(--charge-text); }
.passation-statut.releve{ background: var(--libre-bg); color: var(--libre-text); }
.passation-resume{
  display:flex; flex-direction:column; gap:4px; font-size:13px; color: var(--text);
  background: var(--surface-2); border-radius: var(--radius-md); padding:10px 12px;
}
.passation-resume b{ color: var(--text); }
.passation-inop{
  margin-top:8px; font-size:13px; color: var(--inop-text);
  background: var(--inop-bg); border:1px solid var(--inop-border);
  border-radius: var(--radius-md); padding:8px 12px;
}
.passation-champ{ display:flex; flex-direction:column; gap:2px; margin-top:10px; }
.passation-champ-titre{ font-size:11px; font-weight:700; color: var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }
.passation-champ span:last-child{ font-size:13.5px; color: var(--text); white-space:pre-wrap; }
.passation-releve-par{ margin-top:10px; font-size:12px; color: var(--libre-text); }
.passation-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center; }
.passation-note{ font-size:12px; color: var(--text-muted); font-style:italic; }
.btn-sm{ padding:6px 12px; font-size:13px; }
.passation-snapshot-apercu{
  background: var(--surface-2); border:1px solid var(--border);
  border-radius: var(--radius-md); padding:12px; margin:6px 0 4px;
}
.pass-rapport-barre{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background: var(--surface-2); border:1px solid var(--border);
  border-left:3px solid var(--primary);
  border-radius: var(--radius-md); padding:12px 14px; margin-bottom:14px;
}
.pass-rapport-info{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.pass-rapport-info strong{ font-size:14px; color: var(--text); }
.pass-rapport-info span{ font-size:12px; color: var(--text-muted); }
.pass-rapport-barre .btn{ flex:0 0 auto; }
.pass-rapport-barre.incomplet{ border-left-color: var(--inop-border); }
.pass-rapport-barre.pret{ border-left-color: var(--libre-border); }
.liste-noncontroles{ list-style:none; margin:10px 0 0; padding:0; max-height:46vh; overflow:auto; }
.liste-noncontroles li{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 12px; border:1px solid var(--border); border-radius: var(--radius-md);
  margin-bottom:6px; font-size:13.5px; color: var(--text);
  cursor:pointer; transition: background .12s, border-color .12s;
}
.liste-noncontroles li:hover,
.liste-noncontroles li:focus-visible{
  background: var(--surface-2); border-color: var(--primary); outline:none;
}
.liste-noncontroles .nc-engin{ font-weight:600; }
.liste-noncontroles .nc-droite{ display:flex; align-items:center; gap:8px; color: var(--text-muted); }
.liste-noncontroles .nc-etat{ font-size:12px; }
.liste-noncontroles .ti-chevron-right{ font-size:16px; color: var(--primary); }

/* Cartes d'état par type d'engin (réutilisées dans la passation) */
.pass-snapshot{ margin:6px 0 2px; }
.pass-famille{ margin-bottom:12px; }
.pass-famille-titre{
  display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700;
  color: var(--text); margin-bottom:7px;
}
.pass-fam-total{
  margin-left:auto; font-size:12px; font-weight:700; color: var(--text-muted);
  background: var(--surface); border:1px solid var(--border);
  border-radius: var(--radius-pill); padding:1px 10px;
}
.pass-cartes{ display:grid; grid-template-columns: repeat(4, 1fr); gap:8px; }
.pass-carte{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  border:1px solid var(--border); background: var(--surface);
  border-radius: var(--radius-md); padding:9px 6px; text-align:center;
}
.pass-carte .v{ font-size:20px; font-weight:800; line-height:1; }
.pass-carte .l{ font-size:10.5px; color: var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }
.pass-carte.c-libre{ background: var(--libre-bg); border-color: var(--libre-border); }
.pass-carte.c-libre .v{ color: var(--libre-text); }
.pass-carte.c-affecte{ background: var(--affecte-bg); border-color: var(--affecte-border); }
.pass-carte.c-affecte .v{ color: var(--affecte-text); }
.pass-carte.c-charge{ background: var(--charge-bg); border-color: var(--charge-border); }
.pass-carte.c-charge .v{ color: var(--charge-text); }
.pass-carte.c-inop{ background: var(--inop-bg); border-color: var(--inop-border); }
.pass-carte.c-inop .v{ color: var(--inop-text); }

.pass-inop-table{
  width:100%; border-collapse:collapse; margin-top:6px;
  font-size:13px; background: var(--surface); border-radius: var(--radius-md); overflow:hidden;
}
.pass-inop-table th, .pass-inop-table td{
  text-align:left; padding:8px 10px; border:1px solid var(--border); vertical-align:top;
}
.pass-inop-table thead th{
  background: var(--surface-2); color: var(--text-muted);
  font-size:11px; text-transform:uppercase; letter-spacing:.03em;
}
.pass-inop-table td:first-child{ white-space:nowrap; font-weight:600; width:1%; }
.pass-inop-table td:last-child{ color: var(--inop-text); }

/* Faits marquants de la vacation (anomalies) */
.pass-faits{
  margin-top:10px; border:1px solid var(--inop-border); border-radius: var(--radius-md);
  background: var(--inop-bg); padding:10px 12px;
}
.pass-faits-titre{ font-size:12.5px; font-weight:700; color: var(--inop-text); margin-bottom:8px; }
.pass-fait{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  padding:5px 0; border-top:1px solid var(--inop-border); font-size:13px;
}
.pass-fait:first-of-type{ border-top:none; }
.pass-fait-engin{ font-weight:700; color: var(--text); }
.pass-fait-motif{ color: var(--text); flex:1; min-width:120px; }
.pass-fait-heure{ font-size:11.5px; color: var(--text-muted); margin-left:auto; }

/* Vignettes photo (tapis à bagages / tracteur) en remplacement des icônes/emojis */
.img-tapis,
.img-tracteur{
  height: 18px;
  width: auto;
  max-width: 32px;
  object-fit: contain;
  vertical-align: middle;
  border-radius: 3px;
  background: #fff;
  padding: 1px 2px;
}
.zone-tag .img-tapis,
.zone-tag .img-tracteur{ height: 15px; }
.card-icon .img-tapis,
.card-icon .img-tracteur{ height: 24px; max-width: 44px; }
.topbar-left .img-tapis,
.topbar-left .img-tracteur{ height: 26px; max-width: 46px; }

/* Pied : email */
.sidebar-footer-email{
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display:flex;
  align-items:center;
  gap:6px;
  font-size: 11px;
  color: var(--text-muted);
  word-break: break-all;
}

.app-layout .grid,
.app-layout .app-main{
  flex: 1;
  min-width: 0;
}
.app-main > .panel:last-child{ margin-bottom: 0; }

/* ----- Sections de cartes du tableau de bord manager ----- */
.dash-bloc{ margin-bottom: 18px; }
.dash-bloc-titre{
  display:flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 2px 10px;
}
.dash-bloc-hint{ font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-muted); opacity: .8; }
.stat-tapis-nav{ cursor: pointer; }
.stat-split{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}
.stat-split strong{ color: var(--text); font-size: 14px; }

/* ----- Statistiques (graphiques SVG/CSS) ----- */
.kpi-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
}
.kpi{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--text-muted);
  padding: 14px 16px;
  display:flex;
  flex-direction:column;
  gap: 4px;
}
.kpi-val{ font-size: 26px; font-weight: 800; line-height: 1; }
.kpi-label{ font-size: 12px; color: var(--text-muted); }
.kpi-affecte{ border-left-color: var(--affecte-border); }
.kpi-libre{ border-left-color: var(--libre-border); }
.kpi-charge{ border-left-color: var(--charge-border); }
.kpi-inop{ border-left-color: var(--inop-border); }

.stats-charts{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.chart-panel{ margin-bottom: 0; }
.chart-panel-large{ grid-column: 1 / -1; }
.stats-filtres{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.stats-filtres .view-toggle{ margin-bottom: 0; }
.chart-titre{
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 14px;
  color: var(--text);
}

/* Donut */
.donut-wrap{ display:flex; flex-direction:column; align-items:center; gap: 14px; }
.donut-svg{ width: 160px; height: 160px; }
.donut-centre{ fill: var(--text); font-size: 30px; font-weight: 800; }
.donut-centre-sub{ fill: var(--text-muted); font-size: 12px; }
.chart-legend{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap: 8px 16px;
}
.legende-item{ display:flex; align-items:center; gap:6px; font-size: 13px; color: var(--text-muted); }
.legende-item strong{ color: var(--text); }
.legende-pastille{ width: 11px; height: 11px; border-radius: 3px; flex-shrink:0; }

/* Barres horizontales */
.barres{ display:flex; flex-direction:column; gap: 12px; }
.barre-ligne{ display:flex; align-items:center; gap: 10px; }
.barre-label{ width: 96px; flex-shrink:0; font-size: 13px; color: var(--text-muted); }
.barre-piste{
  flex:1;
  height: 12px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow:hidden;
}
.barre-remplissage{
  height: 100%;
  border-radius: 999px;
  min-width: 3px;
  transition: width .4s ease;
}
.barre-valeur{ width: 28px; text-align:right; font-weight: 700; font-size: 13px; }

/* Activité (barres verticales) */
.activite-graph{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 6px;
  height: 160px;
}
.activite-col{ flex:1; display:flex; flex-direction:column; align-items:center; gap: 6px; height: 100%; }
.activite-barre-zone{ flex:1; width: 100%; display:flex; align-items:flex-end; }
.activite-barre{
  width: 100%;
  background: linear-gradient(180deg, var(--primary), var(--primary-dark));
  border-radius: 6px 6px 0 0;
  min-height: 3px;
  transition: height .4s ease;
}
.activite-barre-inop{
  background: linear-gradient(180deg, var(--inop-border), var(--inop-text));
}
.activite-val{ font-size: 12px; font-weight: 700; }
.activite-jour{ font-size: 11px; color: var(--text-muted); text-transform: capitalize; }

/* Voile sombre derrière le tiroir (mobile uniquement) */
.sidebar-backdrop{ display: none; }

/* ----- Responsive ----- */
@media (max-width: 640px){
  .container{ padding: 16px; }
  .topbar{ padding: 12px 16px; }
  .stats{ grid-template-columns: repeat(2, 1fr); }
  /* Cartes engins : 3 à 4 par ligne sur mobile (au lieu d'une seule) */
  .grid{
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
  }
  .grid .card{
    padding: 10px;
    gap: 6px;
    min-height: 0;
    border-radius: var(--radius-md);
  }
  .grid .card-num{ font-size: 14px; }
  .grid .card-cariste{ font-size: 13px; }
  .grid .card-sub{ font-size: 11px; }
  .grid .card-charge{ font-size: 12px; }
  .grid .badge{ font-size: 10px; padding: 2px 7px; }

  /* Cartes moitié image / moitié données → image en haut, données en bas */
  .card-flotte-media{ flex-direction: column; }
  .card-flotte-media .card-media{ flex: 0 0 auto; min-height: 68px; }
  .card-flotte-media .card-infos{ padding: 8px 10px; }
  .card-flotte-media .materiel-compte{ font-size: 20px; }
  .card-flotte-media .materiel-sur{ font-size: 12px; }
  /* Pastille logo réduite pour ne pas envahir une petite carte */
  .card-materiel::after{ width: 42px; height: 16px; background-size: 34px auto; }
  .card-materiel .card-sub{ padding-right: 46px; }

  .home-choices{ grid-template-columns: 1fr; }

  .page-wrap{ padding: 16px; }
  .app-layout{
    flex-direction: column;
    gap: 0;
  }
  .content-area{ padding: 16px; }

  /* Sidebar = tiroir plein écran qui démarre tout en haut (au-dessus de la
     topbar), glisse depuis la gauche, et recouvre le contenu sur mobile. */
  .sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: 284px;
    max-width: 84vw;
    z-index: 60;
    border: none;
    border-right: 1px solid var(--border);
    border-radius: 0;
    box-shadow: 10px 0 40px rgba(0, 0, 0, 0.5);
    padding: 18px 14px;
    transform: translateX(0);
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  /* Tiroir fermé : neutralise les règles desktop (width:0…) et glisse hors écran */
  .app-layout.sidebar-collapsed .sidebar{
    width: 284px;
    max-width: 84vw;
    min-width: 0;
    padding: 18px 14px;
    border-width: 0 1px 0 0;
    opacity: 1;
    pointer-events: none;
    transform: translateX(-100%);
  }
  /* Navigation en colonne dans le tiroir (pas une rangée de boutons) */
  .sidebar-nav{ flex-direction: column; flex-wrap: nowrap; }
  .sidebar-link{ flex: none; min-width: 0; }

  /* Voile : visible seulement quand le tiroir est ouvert */
  .sidebar-backdrop{
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .app-layout:not(.sidebar-collapsed) .sidebar-backdrop{
    opacity: 1;
    pointer-events: auto;
  }
  /* Bloque le défilement du contenu quand le tiroir est ouvert */
  body.nav-ouverte{ overflow: hidden; }
}

/* ============================================================
   POINTAGE EFFECTIF DES CARISTES (régulateur + vues lecture seule)
   ============================================================ */
.pointage-header{ margin-bottom: 16px; }
.pointage-titre{ font-size: 20px; letter-spacing: -0.02em; }
.pointage-sous{ color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.pointage-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.pointage-carte{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pointage-entete{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.pointage-shift{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 16px; font-weight: 700; letter-spacing: -0.01em;
}
.pointage-shift i{ color: var(--primary); }
.pointage-compte{
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 3px 10px;
}
.pointage-ajout{ display: flex; gap: 6px; flex-wrap: wrap; }
.pointage-ajout .pointage-saisie{ flex: 1 1 100%; }
.btn-mini{
  padding: 7px 10px; font-size: 12px; font-weight: 600;
  border-radius: var(--radius-sm); white-space: nowrap;
}
.pointage-liste{ display: flex; flex-direction: column; gap: 6px; }
.pointage-vide{ color: var(--text-muted); font-size: 13px; padding: 4px 2px; }
.pointage-row{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.pointage-row.present{ border-left-color: var(--libre-text); }
.pointage-row.absent{ border-left-color: var(--inop-text); }
.pointage-row.prevu{ border-left-color: var(--charge-text); }
.pointage-nom{ font-weight: 600; font-size: 14px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Contrôles de ligne : badge de statut + boutons d'action + retrait */
.pointage-ctrl{ display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.pointage-statut{ font-size: 12px; font-weight: 700; white-space: nowrap; }
.pointage-row.present .pointage-statut{ color: var(--libre-text); }
.pointage-row.absent .pointage-statut{ color: var(--inop-text); }
.pointage-row.prevu .pointage-statut{ color: var(--charge-text); }
.pointage-engin-tag{ font-size: 12px; font-weight: 600; color: #7dd3fc; background: rgba(56,189,248,0.16); padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
:root[data-theme="jour"] .pointage-engin-tag{ color: #0369a1; }
.pointage-engin-tag.affecte{ color: var(--affecte-text); background: var(--affecte-bg); }

/* Aperçu PDF (avant partage) */
.pdf-preview{ width: 100%; height: 58vh; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }

/* Sélecteur de plage horaire + tableau large */
.pointage-shift-tabs{ display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.pointage-tab{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--radius-md);
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 14px; font-weight: 600;
}
.pointage-tab:hover{ color: var(--text); border-color: var(--primary); }
.pointage-tab.active{ background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--glow-primary); }
.pointage-tab-compte{ font-size: 12px; font-weight: 700; background: rgba(0,0,0,.18); padding: 1px 7px; border-radius: 999px; }
.pointage-tab.active .pointage-tab-compte{ background: rgba(255,255,255,.25); }

.pointage-panneau{ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; }
.pointage-panneau .pointage-ajout{ display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.pointage-panneau .pointage-saisie{ flex: 1; min-width: 180px; }
.pointage-table td, .pointage-table th{ vertical-align: middle; }
.pointage-actions-cell{ display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.pointage-table .pointage-nom{ font-weight: 600; color: var(--text); }
.pointage-table .pointage-vide{ text-align: center; color: var(--text-muted); padding: 18px 0; }
.pointage-set{
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-muted); cursor: pointer;
  min-width: 32px; min-height: 32px; font-size: 14px; font-weight: 700;
}
.pointage-set.set-present:hover{ border-color: var(--libre-text); color: var(--libre-text); }
.pointage-set.set-absent:hover{ border-color: var(--inop-text); color: var(--inop-text); }
.pointage-set.set-prevu:hover{ border-color: var(--charge-text); color: var(--charge-text); }
/* Bouton "Prévu" de la zone d'ajout (ambre, neutre) */
.pointage-btn-prevu{
  background: var(--charge-bg); color: var(--charge-text);
  border: 1px solid var(--charge-border);
}
.pointage-remove{ min-width: 34px; min-height: 34px; font-size: 15px; }

/* Vue lecture seule (consultation / manager) : deux colonnes présents/absents */
.pointage-lecture .pointage-row{ grid-template-columns: 1fr auto; }
.pointage-ro-colonnes{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.pointage-ro-col{ flex: 1 1 45%; min-width: 130px; }
.pointage-ro-col h4{
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em;
  margin-bottom: 6px; color: var(--text-muted); font-weight: 800;
}
/* Titres de colonnes colorés pour une meilleure visibilité (lecture seule) */
.pointage-ro-titre.present{ color: var(--libre-text); }
.pointage-ro-titre.absent{ color: var(--inop-text); }
.pointage-ro-titre.prevu{ color: var(--charge-text); }
.pointage-ro-col{ flex: 1 1 30%; }
.pointage-ro-nom{
  font-size: 13px; padding: 5px 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2); margin-bottom: 4px;
}
.pointage-ro-nom.present{ border-left: 3px solid var(--libre-text); }
.pointage-ro-nom.absent{ border-left: 3px solid var(--inop-text); }
.pointage-ro-nom.prevu{ border-left: 3px solid var(--charge-text); }
/* Vue LEADER (préparation) : une seule plage affichée, carte élargie à
   3 colonnes (Prévu / Présent / Absent) pour une bonne lisibilité mobile. */
.pointage-note{ display: flex; align-items: center; gap: 6px; margin: 4px 0 12px; font-size: 12.5px; color: var(--text-muted); }
.pointage-note i{ font-size: 15px; }
.pointage-leader-cols{ display: flex; gap: 8px; align-items: flex-start; }
.pointage-leader-cols .pointage-ro-col{ flex: 1 1 0; min-width: 0; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 8px; }
.pointage-col-present{ border-top: 3px solid var(--libre-border); }
.pointage-col-absent{ border-top: 3px solid var(--inop-border); }
.pointage-col-prevu{ border-top: 3px solid var(--charge-border); }
.pointage-leader-cols .pointage-ro-titre{ font-size: 12px; text-align: center; margin-bottom: 8px; }
/* Chip nom : bordure gauche + fond teinté = « signe » du statut bien visible. */
.pointage-chip{
  display: flex; flex-direction: column; gap: 6px;
  padding: 7px 8px; margin-bottom: 6px;
  border: 1px solid var(--border); border-left-width: 4px;
  border-radius: var(--radius-sm); background: var(--surface);
}
.pointage-chip.present{ border-left-color: var(--libre-border); background: var(--libre-bg); }
.pointage-chip.absent{ border-left-color: var(--inop-border); background: var(--inop-bg); }
.pointage-chip.prevu{ border-left-color: var(--charge-border); background: var(--charge-bg); }
.pointage-chip-nom{ font-weight: 700; font-size: 13px; line-height: 1.25; word-break: break-word; }
.pointage-chip-engin{ display: flex; flex-wrap: wrap; gap: 4px; }
.pointage-chip-engin .pointage-preaff{ font-size: 11px; padding: 3px 8px; }
.pointage-chip-actions{ display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.pointage-chip-actions .pointage-set{ min-width: 30px; min-height: 30px; padding: 3px 6px; font-size: 14px; }
.pointage-chip-actions .icon-btn{ width: 30px; height: 30px; font-size: 14px; flex: none; }

/* Champ de date en haut du module Pointage (toutes les sessions) */
.pointage-date-champ{
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px;
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  font-size: 14px; font-weight: 600;
  text-transform: capitalize;
}
.pointage-date-champ i{ color: var(--primary); font-size: 17px; }
.pointage-tempsreel{ color: var(--text-muted); font-weight: 500; text-transform: none; }

/* ----- Bandeau "Nouvelle version disponible" (PWA update) ----- */
.bandeau-maj{
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100vw - 24px);
  padding: 12px 16px;
  background: var(--surface-2);
  border: 1px solid var(--primary);
  border-radius: var(--radius-pill);
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.7);
  animation: bandeauMajApparition .25s ease;
}
@keyframes bandeauMajApparition{
  from{ opacity: 0; transform: translate(-50%, 12px); }
  to{ opacity: 1; transform: translate(-50%, 0); }
}
.bandeau-maj-txt{ font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; }
.bandeau-maj-btn{
  flex: 0 0 auto;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  min-height: 36px;
}
.bandeau-maj-btn:hover{ filter: brightness(1.08); }

/* ----- Cartes stats Piste + Zones (régulateur / consultation) ----- */
.stat-pz-l{
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-top: 2px;
}
.stat-pz-cle{
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-muted);
}
.stat-zone-sub{
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-top: 6px; padding-top: 6px;
  border-top: 1px dashed var(--border);
  font-size: 13px;
}
.stat-zone-sub .stat-zone-cle{
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-muted);
}
.stat-zone-sub strong{ font-size: 15px; color: var(--text); }
.stat-zone-detail{
  flex-basis: 100%;
  font-size: 11px; color: var(--text-muted); font-weight: 600;
  line-height: 1.3;
}

/* Répartition complète (Piste + zones) sous une carte d'état */
.stat-zone-detail-full{
  flex-basis: 100%;
  font-size: 12px; font-weight: 600; color: var(--text);
  line-height: 1.35;
}

/* Badge "environnement de test" (branche Supabase, jamais en prod) */
.env-badge{
  position: fixed;
  top: 0; left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  padding: 4px 14px;
  border-radius: 0 0 10px 10px;
  background: #f59e0b;
  color: #1a1200;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  box-shadow: 0 4px 12px -4px rgba(0,0,0,.6);
  pointer-events: none;
  white-space: nowrap;
}

/* ============================================================
   MODULE MATÉRIEL (« autres engins » — suivi duty_officer)
   ============================================================ */
.materiel-entete{ margin-bottom: 16px; }
.materiel-titre{ font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.materiel-note{ margin: 0; color: var(--text-muted); font-size: 13px; }

.card-materiel{ cursor: pointer; position: relative; }

/* Logo RAM Handling sur chaque carte (pastille blanche, lisible sur tout fond) */
.card-materiel::after{
  content: "";
  position: absolute;
  bottom: 6px; right: 6px;
  width: 58px; height: 22px;
  background: #fff url("images/logo.png") no-repeat center / 46px auto;
  border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
  pointer-events: none;
  z-index: 5;
}
/* Réserve la place de la pastille pour ne pas chevaucher le texte */
.card-materiel .card-sub{ padding-right: 64px; }

/* Carte moitié image / moitié données (test visuel des engins) */
.card-flotte-media{
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}
.card-flotte-media .card-media{
  flex: 0 0 50%;
  min-height: 120px;
  background: var(--surface-2, #17171c);
}
.card-flotte-media .card-media img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.card-flotte-media .card-infos{
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 14px 16px;
  min-width: 0;
}
.card-flotte-media .card-header{ margin: 0; }
.materiel-compte{ font-size: 26px; font-weight: 800; line-height: 1.1; }
.materiel-compte .materiel-op{ color: var(--libre-fg, #4ade80); }
.materiel-compte .materiel-inop-n{ color: var(--inop-fg, #f87171); }
.materiel-sur{ font-size: 15px; font-weight: 600; color: var(--text-muted); }
.materiel-fiable{ font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 8px; }
.materiel-fiable strong{ color: var(--text, #eee); }
.materiel-ecart-badge{
  padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 800;
  background: rgba(239,68,68,.15); color: var(--inop-fg, #f87171); border: 1px solid rgba(239,68,68,.4);
}

/* Liste de détails (clic sur une carte d'engin, côté manager) */
.mat-detail-resume{ display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.mat-detail-badge{ padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; }
.mat-detail-badge.op{ background: var(--libre-bg, rgba(34,197,94,.15)); color: var(--libre-fg, #4ade80); }
.mat-detail-badge.inop{ background: var(--inop-bg, rgba(239,68,68,.15)); color: var(--inop-fg, #f87171); }
.mat-detail-total{ margin-left: auto; font-size: 13px; color: var(--text-muted); }

.mat-detail-list{ border: 1px solid var(--border, #333); border-radius: var(--radius-md, 8px); overflow: hidden; max-height: 55vh; overflow-y: auto; }
.mat-detail-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border, #2a2a30); }
.mat-detail-row:last-child{ border-bottom: none; }
.mat-detail-row.head{ position: sticky; top: 0; background: var(--surface-2, #17171c); font-size: 12px; font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.mat-detail-row:not(.head):nth-child(even){ background: rgba(255,255,255,.02); }
.mat-detail-num{ font-weight: 700; font-size: 16px; }
.mat-detail-etat{ display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.mat-detail-pastille{ width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.mat-detail-row.op .mat-detail-etat{ color: var(--libre-fg, #4ade80); }
.mat-detail-row.op .mat-detail-pastille{ background: var(--libre-fg, #4ade80); }
.mat-detail-row.inop .mat-detail-etat{ color: var(--inop-fg, #f87171); }
.mat-detail-row.inop .mat-detail-pastille{ background: var(--inop-fg, #f87171); }
.mat-detail-row.head .mat-detail-etat{ color: var(--text-muted); }

/* Puces d'état (numéros opé/inop) dans la modale */
.materiel-etat-liste{ display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.materiel-puce{
  padding: 3px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
  border: 1px solid transparent;
}
.materiel-puce.op{ background: var(--libre-bg, rgba(34,197,94,.15)); color: var(--libre-fg, #4ade80); border-color: rgba(34,197,94,.35); }
.materiel-puce.inop{ background: var(--inop-bg, rgba(239,68,68,.15)); color: var(--inop-fg, #f87171); border-color: rgba(239,68,68,.35); }

.materiel-consigne{ font-size: 13px; color: var(--text-muted); margin: 0 0 8px; line-height: 1.4; }
/* Bouton « signaler une panne » dans la modale de déclaration */
.mat-btn-panne{ margin: 0 0 12px; border-color: #f59e0b; color: #f59e0b; }
.mat-btn-panne:hover{ background: rgba(245,158,11,.12); }
.materiel-panne-row{ flex: 0 0 auto; }
/* Motifs de panne fréquents (chips à bascule) */
.panne-motifs{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.panne-motif-chip{
  padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer;
  background: var(--surface-2, #17171c); color: var(--text, #eee); border: 1px solid var(--border, #333);
}
.panne-motif-chip:hover{ border-color: #f59e0b; }
.panne-motif-chip.actif{ background: rgba(245,158,11,.18); border-color: #f59e0b; color: #f59e0b; }
/* Vignettes de photos dans le signalement de panne */
.panne-apercu{ position: relative; width: 88px; height: 88px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border, #333); }
.panne-apercu img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.panne-apercu .panne-retirer-photo{ position: absolute; top: 3px; right: 3px; background: rgba(0,0,0,.6); border-radius: 6px; font-size: 13px; line-height: 1; padding: 2px 4px; }
/* Puce inop cliquable (réactivation d'un engin dans la déclaration) */
button.materiel-puce{ cursor: pointer; font: inherit; display: inline-flex; align-items: center; gap: 4px; }
button.mat-reactiver:hover{ filter: brightness(1.25); }

/* Champs de saisie dynamiques (+ / retirer) */
.materiel-champs{ display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.materiel-champ{ display: flex; align-items: center; gap: 8px; }
.materiel-input{
  flex: 1; padding: 10px 12px;
  background: var(--surface-2, #17171c); color: var(--text, #eee);
  border: 1px solid var(--border, #333); border-radius: var(--radius-md, 8px);
  font-size: 15px;
}
.materiel-input:focus{ outline: none; border-color: var(--primary); }
.materiel-input.doublon{ border-color: var(--inop-fg, #f87171); background: rgba(239,68,68,.08); }
.materiel-retirer{ flex: 0 0 auto; }
/* Pastille verte « opérationnel » sur chaque engin valide de la liste */
.materiel-champ-ok{
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--libre-fg, #4ade80); color: #05270f; font-size: 14px;
  opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease;
}
.materiel-champ.valide .materiel-champ-ok{ opacity: 1; transform: scale(1); }
.materiel-champ.valide .materiel-input{ border-color: rgba(74,222,128,.5); }

/* ----- Passations de vacation du matériel ----- */
#materielBarre{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.materiel-passation-banner{
  flex: 1 1 320px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: var(--radius-md, 8px);
  background: var(--surface-2, #17171c); border: 1px solid var(--border, #333);
  font-size: 14px;
}
.materiel-passation-banner.attente{ border-color: #f59e0b; background: rgba(245,158,11,.10); }
.mp-points{ margin-top: 4px; font-size: 13px; color: var(--text-muted); }
.mp-shift-choix{ display: flex; gap: 14px; margin: 4px 0 10px; }
.mp-radio{ display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 15px; }

.mp-types{ display: flex; flex-direction: column; gap: 12px; }
.mp-type{ border: 1px solid var(--border, #333); border-radius: var(--radius-md, 8px); padding: 10px 12px; }
.mp-type-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.mp-type-nom{ font-weight: 800; }
.mp-type-ref{ font-size: 12px; color: var(--text-muted); }
.mp-champs{ display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }

/* Historique des passations */
.mp-histo{ display: flex; flex-direction: column; gap: 10px; }
.mp-histo-item{ border: 1px solid var(--border, #333); border-radius: var(--radius-md, 8px); padding: 10px 12px; }
.mp-histo-head{ display: flex; align-items: center; gap: 8px; font-size: 14px; }
.mp-histo-line{ font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.mp-statut{ margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.mp-statut.confirmee{ background: var(--libre-bg, rgba(34,197,94,.15)); color: var(--libre-fg, #4ade80); }
.mp-statut.en_attente{ background: rgba(245,158,11,.15); color: #f59e0b; }
.mp-ecarts{ margin-top: 6px; font-size: 13px; color: var(--inop-fg, #f87171); font-weight: 600; }
.mp-histo-share{ margin-left: 8px; }

/* Aperçu du récapitulatif partageable (image) */
.recap-apercu{ display: flex; justify-content: center; min-height: 120px; align-items: center; }
.recap-img{ max-width: 100%; height: auto; border-radius: 10px; box-shadow: 0 8px 24px -8px rgba(0,0,0,.6); }
.recap-loading{ color: var(--text-muted); font-size: 14px; }