/* ============================================================================
   Livrivo — feuille de style de la maquette
   Layout : barre latérale bleu nuit + contenu sur fond clair (ordinateur) ;
   barre supérieure + navigation basse + cartes (mobile).
   Les couleurs sont réservées aux états : turquoise = action, orange = alerte,
   vert = terminé, rouge = anomalie, bleu = information, violet = facturation.
   ========================================================================== */
:root {
  --navy: #0F2A47; --navy-2: #163B61; --navy-3: #1F4D7E;
  --bg: #F1F4F8; --surface: #FFFFFF; --surface-2: #F6F8FB; --border: #DCE3EB; --border-2: #E9EEF3;
  --fg: #14263A; --fg-2: #51667C; --fg-3: #8395A9;
  --accent: #0E9D9D; --accent-strong: #0A7E7E; --accent-soft: #E0F4F3; --accent-fg: #FFFFFF;
  --warn: #E07E1F; --warn-soft: #FDF0E2; --ok: #1B9A5C; --ok-soft: #E2F5EA; --danger: #D03C3C; --danger-soft: #FBE5E5;
  --info: #2A66C4; --info-soft: #E5EEFB; --violet: #7050C8; --violet-soft: #ECE7FA; --muted-soft: #ECF0F4; --navy-soft: #E3E9F1;
  --nav-fg: #C3D1E0; --nav-fg-active: #FFFFFF; --nav-active-bg: rgba(255,255,255,.10);
  --shadow: 0 1px 2px rgba(15,38,68,.05), 0 6px 18px rgba(15,38,68,.05);
  --shadow-lg: 0 12px 40px rgba(15,38,68,.22);
  --radius: 12px; --radius-s: 8px;
  --font: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --sidebar-w: 224px; --topbar-h: 58px; --bottomnav-h: 62px;
  --chart-web: #0E9D9D; --chart-mag: #1F4D7E; --chart-grid: #E3E9F0; --chart-muted: #C9D3DE;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1620; --surface: #172230; --surface-2: #1C2938; --border: #2A3949; --border-2: #233140;
    --fg: #E6EDF5; --fg-2: #A7B6C7; --fg-3: #7B8DA2;
    --accent: #2DB8B8; --accent-strong: #4ED0D0; --accent-soft: #163B3C; --accent-fg: #0B1A1A;
    --warn: #F0993C; --warn-soft: #3B2914; --ok: #35B87A; --ok-soft: #13352A; --danger: #E66060; --danger-soft: #3F1D1D;
    --info: #5F95E8; --info-soft: #1A2B46; --violet: #9C84E6; --violet-soft: #2B2447; --muted-soft: #243141; --navy-soft: #203247;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.25); --shadow-lg: 0 12px 40px rgba(0,0,0,.6);
    --chart-web: #2DB8B8; --chart-mag: #6F9ED6; --chart-grid: #2A3949; --chart-muted: #3A4B5E;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1620; --surface: #172230; --surface-2: #1C2938; --border: #2A3949; --border-2: #233140;
  --fg: #E6EDF5; --fg-2: #A7B6C7; --fg-3: #7B8DA2;
  --accent: #2DB8B8; --accent-strong: #4ED0D0; --accent-soft: #163B3C; --accent-fg: #0B1A1A;
  --warn: #F0993C; --warn-soft: #3B2914; --ok: #35B87A; --ok-soft: #13352A; --danger: #E66060; --danger-soft: #3F1D1D;
  --info: #5F95E8; --info-soft: #1A2B46; --violet: #9C84E6; --violet-soft: #2B2447; --muted-soft: #243141; --navy-soft: #203247;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.25); --shadow-lg: 0 12px 40px rgba(0,0,0,.6);
  --chart-web: #2DB8B8; --chart-mag: #6F9ED6; --chart-grid: #2A3949; --chart-muted: #3A4B5E;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; line-height: 1.25; }
h1 { font-size: 22px; } h2 { font-size: 15px; } h3 { font-size: 14px; }
p { margin: 0; }
a { color: var(--accent-strong); }
button { font: inherit; color: inherit; }
dl, dt, dd { margin: 0; }
.ic { width: 18px; height: 18px; flex: 0 0 auto; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--fg-2); } .muted-3 { color: var(--fg-3); }
.small { font-size: 12px; }
.mono { font-family: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
.nowrap { white-space: nowrap; }
.hide { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Coque ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100%; }
.sidebar { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%); color: var(--nav-fg); position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px)); padding-left: max(12px, env(safe-area-inset-left, 0px)); gap: 6px; overflow-y: auto; }
.brand { display: flex; align-items: center; gap: 10px; padding: 6px 8px 12px; color: #fff; }
.brand-logo { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); display: grid; place-items: center; color: #fff; }
.brand-logo .ic { width: 20px; height: 20px; }
.brand-name { font-weight: 600; font-size: 16px; letter-spacing: .2px; }
.brand-sub { font-size: 11px; color: var(--nav-fg); }
.account { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; color: #fff; font-weight: 500; }
.account .ic { width: 16px; height: 16px; opacity: .7; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: rgba(195,209,224,.6); padding: 10px 10px 4px; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; color: var(--nav-fg); text-decoration: none; font-weight: 500; position: relative; }
.nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav a.active { background: var(--nav-active-bg); color: var(--nav-fg-active); }
.nav a.active::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--accent); }
.nav a .count { margin-left: auto; font-size: 11.5px; font-weight: 600; background: var(--warn); color: #fff; border-radius: 999px; padding: 1px 7px; }
.nav a .count.info { background: rgba(255,255,255,.18); }
.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.1); }
.sidebar-foot .user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; color: #fff; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; font-size: 12px; font-weight: 600; color: #fff; flex: 0 0 auto; }
.user-role { font-size: 11.5px; color: var(--nav-fg); }
.btn-ghost-light { display: flex; align-items: center; gap: 8px; width: 100%; background: transparent; border: 1px solid rgba(255,255,255,.18); color: var(--nav-fg); border-radius: 9px; padding: 8px 10px; cursor: pointer; font-size: 13px; }
.btn-ghost-light:hover { background: rgba(255,255,255,.08); color: #fff; }

.sidebar-back { display: none; }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 12px; height: var(--topbar-h); padding-inline: max(24px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-right, 0px)); background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border-2); }
.topbar .btn-icon.menu { display: none; }
.topbar .search { flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 7px 12px; color: var(--fg-3); }
.topbar .search input { border: 0; outline: 0; background: transparent; flex: 1; min-width: 0; color: var(--fg); font: inherit; }
.topbar .spacer { flex: 1; }
.role-switch { display: flex; align-items: center; gap: 8px; }
.role-switch select { max-width: 220px; }
.demo-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--fg-2); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.demo-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn); }
.content { padding: 22px max(24px, env(safe-area-inset-right, 0px)) 40px max(24px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 18px; flex: 1; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head .sub { color: var(--fg-2); margin-top: 3px; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.bottomnav { display: none; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border-radius: 9px; padding: 8px 14px; font-weight: 500; font-size: 13.5px; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; line-height: 1.2; }
.btn .ic { width: 16px; height: 16px; }
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-strong); }
.btn-secondary { background: var(--surface); border-color: var(--border); color: var(--fg); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-warn { background: var(--warn-soft); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.btn-muted { background: var(--muted-soft); color: var(--fg-2); cursor: default; }
.btn-sm { padding: 5px 10px; font-size: 12.5px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--fg-2); position: relative; }
.btn-icon:hover { color: var(--fg); background: var(--surface-2); }
.btn-icon .notif { position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); border: 2px solid var(--surface); }
.btn-link { background: none; border: 0; color: var(--accent-strong); cursor: pointer; padding: 0; font-weight: 500; }
.btn-link:hover { text-decoration: underline; }

/* ---------- Cartes & grilles ---------- */
.card { background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-head h2 { display: flex; align-items: center; gap: 8px; }
.card-head .ic { color: var(--fg-3); }
.card-head .right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grid { display: grid; gap: 16px; }
.grid > * { min-width: 0; }
.stack { min-width: 0; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-main { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* KPI */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpi { background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 10px; padding: 12px 14px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kpi-label { font-size: 12px; color: var(--fg-2); display: flex; align-items: center; gap: 6px; }
.kpi-label .ic { width: 14px; height: 14px; color: var(--fg-3); cursor: help; }
.kpi-value { font-size: 24px; font-weight: 600; letter-spacing: -.3px; font-variant-numeric: tabular-nums; line-height: 1.1; }
.kpi-value small { font-size: 13px; font-weight: 500; color: var(--fg-2); margin-left: 4px; }
.kpi-foot { font-size: 12px; color: var(--fg-3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kpi.kpi-accent { border-color: color-mix(in srgb, var(--accent) 35%, transparent); background: var(--accent-soft); }
.kpi.kpi-accent .kpi-value { color: var(--accent-strong); }
.delta { font-weight: 600; font-size: 12px; border-radius: 6px; padding: 1px 6px; }
.delta-up { color: var(--ok); background: var(--ok-soft); }
.delta-down { color: var(--danger); background: var(--danger-soft); }
.delta-muted { color: var(--fg-3); background: var(--muted-soft); }

/* Actions à traiter */
.actions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.action-tile { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--border-2); background: var(--surface-2); text-decoration: none; color: inherit; min-width: 0; }
.action-tile:hover { border-color: var(--accent); background: var(--accent-soft); }
.action-tile .n { font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 34px; text-align: center; border-radius: 9px; padding: 4px 6px; }
.action-tile .n.warn { background: var(--warn-soft); color: var(--warn); }
.action-tile .n.danger { background: var(--danger-soft); color: var(--danger); }
.action-tile .n.info { background: var(--info-soft); color: var(--info); }
.action-tile .n.violet { background: var(--violet-soft); color: var(--violet); }
.action-tile .n.ok { background: var(--ok-soft); color: var(--ok); }
.action-tile .n.muted { background: var(--muted-soft); color: var(--fg-3); }
.action-tile .t { font-weight: 500; line-height: 1.2; min-width: 0; }
.action-tile .t small { display: block; color: var(--fg-3); font-weight: 400; font-size: 11.5px; margin-top: 2px; }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; border-radius: 999px; padding: 2px 8px; white-space: nowrap; line-height: 1.5; max-width: 100%; }
.badge.wrap { white-space: normal; text-align: left; }
.badge .ic { width: 12px; height: 12px; }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; flex: 0 0 auto; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-violet { background: var(--violet-soft); color: var(--violet); }
.badge-muted { background: var(--muted-soft); color: var(--fg-2); }
.badge-navy { background: var(--navy-soft); color: var(--navy-3); }
.badge-accent { background: var(--accent-soft); color: var(--accent-strong); }
.badge-extra { font-weight: 400; opacity: .85; }
.badge.no-dot::before { display: none; }
.tag { display: inline-block; font-size: 11.5px; color: var(--fg-2); background: var(--muted-soft); border-radius: 6px; padding: 1px 7px; white-space: nowrap; }

/* Barres */
.bar { height: 8px; border-radius: 999px; background: var(--muted-soft); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--accent); transition: width .4s ease; }
.bar-warn .bar-fill { background: var(--warn); } .bar-danger .bar-fill { background: var(--danger); } .bar-muted .bar-fill { background: var(--fg-3); } .bar-navy .bar-fill { background: var(--navy-3); }
.bar-lg { height: 12px; }

/* Tableaux */
.table-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
table.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; font-weight: 500; font-size: 11.5px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .5px; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 9px 8px; border-bottom: 1px solid var(--border-2); vertical-align: middle; }
.table td.nw { white-space: nowrap; }
.table-compact td { padding: 7px 6px; }
.table-cmds { font-size: 12.5px; }
.table-cmds .ref { white-space: nowrap; }
.table-cmds td { padding: 8px 6px; }
.table .more { display: flex; justify-content: center; padding: 12px 0 4px; }
.table tr:last-child td { border-bottom: 0; }
.table tr.clickable { cursor: pointer; }
.table tr.clickable:hover td { background: var(--surface-2); }
.table td.right, .table th.right { text-align: right; font-variant-numeric: tabular-nums; }
.table .ref { font-weight: 600; }
.sub { display: block; color: var(--fg-3); font-size: 12px; font-weight: 400; }

/* Filtres */
.filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.filters select.input { flex: 0 1 auto; }
.period-nav { display: flex; align-items: center; gap: 8px; }
.period-nav strong { white-space: nowrap; }
.fin-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.input, select.input { border: 1px solid var(--border); background: var(--surface); color: var(--fg); border-radius: 9px; padding: 7px 10px; font: inherit; font-size: 13px; min-width: 0; }
select.input { padding-right: 28px; }
.seg { display: inline-flex; background: var(--muted-soft); border-radius: 9px; padding: 3px; gap: 2px; }
.seg button { border: 0; background: transparent; border-radius: 7px; padding: 5px 11px; cursor: pointer; font-size: 13px; color: var(--fg-2); font-weight: 500; }
.seg button.active { background: var(--surface); color: var(--fg); box-shadow: var(--shadow); }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field-label { font-size: 12px; color: var(--fg-2); font-weight: 500; }
.field-hint { font-size: 11.5px; color: var(--fg-3); }
.check { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; }
.check input { margin-top: 3px; }
.check.sel { border-color: var(--accent); background: var(--accent-soft); }
.check small { display: block; color: var(--fg-3); }

/* Listes clé/valeur */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px 16px; }
.kv dt { font-size: 11.5px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .4px; }
.kv dd { font-weight: 500; margin-top: 1px; }
.kv.span-2 { grid-column: span 2; }

/* Notes / alertes */
.note { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.note .ic { width: 16px; height: 16px; margin-top: 2px; flex: 0 0 auto; }
.note-warn { background: var(--warn-soft); color: color-mix(in srgb, var(--warn) 75%, var(--fg)); }
.note-info { background: var(--info-soft); color: color-mix(in srgb, var(--info) 75%, var(--fg)); }
.note-danger { background: var(--danger-soft); color: color-mix(in srgb, var(--danger) 80%, var(--fg)); }
.note-ok { background: var(--ok-soft); color: color-mix(in srgb, var(--ok) 75%, var(--fg)); }
.note-muted { background: var(--surface-2); color: var(--fg-2); border: 1px dashed var(--border); }
.empty { padding: 22px; text-align: center; color: var(--fg-3); border: 1px dashed var(--border); border-radius: 10px; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.timeline li { display: grid; grid-template-columns: 110px 14px 1fr; gap: 10px; padding: 7px 0; position: relative; }
.timeline .when { font-size: 12px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.timeline .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border); margin-top: 5px; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); }
.timeline li::before { content: ''; position: absolute; left: 124.5px; top: 20px; bottom: -8px; width: 1px; background: var(--border-2); }
.timeline li:last-child::before { display: none; }
.timeline .dot.terrain { background: var(--ok); } .timeline .dot.email { background: var(--info); } .timeline .dot.rdv { background: var(--accent); } .timeline .dot.incident, .timeline .dot.controle { background: var(--warn); } .timeline .dot.planning { background: var(--navy-3); } .timeline .dot.annulation { background: var(--danger); }
.timeline .who { font-size: 12px; color: var(--fg-3); }

/* Échanges */
.msg { border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.msg.entrant { border-left: 3px solid var(--info); }
.msg.sortant { border-left: 3px solid var(--accent); }
.msg.a-traiter { border-color: var(--warn); background: var(--warn-soft); }
.msg .meta { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--fg-3); flex-wrap: wrap; }
.msg .objet { font-weight: 600; margin: 3px 0; }

/* Arrêts / chargements */
.load { border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.load-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.load-head strong { font-size: 13.5px; }
.load-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.metric-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-2); margin-bottom: 3px; }
.metric-label b { color: var(--fg); font-variant-numeric: tabular-nums; }
.stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.stops li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.stops .n { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 600; flex: 0 0 auto; }
.stops .n.done { background: var(--ok); } .stops .n.cur { background: var(--accent); } .stops .n.me { box-shadow: 0 0 0 2px var(--accent-soft), 0 0 0 3px var(--accent); }

/* Graphique */
.chart { width: 100%; height: auto; display: block; }
.chart text { font-family: var(--font); fill: var(--fg-3); font-size: 11px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--fg-2); }
.legend span::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; background: var(--sw); }

