:root {
  --blue: #003399;
  --blue-2: #1F4E79;
  --blue-dark: #012267;   /* teinte foncée dérivée (dégradés sidebar/login) — suit le thème */
  --accent: #CC0000;      /* couleur d'accent du logo (point) — personnalisable, distincte du rouge des alertes */
  --blue-soft: #e8eefb;
  --red: #CC0000;
  --red-soft: #fde7e7;
  --ink: #16213e;
  --muted: #647196;
  --bg: #f2f4f9;
  --green: #0a8a4f;
  --green-soft: #e3f6ec;
  --amber: #b9770a;
  --amber-soft: #fdf1da;
  --amber-pure: #FFC400;
  --card: #ffffff;
  --bg2: #eef1f7;
  --border: #d1d9ec;
  --r: 14px;
  --r-sm: 10px;
  --shadow: 0 1px 2px rgba(16,33,62,.06), 0 6px 22px rgba(16,33,62,.07);
  --shadow-lg: 0 14px 50px rgba(16,33,62,.18);
  --shadow-sm: 0 1px 6px rgba(16,33,62,.07);
  --sidebar: 268px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: 'Sora', 'Manrope', sans-serif; line-height: 1.2; letter-spacing: -.01em; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 14px; }

/* ── Style de base de TOUS les champs (même look raffiné partout, y compris les
   inputs/selects « nus » sans classe : tableaux ITS, lignes de saisie inline…).
   Les conteneurs .field gèrent leur propre fond → on les exclut. Checkbox/radio/
   file/range gardent leur rendu natif. .fg / .form-control enrichissent ensuite. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]),
select, textarea {
  padding: 8px 11px; border-radius: 9px; border: none; outline: none;
  background: #fbfcfe; color: var(--ink);
  box-shadow: inset 0 1px 3px rgba(16,33,62,.06);
  transition: background .15s, box-shadow .15s;
}
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=submit]):not([type=button]):focus,
select:focus, textarea:focus { background: #fff; box-shadow: 0 0 0 3px var(--blue-soft); }
/* Les champs dans une .field (barre de recherche) restent transparents (le .field porte le fond). */
.field input, .field select { padding: 0; background: none; box-shadow: none; border-radius: 0; }
.field input:focus, .field select:focus { background: none; box-shadow: none; }

a { text-decoration: none; }

::-webkit-scrollbar { height: 7px; width: 7px; }
::-webkit-scrollbar-thumb { background: #c4cee3; border-radius: 20px; }
::-webkit-scrollbar-track { background: transparent; }

/* ====== LAYOUT ====== */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar);
  /* --side-bg surchargeable par le thème (dégradé OU couleur unie si « sans dégradé ») */
  background: var(--side-bg, linear-gradient(178deg, var(--blue-dark) 0%, var(--blue) 52%, var(--blue-dark) 100%));
  color: #fff;
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  z-index: 60;
  transition: transform .28s ease;
}

