/* ============================================================
   WOYOTRACK par DIPRICODE — Feuille de style principale
   Charte officielle v1.0 : bleu profond #0F3D91 · orange #F57C00
   Polices : Sora (titres) + Inter (texte)
   ============================================================ */

/* --- Polices officielles (fichiers locaux, fonctionnent hors ligne) --- */
@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Sora var';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/sora-latin-wght-normal.woff2') format('woff2');
}

:root {
  /* ---- Marque (identiques clair/sombre) ---- */
  --navy: #0F3D91;
  --navy-dark: #0A2C6B;
  --navy-light: #1E5FD9;
  --orange: #F57C00;
  --orange-hover: #FF9E2C;
  --orange-light: #FEF0E0;

  /* ---- MODE CLAIR ---- */
  --bg: #F5F7FA;
  --bg-2: #EEF2F7;
  --card: #FFFFFF;
  --card-soft: #F8FAFC;
  --card-grad: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%);
  --topbar-bg: rgba(255, 255, 255, 0.82);
  --text: #1E293B;
  --text-muted: #5B6574;
  --text-faint: #94A3B8;
  --border: #E5E7EB;
  --border-soft: #EEF1F5;
  --row-hover: #F1F6FD;
  --input-bg: #FFFFFF;
  --chip-bg: #F0F4F9;

  /* Accent bleu utilisé pour texte/icônes/graphes (s'éclaircit en sombre) */
  --accent: #1E5FD9;

  /* Statuts + fonds de badge */
  --green: #16A34A;  --green-bg: #E7F6EC;
  --red: #DC2626;    --red-bg: #FBE9E9;
  --yellow: #B45309; --yellow-bg: #FEF3D6;
  --blue: #2563EB;   --blue-bg: #E6EEFE;
  --grey-bg: #EDF1F5;

  /* Ombres */
  --shadow: 0 10px 35px rgba(15, 61, 145, 0.08);
  --shadow-hover: 0 18px 50px rgba(15, 61, 145, 0.16);
  --shadow-sm: 0 1px 2px rgba(15, 61, 145, 0.05);

  /* Arrondis */
  --radius: 20px;
  --radius-btn: 14px;
  --radius-input: 12px;
  --radius-modal: 24px;
  --sidebar-w: 236px;

  /* Polices */
  --font-titre: 'Sora var', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-texte: 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ================= MODE SOMBRE PREMIUM ================= */
