/* =====================================================================
   NEKA IMMO — système de design des tableaux de bord
   Tokens, mise en page et composants `dm-`, plus une couche de
   compatibilité Bootstrap pour les écrans existants.
   ===================================================================== */

/* ---------- Tokens : thème clair ---------- */
:root {
  --brand: #0f5e50;
  --brand-strong: #0a4a3f;
  --brand-soft: #dceee8;
  --on-brand: #ffffff;
  --accent: #a8561c;
  --accent-soft: #f6e6d8;

  --surface: #f4f2ee;
  --surface-raised: #ffffff;
  --surface-sunken: #ece9e3;
  --line: #e4e0d8;

  --ink: #1d2320;
  --ink-muted: #5f655f;

  --success: #1e7a3c;
  --success-soft: #e0f1e3;
  --warning: #8a5a00;
  --warning-soft: #fbefd2;
  --danger: #b42318;
  --danger-soft: #fbe3df;
  --info: #1f5fad;
  --info-soft: #e1ebf8;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --shadow: 0 1px 2px rgba(29, 35, 32, .04), 0 1px 1px rgba(29, 35, 32, .03);
  --side-w: 232px;

  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  color-scheme: light;
}

/* ---------- Tokens : thème sombre ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #3aa88d;
    --brand-strong: #0f5e50;
    --brand-soft: #163b33;
    --on-brand: #ffffff;
    --accent: #d9874a;
    --accent-soft: #3e2a1b;
    --surface: #111513;
    --surface-raised: #191e1b;
    --surface-sunken: #0c0f0e;
    --line: #2a312d;
    --ink: #e9ece9;
    --ink-muted: #a4aba6;
    --success: #5cc27a;
    --success-soft: #1a3322;
    --warning: #e3b04f;
    --warning-soft: #3a2f16;
    --danger: #f07a6c;
    --danger-soft: #3d1f1b;
    --info: #78a9ea;
    --info-soft: #1a2a40;
    --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand: #3aa88d;
  --brand-strong: #0f5e50;
  --brand-soft: #163b33;
  --on-brand: #ffffff;
  --accent: #d9874a;
  --accent-soft: #3e2a1b;
  --surface: #111513;
  --surface-raised: #191e1b;
  --surface-sunken: #0c0f0e;
  --line: #2a312d;
  --ink: #e9ece9;
  --ink-muted: #a4aba6;
  --success: #5cc27a;
  --success-soft: #1a3322;
  --warning: #e3b04f;
  --warning-soft: #3a2f16;
  --danger: #f07a6c;
  --danger-soft: #3d1f1b;
  --info: #78a9ea;
  --info-soft: #1a2a40;
  --shadow: none;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body.dm-body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
.dm-body a { color: var(--brand); text-decoration: none; }
.dm-body a:hover { text-decoration: underline; }
.dm-mono { font-family: var(--mono); font-size: 12.5px; }
.dm-muted { color: var(--ink-muted); }
.dm-label {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-muted);
}
.dm-caption { font-size: 12.5px; color: var(--ink-muted); }
.dm-up { color: var(--success); font-weight: 700; }
.dm-down { color: var(--danger); font-weight: 700; }
.dm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Coque applicative ---------- */
.dm-app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); min-height: 100vh; }

.dm-side {
  background: var(--surface-sunken);
  border-right: 1px solid var(--line);
  padding: var(--space-5) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-5);
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.dm-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 19px; letter-spacing: -.01em; color: var(--ink) !important; padding: 0 var(--space-2); }
.dm-logo:hover { text-decoration: none !important; }
.dm-logo-mark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--brand-strong); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 16px;
}
.dm-side .dm-label { padding: 0 var(--space-2); }

.dm-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.dm-nav a, .dm-nav summary {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: var(--radius-md);
  color: var(--ink-muted); font-weight: 600; font-size: 14.5px;
  cursor: pointer; list-style: none; text-decoration: none !important;
}
.dm-nav summary::-webkit-details-marker { display: none; }
.dm-nav a:hover, .dm-nav summary:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.dm-nav a.is-active { background: var(--brand-strong); color: var(--on-brand); }
.dm-nav i { font-size: 17px; width: 20px; text-align: center; }
.dm-nav .dm-count {
  margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--danger); color: #fff; font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
}
.dm-nav details > summary .bi-chevron-down { margin-left: auto; font-size: 12px; transition: transform .15s; }
.dm-nav details[open] > summary .bi-chevron-down { transform: rotate(180deg); }
.dm-nav details[open] > summary { color: var(--ink); }
.dm-nav details ul { list-style: none; margin: 2px 0 6px; padding: 0 0 0 32px; }
.dm-nav details ul a { padding: 7px 12px; font-size: 13.5px; font-weight: 600; }
.dm-nav details ul a.is-active { background: var(--brand-soft); color: var(--brand); }

.dm-side-note {
  margin-top: auto; background: var(--brand-soft); border-radius: var(--radius-md);
  padding: var(--space-4); font-size: 13px; color: var(--ink);
}
.dm-side-note strong { display: block; margin-bottom: 4px; font-size: 14px; }

.dm-main { padding: var(--space-6); min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); }

.dm-top { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.dm-top-title { margin-right: auto; min-width: 0; }
.dm-top h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.dm-top p { margin: 4px 0 0; color: var(--ink-muted); font-size: 14.5px; }
.dm-search { position: relative; width: 300px; max-width: 100%; }
.dm-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); }
.dm-search input {
  width: 100%; height: 44px; padding: 0 14px 0 40px; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); font: inherit;
}
.dm-search input:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.dm-user { display: flex; align-items: center; gap: 10px; position: relative; }
.dm-user > button { all: unset; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.dm-user > button:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 8px; }
.dm-user strong { display: block; font-size: 14.5px; line-height: 1.2; }
.dm-user span { font-size: 13px; color: var(--ink-muted); }
.dm-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 240px;
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .12); padding: 6px; display: none;
}
.dm-menu.is-open { display: block; }
.dm-menu a, .dm-menu button {
  all: unset; box-sizing: border-box; width: 100%; display: flex; gap: 10px; align-items: center;
  padding: 9px 12px; border-radius: 8px; color: var(--ink); font-size: 14px; cursor: pointer;
}
.dm-menu a:hover, .dm-menu button:hover { background: var(--surface); text-decoration: none; }
.dm-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }

.dm-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
  background: var(--brand-soft); color: var(--brand);
}
.dm-avatar.sm { width: 36px; height: 36px; font-size: 12px; }
.dm-avatar.a { background: var(--accent-soft); color: var(--accent); }
.dm-avatar.i { background: var(--info-soft); color: var(--info); }

.dm-burger { display: none; }

/* ---------- Boutons ---------- */
.dm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 18px; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink) !important;
  font: inherit; font-weight: 700; font-size: 14.5px; cursor: pointer; white-space: nowrap;
  text-decoration: none !important;
}
.dm-btn:hover { border-color: color-mix(in srgb, var(--ink) 25%, var(--line)); }
.dm-btn.p { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--on-brand) !important; }
.dm-btn.p:hover { background: color-mix(in srgb, var(--brand-strong) 88%, #000); }
.dm-btn.sm { height: 34px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }
.dm-btn.ghost { background: transparent; }
.dm-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---------- Grilles ---------- */
.dm-grid { display: grid; gap: var(--space-4); }
.dm-grid.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dm-grid.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dm-grid.k2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dm-grid.r21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.dm-grid.r12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.dm-grid.r31 { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); }

/* ---------- Cartes ---------- */
.dm-card {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow); min-width: 0;
  display: flex; flex-direction: column; gap: var(--space-4);
}
.dm-card-head { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.dm-card-head h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.dm-card-head .dm-caption { font-size: 13px; }
.dm-card-head > :last-child:not(h2):not(.dm-caption) { margin-left: auto; }
.dm-empty { color: var(--ink-muted); font-size: 14px; padding: var(--space-4) 0; }

/* ---------- KPI ---------- */
.dm-kpi {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-5); display: flex; flex-direction: column; gap: 8px; min-width: 0; box-shadow: var(--shadow);
}
.dm-kpi .dm-label { color: var(--ink-muted); }
.dm-kpi-value { font-size: clamp(24px, 2.1vw, 32px); font-weight: 800; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; }
.dm-kpi-value small { font-size: 15px; font-weight: 700; margin-left: 4px; letter-spacing: 0; }
.dm-kpi-sub { font-size: 13.5px; color: var(--ink-muted); font-weight: 600; }
.dm-kpi.hero { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--on-brand); }
.dm-kpi.hero .dm-label, .dm-kpi.hero .dm-kpi-sub { color: color-mix(in srgb, var(--on-brand) 85%, transparent); }
.dm-kpi.hero .dm-up { color: var(--on-brand); }

/* ---------- Badges de statut ---------- */
.dm-badge {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 3px 10px; border-radius: 6px; font-size: 13px; font-weight: 700;
  background: var(--surface-sunken); color: var(--ink-muted);
}
.dm-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dm-badge.ok { background: var(--success-soft); color: var(--success); }
.dm-badge.wa { background: var(--warning-soft); color: var(--warning); }
.dm-badge.ko { background: var(--danger-soft); color: var(--danger); }
.dm-badge.in { background: var(--info-soft); color: var(--info); }
.dm-badge.br { background: var(--brand-soft); color: var(--brand); }
.dm-badge.ac { background: var(--accent-soft); color: var(--accent); }
.dm-badge.block { min-width: 88px; justify-content: center; padding: 6px 10px; }

/* ---------- Tableaux ---------- */
.dm-table-wrap { overflow-x: auto; margin: 0 calc(var(--space-5) * -1); padding: 0 var(--space-5); }
.dm-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dm-table th {
  text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.dm-table td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dm-table tr:last-child td { border-bottom: 0; }
.dm-table .num { text-align: right; font-weight: 700; white-space: nowrap; }
.dm-table td strong { display: block; font-weight: 700; }
.dm-table td small { color: var(--ink-muted); font-size: 13px; }

/* ---------- Listes ---------- */
.dm-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dm-li { display: flex; align-items: center; gap: var(--space-3); padding: 14px 0; border-bottom: 1px solid var(--line); }
.dm-li:last-child { border-bottom: 0; }
.dm-li-body { min-width: 0; flex: 1; }
.dm-li-body strong { display: block; font-weight: 700; font-size: 14.5px; }
.dm-li-body span { color: var(--ink-muted); font-size: 13px; }
.dm-li-end { margin-left: auto; text-align: right; font-weight: 700; white-space: nowrap; }
.dm-date {
  width: 46px; flex: none; text-align: center; background: var(--surface); border-radius: 8px; padding: 4px 0;
}
.dm-date b { display: block; font-size: 19px; line-height: 1.1; }
.dm-date span { font-size: 11px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; }

/* ---------- Barres de progression ---------- */
.dm-bar { height: 8px; border-radius: 4px; background: var(--surface-sunken); overflow: hidden; }
.dm-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--brand); }
.dm-bar.wa > span { background: var(--warning); }
.dm-bar.ko > span { background: var(--danger); }
.dm-bar.ac > span { background: var(--accent); }