/* Donut */
.donut { display: flex; align-items: center; gap: 14px; }
.donut svg { width: 86px; height: 86px; flex: 0 0 auto; }
.donut .big { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; }

/* Modale */
.modal-wrap { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 16px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.modal-back { position: absolute; inset: 0; background: rgba(10,24,40,.5); }
.modal { position: relative; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg); width: min(560px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal-lg { width: min(820px, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 10px; }
.modal-head h2 { font-size: 17px; }
.modal-body { padding: 4px 18px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 16px; border-top: 1px solid var(--border-2); flex-wrap: wrap; }
.modal-foot .btn-danger { margin-right: auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.form-grid .span-2 { grid-column: span 2; }

/* Toasts */
#toasts { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; width: min(520px, calc(100% - 32px)); }
.toast { background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); font-size: 13.5px; animation: toast-in .25s ease; }
.toast-warn { background: var(--warn); } .toast-danger { background: var(--danger); }
.toast.out { opacity: 0; transition: opacity .3s; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Détail commande */
.states { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.state { display: flex; flex-direction: column; gap: 3px; padding: 8px 12px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--surface); min-width: 0; }
.state .badge { white-space: normal; text-align: left; }
.state .lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--fg-3); }
.products { display: flex; flex-direction: column; gap: 6px; }
.product { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-2); border-radius: 9px; background: var(--surface-2); }
.product .ic { color: var(--fg-3); }
.tarif-lines { display: flex; flex-direction: column; }
.tarif-lines .ln { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--border-2); }
.tarif-lines .ln.total { border-bottom: 0; font-weight: 600; font-size: 15px; padding-top: 10px; }
.tarif-lines small { display: block; color: var(--fg-3); font-weight: 400; }

/* Vue compacte du tableau de bord */
.team-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.team-line { border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.team-line-head { display: flex; align-items: center; gap: 8px; }
.team-line-head .badge { margin-left: auto; }
.team-line-body { display: flex; flex-direction: column; gap: 6px; }
.team-load { display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: center; gap: 8px; }
.fact-lines { display: flex; flex-direction: column; }
.fact-line { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--border-2); flex-wrap: wrap; }
.fact-line:last-child { border-bottom: 0; }
.choix-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.notif-item { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 8px 10px; border-radius: 9px; border: 1px solid var(--border-2); text-decoration: none; color: inherit; background: var(--surface-2); border-left-width: 3px; }
.notif-item:hover { background: var(--accent-soft); }
.notif-info { border-left-color: var(--info); } .notif-warn { border-left-color: var(--warn); } .notif-danger { border-left-color: var(--danger); } .notif-ok { border-left-color: var(--ok); }
.btn-icon .notif-count { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--warn); color: #fff; font-size: 11px; font-weight: 600; display: grid; place-items: center; border: 2px solid var(--surface); }

/* Placeholders modules */
.placeholder { display: grid; gap: 14px; }
.placeholder .preview { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }

/* Capacité semaine */
.cap-week { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cap-week .kpi { padding: 10px 12px; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(300px, 85vw); z-index: 60; transform: translateX(-100%); transition: transform .25s ease; box-shadow: none; }
  .sidebar.open { transform: none; box-shadow: var(--shadow-lg); }
  .sidebar-back { position: fixed; inset: 0; background: rgba(10,24,40,.45); z-index: 55; display: none; }
  .sidebar-back.show { display: block; }
  .topbar { padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px)); height: 54px; }
  .topbar .btn-icon.menu { display: inline-grid; }
  .topbar .search { display: none; }
  .topbar .demo-pill { display: none; }
  .topbar .role-switch select { max-width: 160px; font-size: 12.5px; }
  .content { padding: 14px max(14px, env(safe-area-inset-right, 0px)) calc(var(--bottomnav-h) + 24px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); gap: 14px; }
  h1 { font-size: 20px; }
  .card { padding: 14px; border-radius: 12px; }
  .grid-2, .grid-3, .grid-4, .grid-main { grid-template-columns: minmax(0, 1fr); }
  .states { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fin-controls { width: 100%; flex-direction: column; align-items: stretch; }
  .fin-controls .seg { display: flex; } .fin-controls .seg button { flex: 1; padding: 6px 4px; font-size: 12.5px; }
  .period-nav strong { flex: 1; text-align: center; white-space: normal; }
  .filters select.input { flex: 1 1 45%; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kpi { padding: 10px 11px; } .kpi-value { font-size: 20px; }
  .actions-grid { grid-template-columns: 1fr 1fr; }
  .action-tile { padding: 9px 10px; gap: 8px; } .action-tile .n { font-size: 18px; min-width: 30px; }
  .cap-week { grid-template-columns: 1fr; }
  .team-lines { grid-template-columns: 1fr; }
  .choix-grid { grid-template-columns: 1fr; }
  .notif-item { grid-template-columns: 1fr; gap: 2px; }
  .form-grid { grid-template-columns: 1fr; } .form-grid .span-2 { grid-column: auto; }
  .kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .timeline li { grid-template-columns: 70px 14px 1fr; } .timeline li::before { left: 84.5px; }
  .load-metrics { grid-template-columns: 1fr; }
  .table-wrap { margin: 0 -14px; padding: 0 14px; }
  /* Tableaux → cartes */
  table.cards, table.cards tbody, table.cards tr, table.cards td { display: block; }
  table.cards thead { display: none; }
  table.cards tr { border: 1px solid var(--border-2); border-radius: 10px; margin-bottom: 10px; padding: 10px 12px; background: var(--surface); box-shadow: var(--shadow); }
  table.cards td { border: 0; padding: 4px 0; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  table.cards td::before { content: attr(data-label); font-size: 11.5px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .4px; flex: 0 0 auto; }
  table.cards td.card-title { display: block; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--border-2); }
  table.cards td.card-title::before { display: none; }
  table.cards td.card-action { padding-top: 10px; }
  table.cards td.card-action::before { display: none; }
  table.cards td.card-action .btn { width: 100%; }
  table.cards td.right { text-align: right; }
  table.cards td.nw { white-space: normal; }
  table.cards td .sub { white-space: normal; }
  .badge { white-space: normal; text-align: left; }
  .table .badge { white-space: nowrap; }
  .bottomnav { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--bottomnav-h) + env(safe-area-inset-bottom, 0px)); padding: 0 max(0px, env(safe-area-inset-left, 0px)) env(safe-area-inset-bottom, 0px) max(0px, env(safe-area-inset-right, 0px)); background: var(--surface); border-top: 1px solid var(--border); z-index: 50; }
  .bottomnav a, .bottomnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--fg-3); font-size: 10.5px; font-weight: 500; border: 0; background: transparent; cursor: pointer; }
  .bottomnav a.active { color: var(--accent-strong); }
  .bottomnav .ic { width: 22px; height: 22px; }
  .page-head .actions .btn { flex: 1; }
  .modal { max-height: calc(100vh - 24px); }
  .modal-wrap { padding: 12px; align-items: flex-end; }
  .modal { border-radius: 14px 14px 12px 12px; }
}
@media (max-width: 480px) {
  .kv-grid { grid-template-columns: minmax(0, 1fr); } .kv.span-2 { grid-column: auto; }
  .actions-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- notifications push (bloc dans la cloche) ---------- */
.push-bloc { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.push-titre { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.push-titre .ic { width: 18px; height: 18px; color: var(--accent); }
.push-bloc p { margin: 0 0 10px; }
.push-bloc .row .input { flex: 1 1 140px; }
.badge-live { font-size: 10.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); border-radius: 999px; padding: 1px 7px; }

/* ---------- mode données réelles ---------- */
button.account { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.account .badge-live { margin-left: auto; }
.demo-pill.live { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); }
.demo-pill.live .dot { background: var(--accent); }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }

/* ---------- avancement dans une tuile + glisser-déposer ---------- */
.action-tile .n small { font-size: 12px; font-weight: 500; margin-left: 1px; }
.action-tile .t { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.tile-bar { display: block; height: 5px; border-radius: 999px; background: var(--border); margin-top: 6px; overflow: hidden; }
.tile-bar i { display: block; height: 100%; border-radius: 999px; background: var(--ok); }
.tile-bar i.warn { background: var(--warn); } .tile-bar i.danger { background: var(--danger); }
.drag-ghost { opacity: .35; }
.drag-chosen { box-shadow: 0 8px 24px rgba(15,42,71,.18); border-color: var(--accent) !important; }
.actions-grid > *, .kpis > * { cursor: grab; }
.card-head .drag-handle + h2 { margin-right: auto; }
.drag-handle { border: 0; background: transparent; color: var(--fg-3); cursor: grab; padding: 2px 4px; margin-right: -4px; border-radius: 6px; display: inline-flex; touch-action: none; }
.drag-handle:hover { background: var(--surface-2); color: var(--fg); }
.drag-handle .ic { width: 16px; height: 16px; transform: rotate(90deg); }
.dash-section + .dash-section { margin-top: 16px; }
.dash-section > .card { margin-bottom: 0; }

/* ---------- menu par grandes catégories (dépliables) ---------- */
.nav-group-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--nav-fg); font: inherit; font-weight: 500; cursor: pointer; text-align: left; }
.nav-group-head:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-group.has-active > .nav-group-head { color: #fff; }
.nav-group-head .count { margin-left: auto; font-size: 11.5px; font-weight: 600; background: var(--warn); color: #fff; border-radius: 999px; padding: 1px 7px; }
.nav-group-head .ic:last-child { margin-left: auto; width: 16px; height: 16px; transition: transform .18s; opacity: .7; }
.nav-group-head .count + .ic:last-child { margin-left: 0; }
.nav-group.open > .nav-group-head .ic:last-child { transform: rotate(180deg); }
.nav-group-items { display: none; flex-direction: column; gap: 2px; margin: 2px 0 4px 14px; padding-left: 10px; border-left: 1px solid rgba(255,255,255,.12); }
.nav-group.open > .nav-group-items { display: flex; }
.nav a.sub { padding: 7px 10px; font-weight: 400; font-size: 13.5px; }
.nav a.sub.active { font-weight: 500; }
.nav-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .5; margin: 0 5px; flex: none; }
.nav a.sub.active .nav-dot { opacity: 1; background: var(--accent); }

/* ---------- camion ---------- */
.camion { width: var(--largeur, 100%); max-width: 100%; margin: 6px 0 4px; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.camion-corps { display: flex; align-items: flex-end; gap: 4px; }
.camion-caisse { position: relative; flex: 1; display: flex; align-items: stretch; height: 64px; min-width: 0; border: 2px solid var(--navy, #0F2A47); border-radius: 8px 4px 4px 8px; padding: 3px; gap: 3px; overflow: hidden; background: var(--surface) repeating-linear-gradient(135deg, transparent 0 7px, color-mix(in srgb, var(--fg-3) 18%, transparent) 7px 8px); }
.camion-caisse.surcharge { border-color: var(--danger); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--danger) 35%, transparent); }
.camion-caisse .seg { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 14px; border-radius: 5px; color: #fff; font-size: 11px; line-height: 1.15; overflow: hidden; white-space: nowrap; cursor: grab; background: var(--navy, #0F2A47); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.camion-caisse .seg b { font-weight: 600; font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.camion-caisse .seg small { font-size: 10px; opacity: .85; }
.camion-caisse .seg.navy { background: #2C5282; } .camion-caisse .seg.accent { background: var(--accent); } .camion-caisse .seg.ok { background: var(--ok); } .camion-caisse .seg.danger { background: var(--danger); } .camion-caisse .seg.over { background: var(--danger); outline: 2px dashed #fff; }
.camion-libre { position: absolute; right: 3px; top: 3px; bottom: 3px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--fg-2); pointer-events: none; white-space: nowrap; overflow: hidden; }
.camion-cabine { position: relative; width: 44px; height: 46px; flex: none; background: var(--navy, #0F2A47); border-radius: 6px 14px 4px 4px; }
.camion-cabine i { position: absolute; left: 8px; top: 7px; width: 22px; height: 15px; background: #cfe3f3; border-radius: 3px 8px 2px 2px; }
.camion-roues { position: relative; height: 16px; margin-top: -8px; }
.camion-roues i { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #1B2733; box-shadow: inset 0 0 0 4px #4a5563; }
.camion-legende { font-size: 12.5px; color: var(--fg-2); margin-top: 4px; }
.camion-legende b { color: var(--fg); }
.legende-camion { display: flex; gap: 14px; flex-wrap: wrap; margin: -6px 0 12px; }
.legende-camion span { display: inline-flex; align-items: center; gap: 5px; }
.legende-camion i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; background: #2C5282; }
.legende-camion i.accent { background: var(--accent); } .legende-camion i.ok { background: var(--ok); } .legende-camion i.danger { background: var(--danger); } .legende-camion i.libre { background: repeating-linear-gradient(135deg, transparent 0 3px, var(--fg-3) 3px 4px); border: 1px solid var(--border); }
/* missions à affecter : puces glissables */
.pool { display: flex; flex-wrap: wrap; gap: 8px; min-height: 52px; padding: 8px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-2); position: relative; }
.pool .seg.chip { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 9px; background: var(--surface); border: 1px solid var(--border-2); border-left: 4px solid var(--warn); cursor: grab; min-width: 160px; max-width: 100%; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.pool .seg.chip b { font-size: 13px; } .pool .seg.chip span { font-size: 12.5px; } .pool .seg.chip small { font-size: 11.5px; color: var(--fg-2); }
.pool-vide { flex: 1; align-self: center; font-size: 12.5px; color: var(--fg-3); padding: 4px; }
/* un chip déposé dans un camion prend la forme d'un segment */
.camion-caisse .seg.chip { flex: 0 0 18%; }
.camion-caisse .seg.chip span { display: none; }
/* tactile : pas d'aperçu de lien iOS ni de sélection pendant l'appui long */
.action-tile, .kpi, .drag-handle, .dash-section > .card > .card-head { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.action-tile, .kpi { touch-action: pan-y; }
.camion-caisse, .pool { touch-action: pan-y; }

/* ---------- indicateurs cliquables en tête de la liste des commandes ---------- */
.cmd-indics .card-head { align-items: flex-start; }
.cmd-indics .card-head h3 { margin: 0 0 2px; }
.indics-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.indics-grid .action-tile { cursor: pointer; }
.indics-grid .action-tile .n { min-width: 40px; }
.action-tile.active { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
@media (max-width: 1180px) { .indics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .indics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cmd-indics .seg { display: flex; width: 100%; } .cmd-indics .seg button { flex: 1; padding: 6px 4px; font-size: 12.5px; }
}

/* ---------- flèche « retour » (toutes les pages sauf l'accueil du rôle) ---------- */
.topbar .btn-icon.back { border: 1px solid var(--border); background: var(--surface); border-radius: 10px; }
.topbar .btn-icon.back:hover { border-color: var(--accent); color: var(--accent-strong); }
@media (max-width: 899px) { .topbar .btn-icon.back { margin-right: -4px; } }

/* ---------- proposition de planification sur commandes réelles ---------- */
.planif-reel { border-left: 4px solid var(--accent); }
.planif-controls { display: flex; flex-direction: column; gap: 10px; }
.planif-controls .count-inline { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: rgba(255,255,255,.25); font-size: 11px; text-align: center; }
.planif-controls .btn-secondary .count-inline { background: var(--muted-soft); color: var(--fg-2); }
.planif-controls label.check { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; }
.planif-controls label.check.sel { border-color: var(--accent); background: var(--accent-soft); }
.planif-magasin { background: var(--surface-2); }
.planif-kpis { margin-top: 4px; }
.carte-card { padding: 10px; }
.carte-planif { width: 100%; height: auto; display: block; background: var(--surface-2); border-radius: 10px; color: var(--fg-3); }
@media (max-width: 899px) { .planif-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* carte réelle (Leaflet) et glisser-déposer des arrêts */
.carte-leaflet { height: 380px; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
/* Planification façon Mapo : listes à gauche, grande carte à droite qui reste visible */
.planif-mapo { display: grid; grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); gap: 14px; align-items: start; }
.planif-carte { position: sticky; top: 12px; }
.planif-carte .carte-leaflet { height: calc(100vh - 140px); min-height: 560px; }
.planif-panneau .load { padding: 10px 12px; }
.planif-liste li { padding: 5px 6px; border-radius: 8px; }
.planif-liste li:hover { background: var(--accent-soft); }
.planif-liste .poignee { color: var(--fg-3); font-size: 12px; letter-spacing: -2px; cursor: grab; flex: none; }
.planif-liste .sub { display: block; font-size: 11.5px; color: var(--fg-3); }
.pin-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #E3E9F0; }
.pin-actions button, .pin-actions select { font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 6px; border: 1px solid #CBD5E1; background: #fff; cursor: pointer; }
.pin-actions button:hover { border-color: #14B8A6; background: #F0FDFA; }
.pin-actions label { font-size: 12px; display: inline-flex; gap: 4px; align-items: center; }
.pin-arret span { width: 30px !important; height: 30px !important; font-size: 13px !important; }
@media (max-width: 1100px) { .planif-mapo { grid-template-columns: minmax(0, 1fr); } .planif-carte { position: static; } .planif-carte .carte-leaflet { height: 60vh; min-height: 360px; } }
.carte-leaflet .leaflet-container { font: inherit; }
.pin-magasin { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 6px; background: #0F2A47; color: #fff; font-weight: 700; font-size: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.pin-arret span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.35); border: 2px solid #fff; }
.pin-arret.pin-libre span { background: #fff; color: #E8762B; border-color: #E8762B; }
.planif-liste li { cursor: grab; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.planif-liste li.sortable-ghost { opacity: .4; }
.planif-liste li.sortable-chosen { background: var(--accent-soft); border-radius: 8px; }
.planif-liste:empty { min-height: 18px; }
.planif-pool { border: 1px dashed var(--warn); }
.planif-camion .stops .n.warn, .planif-pool .stops .n.warn { background: var(--warn-soft); color: var(--warn); }
@media (max-width: 899px) { .carte-leaflet { height: 300px; } }

/* ---------- dossier comptable du mois (tableau de bord) ---------- */
.dossier { display: flex; flex-direction: column; gap: 8px; }
.dossier-etape { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--surface-2); }
.dossier-etape .n { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 600; background: var(--muted-soft); color: var(--fg-3); }
.dossier-etape .n .ic { width: 15px; height: 15px; }
.dossier-etape.ok .n { background: var(--ok-soft); color: var(--ok); }
.dossier-etape.warn { border-color: var(--warn); } .dossier-etape.warn .n { background: var(--warn-soft); color: var(--warn); }
.dossier-etape > div { flex: 1; min-width: 0; }
.dossier-etape .btn { flex: 0 0 auto; }
:root { --chart-nls: #E8762B; }
@media (max-width: 899px) { .dossier-etape { flex-wrap: wrap; } .dossier-etape .btn { width: 100%; } }

/* ---------- factures Electro Dépôt : cycle brouillon → encaissée ---------- */
.fe-carte .kv-grid{margin-bottom:8px}
.fe-carte .row{gap:6px;flex-wrap:wrap;margin-top:8px}
.fe-steps{display:flex;gap:4px;margin:2px 0 10px}
.fe-steps span{flex:1;text-align:center;font-size:11px;padding:4px 2px;border-radius:6px;background:var(--muted-soft);color:var(--fg);opacity:.75;border:1px solid transparent;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fe-steps span.fait{background:var(--accent-soft);color:var(--accent-strong);opacity:1}
.fe-steps span.actif{background:var(--accent);color:var(--accent-fg);font-weight:600;opacity:1}
.fe-steps span.off{opacity:.45;text-decoration:line-through}
details summary{cursor:pointer}

/* Aide contextuelle « ? » */
.aide { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; margin-left: 5px; border-radius: 50%; border: 1px solid var(--turquoise, #14B8A6); background: #F0FDFA; color: #0F766E; font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; padding: 0; flex: none; }
.aide:hover, .aide:focus-visible { background: #14B8A6; color: #fff; outline: none; }
.aide-pop { position: fixed; z-index: 2000; background: #fff; color: #1E293B; border: 1px solid #CBD5E1; border-left: 3px solid #14B8A6; border-radius: 8px; box-shadow: 0 10px 30px rgba(15,23,42,.18); padding: 10px 12px; font-size: 12.5px; line-height: 1.45; }
.aide-pop-t { font-weight: 600; color: #14213D; margin-bottom: 4px; }
.aide-pop ul { margin: 0; padding-left: 16px; }
.aide-pop li + li { margin-top: 3px; }

/* Onglets d'étapes de la liste des commandes */
.etapes-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.etape-tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--fg-2); font-size: 13.5px; font-weight: 500; text-decoration: none; }
.etape-tab:hover { border-color: #14B8A6; color: var(--fg); }
.etape-tab .n { min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 999px; background: var(--muted-soft); font-size: 12.5px; font-weight: 600; color: var(--fg); }
.etape-tab .n.warn { background: #FEF3C7; color: #92400E; }
.etape-tab.active { background: #14213D; border-color: #14213D; color: #fff; }
.etape-tab.active .n { background: rgba(255,255,255,.18); color: #fff; }
@media (max-width: 720px) { .etapes-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; } .etape-tab { flex: none; } }

/* ---------- Espace livreur ---------- */
.btn-lg { width: 100%; justify-content: center; padding: 13px 16px; font-size: 15.5px; font-weight: 600; margin-top: 10px; }
.btn-danger-outline { background: var(--surface); color: var(--danger); border: 1.5px solid var(--danger); }
.liv-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.liv-kpi { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.liv-kpi .ic { width: 30px; height: 30px; padding: 6px; border-radius: 50%; background: #E0F2FE; color: #0369A1; flex: none; }
.liv-kpi.ok .ic { background: var(--ok-soft); color: var(--ok); } .liv-kpi.warn .ic { background: var(--warn-soft); color: var(--warn); }
.liv-kpi b { font-size: 20px; } .liv-kpi span { color: var(--fg-2); font-size: 13px; }
.liv-grid { display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr); gap: 14px; align-items: start; }
.liv-liste { padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.liv-arret { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 10px; cursor: pointer; font: inherit; color: inherit; }
.liv-arret:hover { background: var(--surface-2); }
.liv-arret.active { background: #F0F9FF; border-color: #7DD3FC; }
.liv-arret.fini .liv-t strong { color: var(--fg-2); }
.liv-n { width: 28px; height: 28px; border-radius: 50%; background: var(--muted-soft); display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; }
.liv-arret.active .liv-n { background: #14213D; color: #fff; }
.liv-t { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
.liv-t strong { font-size: 14px; }
.liv-chev { color: var(--fg-3); }
.liv-detail { padding: 16px; position: sticky; top: 12px; }
.liv-detail-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.liv-detail-head h2 { margin: 0; font-size: 19px; }
.liv-infos { list-style: none; margin: 10px 0; padding: 10px 0; display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); }
.liv-infos li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; } .liv-infos .ic { width: 18px; height: 18px; color: var(--fg-2); flex: none; margin-top: 1px; }
.liv-infos-top { border-top: 0; padding-top: 4px; }
.liv-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.liv-btns .btn { justify-content: center; padding: 11px; font-size: 15px; }
.liv-prevenir { display: flex; justify-content: center; margin-top: 8px; width: 100%; }
.liv-checklist { margin-top: 12px; border: 1px solid var(--border); border-radius: 10px; padding: 6px 12px; }
.liv-check { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 14.5px; cursor: pointer; }
.liv-check + .liv-check { border-top: 1px solid var(--border); }
.liv-check input[type=checkbox] { width: 20px; height: 20px; accent-color: #14B8A6; }
.liv-photo-btn { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: #0F766E; }
.liv-photo .muted { margin-left: auto; }
.liv-vignettes { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 0 8px; }
.liv-vignettes img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); }
.liv-enc { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); }
.liv-enc > div:first-child { display: flex; flex-direction: column; }
.liv-enc-info { margin-top: 10px; }
.liv-navmob { display: none; }
@media (max-width: 899px) {
  .liv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .liv-kpi { padding: 8px 10px; gap: 8px; } .liv-kpi b { font-size: 17px; } .liv-kpi span { font-size: 12px; line-height: 1.2; }
  .liv-grid { grid-template-columns: minmax(0, 1fr); }
  .liv-liste { display: none; } .liv-grid.liste-ouverte .liv-liste { display: flex; } .liv-grid.liste-ouverte .liv-detail { display: none; }
  .liv-navmob { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
  .liv-detail { position: static; }
}

.liv-vign { position: relative; display: inline-block; }
.liv-suppr { position: absolute; top: -7px; right: -7px; width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; background: var(--danger, #DC2626); color: #fff; font-size: 15px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.liv-dicter{margin-top:6px}
.liv-dicter.rec{background:#FEF2F2;border-color:#DC2626;color:#DC2626}
.planif-liste li.fini{opacity:.6;cursor:default}
.liv-alerte-plan{align-items:center;margin-bottom:12px;border-width:2px}
.liv-alerte-plan .btn{margin-left:auto;flex-shrink:0}
.liv-vign video,.preuve video{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block;background:#0b1530}
.liv-vign,.preuve{position:relative}
.liv-vign-badge{position:absolute;left:4px;bottom:4px;font-size:12px;background:rgba(0,0,0,.55);border-radius:6px;padding:0 4px;line-height:18px}
.pay-modes{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pay-mode{display:inline-flex;align-items:center;gap:4px;border-radius:8px;padding:3px 8px;font-size:12.5px;border:1px solid var(--border)}
.pay-mode.esp{background:#F0FDFA;border-color:#99E2DA}.pay-mode.cb{background:#EEF2FF;border-color:#C7D2FE}.pay-mode.inc{background:#FDF0E6;border-color:#F5C9A6}
.liv-cloture{margin-top:14px}
.maj-dispo{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:9999;display:flex;gap:12px;align-items:center;background:#14213D;color:#fff;padding:10px 14px;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.25);font-size:14px;max-width:calc(100% - 32px)}
.maj-dispo button{background:#0E9D9D;color:#fff;border:0;border-radius:8px;padding:7px 12px;font-weight:600;cursor:pointer}
/* Tableau de bord : blocs repliables, aide, planification semaine */
.dash-section .card-head .dash-tog{order:99;margin-left:6px;font-size:14px}
.dash-replie{padding-bottom:6px}
.dash-replie .card-head{margin-bottom:0}
.plan-semaine{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:12px}
.plan-jour{display:flex;flex-direction:column;gap:4px;padding:8px;border:1px solid var(--border);border-radius:10px;text-decoration:none;color:inherit;text-align:center}
.plan-jour b{font-size:18px}.plan-jour.vide{opacity:.55}
@media (max-width:700px){.plan-semaine{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Menu : grandes catégories en gras */
.nav-group-head, .nav > a:not(.sub){font-weight:700}
.nav-group a.sub{font-weight:400}

/* Barre du haut : ne force jamais une largeur supérieure à l'écran (écrans moyens, zoom) */
.main { min-width: 0; }
.topbar { min-width: 0; }
.topbar .search { min-width: 120px; flex: 1 1 200px; }
.topbar .demo-pill { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 0 1 auto; }
.role-switch { min-width: 0; flex: 0 1 auto; }
.role-switch select { min-width: 0; width: 100%; }
@media (max-width: 1279px) {
  .topbar .demo-pill { max-width: 34px; padding-inline: 10px; font-size: 0; gap: 0; }
  .role-switch label { display: none; }
  .role-switch select { max-width: 170px; }
}
html, body { overflow-x: clip; }

/* Liste des commandes : tri et filtres par colonne (comme un tableur) */
.th-cf { display: flex; align-items: center; gap: 2px; }
.th-cf button { border: 0; background: transparent; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; padding: 2px 3px; border-radius: 6px; }
.th-cf button:hover { background: var(--muted-soft); color: var(--fg); }
.th-tri { display: inline-flex; align-items: center; gap: 4px; text-align: left; }
.th-fl { font-size: 10px; opacity: .45; }
th[aria-sort] .th-fl { opacity: 1; color: var(--accent); }
.th-filt { font-size: 12px; opacity: .55; }
.th-filt.actif { opacity: 1; color: #fff !important; background: var(--accent) !important; }
.cf-pop { position: fixed; z-index: 80; width: 280px; max-height: min(70vh, 460px); overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.cf-tri { display: flex; gap: 6px; }
.cf-tri .btn { flex: 1; }
.cf-tri .btn.active { border-color: var(--accent); color: var(--accent-strong); }
.cf-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; font-size: 13px; }
.cf-opt { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.cf-opt:hover { background: var(--muted-soft); }
.cf-opt span { flex: 1; }
.cf-pied { display: flex; justify-content: flex-end; gap: 6px; position: sticky; bottom: -12px; background: var(--surface); padding: 8px 0 0; }
.cf-puce button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 0 0 4px; font-size: 11px; }
.cf-mobile { display: none; }
.table-cmds .clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 220px; }
.table-cmds .badge { white-space: normal; text-align: left; }
.table-cmds td.card-action .btn { white-space: normal; text-align: center; line-height: 1.2; }
@media (max-width: 899px) { .cf-mobile { display: inline-flex; } }
/* écrans moyens : le tableau des commandes tient dans la largeur (titres sur 2 lignes, textes repliés) */
@media (max-width: 1399px) {
  .table-cmds th { white-space: normal; padding: 8px 6px; letter-spacing: .2px; font-size: 11px; }
  .table-cmds td { padding: 8px 5px; }
  .table-cmds .th-cf { align-items: flex-start; }
  .table-cmds .clamp2 { max-width: 170px; }
  .table-cmds .nowrap { white-space: normal; }
  .table-cmds .badge { font-size: 11.5px; }
}
@media (max-width: 1099px) {
  .table-cmds td { padding: 7px 4px; font-size: 12px; }
  .table-cmds th { padding: 8px 4px; }
  .table-cmds .row { flex-wrap: wrap !important; }
  .table-cmds .badge { font-size: 11px; padding-inline: 6px; }
  .table-cmds td.card-action .btn { padding-inline: 8px; font-size: 11.5px; }
}
.prest-inline { display: none; }
@media (min-width: 900px) and (max-width: 1279px) {
  .table-cmds th:nth-child(2), .table-cmds td:nth-child(2) { display: none; }
  .table-cmds .prest-inline { display: block; }
}
@media (min-width: 900px) and (max-width: 999px) { .table-cmds .tag { display: none; } .table-cmds th { font-size: 10.5px; letter-spacing: 0; } .table-cmds .th-fl { display: none; } }
.msg.erreur { border-left-color: var(--danger); }
/* Suivre la journée : arrêts d'un camion */
.suivi-arret { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-2); border-radius: 10px; color: inherit; text-decoration: none; background: var(--surface); }
.suivi-arret:hover { border-color: var(--accent); }
.suivi-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--muted-soft); display: grid; place-items: center; font-size: 12px; font-weight: 600; }
.suivi-corps { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.suivi-arret .badge { flex: none; }

/* Tableau de bord : bouton « replier / afficher » d'un bloc, bien visible */
.dash-section .card-head .dash-tog { width: 34px; height: 34px; border-radius: 50%; background: var(--warn, #E8762B); color: #fff; border: 0; font-size: 18px; line-height: 1; display: inline-grid; place-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.dash-section .card-head .dash-tog:hover { filter: brightness(.92); background: var(--warn, #E8762B); color: #fff; }
.dash-section .card-head .dash-tog:focus-visible { outline: 3px solid color-mix(in srgb, var(--warn, #E8762B) 40%, transparent); outline-offset: 2px; }
/* Sous-traitants : carte des secteurs, cartes par sous-traitant */
.st-carte-map { position: relative; z-index: 0; isolation: isolate; height: 360px; border-radius: 10px; overflow: hidden; background: var(--surface-2); }
@media (max-width: 899px) { .st-carte-map { height: 280px; } }
.st-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.st-leg i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.st-sous { margin-top: 12px; border-top: 1px solid var(--border-2); padding-top: 10px; }
.st-sous h3 { font-size: 13.5px; margin: 0; display: flex; align-items: center; gap: 6px; }
.st-ligne { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border-2); border-radius: 9px; background: var(--surface); flex-wrap: wrap; }
.st-suspendu { opacity: .78; }
.st-carte .card-head h2 .badge { margin-left: 6px; vertical-align: middle; }

/* Tableau de bord : « Commandes et préparation des livraisons » (modèle validé le 21/10) */
.att-bloc .card-head { align-items: flex-start; }
.att-date { margin-left: auto; text-align: right; }
.att-date p { margin: 0; font-size: 15px; color: var(--fg); }
.att-date .att-sub-sm { color: var(--fg-3); }
.att-alerte { display: flex; align-items: center; gap: 16px; background: #FFF4E8; border: 1px solid #F7C79A; border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; }
.att-alerte-ico { width: 44px; height: 44px; display: grid; place-items: center; color: #E8762B; flex: none; }
.att-alerte-ico .ic { width: 34px; height: 34px; stroke-width: 2.2; }
.att-alerte-titre { margin: 0; font-size: 18px; font-weight: 600; color: #D9661C; }
.att-alerte-sub { margin: 2px 0 0; font-size: 14.5px; color: var(--fg-2); }
.att-alerte-btn { background: #E8762B; color: #fff; border: 0; font-weight: 600; padding: 11px 20px; border-radius: 9px; }
.att-alerte-btn:hover { background: #D9661C; color: #fff; }
.att-alerte.att-ok { background: #EAF7F4; border-color: #A8DED3; }
.att-alerte.att-ok .att-alerte-ico { color: #0F9D8A; }
.att-alerte.att-ok .att-alerte-titre { color: #0B7C6D; }
.att-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.att-grande { display: flex; align-items: center; gap: 18px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; padding: 18px 20px; color: inherit; text-decoration: none; }
.att-grande:hover { border-color: #14B8A6; }
.att-grande-titre { margin: 0 0 4px; font-size: 15.5px; font-weight: 600; }
.att-nombre { margin: 0; font-size: 42px; font-weight: 700; line-height: 1.05; color: var(--fg); }
.att-ok-c { color: #0F9D8A; }
.att-ligne { display: flex; align-items: baseline; gap: 12px; margin: 0; flex-wrap: wrap; }
.att-sub { margin: 4px 0 0; font-size: 15px; color: var(--fg-2); }
.att-sub-sm { margin: 3px 0 0; font-size: 13px; color: var(--fg-3); }
.att-barre { display: flex; align-items: center; gap: 12px; margin: 8px 0 4px; }
.att-barre-fond { flex: 1; height: 8px; background: #E6EBEF; border-radius: 99px; overflow: hidden; }
.att-barre-val { height: 100%; background: #0F9D8A; border-radius: 99px; }
.att-pct { font-size: 14px; color: var(--fg-2); }
.att-chevron { width: 38px; height: 38px; border-radius: 50%; background: var(--muted-soft); display: grid; place-items: center; color: #0F9D8A; flex: none; }
.att-ico { width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; flex: none; background: #E7F6F3; color: #0F9D8A; }
.att-ico .ic { width: 28px; height: 28px; }
.att-ico.att-bleu { background: #EAF1FC; color: #3B6FD8; }
.att-ico.att-vert { background: #E7F6F3; color: #0F9D8A; }
.att-ico.att-rouge { background: #FDECEC; color: #D64545; }
.att-label { margin: 16px 0 8px; font-size: 13px; color: var(--fg-3); }
.att-quatre { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.att-carte { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 12px; padding: 16px 16px 14px; color: inherit; text-decoration: none; }
.att-carte:hover { border-color: #14B8A6; }
.att-carte-haut { display: flex; gap: 14px; align-items: flex-start; }
.att-n { margin: 0; font-size: 36px; font-weight: 700; line-height: 1.05; }
.att-n-rouge { color: #D64545; }
.att-carte-titre { margin: 6px 0 0; font-size: 15.5px; font-weight: 600; }
.att-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; color: #0B7C6D; }
.att-cta .ic { width: 16px; height: 16px; }
@media (max-width: 1279px) { .att-quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 899px) {
  .att-duo, .att-quatre { grid-template-columns: 1fr; }
  .att-alerte { flex-wrap: wrap; } .att-alerte-btn { width: 100%; text-align: center; }
  .att-date { display: none; }
  .att-nombre { font-size: 34px; } .att-n { font-size: 30px; }
}
.att-bloc > .card-head h2 { font-size: 20px; }

/* Tableau de bord : vue d'ensemble (une ligne par rubrique, détail au clic) — modèle du 21/10 */
.dash-head h1 { font-size: 34px; letter-spacing: -.3px; }
.dash-head .sub { font-size: 16px; color: var(--fg-2); }
.dash-head .actions { align-items: center; }
.dash-mode { font-size: 13.5px; color: var(--fg-3); margin-right: 8px; }
.dash-btn-perso { border-color: #14213D; color: #14213D; }
.dash-row { padding: 0; overflow: visible; margin-bottom: 14px; }
.dash-row-head { width: 100%; display: flex; align-items: center; gap: 22px; padding: 20px 26px; background: transparent; border: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; border-radius: 14px; }
.dash-row-head:hover { background: #F7FAF9; }
.dash-row-ico { width: 60px; height: 60px; border-radius: 14px; background: #E5F6F3; color: #0F9D8A; display: grid; place-items: center; flex: none; }
.dash-row-ico .ic { width: 30px; height: 30px; }
.dash-row-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dash-row-titre { font-size: 21px; font-weight: 700; color: #14213D; }
.dash-row-resume { font-size: 15.5px; color: var(--fg-2); }
.dash-pill { flex: none; font-size: 15px; font-weight: 600; padding: 7px 16px; border-radius: 999px; }
.dash-pill-warn { background: #FDEBC8; color: #8A5300; }
.dash-pill-ok { background: #DDF3EE; color: #0B7C6D; }
.dash-pill-danger { background: #FCDCDC; color: #B42318; }
.dash-row-chev { flex: none; color: #14213D; display: grid; place-items: center; transition: transform .2s; }
.dash-row-chev .ic { width: 24px; height: 24px; stroke-width: 2.2; }
.dash-row.ouvert .dash-row-chev { transform: rotate(180deg); }
.dash-row-body { padding: 0 26px 22px; border-top: 1px solid var(--border-2); }
.dash-row-body > section.card { border: 0; box-shadow: none; padding: 16px 0 0; margin: 0; background: transparent; }
.dash-row-body > section.card > .card-head > h2 { display: none; }
.dash-row-body > section.card > .card-head:empty, .dash-row-body > section.card > .card-head:not(:has(> :not(h2))) { display: none; }
.dash-row-aide { margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.dash-pied { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; color: var(--fg-3); }
@media (max-width: 899px) {
  .dash-head h1 { font-size: 28px; }
  .dash-mode { display: none; }
  .dash-row-head { gap: 14px; padding: 16px; flex-wrap: wrap; }
  .dash-row-ico { width: 46px; height: 46px; } .dash-row-ico .ic { width: 24px; height: 24px; }
  .dash-row-txt { flex: 1 1 calc(100% - 120px); }
  .dash-row-titre { font-size: 18px; }
  .dash-row-resume { font-size: 14px; }
  .dash-pill { order: 5; margin-left: 60px; font-size: 13px; padding: 5px 12px; }
  .dash-row-body { padding: 0 14px 16px; }
}

/* Chiffre d'affaires et marge — modèle du 21/10 */
.ca-controles { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.ca-seg button { padding: 9px 22px; font-size: 15px; }
.ca-date { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 10px; padding: 5px 8px; background: var(--surface); }
.ca-date .ic { width: 18px; height: 18px; }
.ca-date strong { font-size: 15px; font-weight: 600; white-space: nowrap; }
.ca-date .input { padding: 4px 6px; }
.ca-filtres { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; }
.ca-filtres select.input { min-width: 170px; }
.ca-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ca-kpi { display: flex; gap: 16px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px; padding: 22px 20px; }
.ca-kpi-accent { background: #E9F7F4; border-color: #BFE6DE; }
.ca-ico { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #E5F6F3; color: #0F9D8A; }
.ca-ico .ic { width: 26px; height: 26px; }
.ca-ico.ca-orange { background: #FDEFD9; color: #D9821C; }
.ca-kpi-titre { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ca-badge { margin-left: 4px; font-size: 12.5px; font-weight: 600; background: #FDEBC8; color: #8A5300; padding: 3px 10px; border-radius: 999px; }
.ca-val { margin: 10px 0 4px; font-size: 36px; font-weight: 700; line-height: 1.05; color: #14213D; }
.ca-val small { font-size: 22px; font-weight: 700; }
.ca-l1 { margin: 4px 0 0; font-size: 14.5px; color: var(--fg-2); }
.ca-kpi-accent .ca-l1 { color: #14213D; font-weight: 500; }
.ca-l2 { margin: 4px 0 0; font-size: 13.5px; color: var(--fg-3); }
.ca-bande { display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 18px; border-radius: 10px; font-size: 15px; text-decoration: none; color: inherit; }
.ca-bande .ic { width: 22px; height: 22px; flex: none; }
.ca-bande-info { background: #EAF6F4; border: 1px solid #CDEBE5; }
.ca-bande-info > .ic { color: #0F9D8A; }
.ca-bande-warn { background: #FFF4E5; border: 1px solid #F7D9AE; color: #B25E09; }
.ca-sep { color: var(--fg-3); }
.ca-bande-lien { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #0B7C6D; white-space: nowrap; }
.ca-bande-warn .ca-bande-lien { color: #B25E09; }
.ca-bande-lien .ic { width: 16px; height: 16px; }
.ca-bas { display: grid; grid-template-columns: 1.15fr 1fr; gap: 14px; margin-top: 16px; }
.ca-panneau { border: 1px solid var(--border-2); border-radius: 14px; padding: 18px 20px; background: var(--surface); min-width: 0; }
.ca-panneau-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.ca-panneau-head h3 { margin: 0; font-size: 18px; }
.ca-legende { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--fg-2); }
.ca-legende i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; margin-left: 10px; }
.ca-svg { width: 100%; height: auto; display: block; }
.ca-table th { background: #F1F4F6; color: var(--fg-2); text-transform: none; letter-spacing: 0; font-size: 13.5px; }
.ca-table td { font-size: 14.5px; padding: 11px 10px; }
.ca-table tr.ca-total td { background: #EEF3F5; font-weight: 700; }
.ca-note { margin: 10px 0 0; text-align: right; font-size: 12.5px; color: var(--fg-3); }
@media (max-width: 1279px) { .ca-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ca-bas { grid-template-columns: 1fr; } .ca-filtres { margin-left: 0; } }
@media (max-width: 899px) { .ca-kpis { grid-template-columns: 1fr; } .ca-val { font-size: 30px; } .ca-bande { flex-wrap: wrap; } .ca-bande-lien { margin-left: 0; } .ca-filtres select.input { min-width: 0; flex: 1 1 45%; } }
.ca-val { font-size: 32px; }
.ca-kpi { padding: 20px 18px; gap: 14px; }
.ca-ico { width: 46px; height: 46px; }
.ca-table td:first-child { white-space: nowrap; }
@media (min-width: 1280px) and (max-width: 1499px) { .ca-val { font-size: 28px; } .ca-val small { font-size: 18px; } }

/* Facturation et encaissements — modèle du 21/10 */
.fe-controles { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.fe-mois { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--fg-2); margin-right: auto; }
.fe-controles select.input { min-width: 180px; }
.fe-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.fe-kpi { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px; padding: 20px 18px 18px; }
.fe-kpi-haut { display: flex; gap: 14px; align-items: flex-start; }
.fe-ico { width: 48px; height: 48px; border-radius: 50%; background: #EAF1FC; color: #3B6FD8; display: grid; place-items: center; flex: none; }
.fe-ico .ic { width: 24px; height: 24px; }
.fe-kpi-titre { margin: 0; font-size: 16px; font-weight: 500; color: #14213D; }
.fe-val { margin: 6px 0 4px; font-size: 32px; font-weight: 700; line-height: 1.1; color: #14213D; }
.fe-val small { font-size: 22px; font-weight: 700; }
.fe-val-txt { font-size: 30px; }
.fe-sub { margin: 0; font-size: 14.5px; color: var(--fg-2); }
.fe-sub-sm { display: block; font-size: 13px; color: var(--fg-3); }
.fe-btn { display: flex; align-items: center; justify-content: center; gap: 8px; background: #4AA9B8; color: #fff; border: 0; border-radius: 8px; padding: 12px 16px; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; font-family: inherit; }
.fe-btn:hover { background: #3C97A6; color: #fff; }
.fe-btn .ic { width: 18px; height: 18px; }
.fe-pill { align-self: flex-start; font-size: 14px; font-weight: 600; padding: 6px 14px; border-radius: 9px; white-space: nowrap; }
.fe-kpi > .fe-pill { margin-left: 62px; }
.fe-pill-warn { background: #FDEBC8; color: #8A5300; }
.fe-pill-ok { background: #DDF3EE; color: #0B7C6D; }
.fe-pill-danger { background: #FCDCDC; color: #B42318; }
.fe-pill-muted { background: #EEF1F4; color: #4A5568; }
.fe-alerte { display: flex; align-items: center; gap: 14px; margin-top: 14px; background: #FFF4E5; border: 1px solid #F7D9AE; border-radius: 10px; padding: 12px 16px; font-size: 15.5px; color: #3D2A0F; }
.fe-alerte > .ic { width: 26px; height: 26px; color: #E8A23B; flex: none; }
.fe-alerte > span { flex: 1; min-width: 0; }
.fe-bas { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; margin-top: 14px; }
.fe-panneau { border: 1px solid var(--border-2); border-radius: 14px; padding: 18px 20px; background: var(--surface); min-width: 0; }
.fe-panneau-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.fe-panneau-head h3 { margin: 0; font-size: 19px; }
.fe-table th { background: #F1F4F6; color: #14213D; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; padding: 12px 14px; }
.fe-table td { font-size: 15px; padding: 12px 14px; }
.fe-statut { display: inline-block; font-size: 13.5px; font-weight: 600; padding: 5px 12px; border-radius: 6px; }
.fe-statut-danger { background: #FCE4E4; color: #C0352B; }
.fe-statut-info { background: #E6EFFC; color: #2F5FC4; }
.fe-statut-ok { background: #DDF3EE; color: #0B7C6D; }
.fe-statut-muted { background: #EEF1F4; color: #4A5568; }
.fe-panneau-pied { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--border-2); margin-top: 12px; padding-top: 12px; font-size: 15px; color: var(--fg-2); }
.fe-panneau-pied strong { color: #14213D; }
.fe-panneau-pied a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #2F5FC4; text-decoration: none; }
.fe-panneau-pied a .ic { width: 16px; height: 16px; }
.fe-jour { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-2); }
.fe-jour-ico { width: 40px; height: 40px; border-radius: 50%; background: #EEF1F4; display: grid; place-items: center; flex: none; }
.fe-jour-ico .ic { width: 20px; height: 20px; }
.fe-jour-txt { flex: 1; min-width: 0; font-size: 16px; color: #14213D; }
.fe-decompte { display: flex; align-items: center; gap: 14px; background: #F3F5F7; border-radius: 12px; padding: 16px 18px; }
.fe-decompte h4 { margin: 0 0 4px; font-size: 17px; }
.fe-dossier { display: flex; align-items: center; gap: 20px; margin-top: 14px; border: 1px solid var(--border-2); border-radius: 14px; padding: 18px 22px; background: var(--surface); flex-wrap: wrap; }
.fe-dossier h3 { margin: 0 0 12px; font-size: 19px; }
.fe-etapes { display: flex; flex-wrap: wrap; gap: 10px 0; }
.fe-etape { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; padding: 0 22px; border-left: 1px solid var(--border-2); }
.fe-etape:first-child { padding-left: 0; border-left: 0; }
.fe-rond { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.fe-rond .ic { width: 14px; height: 14px; color: #fff; stroke-width: 3; }
.fe-rond-ok { background: #22A06B; }
.fe-rond-warn { background: #F2B23C; }
.fe-rond-vide { border: 2px solid #9AA6B2; }
.fe-dossier-act { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-left: auto; }
.fe-dossier-act .fe-btn { padding: 12px 40px; }
.fe-note { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 13.5px; color: var(--fg-3); }
.fe-note .ic { width: 16px; height: 16px; }
@media (max-width: 1279px) { .fe-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fe-bas { grid-template-columns: 1fr; } }
@media (max-width: 899px) { .fe-kpis { grid-template-columns: 1fr; } .fe-mois { margin-right: 0; width: 100%; } .fe-controles select.input { min-width: 0; flex: 1 1 45%; } .fe-alerte { flex-wrap: wrap; } .fe-etape { padding: 0 12px 0 0; border-left: 0; width: 100%; } .fe-dossier-act { margin-left: 0; width: 100%; } .fe-dossier-act .fe-btn { width: 100%; } .fe-jour { flex-wrap: wrap; } }
.fe-table td:first-child, .fe-table td:last-child, .fe-statut, .fe-val { white-space: nowrap; }
@media (min-width: 1280px) and (max-width: 1599px) { .fe-val { font-size: 26px; } .fe-val small { font-size: 17px; } .fe-val-txt { font-size: 24px; } .fe-kpi { padding: 18px 14px 14px; } .fe-kpi-haut { gap: 10px; } .fe-ico { width: 40px; height: 40px; } .fe-kpi > .fe-pill { margin-left: 50px; } }
/* Bloc « Planning et tournées » du tableau de bord (modèle du 21/10) */
.pl-controles { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.pl-mention { margin-right: auto; font-size: 15px; color: var(--fg-2); }
.pl-date { position: relative; display: inline-flex; align-items: center; }
.pl-date > .ic { position: absolute; left: 14px; width: 18px; height: 18px; color: #14213D; pointer-events: none; }
.pl-date select.input { padding-left: 42px; min-width: 300px; font-weight: 500; color: #14213D; }
.pl-ouvrir { color: #2F7F8C; border-color: #4AA9B8; font-weight: 600; }
.pl-ouvrir .ic { width: 18px; height: 18px; }
.pl-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.pl-kpi { display: flex; gap: 14px; align-items: flex-start; background: var(--surface); border: 1px solid var(--border-2); border-radius: 14px; padding: 20px 18px; }
.pl-val { margin: 6px 0 4px; font-size: 32px; font-weight: 700; line-height: 1.1; color: #14213D; white-space: nowrap; }
a.pl-alerte { text-decoration: none; }
.pl-alerte strong { color: #7A3E00; font-weight: 600; }
.pl-lien { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #2F7F8C; white-space: nowrap; }
.pl-lien .ic { width: 16px; height: 16px; }
.pl-alerte-ok { background: #EAF7F3; border-color: #BFE6DA; }
.pl-alerte-ok > .ic { color: #0B7C6D; }
.pl-alerte-ok strong { color: #0B5E53; }
.pl-equipes { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.pl-equipe { border: 1px solid var(--border-2); border-radius: 14px; padding: 18px 20px; background: var(--surface); min-width: 0; display: flex; flex-direction: column; }
.pl-eq-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.pl-eq-head h3 { margin: 4px 0 2px; font-size: 18px; color: #14213D; }
.pl-chgs { display: flex; flex-direction: column; gap: 12px; }
.pl-chg { border: 1px solid var(--border-2); border-radius: 10px; padding: 14px 18px; }
.pl-chg-haut { display: flex; justify-content: space-between; gap: 10px; font-size: 16px; color: #14213D; }
.pl-chg-haut strong { font-weight: 500; white-space: nowrap; }
.pl-chg-sous { font-size: 14.5px; color: var(--fg-2); margin: 2px 0 10px; }
.pl-chg-bar { display: flex; align-items: center; gap: 14px; }
.pl-chg-bar b { min-width: 46px; text-align: right; color: #2F7F8C; font-weight: 600; font-size: 15px; }
.pl-barre { flex: 1; height: 14px; border-radius: 7px; background: #E8ECEF; overflow: hidden; }
.pl-barre i { display: block; height: 100%; border-radius: 7px; background: #4AB5C4; }
.pl-barre i.trop { background: #E5533D; }
.pl-eq-infos { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--border-2); margin-top: 16px; padding-top: 14px; }
.pl-info { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--fg-2); }
.pl-info > .ic { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.pl-info small { display: block; font-size: 13px; color: var(--fg-3); }
.pl-warn { color: #8A5300; }
.pl-warn > .ic { color: #E8A23B; }
.pl-eq-act { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.pl-eq-act .fe-btn { min-width: 210px; }
.pl-btn2 { color: #2F7F8C; border-color: #4AA9B8; font-weight: 600; padding: 11px 24px; }
.pl-btn2 .ic { width: 18px; height: 18px; }
.pl-bas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.pl-panneau-titre { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.pl-panneau-titre h3 { margin: 0; font-size: 18px; }
.pl-aff-ligne { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0 8px 18px; border-top: 1px solid var(--border-2); font-size: 15px; color: #14213D; }
.pl-aff-ligne .btn { color: #2F7F8C; border-color: #4AA9B8; min-width: 110px; justify-content: center; }
.pl-optim-corps { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 6px; }
.pl-optim-titre { margin: 0 0 4px; font-size: 16px; font-weight: 500; color: #14213D; }
.pl-equipe .fe-pill { margin-left: auto; }
@media (min-width: 1280px) and (max-width: 1599px) { .pl-val { font-size: 26px; } .pl-kpi { padding: 18px 14px; gap: 10px; } .pl-kpi .fe-ico { width: 40px; height: 40px; } }
@media (max-width: 1279px) { .pl-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-equipes, .pl-bas { grid-template-columns: 1fr; } }
@media (max-width: 899px) { .pl-kpis { grid-template-columns: 1fr; } .pl-mention { width: 100%; } .pl-date, .pl-date select.input { width: 100%; min-width: 0; } .pl-ouvrir { width: 100%; justify-content: center; } .fe-alerte.pl-alerte { flex-wrap: wrap; } .pl-eq-act > * { flex: 1 1 100%; justify-content: center; text-align: center; } .pl-eq-act .fe-btn { min-width: 0; } .pl-chg { padding: 12px 14px; } .pl-aff-ligne { padding-left: 0; } .pl-optim-corps .btn { width: 100%; justify-content: center; } }
.fe-alerte > span.pl-lien { flex: none; margin-left: auto; }
@media (max-width: 899px) { .pl-eq-head { flex-wrap: wrap; } .pl-eq-head > div { flex: 1 1 calc(100% - 64px) !important; } .pl-equipe .fe-pill { margin-left: 62px; } .pl-equipe { padding: 16px 14px; } }
@media (max-width: 599px) { .pl-kpis { grid-template-columns: 1fr 1fr; gap: 10px; } .pl-kpi { padding: 14px 12px; } .pl-kpi .fe-ico { display: none; } .pl-kpi .fe-kpi-titre { font-size: 14px; } .pl-val { font-size: 24px; white-space: normal; } .pl-kpi .fe-sub { font-size: 13px; } }
/* Menu latéral selon le modèle du 21/10 : logo Livrivo, entreprise, 5 grandes catégories en gras, personne connectée */
:root { --sidebar-w: 256px; }
.sidebar { padding: 18px 14px calc(16px + env(safe-area-inset-bottom, 0px)); gap: 0; background: #14223D; }
.sidebar .brand { display: flex; align-items: center; gap: 12px; padding: 4px 6px 18px; text-decoration: none; color: #fff; }
.sidebar .brand-logo { width: 62px; height: 38px; flex: none; color: #4FD1C5; }
.brand-txt { display: flex; flex-direction: column; min-width: 0; }
.sidebar .brand-name { font-size: 30px; font-weight: 800; line-height: 1; color: #4FD1C5; letter-spacing: .2px; }
.sidebar .brand-sub { font-size: 13px; color: #D5DEE8; margin-top: 4px; white-space: nowrap; }
.sidebar .account { background: transparent; border: 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); border-radius: 0; margin: 0 -2px 14px; padding: 18px 8px; font-size: 17px; font-weight: 700; color: #fff; }
.sidebar .account .ic { width: 20px; height: 20px; opacity: .9; }
.sidebar .nav { gap: 6px; }
.sidebar .nav > a, .sidebar .nav-group-head { padding: 13px 14px; gap: 18px; font-size: 16.5px; font-weight: 700; color: #DDE6F0; border-radius: 10px; }
.sidebar .nav > a .ic, .sidebar .nav-group-head > .ic:first-child { width: 24px; height: 24px; stroke-width: 1.9; }
.sidebar .nav > a.active { background: #2A3F62; color: #fff; }
.sidebar .nav > a.active::before { display: none; }
.sidebar .nav-group.has-active > .nav-group-head { color: #fff; }
.sidebar .nav-group-head > .ic:last-child { opacity: 0; width: 16px; height: 16px; }
.sidebar .nav-group-head:hover > .ic:last-child, .sidebar .nav-group.open > .nav-group-head > .ic:last-child { opacity: .55; }
.sidebar .nav-group-items { margin: 0 0 6px 25px; padding-left: 18px; }
.sidebar .nav a.sub { font-size: 14px; font-weight: 400; color: #C3D1E0; padding: 8px 10px; }
.sidebar .nav a.sub.active { background: rgba(255,255,255,.08); color: #fff; font-weight: 600; }
.sidebar-foot { border-top: 1px solid rgba(255,255,255,.14); padding-top: 14px; }
.sidebar-foot .user { gap: 14px; padding: 8px 10px; }
.user-ico { width: 30px; height: 30px; display: grid; place-items: center; color: #DDE6F0; flex: none; }
.user-ico .ic { width: 28px; height: 28px; stroke-width: 1.8; }
.user-nom { font-size: 16px; font-weight: 600; color: #fff; }
.sidebar .user-role { font-size: 13px; color: #B9C7D6; }
@media (min-width: 900px) and (max-width: 1279px) { :root { --sidebar-w: 236px; } .sidebar .brand-name { font-size: 26px; } .sidebar .brand-logo { width: 52px; } }
.sidebar svg.brand-logo { background: none; border-radius: 0; display: block; }
.sidebar .nav-group-head > .count, .sidebar .nav > a > .count { margin-left: auto; }
:root { --sidebar-w: 272px; }
.sidebar .nav-group-head { position: relative; padding-right: 34px; }
.sidebar .nav-group-head > .ic:last-child { position: absolute; right: 12px; top: 50%; margin-top: -8px; }
.sidebar .nav-group.open > .nav-group-head > .ic:last-child { transform: rotate(180deg); }
@media (min-width: 900px) and (max-width: 1279px) { :root { --sidebar-w: 244px; } .sidebar .nav > a, .sidebar .nav-group-head { gap: 12px; } }
/* Menu latéral v2 (modèle du 21/10, 16 h 40) */
:root { --sidebar-w: 288px; }
.sidebar { background: #11203B; padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
.sidebar .brand { padding: 2px 4px 18px; gap: 14px; }
.sidebar .brand-logo { width: 64px; height: 40px; }
.sidebar .brand-name { color: #fff; font-size: 31px; font-weight: 800; }
.sidebar .brand-sub { color: #AFC0D3; font-size: 13.5px; }
.sidebar .account { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 14px; padding: 12px 14px; border: 1.5px solid #3CCFC4; border-radius: 10px; background: rgba(60,207,196,.04); color: #fff; text-align: left; font: inherit; }
.sidebar button.account { cursor: pointer; }
.sidebar button.account:hover { background: rgba(60,207,196,.1); }
.account-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 1; min-width: 0; }
.account-lib { font-size: 10.5px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: #9FB2C8; }
.account-nom { font-size: 19px; font-weight: 700; color: #fff; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.account-puce { margin-top: 2px; font-size: 11.5px; font-weight: 600; color: #3CCFC4; background: rgba(60,207,196,.14); border-radius: 999px; padding: 2px 9px; }
.account-puce.demo { color: #F5C14B; background: rgba(245,193,75,.14); }
.sidebar .account > .ic { width: 20px; height: 20px; opacity: .9; flex: none; }
.sidebar .nav { gap: 4px; }
.sidebar .nav > a, .sidebar .nav-group-head { padding: 12px 14px; gap: 18px; font-size: 16px; font-weight: 700; color: #fff; }
.sidebar .nav > a.active { background: #233859; box-shadow: inset 4px 0 0 #3CCFC4; border-radius: 9px; }
.sidebar .nav > a.active .ic rect { fill: currentColor; }
.sidebar .nav-group-head > .ic:last-child { opacity: .85 !important; transform: rotate(-90deg); width: 18px; height: 18px; margin-top: -9px; }
.sidebar .nav-group.open > .nav-group-head > .ic:last-child { transform: none; }
.sidebar .nav-group-items { margin: 0 0 8px 39px; padding-left: 14px; border-left: 2px solid #2A4268; gap: 0; }
.sidebar .nav a.sub { font-size: 14px; font-weight: 400; color: #C9D5E3; padding: 7px 8px; border-radius: 7px; }
.sidebar .nav a.sub .nav-dot { display: none; }
.sidebar .nav a.sub:hover { color: #fff; background: rgba(255,255,255,.05); }
.sidebar .nav a.sub.active { color: #fff; font-weight: 600; background: rgba(60,207,196,.10); }
.sidebar .nav .count { min-width: 26px; height: 22px; display: inline-grid; place-items: center; padding: 0 8px; font-size: 12px; font-weight: 700; border-radius: 999px; background: #F5B91E; color: #14213D; }
.sidebar .nav .count.info { background: #2E4A72; color: #E3EAF3; }
.sidebar-foot { border-top: 1px solid #2A4268; padding-top: 16px; gap: 12px; }
.sb-btn { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 10px 14px; border: 1.5px solid #3F5778; border-radius: 9px; background: transparent; color: #E3EAF3; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.sb-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
.sb-btn .ic { width: 20px; height: 20px; }
.sidebar-foot .user { gap: 12px; padding: 2px 4px; }
.sidebar-foot .avatar { width: 48px; height: 48px; font-size: 16px; font-weight: 700; background: #0E5A5E; color: #fff; }
.user-nom { font-size: 16px; font-weight: 700; }
.sidebar .user-role { font-size: 13.5px; color: #AFC0D3; }
@media (min-width: 900px) and (max-width: 1279px) { :root { --sidebar-w: 256px; } .sidebar .brand-name { font-size: 26px; } .sidebar .nav-group-items { margin-left: 30px; } }
@media (max-width: 899px) { .sidebar { width: min(300px, 88vw); } }
.sidebar .nav a.sub > span:not(.count):not(.nav-dot) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sidebar .nav a.sub { padding: 6px 8px; }
.sidebar .nav > a, .sidebar .nav-group-head { padding: 10px 14px; }
.sidebar .nav-group-items { margin-bottom: 6px; }
.sidebar .brand { padding-bottom: 14px; }
.sidebar .account { margin-bottom: 12px; padding: 10px 14px; }
@media (max-height: 820px) and (min-width: 900px) { .sidebar .nav a.sub { padding: 5px 8px; font-size: 13.5px; } .sidebar .nav > a, .sidebar .nav-group-head { padding: 8px 14px; } }
.sidebar .nav-group-items { margin-left: 34px; padding-left: 10px; }
.sidebar .nav a.sub { gap: 8px; padding-right: 4px; }
@media (min-width: 900px) and (max-width: 1279px) { :root { --sidebar-w: 268px; } .sidebar { padding-left: 12px; padding-right: 12px; } .sidebar .nav-group-items { margin-left: 24px; } .sidebar .nav a.sub { font-size: 13.5px; } }
/* ---------- Espace livreur : parcours mobile en 3 écrans (modèle du 21/10) ---------- */
.lv { max-width: 560px; margin: 0 auto; }
.lv-band { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #14223D; color: #E3EAF3; border-radius: 14px 14px 0 0; padding: 12px 16px; font-size: 14px; }
.lv-band-sel { position: relative; display: inline-flex; align-items: center; }
.lv-band-sel select.input { appearance: none; -webkit-appearance: none; background: transparent; border: 0; color: #fff; font-weight: 600; font-size: 14px; padding: 2px 22px 2px 0; min-height: 0; height: auto; box-shadow: none; }
.lv-band-sel select.input option { color: #14213D; }
.lv-band-sel .ic { position: absolute; right: 0; width: 15px; height: 15px; pointer-events: none; color: #9FB2C8; }
.lv-band-r { text-align: right; }
.lv-corps { background: #F6F8FA; border: 1px solid var(--border-2); border-top: 0; border-radius: 0 0 14px 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.lv-carte { background: #fff; border: 1px solid #E3E8EE; border-radius: 12px; padding: 14px 16px; }
.lv-avance p { margin: 0 0 8px; font-size: 17px; color: #14213D; }
.lv-barre { display: block; height: 9px; border-radius: 5px; background: #E3E8EE; overflow: hidden; }
.lv-barre i { display: block; height: 100%; background: linear-gradient(90deg, #22A6A0, #2DBE7B); border-radius: 5px; }
.lv-avance small { display: block; margin-top: 6px; color: #6B7684; font-size: 12.5px; }
.lv-prochaine { background: #E9F8F6; border-color: #C5ECE6; display: flex; flex-direction: column; gap: 12px; }
.lv-prochaine-tete { display: flex; justify-content: space-between; align-items: center; }
.lv-prochaine h2 { margin: 0; font-size: 20px; color: #0B7C7C; }
.lv-lignes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 16px; color: #14213D; }
.lv-lignes li { display: flex; gap: 12px; align-items: flex-start; }
.lv-lignes .ic { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.lv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 8px; background: #E4ECF6; color: #14213D; font-size: 14px; }
.lv-chip .ic { width: 16px; height: 16px; }
.lv-chip-warn { background: #FFF1D6; color: #7A4B00; }
.lv-produit { display: flex; align-items: center; gap: 14px; width: 100%; background: #fff; border: 1px solid #E3E8EE; border-radius: 10px; padding: 10px 12px; text-align: left; font: inherit; color: inherit; }
button.lv-produit { cursor: pointer; }
button.lv-produit:hover { border-color: #4AA9B8; }
.lv-produit > .ic:last-child { width: 18px; height: 18px; margin-left: auto; color: #6B7684; flex: none; }
.lv-produit-img { width: 56px; height: 56px; border-radius: 8px; background: linear-gradient(160deg, #F1F4F7, #D3DAE1); display: grid; place-items: center; flex: none; color: #6B7684; }
.lv-produit-img .ic { width: 28px; height: 28px; }
.lv-produit-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 14px; color: #5A6573; }
.lv-produit-txt strong { font-size: 16px; color: #14213D; }
.lv-2btn { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lv-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 14px; border-radius: 9px; font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; border: 1.5px solid transparent; background: none; }
.lv-btn .ic { width: 20px; height: 20px; }
.lv-btn-plein { background: #1FA3B0; color: #fff; }
.lv-btn-plein:hover { background: #17909C; color: #fff; }
.lv-btn-contour { background: #fff; border-color: #1FA3B0; color: #127D88; }
.lv-btn-contour:hover { background: #F0FAFA; }
.lv-btn-bleu { background: #fff; border-color: #2F5FC4; color: #2F5FC4; }
.lv-btn-danger { background: #fff; border-color: #E5484D; color: #D93036; }
.lv-btn-large { width: 100%; }
.lv-btn-xl { padding: 15px; font-size: 18px; }
.lv-btn-sm { padding: 8px 14px; font-size: 14px; }
.lv-off { opacity: .45; pointer-events: none; }
.lv-lien { display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: #2F5FC4; cursor: pointer; }
.lv-lien .ic { width: 16px; height: 16px; }
.lv-titre { margin: 4px 0 -2px; font-size: 17px; color: #14213D; }
.lv-suivant { display: flex; align-items: center; gap: 14px; width: 100%; background: #fff; border: 1px solid #E3E8EE; border-radius: 10px; padding: 12px 14px; font: inherit; text-align: left; cursor: pointer; color: #14213D; }
.lv-suivant:hover { border-color: #4AA9B8; }
.lv-suivant strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; }
.lv-num { width: 30px; height: 30px; border-radius: 50%; background: #E3E8EE; display: grid; place-items: center; font-weight: 700; flex: none; }
.lv-cren { display: inline-flex; align-items: center; gap: 6px; color: #3E4A59; font-size: 14.5px; white-space: nowrap; }
.lv-cren .ic { width: 17px; height: 17px; }
.lv-suivant > .ic:last-child { width: 18px; height: 18px; color: #6B7684; flex: none; }
.lv-voir-tout { align-self: flex-start; }
.lv-vide { margin: 0; color: #6B7684; font-size: 14px; }
.lv-sync { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid #E3E8EE; color: #5A6573; font-size: 14px; }
.lv-sync i { width: 10px; height: 10px; border-radius: 50%; background: #2DBE7B; }
.lv-fini-tournee { display: flex; gap: 12px; align-items: center; background: #EAF7F3; border-color: #BFE6DA; }
.lv-fini-tournee > .ic { width: 28px; height: 28px; color: #0B7C6D; }
.lv-fini-tournee div { display: flex; flex-direction: column; } .lv-fini-tournee span { color: #5A6573; font-size: 14px; }
.lv-retour { display: flex; align-items: center; gap: 10px; }
.lv-retour h2 { margin: 0; font-size: 18px; flex: 1; min-width: 0; color: #14213D; }
.lv-back { width: 34px; height: 34px; border: 0; background: none; display: grid; place-items: center; cursor: pointer; color: #14213D; border-radius: 8px; flex: none; }
.lv-back:hover { background: #E9EDF2; }
.lv-back .ic { width: 22px; height: 22px; }
.lv-etat { font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 7px; white-space: nowrap; }
.lv-etat-info { background: #E1ECFB; color: #2F5FC4; }
.lv-etat-muted { background: #EEF1F4; color: #4A5568; }
.lv-coche { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; background: #fff; border: 1px solid #E3E8EE; font-size: 16px; color: #14213D; cursor: pointer; }
.lv-coche.ok { background: #EAF7F3; border-color: #C9EBDD; }
.lv-coche input { position: absolute; opacity: 0; pointer-events: none; }
.lv-box { width: 22px; height: 22px; border-radius: 5px; border: 2px solid #9AA6B2; display: grid; place-items: center; flex: none; background: #fff; }
.lv-box .ic { width: 15px; height: 15px; color: #fff; stroke-width: 3; opacity: 0; }
.lv-coche.ok .lv-box { background: #1FA3B0; border-color: #1FA3B0; } .lv-coche.ok .lv-box .ic { opacity: 1; }
.lv-coche input:focus-visible + .lv-box { outline: 2px solid #1FA3B0; outline-offset: 2px; }
.lv-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lv-choix button { display: flex; align-items: center; gap: 10px; padding: 13px 14px; border-radius: 9px; border: 1.5px solid #D5DCE3; background: #fff; font: inherit; font-size: 16px; font-weight: 700; color: #14213D; cursor: pointer; }
.lv-choix button.actif { background: #1FA3B0; border-color: #1FA3B0; color: #fff; }
.lv-rond { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #9AA6B2; display: grid; place-items: center; flex: none; }
.lv-rond .ic { width: 13px; height: 13px; stroke-width: 3; opacity: 0; }
.lv-choix button.actif .lv-rond { background: #fff; border-color: #fff; } .lv-choix button.actif .lv-rond .ic { opacity: 1; color: #1FA3B0; }
.lv-aide { margin: -4px 0 0; font-size: 13px; color: #6B7684; }
.lv-titre-ligne { display: flex; justify-content: space-between; align-items: baseline; } .lv-titre-ligne > span { color: #5A6573; font-size: 14px; }
.lv-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.lv-vign { position: relative; width: 120px; height: 92px; border-radius: 8px; overflow: hidden; background: #E3E8EE; }
.lv-vign img, .lv-vign video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lv-vign-badge { position: absolute; left: 4px; bottom: 4px; font-size: 14px; }
.lv-suppr { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(20,33,61,.85); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lv-suppr .ic { width: 13px; height: 13px; }
.lv-ajout { width: 120px; height: 92px; border-radius: 8px; border: 1.5px dashed #AEB8C2; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #3E4A59; font: inherit; font-size: 13px; cursor: pointer; }
.lv-ajout .ic { width: 24px; height: 24px; color: #2F5FC4; }
.lv-ajout:hover { border-color: #1FA3B0; }
.lv-video { font-size: 13.5px; font-weight: 500; color: #5A6573; align-self: flex-start; }
.lv-signature { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: #14213D; }
.lv-signature > .ic { width: 20px; height: 20px; flex: none; }
.lv-signature > span { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lv-signature img { height: 30px; background: #fff; border: 1px solid #E3E8EE; border-radius: 4px; }
.lv-enc { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: #fff; border: 1px solid #E3E8EE; border-radius: 10px; padding: 12px 14px; }
.lv-enc > div:first-child { display: flex; flex-direction: column; gap: 2px; } .lv-enc span { color: #5A6573; font-size: 13.5px; }
.lv-enc-vide { background: #EEF1F4; border-color: #EEF1F4; justify-content: flex-start; color: #4A5568; }
.lv-enc-vide .ic { width: 20px; height: 20px; } .lv-enc-vide span { font-size: 15px; color: #4A5568; }
.lv-seg { display: inline-flex; border: 1.5px solid #D5DCE3; border-radius: 9px; overflow: hidden; }
.lv-seg button { border: 0; background: #fff; padding: 9px 16px; font: inherit; font-weight: 600; cursor: pointer; color: #14213D; }
.lv-seg button + button { border-left: 1.5px solid #D5DCE3; }
.lv-seg button.actif { background: #1FA3B0; color: #fff; }
.lv-manque { display: flex; align-items: center; gap: 10px; background: #FFF4DA; border: 1px solid #F6DDA0; color: #7A4B00; border-radius: 10px; padding: 11px 14px; font-weight: 600; font-size: 14.5px; }
.lv-manque .ic { width: 20px; height: 20px; color: #E8930C; flex: none; }
.lv-manque-ok { background: #EAF7F3; border-color: #C9EBDD; color: #0B5E53; } .lv-manque-ok .ic { color: #0B7C6D; }
.lv-terminer { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; padding: 13px; border: 0; border-radius: 9px; background: #1FA3B0; color: #fff; font: inherit; font-size: 18px; font-weight: 700; cursor: pointer; }
.lv-terminer:hover:not([disabled]) { background: #17909C; }
.lv-terminer[disabled] { background: #C5CED8; color: #F4F6F8; cursor: not-allowed; }
.lv-terminer small { font-size: 12.5px; font-weight: 500; }
.lv-note { margin: 0; font-size: 12.5px; color: #8A95A3; text-align: center; }
.lv-termine { display: flex; flex-direction: column; gap: 12px; }
.lv-termine-tete { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 6px 0; }
.lv-termine-tete h2 { margin: 0; font-size: 21px; color: #14213D; } .lv-termine-tete p { margin: 2px 0 0; color: #5A6573; }
.lv-gros-ok { width: 60px; height: 60px; border-radius: 50%; background: #22A06B; display: grid; place-items: center; flex: none; }
.lv-gros-ok .ic { width: 34px; height: 34px; color: #fff; stroke-width: 3; }
.lv-recap { list-style: none; margin: 0; padding: 0 12px; border: 1px solid #E3E8EE; border-radius: 10px; }
.lv-recap li { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 15px; color: #14213D; border-bottom: 1px solid #EEF1F4; }
.lv-recap li:last-child { border-bottom: 0; }
.lv-ok { width: 22px; height: 22px; border-radius: 50%; background: #22A06B; display: grid; place-items: center; flex: none; }
.lv-ok .ic { width: 13px; height: 13px; color: #fff; stroke-width: 3; }
.lv-recap-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lv-recap-photos img, .lv-recap-photos video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; display: block; }
.lv-justifs { width: 100%; justify-content: flex-start; gap: 10px; }
.lv-justifs .ic:last-child { margin-left: auto; }
.lv-synchro { display: flex; align-items: center; gap: 10px; background: #EAF7F3; border: 1px solid #C9EBDD; border-radius: 10px; padding: 11px 14px; color: #0B5E53; }
.lv-synchro strong { flex: 1; } .lv-synchro > span:last-child { font-size: 14px; }
.lv-correction { display: flex; align-items: center; justify-content: center; gap: 8px; background: none; border: 0; font: inherit; font-size: 13.5px; color: #5A6573; cursor: pointer; padding: 4px; }
.lv-correction .ic { width: 18px; height: 18px; }
.lv-liste { padding: 6px; }
.lv-sign-cadre { width: 100%; height: 200px; border: 1.5px dashed #AEB8C2; border-radius: 10px; background: #fff; touch-action: none; display: block; }
.lv-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.lv-galerie img, .lv-galerie video { width: 100%; border-radius: 8px; display: block; }
.lv-galerie figure { margin: 0; } .lv-galerie figcaption { font-size: 13px; color: #5A6573; text-align: center; }
.lv-galerie-sign { background: #fff; border: 1px solid #E3E8EE; }
#lv-motif { width: 100%; }
@media (max-width: 899px) { .lv { margin: -4px -6px 0; } .lv-band { border-radius: 12px 12px 0 0; } .lv-corps { padding: 12px 10px; } .lv-vign, .lv-ajout { width: calc(50% - 5px); } }
.sidebar .brand-name .brand-o { color: #3CCFC4; }
.lv-band { flex-wrap: wrap; }
.lv-logo { flex: 1 1 100%; text-align: center; font-size: 30px; font-weight: 800; color: #fff; line-height: 1.1; margin-bottom: 6px; letter-spacing: .2px; }
.lv-logo span { color: #3CCFC4; }
/* Indicateur « Livré à J+1 » (22/10) */
.j1-barre { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--border-2); }
.j1-barre i { display: block; height: 100%; }
.j1-a { background: #22A06B; } .j1-b { background: #4AA9B8; } .j1-c { background: #E8A23B; }
.j1-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13.5px; color: var(--fg-2); }
.j1-legende i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.j1-bandeau { display: flex; align-items: center; gap: 18px; margin: 0 0 14px; padding: 14px 20px; border-radius: 14px; background: linear-gradient(100deg, #E6F6EF, #E9F6F8); border: 1px solid #C6E8DA; color: #14213D; text-decoration: none; }
.j1-bandeau:hover { border-color: #22A06B; }
.j1-gros { font-size: 40px; font-weight: 800; color: #0B7C4F; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.j1-gros small { font-size: 24px; }
.j1-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.j1-txt strong { font-size: 17px; }
.j1-sous { font-size: 13.5px; color: #4A5568; }
.j1-txt .j1-barre { max-width: 420px; margin-top: 4px; }
.j1-lien { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #0B7C6D; white-space: nowrap; }
.j1-lien .ic { width: 16px; height: 16px; }
.j1-bandeau > .ic { width: 28px; height: 28px; color: #0B7C4F; }
.j1-vide { background: var(--surface); border-color: var(--border-2); }
.j1-vide > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.j1-carte { margin-bottom: 14px; }
.j1-carte .card-head select.input { max-width: 220px; }
.j1-haut { display: grid; grid-template-columns: minmax(180px, 240px) 1fr; gap: 24px; align-items: start; }
.j1-chiffre { display: flex; flex-direction: column; gap: 4px; }
.j1-chiffre b { font-size: 48px; line-height: 1; color: #0B7C4F; font-variant-numeric: tabular-nums; }
.j1-chiffre > span:first-of-type { font-weight: 600; }
.j1-detail { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.j1-mags { display: flex; flex-direction: column; gap: 6px; }
.j1-mag { display: grid; grid-template-columns: 130px 1fr 52px 64px; align-items: center; gap: 10px; font-size: 14px; }
.j1-mini { height: 8px; border-radius: 4px; background: var(--border-2); overflow: hidden; }
.j1-mini i { display: block; height: 100%; background: #22A06B; }
.j1-h3 { margin: 18px 0 8px; font-size: 15px; }
.j1-table tr[data-cmd] { cursor: pointer; }
.j1-table td { white-space: nowrap; }
.j1-pill { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.j1-pill-ok { background: #DDF3EE; color: #0B7C4F; } .j1-pill-info { background: #E1F1F4; color: #1F7F8C; } .j1-pill-warn { background: #FDEBC8; color: #8A5300; } .j1-pill-muted { background: #EEF1F4; color: #4A5568; font-weight: 500; }
@media (max-width: 899px) { .j1-bandeau { flex-wrap: wrap; gap: 10px 14px; padding: 12px 14px; } .j1-gros { font-size: 32px; } .j1-lien { width: 100%; } .j1-haut { grid-template-columns: 1fr; gap: 14px; } .j1-mag { grid-template-columns: 1fr 70px 48px; } .j1-mag .j1-mini { display: none; } }
.lv-btn[disabled] { opacity: .45; cursor: not-allowed; }
.lv-debut { display: flex; flex-direction: column; gap: 10px; border-color: #C9D6EA; background: #F1F5FB; }
.lv-debut h2 { margin: 0; font-size: 20px; color: #14213D; }
.lv-debut-sous { margin: -4px 0 2px; color: #4A5568; font-size: 14.5px; }
.lv-debut-ok, .lv-cloture-ok { display: flex; align-items: center; gap: 10px; color: #0B5E53; font-size: 14.5px; }
.lv-debut-ok { background: #EAF7F3; border: 1px solid #C9EBDD; border-radius: 10px; padding: 9px 14px; }
.lv-debut-ok .ic, .lv-cloture-ok > .ic { width: 20px; height: 20px; flex: none; }
.lv-cloture-ok > span:nth-child(2) { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lv-cloture-ok small { color: #4A5568; font-size: 13px; }
.lv-caisse { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.lv-caisse-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lv-caisse-l span { font-size: 13px; color: #5A6573; }
.lv-caisse-l strong { font-size: 18px; color: #14213D; font-variant-numeric: tabular-nums; }
.lv-caisse-l small { font-size: 12px; color: #6B7684; }
.lv-caisse-pied { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; border-top: 1px solid #E3E8EE; padding-top: 10px; }
/* Lignes SAV ajoutées à la facture du mois (22/10) */
.fe-sav { margin-top: 10px; border: 1px solid var(--border-2); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.fe-sav strong .ic { width: 16px; height: 16px; vertical-align: -3px; }
.fe-sav-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.fe-sav-liste li { display: flex; align-items: center; gap: 12px; font-size: 13.5px; padding: 6px 8px; background: var(--muted-soft); border-radius: 7px; }
.fe-sav-liste li > span:nth-child(2) { flex: 1; min-width: 0; }
.fe-sav-form { display: grid; grid-template-columns: 1.2fr 1.4fr 1fr 0.9fr auto; gap: 8px; align-items: end; }
.fe-sav-form .field { margin: 0; }
@media (max-width: 899px) { .fe-sav-form { grid-template-columns: 1fr 1fr; } .fe-sav-form .btn { grid-column: 1 / -1; } }
.lv-inc-preuves { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 4px; padding: 12px; border: 1px solid var(--border-2); border-radius: 10px; }
.lv-inc-preuves .lv-photos:empty { display: none; }
.lv-inc-preuves .lv-vign { width: 96px; height: 74px; }
.lv-tete-act { display: inline-flex; align-items: center; gap: 14px; }
.lv-lien-gris { color: #5A6573; font-weight: 500; }
.lv-reporte { display: inline-block; font-size: 11.5px; font-weight: 700; color: #8A5300; background: #FDEBC8; border-radius: 5px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.lv-dicter-ligne { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 8px; }
.lv-dicter-ligne .small { flex: 1; min-width: 180px; }
.lv-prevenu { background: #EEF4FD; border-color: #CFDDF5; color: #1F4E9C; }
.lv-prevenu > .ic { width: 20px; height: 20px; flex: none; }

/* ---------- Connexion (écran plein) et mot de passe ---------- */
.auth { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 42%, var(--bg) 42%); }
.auth-carte { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 28px 24px; box-shadow: 0 12px 32px rgba(15, 42, 71, .14); display: flex; flex-direction: column; gap: 18px; }
.auth-marque { display: flex; align-items: center; gap: 10px; }
.auth-marque .brand-logo { width: 38px; height: 38px; padding: 6px; }
.auth-marque .brand-name { font-size: 22px; font-weight: 600; color: var(--fg); }
.auth-marque .brand-o { color: var(--accent); }
.auth h1 { font-size: 20px; margin: 0; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form[hidden] { display: none; }
.compte-form { grid-template-columns: 1fr; }
.auth-form .input, .compte-form .input { width: 100%; font-size: 16px; padding: 10px 12px; }
.auth-txt { margin: 0; color: var(--fg-2); }
.auth-btn { width: 100%; padding: 12px 14px; font-size: 15px; }
.auth-btn:disabled { opacity: .6; cursor: default; }
.auth-lien { background: none; border: 0; padding: 4px; color: var(--accent-strong); font: inherit; font-weight: 500; cursor: pointer; align-self: center; }
.auth-lien:hover { text-decoration: underline; }
.auth-err { color: var(--danger); font-size: 13.5px; min-height: 0; }
.auth-err:empty { display: none; }
.auth-ok { color: var(--ok); font-size: 13.5px; }
.auth-pied { margin: 0; color: var(--fg-2); font-size: 12.5px; }
.auth-attente { display: flex; align-items: center; gap: 10px; color: var(--fg-2); }
.auth-spin { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: auth-tour .8s linear infinite; }
@keyframes auth-tour { to { transform: rotate(360deg); } }
.mdp { position: relative; display: block; }
.mdp .input { width: 100%; padding-right: 44px; }
.mdp-oeil { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; display: grid; place-items: center; border: 0; background: none; color: var(--fg-2); border-radius: 8px; cursor: pointer; }
.mdp-oeil:hover { color: var(--fg); background: var(--surface-2); }
.mdp-oeil .ic { width: 20px; height: 20px; }
.compte-info { display: grid; gap: 8px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 10px; }
.compte-info > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.compte-info strong { overflow-wrap: anywhere; }
.compte-titre { font-size: 15px; margin: 16px 0 8px; }
.auth-captcha { min-height: 65px; }
.auth-captcha:empty { min-height: 65px; background: var(--surface-2); border-radius: 8px; }

/* ---------- Comptes utilisateurs (Mon équipe / Utilisateurs) ---------- */
.usr-resume { margin: 4px 0 10px; }
.usr-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 10px; }
.usr { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; box-shadow: var(--shadow); }
.usr-off { opacity: .72; background: var(--surface-2); }
.usr-tete { display: flex; align-items: center; gap: 10px; min-width: 0; }
.usr-tete .avatar { background: var(--navy-soft); color: var(--navy-3); width: 38px; height: 38px; }
.usr-id { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.usr-id strong, .usr-id span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usr-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.usr-actions { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--border-2); padding-top: 10px; }
.filters #usr-q { flex: 1 1 260px; }

/* ---------- Registre national : recherche et contrôle des licences ---------- */
.reg-liste { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 320px; overflow-y: auto; }
.reg-res { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--fg); font: inherit; cursor: pointer; }
.reg-res:hover, .reg-res:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.reg-res .reg-lic { white-space: normal; text-align: left; }
.reg-info { padding: 6px 2px; }
.reg-choisi { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 10px; }
.st-ident { display: grid; gap: 4px; margin: 0 0 8px; }
.st-ident a { color: var(--accent-strong); }
.st-manque { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 7px 10px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-size: 13px; }
.st-manque .ic { width: 16px; height: 16px; flex: 0 0 auto; }
.alerte-licence { display: flex; gap: 10px; padding: 12px 14px; margin-bottom: 12px; border-radius: var(--radius); background: var(--danger-soft); color: var(--fg); border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.alerte-licence > .ic { color: var(--danger); width: 20px; height: 20px; flex: 0 0 auto; }
.alerte-licence div { display: flex; flex-direction: column; gap: 2px; }

/* ---------- Espace sous-traitant ---------- */
.st-jours { display: flex; flex-wrap: wrap; margin: 0 0 10px; }
.nav a.verrou { opacity: .62; }
.nav a.verrou .ic { width: 16px; height: 16px; }
.cadenas { text-align: center; max-width: 620px; margin: 0 auto; padding: 28px 22px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.cadenas h2 { margin: 0; font-size: 20px; }
.cadenas p { margin: 0; color: var(--fg-2); }
.cadenas-ic { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); }
.cadenas-ic .ic { width: 26px; height: 26px; }
.page-head h1 .ic { width: 22px; height: 22px; vertical-align: -3px; }