:root[data-theme="dark"] {
  --bg: #0A1120;
  --bg-2: #0D1526;
  --card: #141E33;
  --card-soft: #101a2e;
  --card-grad: linear-gradient(180deg, #16223A 0%, #131D31 100%);
  --topbar-bg: rgba(15, 24, 43, 0.82);
  --text: #EAF0FA;
  --text-muted: #9FB0C9;
  --text-faint: #64748B;
  --border: #253251;
  --border-soft: #1C2A44;
  --row-hover: #1A2740;
  --input-bg: #0F1A2E;
  --chip-bg: #1B2740;

  --accent: #6795F5;

  --green: #4ADE80;  --green-bg: rgba(22, 163, 74, 0.18);
  --red: #F87171;    --red-bg: rgba(220, 38, 38, 0.20);
  --yellow: #FBBF24; --yellow-bg: rgba(245, 158, 11, 0.18);
  --blue: #60A5FA;   --blue-bg: rgba(37, 99, 235, 0.20);
  --grey-bg: #1B2740;

  --shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
  --shadow-hover: 0 20px 48px rgba(0, 0, 0, 0.55);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --orange-light: rgba(245, 124, 0, 0.16);
}

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

/* Transition douce lors du changement de thème */
.theme-anim, .theme-anim * {
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, fill 0.2s ease !important;
}

body {
  font-family: var(--font-texte);
  font-feature-settings: 'cv11', 'ss01';
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

/* Titres en Sora */
h1, h2, h3, .kpi-hero, .kpi-title, .logo-text, .auth-logo,
.veh-id, .dette-titre, .dette-montant, .projet-nom, .onb-titre {
  font-family: var(--font-titre);
}

/* ================= MENU LATÉRAL ================= */
.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--sidebar-w);
  background: linear-gradient(180deg, #143E93 0%, #0F3D91 55%, #0A2C6B 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 100;
  box-shadow: 4px 0 24px rgba(15, 61, 145, 0.20);
  transition: width 0.22s ease;
}
:root[data-theme="dark"] .sidebar {
  background: linear-gradient(180deg, #101B33 0%, #0C1526 55%, #080F1E 100%);
  border-right: 1px solid var(--border);
}
.sidebar-logo {
  padding: 18px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.logo-lockup { display: flex; align-items: center; gap: 11px; min-width: 0; }
.logo-mark { width: 32px; height: 24px; color: #fff; flex-shrink: 0; }
.logo-nom { display: flex; flex-direction: column; min-width: 0; }
.logo-text {
  display: block; color: #fff; font-weight: 800; font-size: 17px;
  letter-spacing: 0.3px; line-height: 1.05;
}
.logo-sub { display: block; color: rgba(255,255,255,0.55); font-size: 10.5px; margin-top: 2px; }
.sidebar-collapse {
  border: none; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.7);
  width: 28px; height: 28px; border-radius: 8px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-collapse:hover { background: rgba(255,255,255,0.16); color: #fff; }
.sidebar-collapse svg { width: 16px; height: 16px; }

.sidebar-scroll { flex: 1; overflow-y: auto; padding: 10px 10px 4px; }
.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 999px; }
.nav-section { margin-bottom: 12px; }
.nav-section-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: rgba(255,255,255,0.38); padding: 6px 12px 6px;
}
.nav-list { list-style: none; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 11px; cursor: pointer;
  color: rgba(255,255,255,0.80); font-weight: 500; font-size: 13.5px;
  margin-bottom: 2px; transition: background 0.18s, transform 0.18s, color 0.18s;
  user-select: none; position: relative; white-space: nowrap;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.9; }
.nav-item:hover { background: rgba(255,255,255,0.08); transform: translateX(2px); }
.nav-item.active {
  background: linear-gradient(135deg, #FF9E2C, #F57C00);
  color: #fff; font-weight: 700;
  box-shadow: 0 6px 16px -6px rgba(245, 124, 0, 0.65);
}
.nav-item.active svg { opacity: 1; }
.nav-badge {
  margin-left: auto; background: var(--red); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}

.sidebar-bottom { padding: 10px; border-top: 1px solid rgba(255,255,255,0.1); }
.theme-switch {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: none; border-radius: 11px; cursor: pointer;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85);
  font: inherit; font-size: 13px; font-weight: 600; margin-bottom: 8px;
  transition: background 0.18s;
}
.theme-switch:hover { background: rgba(255,255,255,0.14); }
.theme-switch svg { width: 18px; height: 18px; }
.sidebar-footer {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 12px; cursor: pointer;
  transition: background 0.18s;
}
.sidebar-footer:hover { background: rgba(255,255,255,0.08); }
.user-avatar {
  width: 36px; height: 36px; border-radius: 11px;
  background: linear-gradient(135deg, #FF9E2C, #F57C00); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.user-meta { flex: 1; min-width: 0; }
.user-name { font-weight: 700; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-role { font-size: 10.5px; color: rgba(255,255,255,0.55); }
.btn-logout {
  border: none; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.75);
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.btn-logout:hover { background: var(--red); color: #fff; }
.btn-logout svg { width: 15px; height: 15px; }

/* Menu replié (bureau) */
.sidebar.collapsed { width: 74px; }
.sidebar.collapsed .logo-nom,
.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .theme-switch span,
.sidebar.collapsed .user-meta,
.sidebar.collapsed .btn-logout { display: none; }
.sidebar.collapsed .sidebar-logo { justify-content: center; }
.sidebar.collapsed .logo-mark { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 11px; }
.sidebar.collapsed .theme-switch { justify-content: center; }
.sidebar.collapsed .sidebar-footer { justify-content: center; }
.sidebar.collapsed + .main,
.sidebar.collapsed ~ .main { margin-left: 74px; }
body:has(.sidebar.collapsed) .main { margin-left: 74px; }

/* ================= ZONE PRINCIPALE ================= */
.main { margin-left: var(--sidebar-w); min-height: 100vh; transition: margin-left 0.22s ease; }
.topbar {
  background: var(--topbar-bg);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  padding: 14px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar-titre h1 { font-size: 20px; color: var(--text); font-weight: 800; letter-spacing: -0.3px; }
.topbar-sub { color: var(--text-muted); font-size: 12.5px; margin-top: 1px; }
.topbar-actions { display: flex; align-items: center; gap: 14px; }
.topbar-date { color: var(--text-muted); font-size: 13px; text-transform: capitalize; white-space: nowrap; }
.topbar-theme {
  border: 1px solid var(--border); background: var(--card); color: var(--text-muted);
  width: 38px; height: 38px; border-radius: 11px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all 0.18s;
}
.topbar-theme:hover { color: var(--orange); border-color: var(--orange); }
.topbar-theme svg { width: 18px; height: 18px; }
.screen-container { padding: 22px 26px 40px; }

/* ================= COMPOSANTS GÉNÉRIQUES ================= */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 20px;
}
.card h3 {
  color: var(--navy);
  font-size: 14.5px;
  margin-bottom: 14px;
  font-weight: 700;
}

/* --- Badges pilule --- */
.badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-green  { background: var(--green-bg);  color: var(--green); }
.badge-red    { background: var(--red-bg);    color: var(--red); }
.badge-orange { background: var(--orange-light); color: var(--orange); }
.badge-yellow { background: var(--yellow-bg); color: var(--yellow); }
.badge-blue   { background: var(--blue-bg);   color: var(--blue); }
.badge-grey   { background: var(--grey-bg); color: var(--text-muted); }

/* --- Tableaux --- */
.table-wrap { overflow-x: auto; }
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.data th {
  background: var(--card-soft);
  color: var(--text-muted);
  text-align: left;
  padding: 11px 12px;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
table.data th:first-child { border-radius: 10px 0 0 0; }
table.data th:last-child  { border-radius: 0 10px 0 0; }
table.data td { padding: 11px 12px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; color: var(--text); }
table.data tbody tr { transition: background 0.14s; }
table.data tbody tr:hover { background: var(--row-hover); }
table.data tr.total-row td {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
}
table.data tr.total-row:hover td { background: var(--navy); }
table.data tr.total-row td:first-child { border-radius: 0 0 0 10px; }
table.data tr.total-row td:last-child  { border-radius: 0 0 10px 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.pos { color: var(--green); font-weight: 600; }
.neg { color: var(--red); font-weight: 600; }

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  border-radius: var(--radius-btn);
  padding: 10px 17px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.18s, transform 0.18s, box-shadow 0.18s;
  font-family: inherit;
}
.btn:hover { filter: brightness(1.08); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-orange  { background: var(--orange); color: #fff; }
.btn-light   { background: var(--chip-bg); color: var(--text); }
.btn-danger  { background: var(--red); color: #fff; }
.card h3 { color: var(--text); }

/* ================= ACCUEIL ================= */
.dash-grid {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 18px;
  align-items: start;
}
.dash-left { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

/* --- Cartes KPI (style premium) --- */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.kpi-card {
  position: relative;
  overflow: hidden;
  background: var(--card-grad);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 16px 18px 14px;
  box-shadow: var(--shadow-sm), var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
/* halo décoratif dans le coin */
.kpi-card::after {
  content: '';
  position: absolute;
  top: -46px; right: -46px;
  width: 130px; height: 130px;
  border-radius: 50%;
  background: var(--kpi-accent, var(--navy));
  opacity: 0.07;
  pointer-events: none;
}
.kpi-card.k-green  { --kpi-accent: var(--green); }
.kpi-card.k-red    { --kpi-accent: var(--red); }
.kpi-card.k-orange { --kpi-accent: var(--orange); }
.kpi-card.k-blue   { --kpi-accent: var(--blue); }
.kpi-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 13px;
}
.kpi-ic {
  width: 40px; height: 40px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--kpi-accent, var(--navy)), color-mix(in srgb, var(--kpi-accent, var(--navy)) 72%, #000));
  box-shadow: 0 6px 14px -4px color-mix(in srgb, var(--kpi-accent, var(--navy)) 55%, transparent);
}
.kpi-ic svg { width: 19px; height: 19px; }
.kpi-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.kpi-hero {
  font-size: 25px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  white-space: nowrap;
}
.kpi-hero.pos { color: var(--green); }
.kpi-hero.neg { color: var(--red); }
.kpi-unit { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-left: 3px; }
.kpi-hero-label { font-size: 11px; color: var(--text-muted); margin: 3px 0 12px; }
.kpi-subs {
  display: flex;
  border-top: 1px solid var(--border);
  padding-top: 10px;
}
.kpi-sub { flex: 1; min-width: 0; }
.kpi-sub + .kpi-sub { border-left: 1px solid var(--border); padding-left: 12px; margin-left: 12px; }
.kpi-sub span { display: block; font-size: 10.5px; color: var(--text-muted); margin-bottom: 2px; }
.kpi-sub b { font-size: 13px; color: var(--text); white-space: nowrap; }
.kpi-sub b.pos { color: var(--green); }
.kpi-sub b.neg { color: var(--red); }

/* --- Boîte dette totale (rouge pleine, effet relief) --- */
.dette-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  border-radius: 16px;
  padding: 17px 22px;
  color: #fff;
  background: linear-gradient(135deg, #E04545 0%, #B02525 100%);
  box-shadow: 0 12px 28px -10px rgba(217, 56, 56, 0.55);
}
.dette-box .dette-titre { font-weight: 800; font-size: 14.5px; letter-spacing: 0.3px; }
.dette-box .dette-sous { font-size: 12px; opacity: 0.85; margin-top: 2px; }
.dette-box .dette-montant { font-size: 26px; font-weight: 800; white-space: nowrap; }

/* --- Mini-cartes véhicules --- */
.veh-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 14px;
}
.veh-card {
  position: relative;
  overflow: hidden;
  background: var(--card-grad);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm), var(--shadow);
  padding: 16px 17px 15px;
  border-top: 3px solid var(--veh-accent, var(--navy));
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.veh-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.veh-card.vs-green  { --veh-accent: var(--green); }
.veh-card.vs-orange { --veh-accent: var(--orange); }
.veh-card.vs-red    { --veh-accent: var(--red); }
.veh-card.vs-blue   { --veh-accent: var(--blue); }
.veh-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.veh-id { font-weight: 800; color: var(--navy); font-size: 15px; }
.veh-sub { color: var(--text-muted); font-size: 12px; margin-bottom: 12px; }
.veh-stats { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.veh-stat { display: flex; justify-content: space-between; }
.veh-stat span:first-child { color: var(--text-muted); }
.veh-stat span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- Panneau alertes --- */
.alert-panel { display: flex; flex-direction: column; gap: 10px; }
.alert-item {
  display: flex;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.45;
  border-left: 4px solid;
}
.alert-item.a-red    { background: var(--red-bg);    border-color: var(--red); color: var(--text); }
.alert-item.a-orange { background: var(--orange-light); border-color: var(--orange); color: var(--text); }
.alert-item .a-icon { flex-shrink: 0; }
.alert-item .a-icon svg { width: 17px; height: 17px; }
.alert-item.a-red .a-icon { color: var(--red); }
.alert-item.a-orange .a-icon { color: var(--orange); }
.alert-item b { display: block; margin-bottom: 1px; color: var(--text); }
.alert-empty {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--green);
  padding: 22px 10px;
  font-size: 13px;
}
.alert-empty svg { width: 18px; height: 18px; }
.card h3 .h3-ic { width: 16px; height: 16px; vertical-align: -3px; color: var(--orange); margin-right: 4px; }

/* --- Graphiques (couleurs pilotées par le thème) --- */
.chart-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 18px;
}
.chart-svg { width: 100%; height: auto; display: block; }
.bar-normal { fill: var(--accent); }
.bar-current { fill: var(--orange); }
.chart-axis { stroke: var(--border); stroke-width: 1; }
.chart-label { fill: var(--text-muted); }
.chart-label.current { fill: var(--orange); font-weight: 700; }
.donut-center { fill: var(--text); }
.donut-center-sub { fill: var(--text-muted); }
.seg-green { stroke: var(--green); } .seg-orange { stroke: var(--orange); }
.seg-red { stroke: var(--red); } .seg-blue { stroke: var(--blue); }
.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text);
}
.donut-legend .dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  margin-right: 7px;
}
.dot.d-green { background: var(--green); } .dot.d-orange { background: var(--orange); }
.dot.d-red { background: var(--red); } .dot.d-blue { background: var(--blue); }
.veh-id svg { width: 15px; height: 15px; vertical-align: -2px; color: var(--veh-accent, var(--navy)); }
.dette-titre svg { width: 16px; height: 16px; vertical-align: -3px; }

/* --- Carte de flotte 2D premium --- */
.fleet-map {
  position: relative;
  height: 260px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(1200px 300px at 30% -10%, rgba(30, 95, 217, 0.10), transparent 60%),
    linear-gradient(160deg, var(--bg-2), var(--card-soft));
  border: 1px solid var(--border);
}
.fleet-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-road { fill: none; stroke: var(--border); stroke-width: 12; stroke-linecap: round; opacity: 0.9; }
.map-road.thin { stroke-width: 6; opacity: 0.6; }
.fleet-pins { pointer-events: none; }
.map-pin path { fill: var(--pin, var(--blue)); }
.map-pin-dot { fill: #fff; }
.map-pin-label { fill: var(--text-muted); font-size: 11px; font-weight: 700; }
.map-pulse { fill: var(--pin, var(--blue)); opacity: 0.18; animation: map-pulse 2.4s ease-out infinite; }
@keyframes map-pulse { 0% { r: 8; opacity: 0.28; } 100% { r: 22; opacity: 0; } }
.map-green { --pin: var(--green); } .map-orange { --pin: var(--orange); }
.map-red { --pin: var(--red); } .map-blue { --pin: var(--blue); }

/* --- En-tête d'écran + filtres --- */
.screen-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filters select {
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  background: var(--input-bg);
  color: var(--text);
}

/* --- Chips de synthèse --- */
.chips-row { display: flex; gap: 12px; flex-wrap: wrap; }
.stat-chip {
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 10px 16px;
  min-width: 130px;
}
.stat-chip span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.stat-chip b { font-size: 15px; color: var(--text); white-space: nowrap; }
.stat-chip b.pos { color: var(--green); }
.stat-chip b.neg { color: var(--red); }

/* --- Fenêtre de saisie (modale) --- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 37, 64, 0.55);
  z-index: 300;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 14px;
  overflow-y: auto;
}
.modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-modal);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.35);
  width: 100%;
  max-width: 580px;
  padding: 22px 24px;
  animation: modal-pop 0.16s ease;
}
@keyframes modal-pop {
  from { transform: translateY(10px) scale(0.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.modal h2 {
  color: var(--text);
  font-size: 17px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal .modal-close {
  border: none;
  background: var(--chip-bg);
  border-radius: 9px;
  width: 30px; height: 30px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-grid .span2 { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.field input, .field select, .field textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 10px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--input-bg);
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(15, 61, 145, 0.14);
}
.field .hint { font-size: 11px; color: var(--text-muted); }
.check-field {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--card-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 10px 12px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.check-field input { width: 17px; height: 17px; accent-color: var(--orange); cursor: pointer; }

/* Boîte de calcul automatique dans le formulaire */
.calc-box {
  background: var(--card-soft);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 13px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.calc-box .calc-item span { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 2px; }
.calc-box .calc-item b { font-size: 17px; color: var(--text); white-space: nowrap; }
.calc-box .calc-item b.pos { color: var(--green); }
.calc-box .calc-item b.neg { color: var(--red); }

/* Lignes de déduction dynamiques */
.ded-row {
  display: grid;
  grid-template-columns: 1fr 130px 34px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.ded-row input {
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--input-bg);
}
.btn-suppr-ded {
  border: none;
  background: var(--red-bg);
  color: var(--red);
  border-radius: 8px;
  height: 34px;
  cursor: pointer;
  font-size: 14px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
.icon-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 15px;
  padding: 3px 5px;
  border-radius: 8px;
  color: var(--text-muted);
}
.icon-btn:hover { background: var(--chip-bg); color: var(--text); }
.icon-btn svg { width: 16px; height: 16px; vertical-align: middle; }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr; }
}

/* --- Projets & Simulation --- */
.projet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 16px;
}
.projet-card {
  background: var(--card-grad);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow-sm), var(--shadow);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.projet-nom { font-weight: 800; color: var(--text); font-size: 15px; }
.brk { border: 1px solid var(--border); border-radius: 11px; padding: 10px 13px; }
.brk-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  padding: 3px 0;
  color: var(--text);
}
.brk-row span:first-child { color: var(--text-muted); }
.brk-total {
  display: flex;
  justify-content: space-between;
  border-top: 2px solid var(--navy);
  margin-top: 6px;
  padding-top: 8px;
  font-weight: 800;
  color: var(--navy);
  font-size: 14px;
}
.proj-slider { width: 100%; accent-color: var(--orange); cursor: pointer; }
.proj-projections {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.proj-projections .pp {
  background: var(--card-soft);
  border-radius: 10px;
  padding: 8px 10px;
}
.proj-projections .pp span { display: block; font-size: 10px; color: var(--text-muted); margin-bottom: 2px; }
.proj-projections .pp b { font-size: 12.5px; color: var(--navy); white-space: nowrap; }
.jauge-wrap { margin-top: 2px; }
.jauge-titre {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.jauge-track {
  height: 14px;
  background: var(--chip-bg);
  border-radius: 999px;
  overflow: hidden;
}
.jauge-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.25s ease;
  background: var(--navy);
}
.jauge-fill.jauge-ok { background: linear-gradient(90deg, #22C55E, var(--green)); }
.jauge-fill.jauge-warn { background: linear-gradient(90deg, #FF9E2C, var(--orange)); }
.jauge-fill.jauge-bad { background: linear-gradient(90deg, #F87171, var(--red)); }
.jauge-titre svg { width: 14px; height: 14px; vertical-align: -2px; color: var(--orange); }
.projet-actions .proj-statut {
  border: 1px solid var(--border); background: var(--input-bg); color: var(--text);
  border-radius: var(--radius-input); padding: 7px 9px; font: inherit; font-size: 12.5px;
}
.jauge-legende {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
}
.projet-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: auto;
}
.projet-actions select {
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 7px 9px;
  font: inherit;
  font-size: 12.5px;
  background: var(--input-bg);
  color: var(--text);
}

/* ================= CONNEXION / INSCRIPTION (WOYOTRACK) ================= */
body.auth-mode .sidebar,
body.auth-mode .main,
body.auth-mode .hamburger,
body.auth-mode .sidebar-overlay { display: none; }

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: linear-gradient(135deg, #0F2540 0%, #16365C 55%, #1F4A7E 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 14px;
  overflow-y: auto;
}
.auth-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: 0 30px 70px -18px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 460px;
  padding: 30px 30px 24px;
  margin: auto 0;
}
.auth-card.large { max-width: 580px; }
.auth-titre {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.auth-logo-mark { width: 34px; height: 26px; flex-shrink: 0; }
.auth-logo {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: 0.5px;
  text-align: center;
}
.auth-sub {
  text-align: center;
  color: var(--text-muted);
  font-size: 12.5px;
  margin: 5px 0 22px;
}
.auth-tabs {
  display: flex;
  background: var(--chip-bg);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 18px;
}
.auth-tabs button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 10px;
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-muted);
  cursor: pointer;
}
.auth-tabs button.active { background: var(--navy); color: #fff; }
.auth-card .field { margin-bottom: 13px; }
.auth-btn { width: 100%; justify-content: center; padding: 12px; font-size: 14.5px; margin-top: 4px; }

/* Écrans d'auth secondaires (mot de passe oublié, en attente, suspendu…) */
.auth-h2 { font-family: var(--font-titre); font-size: 20px; font-weight: 800; color: var(--text); margin: 8px 0 8px; text-align: center; }
.auth-p { color: var(--text-muted); font-size: 14px; line-height: 1.55; text-align: center; margin: 0 0 12px; }
.auth-picto { display: flex; justify-content: center; margin: 6px 0 8px; }
.auth-picto svg { width: 46px; height: 46px; color: var(--navy); stroke-width: 1.6; }
.auth-ok { background: var(--green-bg); color: var(--green); border: 1px solid var(--green); border-radius: 12px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; text-align: left; }
.auth-ok svg { width: 16px; height: 16px; flex-shrink: 0; }
.auth-note {
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 14px;
  line-height: 1.5;
}
.auth-erreur {
  background: var(--red-bg);
  color: var(--red);
  border-radius: 9px;
  padding: 10px 13px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 13px;
}
.auth-footer {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  margin-top: 18px;
  text-align: center;
}

/* Assistant de premier remplissage (onboarding) */
.onb-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 20px; }
.onb-dot { width: 10px; height: 10px; border-radius: 50%; background: #DEE6EF; }
.onb-dot.done { background: var(--navy); }
.onb-dot.active { background: var(--orange); transform: scale(1.25); }
.onb-titre { font-size: 16.5px; font-weight: 800; color: var(--text); margin-bottom: 4px; display: flex; align-items: center; gap: 9px; }
.onb-titre svg { width: 20px; height: 20px; color: var(--orange); flex-shrink: 0; }
.auth-erreur svg { width: 14px; height: 14px; vertical-align: -2px; }
.onb-actions .btn svg { width: 15px; height: 15px; }
#onb-importer svg, #onb-ajout-veh svg { width: 15px; height: 15px; }
.onb-texte { font-size: 13px; color: var(--text-muted); margin-bottom: 16px; line-height: 1.5; }
.veh-onb-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 34px;
  gap: 8px;
  margin-bottom: 8px;
}
.veh-onb-row input {
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 8px 10px;
  font: inherit;
  font-size: 13px;
  min-width: 0;
}
.onb-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }

/* Bouton de déconnexion (pied du menu) */
.btn-logout {
  border: none;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
}
.btn-logout:hover { background: var(--red); }

/* ============================================================
   DATAGRID PREMIUM (Véhicules & autres listes)
   ============================================================ */
.dg-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.filtre-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filtre-chip {
  border: 1px solid var(--border); background: var(--card); color: var(--text-muted);
  border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 12.5px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all 0.16s;
}
.filtre-chip span { background: var(--chip-bg); border-radius: 999px; padding: 1px 7px; font-size: 11px; }
.filtre-chip:hover { border-color: var(--navy); color: var(--text); }
.filtre-chip.actif { background: var(--navy); border-color: var(--navy); color: #fff; }
.filtre-chip.actif span { background: rgba(255,255,255,0.22); color: #fff; }

.dg-search {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--radius-input);
  padding: 0 12px; background: var(--input-bg); min-width: 240px;
}
.dg-search svg { width: 16px; height: 16px; color: var(--text-faint); flex-shrink: 0; }
.dg-search input { border: none; background: transparent; padding: 10px 0; font: inherit; font-size: 13px; color: var(--text); width: 100%; outline: none; }

.datagrid th.th-tri { cursor: pointer; user-select: none; }
.datagrid th.th-tri:hover { color: var(--navy); }
.datagrid th .tri-actif { width: 13px; height: 13px; vertical-align: -2px; color: var(--orange); }
.datagrid td { vertical-align: middle; }
.datagrid .mono { font-variant-numeric: tabular-nums; letter-spacing: 0.3px; }
.datagrid .muted { color: var(--text-faint); }

.dg-veh { display: flex; align-items: center; gap: 11px; }
.dg-avatar {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.dg-avatar svg { width: 19px; height: 19px; }
.dg-green  { background: linear-gradient(135deg, #22C55E, var(--green)); }
.dg-orange { background: linear-gradient(135deg, #FF9E2C, var(--orange)); }
.dg-red    { background: linear-gradient(135deg, #F87171, var(--red)); }
.dg-blue   { background: linear-gradient(135deg, #60A5FA, var(--blue)); }
.dg-veh-txt { display: flex; flex-direction: column; line-height: 1.25; }
.dg-veh-txt b { color: var(--text); font-weight: 700; font-family: var(--font-titre); }
.dg-veh-txt span { color: var(--text-muted); font-size: 12px; }

.dg-actions-cell { text-align: right; width: 48px; }
.dg-footer {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px; flex-wrap: wrap;
}
.dg-count { color: var(--text-muted); font-size: 12.5px; }
.dg-pagination { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); }
.dg-page-btn {
  border: 1px solid var(--border); background: var(--card); color: var(--text);
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.dg-page-btn:hover:not(:disabled) { border-color: var(--navy); color: var(--navy); }
.dg-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.dg-page-btn svg { width: 16px; height: 16px; }
.dg-vide {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-muted); padding: 34px 10px; font-size: 13px;
}
.dg-vide svg { width: 28px; height: 28px; color: var(--text-faint); }

/* Menu d'actions flottant */
.menu-actions {
  position: fixed; z-index: 350; width: 190px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-hover);
  padding: 6px; animation: modal-pop 0.13s ease;
}
.menu-action {
  display: flex; align-items: center; gap: 10px; width: 100%;
  border: none; background: transparent; color: var(--text);
  padding: 9px 10px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 13px; text-align: left;
}
.menu-action svg { width: 16px; height: 16px; color: var(--text-muted); }
.menu-action:hover { background: var(--row-hover); }
.menu-action.danger { color: var(--red); }
.menu-action.danger svg { color: var(--red); }

/* ============================================================
   VERSEMENTS (style bancaire)
   ============================================================ */
.vs-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 1.4fr;
  gap: 14px;
}
.vs-stat, .vs-taux {
  background: var(--card-grad); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-sm), var(--shadow);
  padding: 15px 17px;
}
.vs-stat { display: flex; align-items: center; gap: 12px; }
.vs-stat-ic {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; color: #fff;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--kpi-accent, var(--navy)), color-mix(in srgb, var(--kpi-accent, var(--navy)) 72%, #000));
}
.vs-stat.k-blue .vs-stat-ic, .vs-stat-ic.k-blue { --kpi-accent: var(--blue); }
.vs-stat-ic.k-green { --kpi-accent: var(--green); }
.vs-stat-ic.k-red { --kpi-accent: var(--red); }
.vs-stat-ic svg { width: 19px; height: 19px; }
.vs-stat span { display: block; font-size: 11.5px; color: var(--text-muted); margin-bottom: 2px; }
.vs-stat b { font-size: 16px; color: var(--text); font-family: var(--font-titre); }
.vs-taux-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.vs-taux-head span { font-size: 11.5px; color: var(--text-muted); }
.vs-taux-head b { font-size: 20px; font-family: var(--font-titre); }
.vs-taux-track { height: 12px; background: var(--chip-bg); border-radius: 999px; overflow: hidden; }
.vs-taux-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; background: var(--green); }
.taux-ok { color: var(--green); } .vs-taux-fill.taux-ok { background: linear-gradient(90deg, #22C55E, var(--green)); }
.taux-warn { color: var(--yellow); } .vs-taux-fill.taux-warn { background: linear-gradient(90deg, #FBBF24, var(--yellow)); }
.taux-bad { color: var(--red); } .vs-taux-fill.taux-bad { background: linear-gradient(90deg, #F87171, var(--red)); }

.vs-sem { display: flex; flex-direction: column; line-height: 1.3; }
.vs-sem b { color: var(--text); font-weight: 600; }
.vs-sem span { color: var(--text-muted); font-size: 11.5px; }
tr.row-alerte td { background: color-mix(in srgb, var(--red) 8%, transparent); }
tr.row-alerte:hover td { background: color-mix(in srgb, var(--red) 14%, transparent); }

/* Graphique attendu vs versé */
.bar-track { fill: var(--chip-bg); }
.bar-ok { fill: var(--green); } .bar-bad { fill: var(--red); } .bar-wait { fill: var(--yellow); }
.chart-legende {
  display: flex; gap: 16px; flex-wrap: wrap; justify-content: center;
  margin-top: 12px; font-size: 12px; color: var(--text-muted);
}
.chart-legende .lg { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.lg-track { background: var(--chip-bg); border: 1px solid var(--border); }
.lg-ok { background: var(--green); } .lg-bad { background: var(--red); } .lg-wait { background: var(--yellow); }

@media (max-width: 900px) {
  .vs-summary { grid-template-columns: 1fr 1fr; }
  .vs-taux { grid-column: 1 / -1; }
}

/* ============================================================
   DÉPENSES (style comptable)
   ============================================================ */
.dep-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: start; }
.dep-vidanges { grid-template-columns: 1fr; }
.dep-repartition { display: flex; flex-direction: column; gap: 12px; }
.dep-bar-row { display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: 12px; }
.dep-bar-label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text); min-width: 0; }
.dep-bar-label svg { width: 15px; height: 15px; color: var(--text-muted); flex-shrink: 0; }
.dep-bar-label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dep-bar-track { height: 10px; background: var(--chip-bg); border-radius: 999px; overflow: hidden; }
.dep-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #FF9E2C, var(--orange)); transition: width 0.4s ease; }
.dep-bar-val { font-size: 12.5px; font-weight: 700; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; }
.dep-bar-val em { color: var(--text-muted); font-weight: 500; font-style: normal; font-size: 11px; }

.dep-type { display: flex; align-items: center; gap: 11px; }
.dep-type-ic {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: var(--chip-bg); color: var(--orange);
  display: flex; align-items: center; justify-content: center;
}
.dep-type-ic svg { width: 17px; height: 17px; }

@media (max-width: 980px) { .dep-cols { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .dep-bar-row { grid-template-columns: 110px 1fr; } .dep-bar-val { grid-column: 2; text-align: right; } }

/* ============================================================
   GÉRANT & CHAUFFEURS
   ============================================================ */
.gerant-hero {
  background: linear-gradient(135deg, #143E93 0%, #0F3D91 55%, #0A2C6B 100%);
  border-radius: 20px; padding: 22px 24px; color: #fff;
  box-shadow: var(--shadow);
}
:root[data-theme="dark"] .gerant-hero { border: 1px solid var(--border); }
.gerant-profil { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
.gerant-avatar {
  width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0;
  background: linear-gradient(135deg, #FF9E2C, #F57C00); color: #fff;
  font-family: var(--font-titre); font-weight: 800; font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px -6px rgba(245,124,0,0.6);
}
.gerant-nom { font-family: var(--font-titre); font-weight: 800; font-size: 20px; }
.gerant-sous { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; color: rgba(255,255,255,0.7); font-size: 12.5px; }
.gerant-sous span { display: inline-flex; align-items: center; gap: 6px; }
.gerant-sous svg { width: 14px; height: 14px; }
.gerant-profil #btn-modif-gerant { margin-left: auto; background: rgba(255,255,255,0.16); color: #fff; }
.gerant-profil #btn-modif-gerant:hover { background: rgba(255,255,255,0.26); }
.gerant-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 20px;
}
.gerant-stat {
  background: rgba(255,255,255,0.10); border: 1px solid rgba(255,255,255,0.14);
  border-radius: 13px; padding: 12px 14px;
}
.gerant-stat span { display: block; font-size: 11px; color: rgba(255,255,255,0.65); margin-bottom: 3px; }
.gerant-stat b { font-size: 17px; font-family: var(--font-titre); color: #fff; }
.gerant-stat b.pos { color: #7DF0A8; } .gerant-stat b.neg { color: #FF9B9B; }
.gerant-stat b.taux-ok { color: #7DF0A8; } .gerant-stat b.taux-warn { color: #FFD98A; } .gerant-stat b.taux-bad { color: #FF9B9B; }
.gerant-stat .vs-taux-track { background: rgba(255,255,255,0.18); height: 7px; }

.pers-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.pers-card {
  background: var(--card-grad); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px; box-shadow: var(--shadow-sm), var(--shadow);
  transition: transform 0.18s, box-shadow 0.18s;
}
.pers-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.pers-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 13px; }
.pers-avatar {
  width: 44px; height: 44px; border-radius: 13px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--navy-light), var(--navy)); color: #fff;
  font-family: var(--font-titre); font-weight: 700; font-size: 16px;
  display: flex; align-items: center; justify-content: center;
}
.pers-id { flex: 1; min-width: 0; }
.pers-id b { display: block; color: var(--text); font-family: var(--font-titre); font-size: 14.5px; }
.pers-id span { color: var(--text-muted); font-size: 12px; }
.pers-rows { display: flex; flex-direction: column; gap: 9px; }
.pers-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text); }
.pers-row svg { width: 15px; height: 15px; color: var(--text-faint); flex-shrink: 0; }
.pers-row span { flex: 1; min-width: 0; }
.pers-row .badge { margin-left: auto; }

@media (max-width: 720px) { .gerant-stats { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   DOCUMENTS & ÉCHÉANCES
   ============================================================ */
.ech-list { display: flex; flex-direction: column; gap: 9px; }
.ech-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px; border-radius: 12px; border-left: 4px solid;
}
.ech-item.a-red { background: var(--red-bg); border-color: var(--red); }
.ech-item.a-orange { background: var(--orange-light); border-color: var(--orange); }
.ech-ic {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--text);
}
.ech-item.a-red .ech-ic { color: var(--red); } .ech-item.a-orange .ech-ic { color: var(--orange); }
.ech-ic svg { width: 18px; height: 18px; }
.ech-txt { flex: 1; min-width: 0; }
.ech-txt b { display: block; color: var(--text); font-size: 13.5px; }
.ech-txt span { color: var(--text-muted); font-size: 12px; }

.doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 16px; align-items: start; }
.doc-veh-titre { display: flex; align-items: center; gap: 11px; }
.doc-list { display: flex; flex-direction: column; gap: 12px; }
.doc-item { display: flex; align-items: center; gap: 12px; }
.doc-item-ic {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.doc-item-ic svg { width: 19px; height: 19px; }
.doc-green { background: var(--green-bg); color: var(--green); }
.doc-orange { background: var(--orange-light); color: var(--orange); }
.doc-red { background: var(--red-bg); color: var(--red); }
.doc-item-body { flex: 1; min-width: 0; }
.doc-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.doc-item-head b { color: var(--text); font-size: 13.5px; }
.doc-item-sub { color: var(--text-muted); font-size: 11.5px; margin: 2px 0 6px; }
.txt-orange { color: var(--orange); font-weight: 700; }
.doc-bar-track { height: 6px; background: var(--chip-bg); border-radius: 999px; overflow: hidden; }
.doc-bar-fill { height: 100%; border-radius: 999px; }
.doc-green-fill { background: var(--green); } .doc-orange-fill { background: var(--orange); } .doc-red-fill { background: var(--red); }

/* ============================================================
   PARAMÈTRES
   ============================================================ */
.param-cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
.param-desc { color: var(--text-muted); font-size: 12.5px; margin-bottom: 14px; line-height: 1.5; }
.theme-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.theme-opt {
  border: 2px solid var(--border); background: var(--card); border-radius: 14px;
  padding: 12px; cursor: pointer; text-align: left; transition: all 0.18s;
}
.theme-opt:hover { border-color: var(--navy-light); }
.theme-opt.actif { border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-light); }
.theme-apercu {
  height: 62px; border-radius: 10px; padding: 9px; margin-bottom: 10px;
  display: flex; flex-direction: column; gap: 5px; border: 1px solid var(--border);
}
.theme-apercu span { border-radius: 4px; height: 8px; }
.theme-apercu span:first-child { width: 60%; }
.theme-apercu span:nth-child(2) { width: 85%; }
.theme-apercu span:nth-child(3) { width: 40%; }
.theme-apercu-light { background: #F5F7FA; }
.theme-apercu-light span { background: #C7D2E0; }
.theme-apercu-light span:nth-child(2) { background: #0F3D91; }
.theme-apercu-dark { background: #0A1120; }
.theme-apercu-dark span { background: #2A3B5C; }
.theme-apercu-dark span:nth-child(2) { background: #6795F5; }
.theme-opt-lbl { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--text); }
.theme-opt-lbl svg { width: 15px; height: 15px; color: var(--orange); }
.liste-item button svg { width: 11px; height: 11px; }

@media (max-width: 980px) { .param-cols { grid-template-columns: 1fr; } }

/* ============================================================
   CONNEXION / INSCRIPTION V2 (mise en page marketing)
   ============================================================ */
/* Voile dégradé adapté au thème (clair par défaut, sombre en dark) */
:root {
  --auth-scrim: linear-gradient(90deg, rgba(245,247,250,0.97) 0%, rgba(245,247,250,0.90) 33%, rgba(245,247,250,0.52) 60%, rgba(245,247,250,0.34) 100%);
  --auth-scrim-mobile: rgba(245,247,250,0.72);
  --auth-glass: rgba(255,255,255,0.90);
  --auth-input: #FFFFFF;
  --auth-line: var(--border);
  --auth-chip: var(--chip-bg);
  --auth-bar: rgba(255,255,255,0.86);
}
:root[data-theme="dark"] {
  --auth-scrim: linear-gradient(90deg, rgba(10,17,32,0.97) 0%, rgba(10,17,32,0.86) 32%, rgba(10,17,32,0.30) 62%, rgba(10,17,32,0.20) 100%);
  --auth-scrim-mobile: rgba(10,17,32,0.80);
  --auth-glass: rgba(17,25,43,0.72);
  --auth-input: rgba(255,255,255,0.06);
  --auth-line: rgba(255,255,255,0.15);
  --auth-chip: rgba(255,255,255,0.08);
  --auth-bar: rgba(8,13,24,0.78);
}

.auth2 {
  position: fixed; inset: 0; z-index: 500; overflow-y: auto;
  display: flex; flex-direction: column; background: var(--bg);
}
.auth2::before {
  content: ''; position: absolute; inset: 0;
  background: var(--bg) url('../images/hero-connexion.png') no-repeat center right / cover;
}
.auth2-scrim { position: absolute; inset: 0; background: var(--auth-scrim); }
.auth2-main {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column;
  width: 100%; max-width: 1360px; margin: 0 auto; padding: 22px 44px;
}
.auth2-header { display: flex; justify-content: space-between; align-items: center; }
.auth2-header .logo-mark { width: 34px; height: 26px; color: var(--navy); }
:root[data-theme="dark"] .auth2-header .logo-mark { color: #fff; }
.auth2-header .auth-logo { color: var(--text); font-size: 19px; font-weight: 800; letter-spacing: 0.3px; }
.auth2-theme {
  display: flex; align-items: center; gap: 8px;
  background: var(--auth-chip); border: 1px solid var(--auth-line);
  color: var(--text); border-radius: 999px; padding: 8px 15px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600;
}
.auth2-theme:hover { filter: brightness(1.05); }
.auth2-theme svg { width: 15px; height: 15px; }

.auth2-body { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 24px 0; }
.auth2-left { flex: 1; max-width: 470px; }
.auth2-h1 { font-family: var(--font-titre); font-weight: 800; font-size: 40px; line-height: 1.1; letter-spacing: -0.5px; color: var(--text); }
.auth2-p { color: var(--text-muted); font-size: 14.5px; margin-top: 14px; max-width: 400px; line-height: 1.55; }
.auth2-features { list-style: none; display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.auth2-features li { display: flex; gap: 13px; align-items: flex-start; }
.feat-ic { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feat-ic svg { width: 20px; height: 20px; }
.feat-blue { background: rgba(59,130,246,0.16); color: #2D7DD2; }
.feat-orange { background: rgba(245,124,0,0.16); color: #F57C00; }
.feat-green { background: rgba(22,163,74,0.16); color: #16A34A; }
.feat-red { background: rgba(220,38,38,0.16); color: #DC2626; }
:root[data-theme="dark"] .feat-blue { color: #60A5FA; }
:root[data-theme="dark"] .feat-orange { color: #F9A24A; }
:root[data-theme="dark"] .feat-green { color: #4ADE80; }
:root[data-theme="dark"] .feat-red { color: #F87171; }
.auth2-features b { display: block; color: var(--text); font-size: 14.5px; }
.auth2-features li div span { color: var(--text-muted); font-size: 12.5px; line-height: 1.4; }

.auth2-right { width: 410px; flex-shrink: 0; }
.auth-card2 {
  background: var(--auth-glass); backdrop-filter: blur(18px) saturate(1.3);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--auth-line); border-radius: 22px;
  padding: 26px 26px 24px; color: var(--text);
  box-shadow: 0 34px 80px -20px rgba(0,0,0,0.35);
}
:root[data-theme="dark"] .auth-card2 { box-shadow: 0 34px 80px -20px rgba(0,0,0,0.65); }
.ac-logo { display: flex; justify-content: center; margin-bottom: 10px; }
.ac-logo .auth-logo-mark { width: 52px; height: 40px; }
/* dans la carte claire, le trait blanc du logo doit devenir bleu */
.auth-card2 .auth-logo-mark polyline:first-child { stroke: var(--navy); }
:root[data-theme="dark"] .auth-card2 .auth-logo-mark polyline:first-child { stroke: #fff; }
.ac-titre { text-align: center; font-family: var(--font-titre); font-weight: 800; font-size: 22px; color: var(--text); }
.ac-sous { text-align: center; color: var(--text-muted); font-size: 12.5px; margin: 4px 0 18px; }
.auth-card2 .field { margin-bottom: 13px; }
.auth-card2 .field label { color: var(--text-muted); font-size: 12px; font-weight: 600; }
.auth-card2 input {
  background: var(--auth-input); border: 1px solid var(--auth-line);
  color: var(--text); border-radius: 11px; padding: 11px 12px; font: inherit; font-size: 13.5px; width: 100%;
}
.auth-card2 input::placeholder { color: var(--text-faint); }
.auth-card2 input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(245,124,0,0.25); }

.inp-ic { position: relative; display: flex; align-items: center; }
.inp-lead { position: absolute; left: 12px; display: flex; color: var(--text-faint); pointer-events: none; }
.inp-lead svg { width: 16px; height: 16px; }
.inp-ic input { padding-left: 38px !important; padding-right: 40px !important; }
.inp-eye { position: absolute; right: 6px; background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 7px; display: flex; }
.inp-eye:hover { color: var(--text); }
.inp-eye svg { width: 16px; height: 16px; }

.inp-tel { display: flex; }
.tel-prefix {
  display: flex; align-items: center; gap: 5px; white-space: nowrap;
  background: var(--auth-chip); border: 1px solid var(--auth-line); border-right: none;
  border-radius: 11px 0 0 11px; padding: 0 12px; color: var(--text); font-size: 13px; font-weight: 600;
}
.inp-tel input { border-radius: 0 11px 11px 0 !important; }

.pw-meter { margin-top: 8px; }
.pw-bars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.pw-bars span { height: 4px; border-radius: 999px; background: var(--auth-chip); transition: background 0.2s; }
.pw-bars[data-niv="1"] span:nth-child(-n+1) { background: var(--red); }
.pw-bars[data-niv="2"] span:nth-child(-n+2) { background: #F59E0B; }
.pw-bars[data-niv="3"] span:nth-child(-n+3) { background: #FBBF24; }
.pw-bars[data-niv="4"] span { background: #22C55E; }
.pw-lbls { display: flex; justify-content: space-between; margin-top: 5px; }
.pw-lbls em { font-style: normal; font-size: 10.5px; color: var(--text-faint); }

.ac-row { display: flex; justify-content: space-between; align-items: center; margin: 2px 0 15px; font-size: 12.5px; }
.ac-check { display: flex; align-items: center; gap: 7px; color: var(--text-muted); cursor: pointer; }
.ac-check input { width: 15px; height: 15px; accent-color: var(--orange); flex-shrink: 0; }
.ac-terms { align-items: flex-start; margin: 4px 0 15px; font-size: 11.5px; line-height: 1.4; }
.ac-lien { color: var(--orange); cursor: pointer; }
.ac-lien:hover { text-decoration: underline; }
.auth-card2 .auth-btn { width: 100%; justify-content: center; padding: 12px; font-size: 14.5px; }
.auth-card2 .auth-btn svg { width: 16px; height: 16px; }
.ac-sep { display: flex; align-items: center; gap: 12px; color: var(--text-faint); font-size: 12px; margin: 16px 0; }
.ac-sep::before, .ac-sep::after { content: ''; flex: 1; height: 1px; background: var(--auth-line); }
.ac-social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ac-social-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--auth-input); border: 1px solid var(--auth-line); color: var(--text);
  border-radius: 12px; padding: 10px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
}
.ac-social-btn:hover { filter: brightness(0.98); border-color: var(--orange); }
.ac-switch { text-align: center; margin-top: 16px; font-size: 12.5px; color: var(--text-muted); }
.ac-switch a { color: var(--orange); cursor: pointer; font-weight: 700; }
.ac-switch a:hover { text-decoration: underline; }
.auth-card2 .auth-erreur { background: var(--red-bg); color: var(--red); border: 1px solid var(--red); }

.auth2-footer { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 11.5px; padding-top: 8px; }

.auth2-stats {
  position: relative; z-index: 1;
  background: var(--auth-bar); backdrop-filter: blur(10px);
  border-top: 1px solid var(--auth-line);
  display: flex; justify-content: space-around; gap: 16px; flex-wrap: wrap;
  padding: 16px 44px;
}
.a2stat { display: flex; align-items: center; gap: 12px; }
.a2stat b { display: block; font-family: var(--font-titre); font-size: 18px; color: var(--text); }
.a2stat div span { color: var(--text-muted); font-size: 11.5px; }

@media (max-width: 900px) {
  .auth2-left { display: none; }
  .auth2-body { justify-content: center; padding: 10px 0; }
  .auth2-right { width: 100%; max-width: 420px; }
  .auth2-main { padding: 18px 16px; }
  .auth2-stats { display: none; }
  .auth2-scrim { background: var(--auth-scrim-mobile); }
}

/* --- Message de confirmation (toast) --- */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 600;
  background: var(--navy);
  color: #fff;
  padding: 13px 20px;
  border-radius: 11px;
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 14px 34px -8px rgba(15, 37, 64, 0.5);
  animation: toast-in 0.22s ease;
  max-width: 90vw;
}
@keyframes toast-in {
  from { transform: translateY(14px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* --- Gestion des listes (Paramètres) --- */
.liste-bloc { margin-bottom: 4px; }
.liste-items { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 12px; }
.liste-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--chip-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 7px 5px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.liste-item button {
  border: none;
  background: var(--border);
  color: var(--text);
  width: 19px; height: 19px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
}
.liste-item button:hover { background: var(--red); color: #fff; }
.liste-ajout { display: flex; gap: 8px; }
.liste-ajout input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 8px 11px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: var(--input-bg);
}

/* --- Bandeau mode démonstration --- */
.demo-banner {
  margin: 18px 26px 0;
  background: var(--orange-light);
  border: 1px solid var(--orange);
  border-radius: var(--radius);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text);
}
.demo-banner .btn { flex-shrink: 0; }
@media (max-width: 820px) {
  .demo-banner { margin: 14px 14px 0; }
}

/* --- Divers --- */
.placeholder-screen {
  text-align: center;
  padding: 70px 20px;
  color: var(--text-muted);
}
.placeholder-screen .ph-icon { font-size: 42px; margin-bottom: 12px; }
.placeholder-screen h2 { color: var(--navy); margin-bottom: 8px; font-size: 18px; }

/* ================= RESPONSIVE (mobile) ================= */
.hamburger {
  display: none;
  position: fixed;
  top: 12px; left: 12px;
  z-index: 200;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 11px;
  width: 40px; height: 40px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.hamburger svg { width: 20px; height: 20px; }
.demo-banner svg { width: 15px; height: 15px; vertical-align: -2px; }
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 37, 64, 0.5);
  z-index: 99;
}

@media (max-width: 1080px) {
  .dash-grid { grid-template-columns: 1fr; }
  .chart-row { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .sidebar { transform: translateX(-100%); transition: transform 0.25s; }
  .sidebar.open { transform: translateX(0); }
  .sidebar-logo { padding-left: 64px; }
  .sidebar-overlay.show { display: block; }
  .hamburger { display: flex; }
  .main { margin-left: 0; }
  .topbar { padding-left: 64px; }
  .screen-container { padding: 16px 14px 40px; }
}

/* ============================================================
   FINITION PREMIUM — WOYOTRACK par DIPRICODE
   (inspiration : Stripe, Linear, Uber Fleet — sobre et net)
   ============================================================ */

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Apparition douce des écrans (courbe naturelle) --- */
.screen-container > * {
  animation: ecran-entre 0.4s cubic-bezier(0.22, 0.8, 0.3, 1);
}
@keyframes ecran-entre {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --- Boutons : dégradés + états focus visibles (accessibilité) --- */
.btn-primary { background: linear-gradient(135deg, #1E5FD9, #0F3D91); box-shadow: 0 6px 16px -8px rgba(15, 61, 145, 0.6); }
.btn-orange  { background: linear-gradient(135deg, #FF9E2C, #F57C00); box-shadow: 0 6px 16px -8px rgba(245, 124, 0, 0.55); }
.btn svg { width: 16px; height: 16px; }
.btn:focus-visible, .icon-btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* --- Champ de recherche --- */
.champ-recherche {
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  padding: 9px 13px;
  font: inherit;
  font-size: 13px;
  min-width: 230px;
  background: var(--input-bg);
  color: var(--text);
}
.champ-recherche:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(15, 61, 145, 0.14);
}

/* --- Panneau de marque de la page de connexion --- */
.auth-hero {
  height: 150px;
  margin: -6px -6px 16px;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(140deg, #143E93 0%, #0F3D91 55%, #0A2C6B 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-hero svg { width: 100%; height: 100%; display: block; }
/* Trajets qui « se dessinent » lentement + pointillés qui avancent */
.wt-trace {
  stroke-dasharray: 6 400;
  animation: wt-trace 6s ease-in-out infinite alternate;
}
.wt-trace:nth-of-type(2) { animation-duration: 8s; animation-delay: 0.6s; }
@keyframes wt-trace { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -140; } }
.wt-dash { animation: wt-dash 1.1s linear infinite; }
@keyframes wt-dash { to { stroke-dashoffset: -11; } }

/* --- Flotte 3D du tableau de bord --- */
.flotte3d-zone {
  height: 250px;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 82%, rgba(22, 54, 92, 0.07), transparent 62%),
    linear-gradient(165deg, #EAF1F9 0%, #F5F7FA 55%, #FDF0E5 100%);
  touch-action: pan-y; /* le doigt peut encore faire défiler la page */
}
.flotte3d-zone canvas { width: 100% !important; height: 100% !important; display: block; }
.flotte3d-legende {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 12px;
}
@media (max-width: 820px) {
  .flotte3d-zone { height: 190px; }
  .auth-hero { height: 124px; }
}

/* --- Barres de défilement discrètes --- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #C4CEDA; border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #9FAEC1; }
::-webkit-scrollbar-track { background: transparent; }

/* --- Respect du réglage « réduire les animations » --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   MOBILE PIXEL-PERFECT — WOYOTRACK
   Rendu type app native (Uber / Yango / Twitter) :
   tableaux → fiches empilées, topbar sobre, cibles tactiles ≥44px.
   ============================================================ */

/* ---- Tablette : gouttières + confort ---- */
@media (max-width: 820px) {
  .screen-container { padding: 16px 16px 48px; }
  .hamburger { width: 44px; height: 44px; top: 12px; left: 12px; border-radius: 12px; }
  .topbar { padding: 12px 16px 12px 64px; }
  /* Le tiroir et son voile passent AU-DESSUS de la barre du bas (z-index 120) */
  .sidebar { min-height: 100dvh; z-index: 140; box-shadow: 20px 0 50px -20px rgba(8, 22, 44, 0.5); }
  .sidebar-overlay { z-index: 130; background: rgba(8, 22, 44, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
  .sidebar-collapse { display: none; } /* pas de « replier » dans un tiroir coulissant */
}

/* ---- Téléphone : topbar compacte + tableaux en fiches ---- */
@media (max-width: 640px) {

  /* Topbar : titre sur une ligne, sous-titre discret, date masquée (place au titre) */
  .topbar { gap: 10px; }
  .topbar-titre { min-width: 0; flex: 1; }
  .topbar-titre h1 {
    font-size: 17px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar-sub {
    font-size: 11.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar-date { display: none; }
  .topbar-actions { gap: 8px; flex-shrink: 0; }
  .topbar-theme { width: 40px; height: 40px; }

  /* Densité générale un cran plus fine */
  .card { padding: 15px 15px; border-radius: 16px; }
  .card h3 { font-size: 13.5px; }

  /* ---------- TABLEAUX → FICHES ---------- */
  .table-wrap { overflow: visible; }

  table.data { font-size: 13.5px; }
  table.data thead {                          /* en-tête caché mais lisible pour lecteurs d'écran */
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); border: 0;
  }
  table.data, table.data tbody, table.data tr, table.data td { display: block; width: 100%; }

  table.data tbody tr {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2px 15px;
    margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
    transition: none;
  }
  table.data tbody tr:hover { background: var(--card); }

  table.data td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 44px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
    border-radius: 0;
    white-space: normal;
    text-align: right;
    color: var(--text);
  }
  table.data tbody tr td:last-child { border-bottom: none; }

  /* Étiquette de colonne (nom du champ) à gauche */
  table.data td::before {
    content: attr(data-label);
    flex: 0 0 40%;
    text-align: left;
    font-family: var(--font-texte);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    white-space: nowrap;
  }

  /* Première cellule = titre de la fiche (nom / mois / libellé), sans étiquette */
  table.data tbody td:first-child {
    display: block;
    text-align: left;
    padding: 13px 0 11px;
    border-bottom: 1px solid var(--border);
    font-family: var(--font-titre);
    font-weight: 700;
    font-size: 14.5px;
  }
  table.data tbody td:first-child::before { content: none; }

  /* Montants : chiffres alignés et tabulaires */
  table.data td.num { font-variant-numeric: tabular-nums; font-weight: 600; }

  /* Cellule d'actions (kebab) : à droite, sans étiquette, sans bordure */
  table.data td.dg-actions-cell {
    width: auto;
    justify-content: flex-end;
    padding: 6px 0;
    min-height: 0;
  }
  table.data td.dg-actions-cell::before { content: none; }

  /* Ligne vide (message « aucune donnée ») : reste centrée, pas de fiche */
  table.data td[colspan] {
    display: block; text-align: center;
    border: none; padding: 8px 0; min-height: 0;
    font-family: var(--font-texte); font-weight: 400; font-size: 13px;
  }
  table.data td[colspan]::before { content: none; }
  table.data tr:has(td[colspan]) {
    background: transparent; border: none; box-shadow: none; padding: 0;
  }

  /* Ligne « total » (bilan annuel, projets) : fiche foncée mise en avant */
  table.data tr.total-row {
    background: var(--navy);
    border-color: var(--navy);
  }
  table.data tr.total-row td { background: transparent; color: #fff; border-bottom-color: rgba(255,255,255,0.16); }
  table.data tr.total-row td::before { color: rgba(255,255,255,0.75); }
  table.data tr.total-row td:first-child { color: #fff; border-bottom-color: rgba(255,255,255,0.22); }

  /* Bloc véhicule (avatar + nom) dans la cellule-titre */
  .dg-veh { gap: 12px; }
  .dg-veh-txt b { font-size: 15px; }

  /* Boutons pleine largeur = plus faciles au doigt */
  .screen-container .btn.auth-btn,
  .dg-toolbar .btn { min-height: 44px; }
}

/* ============================================================
   BARRE DE NAVIGATION DU BAS (mobile — style appli native)
   ============================================================ */
.bottom-nav { display: none; }

@media (max-width: 820px) {
  .bottom-nav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 120;
    background: var(--card);
    border-top: 1px solid var(--border);
    padding: 7px 6px calc(7px + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 28px -16px rgba(8, 22, 44, 0.3);
  }
  .bn-item {
    flex: 1;
    border: none; background: none; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 3px 2px; min-height: 50px; justify-content: center;
    font-family: var(--font-texte); font-size: 10.5px; font-weight: 600;
    color: var(--text-muted);
    transition: color 0.16s;
  }
  .bn-ic {
    width: 46px; height: 28px; border-radius: 999px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.18s, transform 0.12s;
  }
  .bn-ic svg { width: 21px; height: 21px; }
  .bn-item.on { color: var(--orange); }
  .bn-item.on .bn-ic { background: var(--orange-light); }
  .bn-item:active .bn-ic { transform: scale(0.88); }

  /* « Plus » ouvre le tiroir → le hamburger devient inutile */
  .hamburger { display: none !important; }
  .topbar { padding-left: 16px; }
  .sidebar-logo { padding-left: 20px; }

  /* Espace pour ne pas cacher le contenu derrière la barre */
  .screen-container { padding-bottom: 92px; }
}

/* ============================================================
   FENÊTRES (MODALES) PLEIN ÉCRAN sur téléphone
   ============================================================ */
@media (max-width: 640px) {
  .modal-overlay { padding: 0; align-items: stretch; overflow: hidden; }
  .modal {
    max-width: none; width: 100%;
    height: 100dvh; border-radius: 0; border: none;
    padding: 0 16px calc(20px + env(safe-area-inset-bottom));
    overflow-y: auto;
    display: flex; flex-direction: column;
    animation: modal-sheet 0.24s cubic-bezier(0.22, 0.8, 0.3, 1);
  }
  @keyframes modal-sheet { from { transform: translateY(100%); } to { transform: none; } }

  .modal h2 {
    position: sticky; top: 0; z-index: 3;
    background: var(--card);
    margin: 0 -16px 16px; padding: 15px 16px;
    border-bottom: 1px solid var(--border);
    font-size: 18px;
  }
  .modal .modal-close { width: 34px; height: 34px; font-size: 15px; }

  .modal-actions {
    position: sticky; bottom: 0; z-index: 3;
    margin: auto -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--card);
    border-top: 1px solid var(--border);
  }
  .modal-actions .btn { flex: 1; min-height: 48px; justify-content: center; }

  /* Champs : 16px = pas de zoom auto sur iPhone, hauteur confortable */
  .field input, .field select, .field textarea { font-size: 16px; padding: 12px 13px; }
}

/* Une seule bascule de thème dans toute l'appli (celle de la topbar, en haut à droite).
   On masque partout celle du menu latéral / tiroir « Plus » pour éviter le doublon. */
.sidebar .theme-switch { display: none; }

/* ============================================================
   CARTE PROFIL DU PROPRIÉTAIRE (modale)
   ============================================================ */
.h2-titre { display: inline-flex; align-items: center; gap: 9px; }
.h2-titre svg { width: 20px; height: 20px; color: var(--navy); }

.pf-hero {
  display: flex; align-items: center; gap: 16px;
  background: linear-gradient(135deg, #1E5FD9 0%, #0F3D91 60%, #0A2C6B 100%);
  border-radius: 18px; padding: 20px; margin-bottom: 14px; color: #fff;
  box-shadow: 0 12px 30px -14px rgba(15, 61, 145, 0.6);
}
.pf-avatar {
  width: 66px; height: 66px; border-radius: 18px; flex-shrink: 0;
  background: linear-gradient(135deg, #FF9E2C, #F57C00); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-titre); font-weight: 800; font-size: 30px;
  box-shadow: 0 8px 20px -6px rgba(245, 124, 0, 0.6);
}
.pf-hero-txt { min-width: 0; }
.pf-ent { font-family: var(--font-titre); font-weight: 800; font-size: 19px; line-height: 1.15; }
.pf-nom { display: flex; align-items: center; gap: 6px; color: rgba(255, 255, 255, 0.82); font-size: 13.5px; margin-top: 3px; }
.pf-nom svg { width: 14px; height: 14px; }
.pf-badge {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  background: rgba(255, 255, 255, 0.16); border-radius: 999px; padding: 4px 11px;
  font-size: 11.5px; font-weight: 700;
}
.pf-badge svg { width: 13px; height: 13px; }

.pf-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.pf-stat { background: var(--card-soft); border: 1px solid var(--border); border-radius: 13px; padding: 11px 14px; }
.pf-stat span { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.pf-stat span svg { width: 13px; height: 13px; }
.pf-stat b { font-size: 15px; color: var(--text); font-family: var(--font-titre); }

.pf-section-titre {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--text-muted); margin: 0 2px 11px;
}

/* ============================================================
   TIROIR EN MODE « PLUS » — n'affiche que les écrans hors barre du bas
   (le beau tiroir bleu glisse depuis la gauche, filtré)
   ============================================================ */
.sidebar.plus-mode .nav-section:first-of-type { display: none; }      /* section Pilotage (accueil/véhicules/versements) */
.sidebar.plus-mode .nav-item[data-screen="depenses"] { display: none; }

/* ============================================================
   GRAPHIQUES — responsive sur petit écran
   ============================================================ */
.chart-svg, .fleet-map svg { width: 100%; height: auto; display: block; }
@media (max-width: 640px) {
  .chart-svg { min-height: 150px; }
  .fleet-map { border-radius: 14px; overflow: hidden; }
}