/* ---------- Légendes et graphiques ---------- */
.dm-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13.5px; font-weight: 600; color: var(--ink-muted); margin: 0; padding: 0; list-style: none; }
.dm-legend li { display: inline-flex; align-items: center; gap: 7px; }
.dm-legend i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; background: var(--brand); }
.dm-legend i.ac { background: var(--accent); }
.dm-legend i.in { background: var(--info); }
.dm-legend i.wa { background: var(--warning); }
.dm-legend i.ko { background: var(--danger); }
.dm-legend i.ok { background: var(--success); }
.dm-svg { width: 100%; height: auto; display: block; overflow: visible; }
.dm-svg text { font-family: var(--font); font-size: 12px; fill: var(--ink-muted); font-weight: 600; }
.dm-svg .grid { stroke: var(--line); stroke-width: 1; }
.dm-svg .s1 { fill: var(--brand); }
.dm-svg .s2 { fill: var(--accent); }
.dm-svg .s0 { fill: var(--surface-sunken); }
.dm-svg .l1 { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.dm-svg .l2 { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 7 5; stroke-linejoin: round; }
.dm-svg .area { fill: var(--brand); opacity: .12; }
.dm-svg .dot { fill: var(--surface-raised); stroke: var(--brand); stroke-width: 2.5; }
.dm-svg rect.bar:hover { opacity: .85; }
.dm-donut { position: relative; width: 190px; margin: 0 auto; }
.dm-donut svg { width: 100%; height: auto; display: block; transform: rotate(-90deg); }
.dm-donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dm-donut-center b { font-size: 22px; font-weight: 800; line-height: 1; }
.dm-donut-center span { font-size: 13px; color: var(--ink-muted); margin-top: 4px; }

/* ---------- Étapes (tournée) ---------- */
.dm-steps { list-style: none; margin: 0; padding: 0; position: relative; }
.dm-steps li { display: flex; gap: 14px; padding-bottom: 18px; position: relative; }
.dm-steps li::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 0; width: 2px; background: var(--line); }
.dm-steps li:last-child::before { display: none; }
.dm-steps li > i, .dm-steps li > b {
  width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; font-style: normal; z-index: 1;
  background: var(--surface-sunken); color: var(--ink-muted); border: 2px solid var(--line);
}
.dm-steps li.done > i { background: var(--success); color: #fff; border-color: var(--success); }
.dm-steps li.now > b { background: var(--brand-strong); color: #fff; border-color: var(--brand-strong); }
.dm-steps strong { display: block; font-size: 14.5px; }
.dm-steps span { font-size: 13px; color: var(--ink-muted); }

/* ---------- Carte de tournée ---------- */
.dm-map {
  position: relative; border-radius: var(--radius-md); overflow: hidden; min-height: 280px;
  background: color-mix(in srgb, var(--surface-sunken) 70%, var(--surface));
}
.dm-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dm-map .road { stroke: color-mix(in srgb, var(--ink) 10%, transparent); stroke-width: 14; fill: none; }
.dm-map .river { stroke: color-mix(in srgb, var(--info) 25%, transparent); stroke-width: 26; fill: none; }
.dm-map .route { stroke: var(--brand); stroke-width: 3; stroke-dasharray: 7 6; fill: none; }
.dm-map .pin { stroke: var(--surface-raised); stroke-width: 3; }
.dm-map .pin.ok { fill: var(--success); }
.dm-map .pin.wa { fill: var(--warning); }
.dm-map .pin.ko { fill: var(--danger); }
.dm-map .pin.br { fill: var(--brand); }
.dm-map text { font-family: var(--font); font-size: 13px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: color-mix(in srgb, var(--surface) 80%, transparent); stroke-width: 4px; }

/* ---------- Tuiles d'action ---------- */
.dm-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.dm-tile {
  border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-4);
  display: flex; flex-direction: column; gap: 4px; color: var(--ink) !important; text-decoration: none !important;
  background: var(--surface-raised);
}
.dm-tile:hover { border-color: var(--brand); }
.dm-tile i { font-size: 22px; color: var(--brand); margin-bottom: 8px; }
.dm-tile strong { font-size: 15px; }
.dm-tile span { font-size: 13px; color: var(--ink-muted); }

/* ---------- Alertes ---------- */
.dm-alert { border-radius: var(--radius-md); padding: var(--space-4); font-size: 14px; background: var(--info-soft); }
.dm-alert strong { display: block; }
.dm-alert.ko { background: var(--danger-soft); }
.dm-alert.ko strong { color: var(--danger); }
.dm-alert.wa { background: var(--warning-soft); }
.dm-alert.wa strong { color: var(--warning); }
.dm-alert.ok { background: var(--success-soft); }
.dm-alert.ok strong { color: var(--success); }
.dm-flash { margin: 0; }

/* ---------- Filtres de période ---------- */
.dm-seg { display: inline-flex; background: var(--surface-sunken); border-radius: var(--radius-md); padding: 3px; gap: 2px; flex-wrap: wrap; }
.dm-seg a { padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 700; color: var(--ink-muted) !important; text-decoration: none !important; }
.dm-seg a.is-active { background: var(--surface-raised); color: var(--ink) !important; box-shadow: var(--shadow); }

/* ---------- Pagination KNP ---------- */
.dm-body .pagination { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.dm-body .page-link { border-radius: 8px !important; border: 1px solid var(--line); background: var(--surface-raised); color: var(--ink); padding: 6px 12px; }
.dm-body .page-item.active .page-link { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }

/* =====================================================================
   Compatibilité : écrans existants (Bootstrap 5)
   ===================================================================== */
.dm-body {
  --bs-body-bg: var(--surface);
  --bs-body-color: var(--ink);
  --bs-border-color: var(--line);
  --bs-primary: var(--brand);
  --bs-primary-rgb: 15, 94, 80;
  --bs-link-color: var(--brand);
  --bs-font-sans-serif: var(--font);
  --bs-body-font-family: var(--font);
  --bs-body-font-size: 14.5px;
}
.dm-legacy { display: flex; flex-direction: column; gap: var(--space-4); }
.dm-legacy h1, .dm-legacy h2, .dm-legacy h3, .dm-legacy h4, .dm-legacy h5, .dm-legacy h6 { color: var(--ink); font-weight: 800; letter-spacing: -.01em; }
.dm-legacy .container, .dm-legacy .container-fluid { max-width: none; padding-left: 0; padding-right: 0; }
.dm-legacy .card {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); color: var(--ink); margin-bottom: var(--space-4);
}
.dm-legacy .card-header, .dm-legacy .card-footer { background: transparent; border-color: var(--line); }
.dm-legacy .card-body { padding: var(--space-5); }
.dm-legacy .card-title { font-size: 18px; font-weight: 800; margin-bottom: var(--space-4); }
.dm-legacy .card.bg-primary, .dm-legacy .bg-primary { background: var(--brand-strong) !important; color: var(--on-brand); }
.dm-legacy .bg-primary :is(h1, h2, h3, h4, h5, h6, p, span, a) { color: var(--on-brand) !important; }
.dm-legacy .card.bg-success { background: var(--success-soft) !important; }
.dm-legacy .card.bg-info { background: var(--info-soft) !important; }
.dm-legacy .card.bg-warning { background: var(--warning-soft) !important; }
.dm-legacy .card.bg-danger { background: var(--danger-soft) !important; }
.dm-legacy .card.bg-secondary, .dm-legacy .card.bg-dark { background: var(--surface-sunken) !important; }
.dm-legacy .card:is(.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark),
.dm-legacy .card:is(.bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark) :is(h1, h2, h3, h4, h5, h6, p, span, a, .text-white) { color: var(--ink) !important; border-color: transparent; }
.dm-legacy .card.bg-success :is(h1, h2, h3, h4, h5, h6) { color: var(--success) !important; }
.dm-legacy .card.bg-info :is(h1, h2, h3, h4, h5, h6) { color: var(--info) !important; }
.dm-legacy .card.bg-warning :is(h1, h2, h3, h4, h5, h6) { color: var(--warning) !important; }
.dm-legacy .card.bg-danger :is(h1, h2, h3, h4, h5, h6) { color: var(--danger) !important; }
.dm-legacy .text-primary { color: var(--brand) !important; }
.dm-legacy .text-secondary, .dm-legacy .text-muted { color: var(--ink-muted) !important; }
.dm-legacy .text-success { color: var(--success) !important; }
.dm-legacy .text-danger { color: var(--danger) !important; }
.dm-legacy .text-warning { color: var(--warning) !important; }
.dm-legacy .text-info { color: var(--info) !important; }

.dm-legacy .btn { border-radius: var(--radius-md); font-weight: 700; font-family: var(--font); }
.dm-legacy .btn-primary, .dm-legacy .btn-info, .dm-legacy .btn-success {
  background: var(--brand-strong); border-color: var(--brand-strong); color: #fff;
}
.dm-legacy .btn-primary:hover, .dm-legacy .btn-info:hover, .dm-legacy .btn-success:hover { background: color-mix(in srgb, var(--brand-strong) 85%, #000); border-color: transparent; color: #fff; }
.dm-legacy .btn-secondary, .dm-legacy .btn-light, .dm-legacy .btn-outline-primary, .dm-legacy .btn-outline-secondary {
  background: var(--surface-raised); border: 1px solid var(--line); color: var(--ink);
}
.dm-legacy .btn-warning { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.dm-legacy .btn-danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.dm-legacy .btn-dark { background: var(--ink); border-color: var(--ink); color: var(--surface); }

.dm-legacy .table { --bs-table-bg: transparent; --bs-table-striped-bg: color-mix(in srgb, var(--ink) 3%, transparent); --bs-table-hover-bg: color-mix(in srgb, var(--brand) 6%, transparent); color: var(--ink); border-color: var(--line); font-size: 14px; }
.dm-legacy .table > :not(caption) > * > * { padding: 12px; border-bottom-color: var(--line); color: var(--ink); background-color: var(--bs-table-bg); box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg, transparent); }
.dm-legacy .table thead th, .dm-legacy .table thead td {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted);
  background: transparent; white-space: nowrap;
}
.dm-legacy .table.border, .dm-legacy .table-bordered { border-color: var(--line) !important; }
.dm-legacy .table-dark, .dm-legacy thead.table-dark th, .dm-legacy .thead-dark th { --bs-table-bg: var(--surface-sunken); color: var(--ink-muted); }

.dm-legacy .form-control, .dm-legacy .form-select, .dm-legacy select, .dm-legacy textarea, .dm-legacy input[type="text"],
.dm-legacy input[type="number"], .dm-legacy input[type="email"], .dm-legacy input[type="date"], .dm-legacy input[type="password"], .dm-legacy input[type="tel"] {
  background-color: var(--surface-raised); color: var(--ink); border: 1px solid var(--line);
  border-radius: var(--radius-md); min-height: 42px; font-family: var(--font);
}
.dm-legacy .form-control:focus, .dm-legacy .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.dm-legacy label, .dm-legacy .form-label { font-weight: 700; font-size: 13.5px; margin-bottom: 6px; color: var(--ink); }

.dm-legacy .badge { border-radius: 6px; font-weight: 700; padding: 5px 9px; font-size: 12.5px; }
.dm-legacy .badge.bg-success, .dm-legacy .bg-light-success { background: var(--success-soft) !important; color: var(--success) !important; }
.dm-legacy .badge.bg-danger, .dm-legacy .bg-light-danger { background: var(--danger-soft) !important; color: var(--danger) !important; }
.dm-legacy .badge.bg-warning, .dm-legacy .bg-light-warning { background: var(--warning-soft) !important; color: var(--warning) !important; }
.dm-legacy .badge.bg-info, .dm-legacy .badge.bg-primary, .dm-legacy .bg-light-info { background: var(--info-soft) !important; color: var(--info) !important; }
.dm-legacy .badge.bg-secondary { background: var(--surface-sunken) !important; color: var(--ink-muted) !important; }

.dm-legacy .alert { border-radius: var(--radius-md); border: 0; }
.dm-legacy .alert-success { background: var(--success-soft); color: var(--success); }
.dm-legacy .alert-danger { background: var(--danger-soft); color: var(--danger); }
.dm-legacy .alert-warning { background: var(--warning-soft); color: var(--warning); }
.dm-legacy .alert-info { background: var(--info-soft); color: var(--info); }

.dm-legacy .dataTables_wrapper { color: var(--ink); }
.dm-legacy .dataTables_wrapper .dataTables_filter input, .dm-legacy .dataTables_wrapper .dataTables_length select { margin-left: 6px; }
.dm-legacy .dataTables_info { color: var(--ink-muted) !important; }
.dm-legacy .modal-content { background: var(--surface-raised); color: var(--ink); border-radius: var(--radius-lg); border-color: var(--line); }
.dm-legacy .dropdown-menu { background: var(--surface-raised); border-color: var(--line); }
.dm-legacy .dropdown-item { color: var(--ink); }
.dm-legacy .list-group-item { background: var(--surface-raised); color: var(--ink); border-color: var(--line); }
.dm-legacy hr { border-color: var(--line); opacity: 1; }
.dm-legacy img { max-width: 100%; }
.select2-container--bootstrap4 .select2-selection { background-color: var(--surface-raised) !important; border-color: var(--line) !important; border-radius: var(--radius-md) !important; min-height: 42px; }
.select2-dropdown { background: var(--surface-raised) !important; color: var(--ink); border-color: var(--line) !important; }

/* =====================================================================
   Connexion
   ===================================================================== */
.dm-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.dm-auth-art { background: var(--surface-sunken); position: relative; overflow: hidden; padding: var(--space-6) 56px; display: flex; flex-direction: column; justify-content: center; gap: var(--space-4); }
.dm-auth-art h1 { font-size: clamp(48px, 7vw, 96px); line-height: .95; font-weight: 800; letter-spacing: -.04em; margin: 0; }
.dm-auth-art p { font-size: 18px; color: var(--ink-muted); max-width: 420px; margin: 0; }
.dm-auth-art svg { position: absolute; right: -40px; bottom: -10px; width: 52%; max-width: 420px; height: auto; }
.dm-auth-form { display: grid; place-items: center; padding: var(--space-6) var(--space-4); }
.dm-auth-card { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--space-4); }
.dm-auth-card h2 { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.dm-field { display: flex; flex-direction: column; gap: 6px; }
.dm-field label { font-weight: 700; font-size: 13.5px; }
.dm-field input {
  height: 48px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--line);
  background: var(--surface-raised); color: var(--ink); font: inherit; font-size: 15px;
}
.dm-field input:focus { outline: 2px solid var(--brand); outline-offset: 1px; border-color: transparent; }

/* ---------- Bascule de thème ---------- */
.dm-theme { all: unset; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-muted); border: 1px solid var(--line); background: var(--surface-raised); }
.dm-theme:hover { color: var(--ink); }
.dm-theme:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.dm-theme.dm-burger { display: none; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1280px) {
  .dm-grid.k4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-grid.k3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dm-grid.k3 > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 1080px) {
  .dm-grid.r21, .dm-grid.r12, .dm-grid.r31 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .dm-app { grid-template-columns: minmax(0, 1fr); }
  .dm-side {
    position: fixed; inset: 0 auto 0 0; width: min(280px, 86vw); z-index: 60;
    transform: translateX(-100%); transition: transform .2s ease;
  }
  .dm-app.nav-open .dm-side { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .35); }
  .dm-theme.dm-burger { display: grid; }
  .dm-main { padding: var(--space-5) var(--space-4); }
  .dm-search { order: 5; width: 100%; }
  .dm-user .dm-user-text { display: none; }
  .dm-auth { grid-template-columns: minmax(0, 1fr); }
  .dm-auth-art { padding: var(--space-6) var(--space-4); min-height: 220px; }
  .dm-auth-art svg { width: 44%; }
}
@media (max-width: 600px) {
  .dm-grid.k4, .dm-grid.k3, .dm-grid.k2 { grid-template-columns: minmax(0, 1fr); }
  .dm-top h1 { font-size: 23px; }
  .dm-kpi-value { font-size: 28px; }
  .dm-card { padding: var(--space-4); }
  .dm-table-wrap { margin: 0 calc(var(--space-4) * -1); padding: 0 var(--space-4); }
  .dm-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

@media print {
  .dm-side, .dm-top .dm-search, .dm-top .dm-user, .dm-burger, .dm-theme { display: none !important; }
  .dm-app { display: block; }
  .dm-main { padding: 0; }
}

/* =====================================================================
   Connexion aux couleurs du logo NEKA IMMO (bleu profond + vert)
   ===================================================================== */
:root {
  --nk-bleu: #0f3a8c;
  --nk-bleu-vif: #1a5fd6;
  --nk-vert: #3d9b2f;
  --nk-vert-fonce: #2a7d20;
}
.nk-login { background: var(--surface); }
.nk-art {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(circle at 85% 12%, rgba(255, 255, 255, .12) 0 120px, transparent 121px),
    radial-gradient(circle at 10% 90%, rgba(255, 255, 255, .06) 0 180px, transparent 181px),
    linear-gradient(155deg, #0a2a6b 0%, var(--nk-bleu) 45%, var(--nk-bleu-vif) 100%);
  display: flex; align-items: center; justify-content: center; padding: 48px 56px 120px;
}
.nk-art-inner { position: relative; z-index: 1; max-width: 460px; display: flex; flex-direction: column; gap: 26px; }
.nk-logo-carte {
  background: #fff; border-radius: 24px; padding: 18px 28px; align-self: flex-start;
  box-shadow: 0 24px 60px rgba(4, 20, 60, .35);
}
.nk-logo-carte img { display: block; width: 250px; height: auto; }
.nk-art h1 { margin: 0; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.nk-atouts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: rgba(255, 255, 255, .9); }
.nk-atouts li { display: flex; gap: 12px; align-items: center; }
.nk-atouts i {
  width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; font-size: 17px;
  background: rgba(255, 255, 255, .14); color: #b9f0a8;
}
.nk-vague { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 110px; }

.nk-login .dm-auth-card h2 { color: var(--nk-bleu); }
.nk-login .nk-btn {
  height: 50px; font-size: 15.5px; border: 0;
  background: linear-gradient(135deg, var(--nk-bleu) 0%, var(--nk-bleu-vif) 100%) !important;
  box-shadow: 0 8px 20px rgba(15, 58, 140, .25);
}
.nk-login .nk-btn:hover { filter: brightness(1.08); }
.nk-login .nk-btn-empreinte { height: 50px; border: 2px solid var(--nk-vert); color: var(--nk-vert-fonce) !important; background: #f2faef; }
.nk-login .nk-btn-empreinte:hover { background: #e3f4dc; border-color: var(--nk-vert-fonce); }
.nk-login .dm-field input:focus { outline-color: var(--nk-bleu-vif); }
.nk-login .dm-auth-card a { color: var(--nk-bleu-vif); }
.nk-logo-mobile { display: none; width: 170px; height: auto; align-self: center; }
.nk-pied { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--ink-muted); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nk-login .dm-auth-card h2 { color: #8db4ff; }
  :root:not([data-theme="light"]) .nk-login .nk-btn-empreinte { background: transparent; color: #8fd77e !important; }
  :root:not([data-theme="light"]) .nk-login .dm-auth-card a { color: #8db4ff; }
  :root:not([data-theme="light"]) .nk-logo-mobile { background: #fff; border-radius: 18px; padding: 10px 14px; }
}
:root[data-theme="dark"] .nk-login .dm-auth-card h2 { color: #8db4ff; }
:root[data-theme="dark"] .nk-login .nk-btn-empreinte { background: transparent; color: #8fd77e !important; }
:root[data-theme="dark"] .nk-login .dm-auth-card a { color: #8db4ff; }
:root[data-theme="dark"] .nk-logo-mobile { background: #fff; border-radius: 18px; padding: 10px 14px; }

@media (max-width: 900px) {
  .nk-art { display: none; }
  .nk-logo-mobile { display: block; }
}

/* Logo dans la barre latérale */
.dm-logo-img { display: block; width: 100%; max-width: 168px; height: auto; }
.dm-logo.avec-image { flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 8px; border-radius: 12px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dm-logo.avec-image { background: #fff; } }
:root[data-theme="dark"] .dm-logo.avec-image { background: #fff; }
.nk-marque { gap: 10px; }
.nk-marque img { width: 58px; height: auto; flex: none; }
.nk-marque span { display: flex; flex-direction: column; line-height: 1; }
.nk-marque b { font-size: 20px; font-weight: 800; letter-spacing: .02em; color: #0f3a8c; }
.nk-marque em { font-style: normal; font-size: 12.5px; font-weight: 800; letter-spacing: .38em; color: #3d9b2f; margin-top: 3px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nk-marque b { color: #8db4ff; } :root:not([data-theme="light"]) .nk-marque em { color: #8fd77e; } }
:root[data-theme="dark"] .nk-marque b { color: #8db4ff; }
:root[data-theme="dark"] .nk-marque em { color: #8fd77e; }

/* =====================================================================
   Encaissement simplifié (agent / gestionnaire)
   ===================================================================== */
.enc-liste { display: flex; flex-direction: column; gap: var(--space-3); }
.enc-carte { gap: 14px; }
.enc-carte[hidden] { display: none; }
.enc-tete { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.enc-nom { display: block; font-size: 16px; }
.enc-situation { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.enc-situation strong { font-size: 18px; }
.enc-form { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1fr); gap: 14px 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.enc-montant label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.enc-montant-champ { display: flex; align-items: center; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.enc-montant-champ:focus-within { border-color: var(--brand); }
.enc-montant-champ input { border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 22px; font-weight: 800; padding: 8px 12px; width: 100%; min-width: 0; outline: none; }
.enc-montant-champ span { padding: 0 12px; font-weight: 700; color: var(--ink-muted); }
.enc-raccourcis { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.enc-raccourcis button { all: unset; cursor: pointer; font-size: 12.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--surface-sunken); color: var(--ink-muted); }
.enc-raccourcis button:hover, .enc-raccourcis button:focus-visible { background: var(--brand-soft); color: var(--brand); }
.enc-mode label { display: block; font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.enc-pied { grid-column: 1 / -1; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.enc-apercu { margin: 0 auto 0 0; flex: 1; min-width: 200px; }
@media (max-width: 700px) {
  .enc-form { grid-template-columns: minmax(0, 1fr); }
  .enc-situation { align-items: flex-start; text-align: left; width: 100%; flex-direction: row; gap: 8px; align-items: center; }
  .enc-pied .dm-btn.p { width: 100%; }
}

/* Rôles & permissions */
.perm-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.perm-case { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: var(--radius-md); cursor: pointer; background: var(--surface-raised); }
.perm-case input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.perm-case span { display: flex; flex-direction: column; min-width: 0; }
.perm-case strong { font-size: 13.5px; font-weight: 700; }
.perm-case small { font-size: 11px; color: var(--ink-muted); }
.perm-case.est-coche { border-color: var(--brand); background: var(--brand-soft); }
.perm-case.est-grise { cursor: not-allowed; opacity: .6; }

/* =====================================================================
   Échéances du mois (admin, gestionnaire, agent de terrain)
   ===================================================================== */
.ech-outils { justify-content: space-between; }
.ech-outils .dm-seg b { font-weight: 800; margin-left: 4px; opacity: .7; }
.ech-table td small { display: block; }
.ech-table tr[hidden] { display: none; }
.ech-qui > div { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.ech-table td[data-titre="Lot"] { min-width: 150px; }
.ech-table td[data-titre="Échéance"] { white-space: nowrap; }
.ech-actions { white-space: nowrap; text-align: right; }
.ech-actions > * { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.ech-actions form { margin: 0; }
.ech-danger { color: var(--danger) !important; }
.ech-dialog { border: 0; border-radius: var(--radius-lg, 16px); padding: var(--space-5); width: min(520px, calc(100vw - 32px)); background: var(--surface-raised); color: var(--ink); box-shadow: var(--shadow); }
.ech-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.ech-dialog h2 { margin: 0 0 4px; font-size: 18px; font-weight: 800; }
.ech-dialog .dm-label { display: block; margin: 14px 0 6px; }
.enc-select { width: 100%; height: 52px; padding: 0 40px 0 12px; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23888' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center; color: var(--ink); font: inherit; font-size: 16px; font-weight: 700; appearance: none; -webkit-appearance: none; }
.enc-select:focus { outline: none; border-color: var(--brand); }
.ech-dialog-pied { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
@media (max-width: 760px) {
  /* Sur téléphone : une carte par échéance, action en pleine largeur. */
  .ech-outils .dm-search { width: 100%; margin-left: 0 !important; }
  .ech-table thead { display: none; }
  .ech-table, .ech-table tbody { display: block; }
  .ech-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .ech-table tr:last-child { border-bottom: 0; }
  .ech-table td, .ech-table td.num { padding: 0; border: 0; text-align: left; }
  .ech-table td[data-titre]::before { content: attr(data-titre); display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-muted); }
  .ech-table .ech-qui, .ech-table .ech-actions { grid-column: 1 / -1; }
  .ech-table .ech-actions { display: flex; gap: 6px; text-align: left; }
  .ech-table .ech-actions > * { margin: 0; }
  .ech-table .ech-actions [data-encaisser] { flex: 1; height: 42px; font-size: 15px; }
  .ech-table .ech-actions .ech-txt { display: none; }
}

/* Reçu prêt après encaissement (impression automatique) */
.recu-pret { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.recu-pret-txt { flex: 1; min-width: 200px; }
.recu-pret-modele { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-size: 13px; }
.recu-pret-modele .enc-select { width: auto; min-width: 160px; height: 34px; font-size: 13.5px; border-width: 1px; padding-right: 34px; }

/* =====================================================================
   Journée de l'agent : l'essentiel en deux clics
   ===================================================================== */
.ag-onglets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }
.ag-onglet { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px;
             padding: 14px 16px; border-radius: var(--radius-lg, 16px); border: 2px solid var(--line); background: var(--surface-raised); min-height: 76px; }
.ag-onglet:hover { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); }
.ag-onglet:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ag-onglet[aria-selected="true"] { border-color: var(--brand); background: var(--brand-soft); }
.ag-onglet-titre { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; }
.ag-onglet-titre i { color: var(--brand); font-size: 18px; }
.ag-onglet.ko .ag-onglet-titre i { color: var(--danger); }
.ag-onglet-nb { grid-row: span 2; font-size: 28px; font-weight: 800; line-height: 1; }
.ag-onglet.ko .ag-onglet-nb { color: var(--danger); }
.ag-onglet-sous { font-size: 13px; font-weight: 600; color: var(--ink-muted); }
.ag-panneau[hidden] { display: none; }
.ag-progres { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.ag-aide { margin: 0; }
.ag-liste { list-style: none; margin: 0; padding: 0; }
.ag-ligne { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ag-ligne:last-child { border-bottom: 0; }
.ag-qui { display: flex; flex-direction: column; min-width: 0; }
.ag-qui strong { font-size: 15.5px; }
.ag-qui span { font-size: 13px; color: var(--ink-muted); }
.ag-qui .dm-badge { font-size: 11.5px; padding: 2px 8px; vertical-align: middle; }
.ag-montant { text-align: right; white-space: nowrap; }
.ag-montant strong { font-size: 17px; font-weight: 800; }
.ag-montant small { margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--ink-muted); }
.ag-actions { display: flex; gap: 6px; }
.ag-appel { width: 42px; padding: 0 !important; justify-content: center; }
.ag-encaisser { min-width: 120px; justify-content: center; }
.ag-carte { height: 420px; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); z-index: 0; }
.ag-carte .leaflet-popup-content { font: 13.5px/1.45 var(--font); }
@media (max-width: 700px) {
  .ag-onglets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ag-onglet { grid-template-columns: 1fr; padding: 10px; min-height: 0; text-align: center; justify-items: center; }
  .ag-onglet-titre { font-size: 13px; gap: 5px; }
  .ag-onglet-nb { grid-row: auto; font-size: 24px; }
  .ag-onglet-sous { font-size: 11.5px; }
  .ag-ligne { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ag-actions { grid-column: 1 / -1; }
  .ag-encaisser { flex: 1; height: 46px; font-size: 16px; }
  .ag-appel { height: 46px; width: 52px; }
  .ag-carte { height: 340px; }
}

/* =====================================================================
   Itinéraire sur carte (Me localiser → itinéraire → Démarrer)
   ===================================================================== */
.itin-localiser { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px; border: 0; border-radius: 10px;
  background: #fff; color: #1d2320; font: 700 14px var(--font, system-ui); box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: pointer; }
.itin-localiser i { color: #1a73e8; font-size: 16px; }
.itin-recherche .itin-localiser i { animation: itin-tourne 1s linear infinite; }
@keyframes itin-tourne { to { transform: rotate(360deg); } }
.itin-panneau { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 1000; background: #fff; color: #1d2320;
  border-radius: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.28); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
  font-family: var(--font, system-ui); max-width: 520px; margin: 0 auto; }
.itin-panneau[hidden] { display: none; }
.itin-ligne { display: flex; align-items: center; gap: 10px; }
.itin-texte { flex: 1; min-width: 0; font-size: 14px; }
.itin-texte strong { display: block; font-size: 15px; overflow-wrap: anywhere; }
.itin-texte span { display: block; color: #4a524c; }
.itin-texte b { color: #1e7a3c; }
.itin-erreur { color: #b3261e; font-weight: 600; }
.itin-fermer { border: 0; background: #f1efea; width: 36px; height: 36px; border-radius: 50%; cursor: pointer; flex: none; color: #1d2320; }
.itin-boutons { display: flex; gap: 8px; }
.itin-demarrer, .itin-google, .itin-arreter { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 18px;
  border-radius: 23px; font: 700 15px var(--font, system-ui); text-decoration: none !important; cursor: pointer; }
.itin-demarrer { flex: 1; border: 0; background: #1a73e8; color: #fff !important; }
.itin-google { border: 1px solid #d9d5cc; background: #fff; color: #1d2320 !important; }
.itin-arreter { border: 0; background: #b3261e; color: #fff; height: 40px; flex: none; }
.itin-manoeuvre { display: flex; align-items: center; gap: 14px; background: #0f5e50; color: #fff; border-radius: 10px; padding: 12px 14px; }
.itin-manoeuvre i { font-size: 34px; line-height: 1; }
.itin-manoeuvre strong { display: block; font-size: 22px; line-height: 1.1; }
.itin-manoeuvre span { display: block; font-size: 15px; overflow-wrap: anywhere; }
.itin-guidage { top: 10px; bottom: auto; }
.itin-guidage .itin-ligne { order: 2; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .itin-panneau { box-shadow: 0 6px 24px rgba(0,0,0,.6); } }
/* Pendant le guidage, la carte de l'onglet agent prend presque tout l'écran. */
.ag-carte.itin-en-route { height: calc(100vh - 120px); min-height: 420px; }
.itin-en-route .itin-localiser { display: none; }
.itin-google { white-space: nowrap; padding: 0 14px; }
.itin-action { display: flex; }
.itin-action > * { flex: 1; height: 44px; justify-content: center; font-size: 15px; }
@media (max-width: 700px) { .ag-carte { height: 62vh; min-height: 380px; } }

/* Contrats : choix du type de bail */
.bail-usages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.bail-usage { cursor: pointer; margin: 0; }
.bail-usage input { position: absolute; opacity: 0; pointer-events: none; }
.bail-usage span { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px; border: 2px solid var(--line); border-radius: var(--radius-md); background: var(--surface-raised); }
.bail-usage i { font-size: 20px; color: var(--brand); }
.bail-usage strong { font-size: 15px; }
.bail-usage small { font-size: 12.5px; color: var(--ink-muted); }
.bail-usage input:checked + span { border-color: var(--brand); background: var(--brand-soft); }
.bail-usage input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 700px) { .bail-usages { grid-template-columns: minmax(0, 1fr); } }

/* Parcours bien → lot → locataire → contrat */
.parcours ol { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.parcours li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-raised); border: 1px solid var(--line); min-width: 0; }
.parcours-num { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--surface-sunken); color: var(--ink-muted); }
.parcours-txt { min-width: 0; }
.parcours-txt strong { display: block; font-size: 14px; }
.parcours-txt small { display: block; font-size: 12px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.parcours li.actif { border-color: var(--brand); background: var(--brand-soft); }
.parcours li.actif .parcours-num { background: var(--brand-strong); color: var(--on-brand); }
.parcours li.fait .parcours-num { background: var(--success-soft); color: var(--success); }
@media (max-width: 700px) {
  .parcours ol { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .parcours li { flex-direction: column; text-align: center; padding: 8px 4px; gap: 4px; }
  .parcours-txt small { display: none; }
  .parcours-txt strong { font-size: 11.5px; }
}

/* Liste des contrats */
.dm-li[hidden] { display: none; }
.ctr-table tr.ctr-echu td { background: color-mix(in srgb, var(--danger-soft) 55%, transparent); }
.ctr-actions { white-space: normal; }
.ctr-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ctr-actions > * { margin: 0 !important; }
.ctr-durees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ctr-durees .bail-usage span { align-items: center; padding: 10px 8px; }
@media (max-width: 600px) { .dm-grid.k4.ctr-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ctr-kpis .dm-kpi-sub { font-size: 12px; } }
@media (max-width: 760px) {
  .ctr-table tr.ctr-echu td { background: none; }
  .ctr-table tr.ctr-echu { background: color-mix(in srgb, var(--danger-soft) 55%, transparent); border-radius: var(--radius-md); padding: 14px 12px; margin: 6px 0; border-bottom: 0; }
}
.parcours-lien { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit !important; text-decoration: none !important; width: 100%; }
.parcours li:has(.parcours-lien):hover { border-color: var(--brand); }
.parcours-crayon { font-size: 11px; color: var(--brand); }
@media (max-width: 700px) { .parcours-lien { flex-direction: column; gap: 4px; } }
.ech-periode { justify-content: flex-start; }
.ech-periode .ech-mois { width: auto; min-width: 240px; max-width: 100%; height: 40px; font-size: 14px; border-width: 1px; }
.ech-periode > :last-child { margin-left: 0 !important; }
@media (max-width: 600px) { .ech-periode .ech-mois { width: 100%; } }
.enc-filtre-mois { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.enc-filtre-mois .enc-select { width: auto; min-width: 260px; max-width: 100%; height: 42px; font-size: 14px; border-width: 1px; }
@media (max-width: 600px) { .enc-filtre-mois .enc-select { width: 100%; } }

/* Occupation chiffrée (fiches bailleur et bien, espace bailleur) */
.occ { display: flex; flex-direction: column; gap: 10px; }
.occ-pastilles { display: flex; flex-wrap: wrap; gap: 6px; }
.occ-p { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; background: var(--surface-sunken); font-size: 13px; }
.occ-p b { font-size: 15px; }
.occ-p.ok { background: var(--success-soft); color: var(--success); }
.occ-p.wa { background: var(--warning-soft); color: var(--warning); }
.occ-p.ko { background: var(--danger-soft); color: var(--danger); }
.occ.compact .occ-p { padding: 3px 8px; font-size: 12px; }
.occ.compact .occ-p b { font-size: 13px; }
.occ-barre { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--surface-sunken); gap: 2px; }
.occ-barre .ok { background: var(--success); } .occ-barre .wa { background: var(--warning); } .occ-barre .ko { background: var(--danger); }
.fiche-coord { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 0; }
.fiche-coord dt { font-size: 12px; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
.fiche-coord dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 600px) { .fiche-coord { grid-template-columns: minmax(0, 1fr); } }