.brand { padding: 20px 18px 16px; }
.brand-logo { display: flex; align-items: center; gap: 11px; }
.brand-mark {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: #fff;
  display: grid;
  place-items: center;
  flex: none;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  position: relative;
}
.brand-mark b { font-family: 'Sora'; color: var(--blue); font-size: 18px; font-weight: 800; }
.brand-mark span {
  position: absolute; width: 14px; height: 14px;
  background: var(--accent); border-radius: 4px;
  transform: translate(11px, 11px);
}
.brand-txt h1 { font-size: 15px; font-weight: 800; color: #fff; }
.brand-txt p { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #aebfe8; margin-top: 2px; font-weight: 600; }

.nav { flex: 1; overflow-y: auto; padding: 12px 12px 20px; }
.nav-grp { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #7e93cf; font-weight: 700; margin: 16px 10px 7px; }
.nav-grp:first-child { margin-top: 4px; }

/* Accordéon de navigation (groupes dépliables) */
.nav-grp-wrap { margin-bottom: 3px; }
.nav-grp-head {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: none; padding: 10px 12px; margin: 5px 0 2px;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: #d4ddf5; font-weight: 800; cursor: pointer; border-radius: 10px;
  transition: background .15s, color .15s;
}
.nav-grp-ico { display: inline-flex; flex: none; }
.nav-grp-ico svg { width: 18px; height: 18px; opacity: .92; }
.nav-grp-name { flex: 1; text-align: left; }
.nav-grp-count {
  font-size: 10px; letter-spacing: 0; font-weight: 700;
  color: #d4ddf5; background: rgba(255,255,255,.10);
  min-width: 18px; text-align: center; padding: 1px 6px; border-radius: 20px;
}
.nav-grp-chev { transition: transform .2s ease; opacity: .7; }
.nav-grp-head:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-grp-head:hover .nav-grp-count { color: #fff; }
.nav-grp-head.open { color: #fff; }
.nav-grp-head.open .nav-grp-chev { transform: rotate(180deg); opacity: .95; }
/* Le groupe contenant la page active, quand il est replié : petit repère visuel */
.nav-grp-head.has-active:not(.open) { color: #fff; }
.nav-grp-head.has-active:not(.open) .nav-grp-count { background: rgba(255,255,255,.18); color: #fff; }
.nav-grp-body { display: flex; flex-direction: column; gap: 2px; padding-left: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px;
  color: #d4ddf5; font-weight: 600; font-size: 13.5px;
  width: 100%; text-align: left;
  transition: .15s; margin-bottom: 2px;
}
.nav-item svg { width: 18px; height: 18px; flex: none; opacity: .92; }
.nav-item:hover { background: rgba(255,255,255,.09); color: #fff; }
.nav-item.active { background: #fff; color: var(--blue); box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.nav-item.active svg { opacity: 1; }
.nav-item .badge {
  margin-left: auto; background: var(--red); color: #fff;
  font-size: 10.5px; font-weight: 800; padding: 1px 7px;
  border-radius: 20px; min-width: 20px; text-align: center;
}

.side-foot { padding: 12px 16px; font-size: 11px; color: #9fb1e0; }
.side-user { margin-bottom: 9px; line-height: 1.5; }
.side-user b { color: #fff; font-size: 12.5px; }
.logout-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 9px 12px; border-radius: 9px;
  background: rgba(255,255,255,.10); color: #fff;
  font-weight: 700; font-size: 12.5px; cursor: pointer; transition: .15s;
}
.logout-btn:hover { background: rgba(255,255,255,.20); }

.main { flex: 1; margin-left: var(--sidebar); min-width: 0; display: flex; flex-direction: column; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  padding: 13px 26px;
  display: flex; align-items: center; gap: 16px;
  box-shadow: 0 2px 14px rgba(16,33,62,.07);
}
.burger { display: none; width: 40px; height: 40px; border-radius: 10px; background: var(--blue); color: #fff; align-items: center; justify-content: center; flex: none; }

.page-h { min-width: 0; }
.page-h h2 { font-size: 19px; font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: 9px; }
.page-h p { font-size: 12px; color: var(--muted); margin-top: 1px; }

.top-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border-radius: 11px;
  padding: 8px 13px; width: 230px; transition: .15s;
  box-shadow: var(--shadow-sm);
}
.search:focus-within { background: #fff; box-shadow: 0 0 0 3px var(--blue-soft); }
.search svg { color: var(--muted); flex: none; }
.search input { border: none; background: none; outline: none; width: 100%; color: var(--ink); }

.date-pill {
  display: flex; align-items: center; gap: 7px;
  background: var(--amber-soft); color: var(--amber);
  padding: 8px 13px; border-radius: 11px;
  font-weight: 700; font-size: 12.5px; white-space: nowrap;
}
.date-pill svg { flex: none; }

/* Boutons de la barre du haut (Actualiser, Mail pro) — sans bordure */
.top-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--blue-soft); color: var(--blue);
  padding: 8px 13px; border-radius: 11px;
  font-weight: 700; font-size: 12.5px; white-space: nowrap;
  cursor: pointer; transition: .15s; text-decoration: none;
}
.top-btn:hover { background: #fff; box-shadow: 0 0 0 3px var(--blue-soft); transform: translateY(-1px); }
.top-btn svg { flex: none; }
.top-btn.spinning svg { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.content { padding: 26px; max-width: 1320px; width: 100%; margin: 0 auto; flex: 1; }

/* ====== KPI CARDS ====== */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 14px; margin-bottom: 22px; }

.kpi {
  --kpi-accent: var(--blue);          /* couleur de la valeur + icône */
  --kpi-soft:   var(--blue-soft);
  /* Carte neutre par défaut ; les variantes colorées (.blue/.red/...) ajoutent
     une teinte douce via --kpi-tint. Séparation = box-shadow + background, aucune
     bordure ni liseré. */
  --kpi-tint:   var(--card);
  background: linear-gradient(155deg, var(--kpi-tint) 0%, var(--card) 60%);
  border-radius: var(--r);
  padding: 17px 18px; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
/* Teintes par variante : accent (valeur/icône) + tint (fond doux) */
.kpi.blue  { --kpi-accent: var(--blue);   --kpi-soft: var(--blue-soft);  --kpi-tint: var(--blue-soft); }
.kpi.red   { --kpi-accent: var(--red);    --kpi-soft: var(--red-soft);   --kpi-tint: var(--red-soft); }
.kpi.green { --kpi-accent: var(--green);  --kpi-soft: var(--green-soft); --kpi-tint: var(--green-soft); }
.kpi.amber { --kpi-accent: var(--amber);  --kpi-soft: var(--amber-soft); --kpi-tint: var(--amber-soft); }
.kpi.navy  { --kpi-accent: var(--blue-2); --kpi-soft: var(--blue-soft);  --kpi-tint: var(--blue-soft); }

.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kpi-label { font-size: 11.5px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.kpi-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--kpi-soft); color: var(--kpi-accent); display: grid; place-items: center; flex: none; }
.kpi.red .kpi-ico { background: var(--red-soft); color: var(--red); }
.kpi.green .kpi-ico { background: var(--green-soft); color: var(--green); }
.kpi.amber .kpi-ico { background: var(--amber-soft); color: var(--amber); }
.kpi.navy .kpi-ico { background: var(--blue-soft); color: var(--blue-2); }
/* La valeur prend la couleur de la carte → carreaux vivants */
.kpi-val { font-family: 'Sora'; font-size: 24px; font-weight: 800; color: var(--kpi-accent); letter-spacing: -.02em; line-height: 1.1; }
.kpi-val small { font-size: 13px; font-weight: 700; color: var(--muted); margin-left: 3px; }
.kpi-sub { font-size: 11.5px; color: var(--muted); margin-top: 5px; font-weight: 600; }
.kpi-sub b { color: var(--green); }
.kpi-sub b.dn { color: var(--red); }

/* ====== PANELS ====== */
.row { display: grid; gap: 16px; margin-bottom: 16px; }
.row.c2 { grid-template-columns: 1.5fr 1fr; }
.row.c2e { grid-template-columns: 1fr 1fr; }

.panel { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; }
.panel-h { display: flex; align-items: center; gap: 10px; padding: 15px 18px; box-shadow: 0 1px 0 rgba(16,33,62,.05); }
.panel-h h3 { font-size: 15px; font-weight: 700; color: var(--ink); }
.panel-h .ico { width: 30px; height: 30px; border-radius: 8px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; flex: none; }
.panel-h .tools { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.panel-b { padding: 18px; }
.panel-b.flush { padding: 0; }
/* Titre de panneau LÉGER (sans le bloc .panel-h complet) : un simple intitulé
   en tête de carte. Il doit respirer comme le reste — sans cette règle, le
   texte se colle au bord de la carte. La séparation est faite par l'espace,
   jamais par une bordure. */
.panel-t {
  display: flex; align-items: center; gap: 9px;
  padding: 16px 18px 0;
  font-size: 11.5px; font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
/* Quand un corps suit le titre, il ne redouble pas l'espace du haut. */
.panel-t + .panel-b { padding-top: 14px; }
/* Un tableau collé au titre garde tout de même sa respiration latérale. */
.panel-t + .panel-b.flush { padding-top: 12px; }

/* ====== BUTTONS ====== */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 10px; font-weight: 700; font-size: 13px; transition: .15s; white-space: nowrap; }
.btn-pri { background: var(--red); color: #fff; box-shadow: 0 4px 12px rgba(204,0,0,.26); }
.btn-pri:hover { background: #b00; transform: translateY(-1px); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-dark); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { background: #077040; }
.btn-danger { background: #cc0000; color: #fff; box-shadow: 0 4px 12px rgba(204,0,0,.3); }
.btn-danger:hover { background: #a00; transform: translateY(-1px); }
.btn-ghost { background: var(--blue-soft); color: var(--blue); }
.btn-ghost:hover { background: #dbe5fb; color: var(--blue); box-shadow: 0 2px 8px rgba(0,51,153,.12); }
.btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 8px; }
.btn-icon { width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 8px; background: var(--blue-soft); color: var(--blue); }
.btn-icon:hover { color: #fff; background: var(--blue); }
.btn-icon.del { background: var(--red-soft); color: var(--red); }
.btn-icon.del:hover { color: #fff; background: var(--red); }

/* ====== TABLES ====== */
.tbl-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { background: #f7f9fd; color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; text-align: left; padding: 11px 14px; position: sticky; top: 0; }
/* Le texte REVIENT À LA LIGNE au lieu d'élargir le tableau : sans cela, une
   seule cellule longue forçait un défilement horizontal sur toute la page,
   alors que la place était disponible. Les colonnes qui doivent rester d'un
   bloc (dates, montants, boutons) le demandent explicitement via .nw/.num. */
tbody td { padding: 11px 14px; color: var(--ink); overflow-wrap: anywhere; word-break: break-word; vertical-align: middle; }
/* Colonnes insécables : nombres, dates, actions. */
td.num, th.num, td.nw, th.nw { white-space: nowrap; }
/* Les boutons d'action ne se coupent jamais en deux lignes : on cible le
   bouton lui-même plutôt que sa cellule (compatible tous navigateurs). */
tbody td > .btn-icon, tbody td > .btn { white-space: nowrap; }
/* Les étiquettes gardent leur forme, quelle que soit la largeur. */
tbody td .tag { white-space: nowrap; }
/* Un tableau ne doit jamais dépasser son panneau : les colonnes se partagent
   la largeur disponible au lieu de s'étirer sur le contenu le plus long. */
.tbl-wrap > table { width: 100%; }
tbody tr { transition: .12s; }
tbody tr:hover { background: var(--blue-soft); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
td.right, th.right { text-align: right; font-variant-numeric: tabular-nums; }
td.strong { font-weight: 700; }
.t-empty { text-align: center; padding: 42px 20px; color: var(--muted); }

/* badges (sans pastille : le texte seul, fond coloré) */
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.tag.g { background: var(--green-soft); color: var(--green); }
.tag.r { background: var(--red-soft); color: var(--red); }
.tag.a { background: var(--amber-soft); color: var(--amber); }
.tag.b { background: var(--blue-soft); color: var(--blue); }
.tag.n { background: #eef1f7; color: var(--muted); }

/* mini chart bars */
.bars { display: flex; align-items: flex-end; gap: 10px; height: 150px; padding: 10px 4px 0; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
.bar { width: 100%; max-width: 38px; border-radius: 7px 7px 0 0; background: linear-gradient(var(--blue), #3a63c9); transition: height .6s cubic-bezier(.2,.8,.2,1); min-height: 3px; }
.bar.alt { background: linear-gradient(var(--red), #e85555); }
.bar-lab { font-size: 11px; color: var(--muted); font-weight: 600; }
.bar-val { font-size: 10px; color: var(--ink); font-weight: 700; }

/* progress */
.prog { height: 9px; border-radius: 20px; background: #eef1f7; overflow: hidden; display: flex; }
.prog i { display: block; height: 100%; }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; font-size: 12px; color: var(--muted); font-weight: 600; }
.legend span { display: flex; align-items: center; gap: 6px; }
.kv { display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.kv span { color: var(--muted); font-weight: 600; }
.kv b { font-variant-numeric: tabular-nums; color: var(--ink); }
.rank { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: #eef1f7; color: var(--muted); font-weight: 800; font-size: 12px; }
.rank.top { background: var(--blue); color: #fff; }
.dot { width: 9px; height: 9px; border-radius: 50%; }

/* list rows */
.lrow { display: flex; align-items: center; gap: 12px; padding: 12px 0; }
.lrow + .lrow { box-shadow: 0 -1px 0 rgba(16,33,62,.05) inset; }
.lrow .av { width: 38px; height: 38px; border-radius: 10px; background: var(--blue-soft); color: var(--blue); display: grid; place-items: center; font-weight: 800; flex: none; font-size: 15px; }
.lrow .av.r { background: var(--red-soft); color: var(--red); }
.lrow .av.g { background: var(--green-soft); color: var(--green); }
.lrow .av.a { background: var(--amber-soft); color: var(--amber); }
.lrow .li-main { min-width: 0; flex: 1; }
.lrow .li-t { font-weight: 700; font-size: 13.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrow .li-s { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.lrow .li-end { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* filters */
.fbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.fbar .grow { flex: 1; min-width: 160px; }
/* Filtres posés directement dans une .fbar (select/input hors .field/.fg) :
   on leur applique le même look que les champs de formulaire pour un design
   cohérent — fini les selects "bruts" du navigateur. */
.fbar > select, .fbar > input {
  padding: 9px 13px; border-radius: 10px; border: none; outline: none;
  background: #fbfcfe; color: var(--ink); font-size: 14px; font-family: inherit;
  box-shadow: inset 0 1px 3px rgba(16,33,62,.06); transition: .15s; cursor: pointer;
}
.fbar > select:focus, .fbar > input:focus { background: #fff; box-shadow: 0 0 0 3px var(--blue-soft); }
.fbar > select { -webkit-appearance: none; appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a869a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; }
.field { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 10px; padding: 8px 12px; box-shadow: var(--shadow); }
.field svg { color: var(--muted); flex: none; }
.field input, .field select { border: none; outline: none; width: 100%; background: none; color: var(--ink); }
.seg { display: flex; background: var(--bg); border-radius: 10px; padding: 3px; gap: 2px; box-shadow: inset 0 1px 3px rgba(16,33,62,.07); }
.seg button { padding: 6px 13px; border-radius: 7px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.seg button.on { background: #fff; color: var(--blue); box-shadow: var(--shadow); }

/* ====== MODAL ======
   z-index 2000 : au-dessus de TOUT, y compris des bibliothèques tierces qui
   posent leurs propres couches. Leaflet monte jusqu'à 1000 (contrôles, popups,
   marqueurs) et masquait le modal ouvert depuis la carte de suivi. Un modal
   est par définition ce qu'on regarde : rien ne doit passer devant. */
.overlay { position: fixed; inset: 0; background: rgba(16,33,62,.5); backdrop-filter: blur(3px); z-index: 2000; display: none; align-items: flex-start; justify-content: center; padding: 30px 16px; overflow-y: auto; }
.overlay.open { display: flex; }
.modal { background: #fff; border-radius: 18px; width: 100%; max-width: 720px; box-shadow: var(--shadow-lg); animation: pop .3s cubic-bezier(.2,.9,.3,1.2); margin: auto 0; }
.modal.lg { max-width: 960px; }
@keyframes pop { from { opacity: 0; transform: scale(.96) translateY(14px); } to { opacity: 1; transform: none; } }

.modal-h { display: flex; align-items: center; gap: 12px; padding: 20px 24px; position: sticky; top: 0; background: #fff; border-radius: 18px 18px 0 0; z-index: 2; box-shadow: 0 1px 0 rgba(16,33,62,.06); }
.modal-h .ico { width: 40px; height: 40px; border-radius: 11px; background: var(--blue); color: #fff; display: grid; place-items: center; flex: none; }
.modal-h h3 { font-size: 17px; font-weight: 800; }
.modal-h p { font-size: 12px; color: var(--muted); margin-top: 1px; }
.modal-x { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; background: var(--bg); color: var(--muted); display: grid; place-items: center; }
.modal-x:hover { background: var(--red-soft); color: var(--red); }
.modal-b { padding: 22px 24px; }
.modal-f { padding: 16px 24px; display: flex; gap: 10px; justify-content: flex-end; position: sticky; bottom: 0; background: #fff; border-radius: 0 0 18px 18px; box-shadow: 0 -1px 0 rgba(16,33,62,.06); }

/* forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid .full { grid-column: 1 / -1; }
.fg { }
.fg label { display: block; font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.fg label .req { color: var(--red); }
.fg input, .fg select, .fg textarea {
  width: 100%; padding: 10px 13px; border-radius: 10px;
  background: #fbfcfe; color: var(--ink); outline: none; transition: .15s;
  box-shadow: inset 0 1px 3px rgba(16,33,62,.06);
  border: none;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { background: #fff; box-shadow: 0 0 0 3px var(--blue-soft); }
.fg input[readonly] { background: var(--blue-soft); color: var(--blue); font-weight: 700; }
.fg .hint { font-size: 11px; color: var(--muted); margin-top: 5px; }

.calc-box { background: linear-gradient(135deg, var(--blue-soft), #f3f6fe); border-radius: 12px; padding: 14px 16px; grid-column: 1 / -1; margin-top: 2px; }
.calc-box h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--blue); margin-bottom: 10px; font-weight: 800; }
.calc-line { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; }
.calc-line + .calc-line { box-shadow: 0 -1px 0 rgba(51,99,255,.08) inset; }
.calc-line:last-child { box-shadow: none; }
.calc-line span { color: var(--muted); font-weight: 600; }
.calc-line b { font-variant-numeric: tabular-nums; color: var(--ink); }
.calc-line.tot { font-size: 15px; padding-top: 9px; margin-top: 3px; box-shadow: 0 -2px 0 var(--blue) inset !important; }
.calc-line.tot b { color: var(--blue); font-family: 'Sora'; font-weight: 800; }
.calc-line.neg b { color: var(--red); }

/* toast */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(120px); background: var(--ink); color: #fff; padding: 13px 20px; border-radius: 12px; font-weight: 600; font-size: 13.5px; box-shadow: var(--shadow-lg); z-index: 2100; display: flex; align-items: center; gap: 9px; transition: transform .35s cubic-bezier(.2,.9,.3,1.2); }
.toast.show { transform: translateX(-50%) translateY(0); }
.toast svg { color: #4ade80; flex: none; }
.toast.err svg { color: #f87171; }

/* login */
/* Écran de connexion : au-dessus de tout, modal compris. Une session expirée
   pendant qu'un modal est ouvert doit reprendre la main, pas s'afficher
   derrière une fenêtre que l'utilisateur ne peut plus valider. */
.login { position: fixed; inset: 0; background: var(--login-bg, linear-gradient(135deg, var(--blue-dark), var(--blue) 60%, var(--blue-dark))); display: flex; align-items: center; justify-content: center; z-index: 2200; padding: 20px; }
.login-card { background: #fff; border-radius: 22px; width: 100%; max-width: 400px; padding: 36px 32px; box-shadow: var(--shadow-lg); text-align: center; animation: pop .4s; }
.login-mark { width: 64px; height: 64px; border-radius: 17px; background: var(--blue); display: grid; place-items: center; margin: 0 auto 16px; position: relative; }
.login-mark b { font-family: 'Sora'; color: #fff; font-size: 27px; font-weight: 800; }
.login-mark span { position: absolute; width: 18px; height: 18px; background: var(--red); border-radius: 5px; bottom: -3px; right: -3px; }
.login-card h1 { font-size: 21px; font-weight: 800; }
.login-card .sub { color: var(--muted); font-size: 13px; margin: 5px 0 24px; }
.login-card .fg { text-align: left; margin-bottom: 14px; }
.login-card .btn { width: 100%; justify-content: center; padding: 12px; font-size: 15px; margin-top: 6px; }
.login-err { color: var(--red); font-size: 12.5px; font-weight: 600; margin-top: 10px; min-height: 16px; }
.login-foot { margin-top: 18px; font-size: 11px; color: var(--muted); }
.login-accounts { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 16px; }
.login-acc { font-size: 11.5px; font-weight: 700; color: var(--blue); background: var(--blue-soft); border-radius: 20px; padding: 6px 12px; cursor: pointer; transition: .15s; }
.login-acc:hover { background: var(--blue); color: #fff; }
.login-card select { width: 100%; padding: 10px 12px; border-radius: 10px; background: #f3f6ff;
  font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; border: none; outline: none;
  box-shadow: inset 0 1px 3px rgba(16,33,62,.06); }

/* role-card (params) */
.role-card { display: flex; align-items: flex-start; gap: 12px; padding: 13px 14px; border-radius: 12px; margin-bottom: 10px; background: #f7f9fd; }
.role-card .rc-ico { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--blue-soft); color: var(--blue); flex-shrink: 0; }
.role-card .rc-main { flex: 1; min-width: 0; }
.role-card .rc-t { font-weight: 800; font-size: 13.5px; color: var(--ink); }
.role-card .rc-mods { font-size: 11.5px; color: var(--muted); margin-top: 3px; }

/* section title */
.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 800; margin: 24px 0 12px; display: flex; align-items: center; gap: 9px; }
.section-title::after { content: ''; flex: 1; height: 1px; background: #eef1f7; }

/* ====== TIMELINE TRANSIT ====== */
.timeline { position: relative; padding: 4px 0; }
.tl-step {
  display: flex; gap: 16px; padding: 0 0 22px 0;
  position: relative;
}
.tl-step:last-child { padding-bottom: 0; }

/* ligne verticale reliant les étapes */
.tl-left { display: flex; flex-direction: column; align-items: center; flex: none; width: 36px; }
.tl-dot {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex: none; font-size: 14px; font-weight: 700;
  background: #eef1f7; color: #9aa6bd;
  box-shadow: 0 0 0 3px #f2f4f9;
  position: relative; z-index: 1;
}
.tl-step.done .tl-dot { background: var(--green); color: #fff; box-shadow: 0 0 0 3px var(--green-soft); }
.tl-step.current .tl-dot { background: var(--blue); color: #fff; box-shadow: 0 0 0 5px var(--blue-soft); }
.tl-step.blocked .tl-dot { background: var(--red); color: #fff; box-shadow: 0 0 0 3px var(--red-soft); }

.tl-line {
  flex: 1; width: 2px; background: #e0e5f0;
  margin-top: 2px;
  min-height: 22px;
}
.tl-step:last-child .tl-line { display: none; }
.tl-step.done .tl-line { background: var(--green); }

.tl-body { flex: 1; min-width: 0; padding-top: 6px; }
.tl-lab {
  font-weight: 700; font-size: 13.5px; color: var(--ink);
}
.tl-step.pending .tl-lab { color: #9aa6bd; }
.tl-step.current .tl-lab { color: var(--blue); }
.tl-step.blocked .tl-lab { color: var(--red); }
.tl-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.tl-date-line { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.tl-date-done { font-size: 12px; color: var(--green); font-weight: 700; }
.tl-date-pending { font-size: 12px; color: var(--muted); font-style: italic; }
.tl-validate-btn {
  padding: 5px 12px; border-radius: 7px; font-size: 12px; font-weight: 700;
  background: var(--blue); color: #fff; cursor: pointer; transition: .15s;
  display: inline-flex; align-items: center; gap: 6px;
}
.tl-validate-btn:hover { background: var(--blue-dark); }
.tl-validate-btn.undo { background: var(--bg); color: var(--muted); }
.tl-validate-btn.undo:hover { background: var(--red-soft); color: var(--red); }

/* ===== Timeline SUIVI CLIENT (page publique + aperçu modal) ===== */
/* Ligne verticale continue (via background, pas de border) + pastilles compactes */
.pub-timeline { position: relative; padding-left: 4px; }
.pub-step {
  position: relative; padding: 0 0 18px 30px; margin-left: 9px;
  background: linear-gradient(#e3e9f4, #e3e9f4) left top / 2px 100% no-repeat;
}
.pub-step:last-child { padding-bottom: 0; background-image: none; }
.pub-step.done { background-image: linear-gradient(var(--green), var(--green)); background-size: 2px 100%; }
.pub-dot {
  position: absolute; left: -10px; top: 0; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px #cfd8e8;
}
.pub-step.done .pub-dot { background: var(--green); box-shadow: 0 0 0 2px var(--green); }
.pub-step.current .pub-dot { background: var(--blue); box-shadow: 0 0 0 5px var(--blue-soft); }
.pub-lab { font-weight: 700; font-size: 13.5px; color: var(--ink); line-height: 1.2; }
.pub-step.pending .pub-lab { color: #9aa6bd; }
.pub-step.current .pub-lab { color: var(--blue); }
.pub-sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.pub-date { font-size: 11px; color: var(--blue); font-weight: 700; margin-top: 3px; }
.pub-pending { font-size: 11px; color: #9aa6bd; font-style: italic; margin-top: 3px; }
/* Bouton « Photo » d'une étape (suivi) : clair, avec icône + libellé, ouvre la photo en modal */
.pub-photo-btn {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; cursor: pointer;
  background: var(--blue-soft); color: var(--blue); font-size: 11.5px; font-weight: 700;
  padding: 4px 10px; border-radius: 7px; border: none; transition: .15s;
}
.pub-photo-btn:hover { background: var(--blue); color: #fff; }
.pub-photo-btn svg { width: 15px; height: 15px; }

/* tracking public */
.public-track { min-height: 100vh; background: var(--blue-soft); }
.pub-header { background: var(--blue); color: #fff; padding: 14px 24px; display: flex; align-items: center; gap: 12px; }
.pub-header h1 { color: #fff; }

/* Tabs compta / commercial */
.tab-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tab-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer;
  background: var(--blue-soft); color: var(--blue); transition: all .15s; }
.tab-btn svg { width: 16px; height: 16px; }
.tab-btn.active { background: var(--blue); color: #fff; }
.tab-btn:hover:not(.active) { background: #d4dffa; }

/* password field toggle */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 40px; }
.pw-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; color: var(--muted); cursor: pointer; display: flex; align-items: center; }
.pw-toggle:hover { color: var(--blue); }

/* ====== ALIASES COMPATIBILITÉ (vues cotations / fiches / calcul) ====== */

/* btn aliases */
.btn-primary   { background: var(--red); color: #fff; box-shadow: 0 4px 12px rgba(204,0,0,.26); }
.btn-primary:hover { background: #b00; transform: translateY(-1px); }
.btn-secondary { background: var(--blue); color: #fff; }
.btn-secondary:hover { background: var(--blue-dark); }
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 10px; font-weight: 700;
  font-size: 13px; transition: .15s; white-space: nowrap;
  border: none; cursor: pointer;
}

/* btn-ico alias for btn-icon */
.btn-ico {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--blue-soft); color: var(--blue);
  cursor: pointer; border: none; transition: .15s;
}
.btn-ico:hover { color: #fff; background: var(--blue); }
.btn-ico.del,
.btn-ico[title="Supprimer"] { background: var(--red-soft); color: var(--red); }
.btn-ico[title="Supprimer"]:hover,
.btn-ico.del:hover { color: #fff; background: var(--red); }

/* form-group / form-control aliases (→ fg / input style) */
.form-group { margin-bottom: 0; }
.form-group label {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--ink); margin-bottom: 6px;
}
.form-control {
  width: 100%; padding: 10px 13px; border-radius: 10px;
  background: #fbfcfe; color: var(--ink); outline: none;
  transition: .15s; border: none;
  box-shadow: inset 0 1px 3px rgba(16,33,62,.06);
  font-family: inherit; font-size: 14px;
}
.form-control:focus { background: #fff; box-shadow: 0 0 0 3px var(--blue-soft); }

/* form-grid-2 / form-grid-3 */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; }

/* SearchSelect */
.ss-trigger {
  min-height: 42px; padding: 9px 13px;
  background: #fbfcfe; border-radius: 10px;
  box-shadow: inset 0 1px 3px rgba(16,33,62,.06);
  font-size: 14px; color: var(--ink);
}
.ss-trigger:hover { background: #f5f7fc; }
.ss-opt:hover { background: var(--blue-soft); }
.ss-opt:last-child { border-bottom: none !important; }

/* view-header */
.view-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 12px; margin-bottom: 18px;
}
.view-header h2 { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 9px; }
.view-header .sub, .view-header p.sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* table-wrap alias */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table thead th {
  background: #f7f9fd; color: var(--muted); font-weight: 700;
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  text-align: left; padding: 11px 14px; white-space: nowrap;
}
.table tbody td { padding: 11px 14px; color: var(--ink); }
.table tbody tr:hover { background: var(--blue-soft); }
.table tfoot td { padding: 11px 14px; font-weight: 700; }

/* card-block */
.card-block {
  background: #fff; border-radius: var(--r); box-shadow: var(--shadow);
  margin-bottom: 16px; overflow: hidden;
}

/* table compact + section-head (modales cotations) */
.table-compact td, .table-compact th { padding: 6px 10px; }
.table-compact .section-head td { background: var(--bg); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--blue); padding: 8px 10px; }
.table-compact input.form-control { height: 30px; padding: 4px 8px; font-size: 12px; }

/* tabs (cotations) */
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.tab {
  padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; background: var(--blue-soft); color: var(--blue);
  transition: all .15s; border: none;
}
.tab.active { background: var(--blue); color: #fff; }
.tab:hover:not(.active) { background: #d4dffa; }

/* muted helper */
.muted { color: var(--muted); }

/* timeline conteneur */
.timeline-container { display: flex; flex-direction: column; gap: 6px; }
.timeline-item { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.timeline-item + .timeline-item { box-shadow: 0 -1px 0 rgba(16,33,62,.04) inset; }
.timeline-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg); flex: none;
  box-shadow: 0 0 0 2px #e0e5f0;
}
.timeline-dot.active { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.timeline-content { display: flex; align-items: center; gap: 6px; font-size: 13px; flex: 1; }

/* ====== RESPONSIVE (pages grids) ====== */
/* ====== RESPONSIVE ====== */

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

@media (max-width: 860px) {
  :root { --sidebar: 0px; }
  .sidebar { transform: translateX(-100%); width: 268px; box-shadow: var(--shadow-lg); transition: transform .25s; }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .burger { display: flex; }
  .search { display: none; }
  /* Sous-titre de page masqué sur mobile (gain de place, évite le débordement). */
  #pageSubtitle { display: none; }
  /* Titre de page plus compact sur mobile (sinon trop gros, casse l'harmonie).
     Tronqué proprement avec « … » s'il est trop long. */
  .page-h h2 { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .content { padding: 16px; }
  .topbar { padding: 11px 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .form-grid-3 { grid-template-columns: 1fr; }
  .scrim { position: fixed; inset: 0; background: rgba(16,33,62,.5); z-index: 55; display: none; }
  .scrim.show { display: block; }
  /* Tableaux : scroll horizontal */
  .tbl-wrap, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Modales plein écran sur mobile */
  .overlay { padding: 0; align-items: flex-end; }
  .modal { border-radius: 18px 18px 0 0; max-height: 92vh; overflow-y: auto; margin: 0; }
  .modal.lg { max-width: 100%; }
  /* KPI */
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  /* Panel header avec boutons — wrap */
  .panel-h { flex-wrap: wrap; gap: 8px; }
  /* Cacher les labels longs des boutons dans la barre print */
  .pm-btn-label { display: none; }
  /* View header */
  .view-header { flex-direction: column; gap: 10px; }
  /* fbar */
  .fbar { flex-direction: column; }
  .fbar .grow { width: 100%; }
  /* Tab bar */
  .tab-bar, .tabs { gap: 4px; }
  .tab-btn, .tab { padding: 6px 11px; font-size: 12px; }
  /* Colonnes section-title */
  .section-title { font-size: 11px; }
  /* Timeline étapes — plus compact */
  .tl-step { gap: 10px; }
  .tl-body { font-size: 12px; }
  .tl-lab { font-size: 12.5px; }
  .tl-sub { font-size: 11px; }
}

@media (max-width: 600px) {
  .content { padding: 12px; }
  /* KPI 2 colonnes resserrées */
  .kpi { padding: 11px 12px; }
  .kpi-val { font-size: 18px; }
  /* Masquer colonnes secondaires des tables (via data-attr) */
  td[data-hide-sm], th[data-hide-sm] { display: none; }
  /* Boutons icon-only sous 600px */
  .btn .btn-label-sm { display: none; }
  /* page-h */
  .page-h h2 { font-size: 15px; }
  /* Sur mobile : on cache complètement la date et le webmail (icône comprise) */
  .date-pill { display: none !important; }
  #topWebmailBtn { display: none !important; }
  .top-btn .top-btn-lbl { display: none; }
  .top-btn { padding: 8px 10px; }

  /* ---- Filtres responsives ---- */
  /* La barre de filtres (dates + statut) passe en grille 2 colonnes compacte,
     chaque champ prend toute la largeur de sa cellule. */
  .fbar { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .fbar .grow { width: 100%; flex: 1 1 100%; }
  .fbar .fg { flex: 1 1 calc(50% - 4px); margin: 0; min-width: 0; }
  .fbar .fg input, .fbar .fg select { width: 100%; }
  .fbar .btn { flex: 1 1 calc(50% - 4px); justify-content: center; }
  /* le compteur "X / Y" passe en pleine largeur sous les champs */
  .fbar > div[id$="Info"] { flex: 1 1 100%; margin-left: 0 !important; text-align: right; }
  /* Modal footer en colonne */
  .modal-f { flex-direction: column-reverse; }
  .modal-f .btn { width: 100%; justify-content: center; }
  /* Calc box */
  .calc-box { padding: 11px 12px; }
  /* Panel body padding réduit */
  .panel-b { padding: 12px 14px; }
}

@media (max-width: 400px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .tabs, .tab-bar { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .tab-btn, .tab { flex: none; white-space: nowrap; }
}

/* Etiquette d'immatriculation posee sur la carte en vue flotte : elle doit se
   lire sur n'importe quel fond de carte sans ajouter de bordure. */
.leaflet-tooltip.suivi-etiq {
  background: rgba(255,255,255,.94);
  color: var(--text);
  border: 0;
  box-shadow: 0 2px 6px rgba(16,24,40,.18);
  border-radius: 5px;
  padding: 2px 7px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.leaflet-tooltip.suivi-etiq::before { display: none; }

/* Interrupteur d'un service : la cible est large, l'etat se lit sans reflechir. */
.svc-bascule {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  padding: 9px 13px; border-radius: var(--r-sm); background: var(--bg2);
}
.svc-bascule input { width: 17px; height: 17px; cursor: pointer; accent-color: var(--blue); }