:root {
  --ink: #1C2630;
  --ink-2: #51606E;
  --ink-3: #8794A1;
  --paper: #EEF1F4;
  --surface: #FFFFFF;
  --line: #D3DAE1;
  --line-soft: #E6EAEE;
  --amber: #D9800A;
  --amber-dark: #A85F00;
  --amber-soft: #FDF1DE;
  --in: #2E7A4E;
  --in-soft: #E4F2EA;
  --out: #B03A2E;
  --out-soft: #F8E6E3;
  --ui: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --num: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
  --r: 4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
}
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }

/* ---------- Champs & boutons ---------- */
input, select, textarea {
  height: 34px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  min-width: 0;
}
textarea { height: auto; padding: 7px 9px; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-soft); }
input:disabled, select:disabled { background: var(--paper); color: var(--ink-2); }
label { display: grid; gap: 3px; font-size: 13px; color: var(--ink-2); font-weight: 500; }
label > input, label > select { color: var(--ink); font-weight: 400; font-size: 15px; }

.btn {
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--ink);
}
.btn:hover { border-color: var(--ink-3); }
.btn-primary { background: var(--amber); border-color: var(--amber); color: #fff; }
.btn-primary:hover { background: var(--amber-dark); border-color: var(--amber-dark); }
.btn-ink { background: var(--ink); border-color: var(--ink); color: #fff; }
.btn-ink:hover { background: #2D3B48; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.link-btn { border: 0; background: none; padding: 0; color: var(--ink-2); cursor: pointer; text-decoration: underline; font-size: 13px; }
.icon-btn { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 18px; line-height: 1; padding: 4px 6px; border-radius: var(--r); }
.icon-btn:hover { color: var(--out); background: var(--out-soft); }

/* ---------- Connexion ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(360px, 100%); background: var(--surface); border-top: 4px solid var(--amber); padding: 32px 28px; display: grid; gap: 16px; }
.login-card h1 { font-size: 28px; }
.login-card p { margin: 0; color: var(--ink-2); }
.form-err { color: var(--out); min-height: 1.2em; font-size: 14px; }

/* ---------- Structure ---------- */
.shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); min-height: 100%; }
.side { background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 20px 0 16px; position: sticky; top: 0; height: 100vh; }
.brand { font-family: var(--num); font-weight: 700; font-size: 22px; padding: 0 20px 14px; letter-spacing: .01em; }
.brand::before { content: ''; display: inline-block; width: 12px; height: 12px; background: var(--amber); margin-right: 8px; vertical-align: 1px; }
.depot-select { padding: 0 20px 18px; border-bottom: 1px solid var(--line-soft); }
.nav-group { padding: 14px 0 4px; }
.nav-title { padding: 0 20px 4px; font-size: 12px; color: var(--ink-3); font-weight: 500; }
.nav-link { display: block; padding: 7px 20px 7px 17px; border-left: 3px solid transparent; color: var(--ink); text-decoration: none; font-weight: 500; }
.nav-link:hover { background: var(--paper); }
.nav-link.active { border-left-color: var(--amber); background: var(--amber-soft); font-weight: 600; }
.nav-sub { margin: 6px 0 2px; }
.nav-subtitle { padding: 6px 20px 3px 20px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.nav-sub .nav-link { padding-left: 31px; font-weight: 400; }
.nav-sub .nav-link.active { font-weight: 600; }
.side nav { overflow-y: auto; }
tr.j-depart td { background: var(--paper); font-weight: 600; }
td a.num { color: var(--ink); }
.side-foot { margin-top: auto; padding: 14px 20px 0; border-top: 1px solid var(--line-soft); display: grid; justify-items: start; gap: 2px; font-size: 14px; }

.main { padding: 28px 32px 48px; min-width: 0; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 26px; }
.page-head p { margin: 4px 0 0; color: var(--ink-2); }
.loading, .empty { padding: 48px 0; color: var(--ink-2); }
.empty { text-align: center; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.toolbar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar .grow { flex: 1; }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 13px; font-weight: 500; color: var(--ink-2); padding: 9px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--surface); }
td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
td.r, th.r { text-align: right; }
td.num, td .num { font-size: 15.5px; }
tbody tr.click { cursor: pointer; }
tbody tr.click:hover td { background: #F7F9FA; }
tfoot td { font-weight: 600; border-top: 1px solid var(--line); border-bottom: 0; }
.muted { color: var(--ink-3); }
.sub { display: block; font-size: 12.5px; color: var(--ink-3); }
.in { color: var(--in); }
.out { color: var(--out); }
.tag { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 1px 8px; border-radius: 10px; }
.tag-draft { background: var(--amber-soft); color: var(--amber-dark); }
.tag-ok { background: var(--in-soft); color: var(--in); }
.tag-off { background: var(--line-soft); color: var(--ink-2); }
table.inv th.c { text-align: center; }
table.inv tr.th-groupe th { border-bottom: 0; padding-bottom: 0; font-weight: 600; color: var(--ink); }
table.inv .compte-h, table.inv td.compte { background: #FBF6EC; }
table.inv td.th { color: var(--ink-2); }
table.inv input.q { width: 64px; }
table.inv input.pmp { width: 86px; }
table.inv input.pmp.saisi { border-color: var(--amber); background: var(--amber-soft); }
table.inv input.pmp.zero { border-color: var(--out); }
table.inv input.q:disabled { background: transparent; border-color: transparent; }
table.inv tr.compte td:first-child { box-shadow: inset 3px 0 0 var(--in); }
.inv-groupe { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: -4px 0 14px; font-size: 14px; color: var(--ink-2); }
.inv-groupe .btn { height: 32px; padding: 0 12px; font-size: 14px; }
.mini-btn { margin-left: 6px; height: 28px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  font-size: 12.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; white-space: nowrap; }
.mini-btn:hover { border-color: var(--amber); color: var(--amber-dark); }
table.inv td.r:has(.mini-btn) { white-space: nowrap; }
.inv-pieces { padding: 12px 16px; margin-bottom: 14px; }
.inv-pieces a { color: var(--amber-dark); font-weight: 600; }
tr.annule td { color: var(--ink-3); text-decoration: line-through; }
tr.annulation td { color: var(--ink-2); font-style: italic; }

/* ---------- Document (pièce) ---------- */
.doc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.doc-head { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 22px 24px 18px; border-bottom: 1px solid var(--line); }
.doc-kind { font-size: 14px; color: var(--ink-2); font-weight: 500; }
.doc-num { font-family: var(--num); font-weight: 700; font-size: 34px; line-height: 1.1; letter-spacing: .01em; }
.doc-num.draft { color: var(--ink-3); }
.doc-fields { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.doc-fields label { min-width: 150px; }
.doc-fields .wide { min-width: 280px; flex: 1; max-width: 420px; }

.stamp {
  align-self: start;
  font-family: var(--num);
  font-weight: 700;
  font-size: 18px;
  padding: 6px 14px;
  border: 2.5px solid currentColor;
  border-radius: 6px;
  transform: rotate(-6deg);
  margin-top: 6px;
  white-space: nowrap;
}
.stamp-draft { color: var(--amber); border-style: dashed; }
.stamp-ok { color: var(--in); }
.stamp-ok.new { animation: tampon .35s ease-out; }
@keyframes tampon { from { transform: rotate(-6deg) scale(1.6); opacity: 0; } to { transform: rotate(-6deg) scale(1); opacity: 1; } }

.add-bar { display: grid; grid-template-columns: minmax(240px, 1fr) 90px 90px auto; gap: 10px; align-items: end; padding: 14px 24px; background: #F7F9FA; border-bottom: 1px solid var(--line); }
.prod-search { position: relative; }
.suggest { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); max-height: 300px; overflow-y: auto; box-shadow: 0 6px 18px rgba(28, 38, 48, .12); }
.suggest div { padding: 7px 10px; cursor: pointer; display: flex; gap: 10px; }
.suggest div.on, .suggest div:hover { background: var(--amber-soft); }
.suggest .sugg-new { color: var(--amber-dark); font-weight: 600; border-top: 1px solid var(--line-soft); }
.suggest .code { font-family: var(--num); color: var(--ink-2); min-width: 50px; }

.lines input.q { width: 72px; text-align: right; font-family: var(--num); font-size: 16px; }
.lines input.p { width: 100px; text-align: right; font-family: var(--num); font-size: 15.5px; }
.lines td.prod { min-width: 240px; }
.warn { color: var(--out); font-size: 12.5px; display: block; }

.doc-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 16px 24px; flex-wrap: wrap; }
.totals { display: flex; gap: 28px; align-items: baseline; }
.totals .lbl { font-size: 13px; color: var(--ink-2); display: block; }
.totals .val { font-family: var(--num); font-size: 18px; font-weight: 600; }
.totals .big { font-size: 28px; font-weight: 700; }
.actions { display: flex; gap: 10px; align-items: center; }
.dirty { font-size: 13px; color: var(--amber-dark); }

/* ---------- Caisse ---------- */
.accounts { display: flex; gap: 0; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; }
.account { padding: 12px 20px; border-right: 1px solid var(--line-soft); min-width: 170px; }
.account:last-child { border-right: 0; }
.account .lbl { font-size: 13px; color: var(--ink-2); }
.account .val { font-family: var(--num); font-size: 21px; font-weight: 600; }
.op-form { display: grid; grid-template-columns: auto repeat(4, minmax(130px, 1fr)) auto; gap: 10px; align-items: end; padding: 16px; margin-bottom: 18px; }
.op-form .row2 { grid-column: 2 / -2; display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 10px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; height: 36px; }
.seg button { border: 0; background: var(--surface); padding: 0 14px; font-weight: 600; cursor: pointer; color: var(--ink-2); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on-in { background: var(--in); color: #fff; }
.seg button.on-out { background: var(--out); color: #fff; }

/* ---------- Paramètres ---------- */
.param-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.param-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.param-group h2 { font-size: 16px; padding: 14px 18px 10px; border-bottom: 1px solid var(--line); }
.param-item { display: grid; gap: 2px; padding: 11px 18px; border-bottom: 1px solid var(--line-soft); text-decoration: none; color: var(--ink); border-left: 3px solid transparent; }
.param-item:last-child { border-bottom: 0; }
.param-item:hover { background: var(--amber-soft); border-left-color: var(--amber); }
.param-name { font-weight: 600; }
.param-desc { font-size: 13.5px; color: var(--ink-2); }
.page-head .link-btn { display: inline-block; margin-bottom: 4px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.form-grid .full { grid-column: 1 / -1; }
label.check { display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--ink); font-size: 15px; font-weight: 400; }
label.check input { height: auto; width: 16px; height: 16px; accent-color: var(--amber); }
fieldset { border: 1px solid var(--line); border-radius: var(--r); padding: 8px 12px 10px; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
legend { font-size: 13px; color: var(--ink-2); font-weight: 500; padding: 0 4px; }
dialog:has(.ref-form) { width: min(680px, 94vw); }
fieldset.prix-cat { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 14px; margin-top: 16px; }
fieldset.prix-cat legend { font-weight: 600; color: var(--ink); }
fieldset.prix-cat input { width: 100%; text-align: right; }
.empty a, .warn a { color: var(--amber-dark); font-weight: 600; }

/* ---------- Dialogue & notifications ---------- */
dialog { border: 0; border-radius: var(--r); padding: 0; width: min(460px, 92vw); box-shadow: 0 20px 50px rgba(28, 38, 48, .3); color: var(--ink); }
dialog::backdrop { background: rgba(28, 38, 48, .45); }
.dlg-body { padding: 22px 24px 8px; display: grid; gap: 12px; }
.dlg-body h2 { font-size: 20px; }
.dlg-body p { margin: 0; color: var(--ink-2); }
.dlg-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 24px 20px; }
#toasts { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 8px; z-index: 100; }
.toast { padding: 11px 16px; border-radius: var(--r); background: var(--ink); color: #fff; max-width: 380px; box-shadow: 0 6px 18px rgba(28, 38, 48, .25); }
.toast-err { background: var(--out); }

/* ---------- Écrans étroits ---------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .stamp { justify-self: start; }
  .totals, .actions { flex-wrap: wrap; gap: 12px 20px; }
  .totals .big { font-size: 24px; }
  .side { position: static; height: auto; }
  .main { padding: 20px 14px 40px; }
  .add-bar { grid-template-columns: 1fr 1fr; }
  .add-bar .prod-search { grid-column: 1 / -1; }
  .op-form { grid-template-columns: 1fr 1fr; }
  .op-form .row2 { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .doc-head { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .stamp-ok.new { animation: none; } }

/* ---------- Règles et documents ---------- */
.regle { padding: 20px 22px; margin-bottom: 18px; display: grid; gap: 14px; }
.regle h2 { font-size: 18px; }
.regle-aide { margin: 0; color: var(--ink-2); font-size: 14px; max-width: 75ch; }
.regle-row { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; }
.regle-row.col { flex-direction: column; align-items: flex-start; gap: 6px; }
.regle-row .lbl { font-size: 13px; color: var(--ink-2); font-weight: 500; width: 100%; }
.regle-actions { display: flex; justify-content: flex-end; }
.regle-sim { margin: 0; font-family: var(--num); font-size: 16px; font-weight: 600; align-self: center; }
#l-res { font-family: var(--ui); font-weight: 400; font-style: italic; background: var(--paper); padding: 10px 12px; border-radius: var(--r); }
.tranches { max-width: 420px; }
.regle > .link-btn { justify-self: start; }
.regle a, .regle-aide a { color: var(--amber-dark); font-weight: 600; }
.img-field { display: grid; gap: 6px; }
.img-field .lbl { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.img-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.img-prev { max-height: 60px; max-width: 200px; border: 1px solid var(--line); border-radius: var(--r); padding: 4px; background: #fff; }
.img-row input[type=file] { height: auto; border: 0; padding: 0; }

/* ---------- Impression d'une pièce (A4) ---------- */
#print-zone { display: none; }
@media print {
  @page { size: A4; margin: 12mm 12mm 14mm; }
  body { background: #fff; }
  body > *:not(#print-zone) { display: none !important; }
  #print-zone { display: block; }
}
.pdoc { font-family: var(--ui); color: #000; font-size: 10.5pt; line-height: 1.35; }
.p-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding-bottom: 10px; border-bottom: 2px solid #000; }
.p-soc { display: flex; gap: 14px; align-items: flex-start; }
.p-logo { max-height: 22mm; max-width: 55mm; object-fit: contain; }
.p-rs { font-size: 14pt; font-weight: 700; }
.p-titre { text-align: right; }
.p-type { font-size: 15pt; font-weight: 700; }
.p-num { font-family: var(--num); font-size: 16pt; font-weight: 700; }
.p-ids { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 9pt; padding: 6px 0; border-bottom: 1px solid #999; }
.p-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.p-box { border: 1px solid #999; padding: 8px 10px; }
.p-lbl { color: #555; font-size: 8.5pt; }
.p-small { font-size: 9pt; color: #333; margin-top: 4px; }
.p-lines { width: 100%; border-collapse: collapse; }
.p-lines th { background: #eee; color: #000; font-size: 9pt; font-weight: 600; border: 1px solid #999; padding: 4px 6px; }
.p-lines td { border: 1px solid #bbb; padding: 3px 6px; font-family: var(--num); font-size: 10pt; }
.p-lines td:nth-child(2) { font-family: var(--ui); }
.p-lines .r { text-align: right; }
.p-bottom { display: grid; grid-template-columns: 1fr auto; gap: 18px; margin-top: 10px; align-items: start; }
.p-lettres { margin: 0; font-style: italic; }
.p-tot { border-collapse: collapse; min-width: 62mm; }
.p-tot td { border: 1px solid #999; padding: 3px 8px; font-family: var(--num); }
.p-tot td:last-child { text-align: right; }
.p-tot tr.fort td { font-weight: 700; font-size: 11.5pt; background: #eee; }
.p-sign { display: flex; justify-content: space-around; gap: 20px; margin-top: 16mm; min-height: 22mm; }
.p-sign div { flex: 1; text-align: center; border-top: 1px solid #999; padding-top: 4px; font-size: 9pt; color: #333; max-width: 60mm; }
.p-foot { margin-top: 10mm; padding-top: 4px; border-top: 1px solid #999; font-size: 8.5pt; text-align: center; color: #333; }

/* ---------- Journal de stock : flèches par type d'opération ---------- */
.fl { display: inline-block; width: 1.3em; margin-right: 6px; text-align: center; font-weight: 800; font-size: 19px; line-height: 1; vertical-align: -2px; }
.fl-vente { color: #2E7A4E; }
.fl-retour_client { color: #C0392B; }
.fl-reception { color: #1F6FB2; }
.fl-retour_fourn { color: #7B3FA6; }
.fl-autre { color: var(--ink-3); }
.fl-inventaire { font-size: 13px; }
td.j-piece { white-space: nowrap; }
td.j-piece > span:last-child { display: inline-block; vertical-align: top; }
.j-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: -4px 0 12px; font-size: 13px; color: var(--ink-2); }
table.journal th.triable { cursor: pointer; user-select: none; }
table.journal th.triable:hover { color: var(--ink); }
table.journal th.trie { color: var(--amber-dark); }

[hidden] { display: none !important; }
.j-tiers-l { min-width: 260px; }
.btn-new-tiers { align-self: end; height: 34px; }
.mod-info { margin: 0 0 8px; font-size: 14px; max-width: 70ch; }

/* ---------- Suivi des palettes ---------- */
.onglets { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.onglet { border: 0; background: none; padding: 10px 14px; font-weight: 600; color: var(--ink-2); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.onglet.on { color: var(--ink); border-bottom-color: var(--amber); }
.tag-pal-nous { background: var(--in-soft); color: var(--in); }
.tag-pal-fournisseur { background: var(--amber-soft); color: var(--amber-dark); }
.tag-pal-banque { background: #E6EEF7; color: #1F6FB2; }
.pal-aide { margin: -4px 0 12px; }
.pal-bloc { padding: 14px 24px; border-top: 1px solid var(--line); display: grid; gap: 8px; }
.pal-head { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.pal-ligne { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pal-ligne select { min-width: 130px; }
.pal-ligne input.q { width: 80px; text-align: right; }
.pal-ligne input.p { width: 110px; text-align: right; }
.pal-q { display: flex; flex-direction: row; align-items: center; gap: 6px; }
fieldset.pal-lignes { display: grid; gap: 8px; }
.tag-alerte { background: var(--out-soft); color: var(--out); }
tr.inactif td { color: var(--ink-3); }
.pal-titre { font-size: 16px; margin: 4px 0 10px; }
.pal-detail-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 24px 0 12px; flex-wrap: wrap; }
.pal-detail-head .pal-titre { margin: 0; }
tr.pal-sel td { background: var(--amber-soft); }
input.emb-q { width: 70px; text-align: right; }
input.emb-q.saved { border-color: var(--in); }
.empty-panel { padding: 32px; text-align: center; color: var(--ink-2); }

/* ---------- Menu repliable et déplaçable ---------- */
.nav-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.nav-toggle:hover { color: var(--ink); }
.nav-chev { display: inline-block; width: 10px; font-size: 10px; transition: transform .15s; }
.ferme > .nav-toggle .nav-chev { transform: rotate(-90deg); }
.ferme > .nav-items { display: none; }
.nav-poignee { margin-left: auto; opacity: 0; color: var(--ink-3); letter-spacing: -2px; cursor: grab; padding-right: 4px; }
.nav-toggle:hover .nav-poignee { opacity: 1; }
.glisse { opacity: .45; }
.nav-group.glisse, .nav-sub.glisse { outline: 2px dashed var(--amber); outline-offset: -2px; }
.brand { display: flex; align-items: center; }
.menu-cacher { margin-left: auto; margin-right: -6px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r);
  width: 28px; height: 28px; cursor: pointer; color: var(--ink-2); font-size: 16px; line-height: 1; }
.menu-cacher:hover { color: var(--ink); border-color: var(--ink-3); }
.menu-ouvrir { display: none; position: fixed; top: 14px; left: 14px; z-index: 30; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r); padding: 6px 12px; font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(28,38,48,.12); }
.shell.menu-cache { grid-template-columns: minmax(0, 1fr); }
.shell.menu-cache .side { display: none; }
.shell.menu-cache .menu-ouvrir { display: inline-block; }
.shell.menu-cache .main { padding-top: 64px; }
@media print { .menu-ouvrir { display: none !important; } }
.nav-link.glisse { outline: 2px dashed var(--amber); outline-offset: -2px; }
.nav-link[draggable="true"] { -webkit-user-drag: element; }

/* ---------- Menu en haut (au choix de l'utilisateur) ---------- */
.shell.menu-haut { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; }
.menu-haut .side { flex-direction: row; align-items: center; gap: 18px; height: auto; padding: 8px 20px; z-index: 25;
  border-right: 0; border-bottom: 1px solid var(--line); box-shadow: 0 1px 4px rgba(28,38,48,.05); }
.menu-haut .brand { padding: 0; font-size: 20px; gap: 10px; }
.menu-haut .menu-cacher { margin: 0 0 0 4px; }
.menu-haut .depot-select { padding: 0; border: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; white-space: nowrap; }
.menu-haut .depot-select select { width: auto; }
.menu-haut .side nav { display: flex; gap: 2px; overflow: visible; flex: 1; }
.menu-haut .nav-group { position: relative; padding: 0; }
.menu-haut .nav-group > .nav-title { padding: 9px 12px; font-size: 15px; font-weight: 600; color: var(--ink); border-radius: var(--r); }
.menu-haut .nav-group > .nav-title:hover, .menu-haut .nav-group.ouvert > .nav-title { background: var(--paper); }
.menu-haut .nav-group:has(.nav-link.active) > .nav-title { box-shadow: inset 0 -3px 0 var(--amber); }
.menu-haut .nav-group > .nav-title .nav-chev { order: 2; transform: none; }
.menu-haut .nav-poignee { display: none; }
.menu-haut .nav-group > .nav-items { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px; z-index: 40;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 8px 24px rgba(28,38,48,.14); padding: 6px 0; }
.menu-haut .nav-group.ouvert > .nav-items { display: block; }
.menu-haut .nav-group:last-child > .nav-items { left: auto; right: 0; }
.menu-haut .nav-sub > .nav-items { display: block; }
.menu-haut .nav-sub > .nav-subtitle { cursor: default; }
.menu-haut .nav-sub > .nav-subtitle .nav-chev { display: none; }
.menu-haut .nav-subs { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-soft); margin-top: 6px; }
.menu-haut .nav-group:has(.nav-subs) > .nav-items { min-width: 480px; }
.menu-haut .side-foot { margin: 0; padding: 0; border: 0; display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.menu-haut .main { padding-top: 24px; }
@media (max-width: 900px) { .menu-haut .side { flex-wrap: wrap; } .menu-haut .nav-subs { grid-template-columns: 1fr; } .menu-haut .nav-group:has(.nav-subs) > .nav-items { min-width: 260px; } }

/* ---------- Favoris ---------- */
.side .nav-link { display: flex; align-items: center; gap: 6px; }
.nav-etoile { margin-left: auto; color: var(--ink-3); opacity: 0; font-size: 15px; line-height: 1; padding: 2px 2px 2px 6px; cursor: pointer; }
.nav-link:hover .nav-etoile { opacity: 1; }
.nav-etoile.on { color: var(--amber); opacity: 1; }
.nav-etoile:hover { color: var(--amber-dark); }
.favoris:empty { display: none; }
.favoris { padding: 12px 0 6px; border-bottom: 1px solid var(--line-soft); }
.fav-titre { padding: 0 20px 4px; font-size: 12px; color: var(--ink-3); font-weight: 500; }
.fav-num { margin-left: auto; font-size: 11px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-family: var(--num); }
.menu-haut .side nav { flex: none; }
.menu-haut .side { flex-wrap: wrap; row-gap: 0; }
.menu-haut .favoris { order: 4; flex-basis: calc(100% + 40px); margin: 6px -20px -8px; padding: 6px 20px 8px; border: 0; border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 10px; background: var(--paper); }
.menu-haut .fav-titre { padding: 0; font-size: 12px; }
.menu-haut .fav-num { display: inline-block; margin-left: 4px; }
.menu-haut .fav-liste { display: flex; gap: 6px; flex-wrap: wrap; }
.menu-haut .fav-lien { background: var(--surface); }
.menu-haut .side-foot { margin-left: auto; }
.menu-haut .fav-lien { border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 14px; white-space: nowrap; }
.menu-haut .fav-lien.active { border-color: var(--amber); background: var(--amber-soft); }
.menu-haut .side-foot { order: 3; }

/* ---------- Icônes du menu ---------- */
.ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav-title .ico { width: 15px; height: 15px; }
.nav-subtitle .ico { width: 14px; height: 14px; }
.fav-titre { display: flex; align-items: center; gap: 6px; }
.fav-titre .ico { width: 13px; height: 13px; color: var(--amber); fill: var(--amber); }
.pied-ligne { display: inline-flex; align-items: center; gap: 7px; }
.pied-ligne .ico { width: 15px; height: 15px; }
.pied-user { font-weight: 600; color: var(--ink); }
.pied-user .ico { color: var(--ink-2); }
.menu-haut .nav-group > .nav-title .ico { width: 17px; height: 17px; color: var(--ink-2); }
.menu-haut .nav-group:has(.nav-link.active) > .nav-title .ico, .menu-haut .nav-group.ouvert > .nav-title .ico { color: var(--amber-dark); }
.menu-haut .nav-group > .nav-title:active { cursor: grabbing; }
.menu-haut .nav-group.glisse > .nav-title { outline: 2px dashed var(--amber); }

/* ---------- Écart de caisse ---------- */
.ecart-grille { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.ecart-saisie { padding: 16px 20px; display: grid; gap: 12px; }
.ecart-saisie .toolbar { margin: 0; }
table.billetage td, table.billetage th { padding: 6px 8px; }
table.billetage input.q { width: 90px; text-align: right; }
.ecart-resume { padding: 20px; display: grid; gap: 12px; position: sticky; top: 16px; }
.ec-ligne { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; }
.ec-ligne strong { font-size: 20px; }
.ec-ecart { border-top: 1px solid var(--line); padding-top: 12px; }
.ec-ecart strong { font-size: 28px; }
@media (max-width: 900px) { .ecart-grille { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Fenêtre d'encaissement / décaissement ---------- */
.op-fenetre .seg { margin: 4px 0 14px; }
.op-fenetre input.op-montant { font-size: 22px; height: 46px; text-align: right; font-family: var(--num); }
.btn-entree { color: var(--in); border-color: var(--in); }
.btn-entree:hover { background: var(--in-soft); }
.btn-sortie { color: var(--out); border-color: var(--out); }
.btn-sortie:hover { background: var(--out-soft); }

/* ---------- Sens de l'opération bien visible ---------- */
.op-fenetre { border-top: 8px solid var(--line); transition: border-color .15s; }
.op-fenetre.op-in { border-top-color: var(--in); }
.op-fenetre.op-out { border-top-color: var(--out); }
.op-fenetre.op-in #op-titre { color: var(--in); }
.op-fenetre.op-out #op-titre { color: var(--out); }
.op-sens { display: grid; grid-template-columns: 1fr 1fr; width: 100%; height: auto; }
.op-sens button { height: auto; padding: 12px 10px; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; color: var(--ink-3); background: var(--paper); }
.op-sens button small { flex-basis: 100%; font-size: 12px; font-weight: 500; opacity: .85; }
.op-sens .op-fleche { font-size: 22px; }
.op-sens button.on-in { background: var(--in); color: #fff; }
.op-sens button.on-out { background: var(--out); color: #fff; }
.op-fenetre.op-in input.op-montant { border-color: var(--in); color: var(--in); }
.op-fenetre.op-out input.op-montant { border-color: var(--out); color: var(--out); }
.crumb { margin: 0 0 4px; font-size: 14px; }
.crumb a { color: var(--ink-2); }
@media print { .toolbar, .page-head .actions, .regle-aide { display: none !important; } }

/* ---------- Impression du relevé de compte ---------- */
.p-releve-info { display: flex; justify-content: space-between; gap: 20px; margin: 10px 0 12px; padding: 8px 10px; border: 1px solid #999; }
.p-releve-solde { text-align: right; }
.p-lbl { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .04em; color: #555; }
.p-montant { font-size: 15pt; font-weight: 700; font-family: var(--num); }
.p-releve td, .p-releve th { font-size: 9.5pt; }
.p-releve td .sub { display: block; font-size: 8pt; color: #555; }
.p-releve tr.p-depart td, .p-releve tfoot td { font-weight: 700; background: #f2f2f2; }
.p-releve .out, .p-releve .in { color: #000; }

/* ---------- Thèmes au choix de chaque utilisateur ---------- */
[data-theme="bleu"] { --amber: #1F6FB2; --amber-dark: #155A94; --amber-soft: #E3EEF8; }
[data-theme="vert"] { --amber: #2E7D5B; --amber-dark: #1F5E43; --amber-soft: #E2F1EA; --in: #1F6FB2; --in-soft: #E3EEF8; }
[data-theme="violet"] { --amber: #6D4AB0; --amber-dark: #533589; --amber-soft: #EEE8F8; }
[data-theme="sable"] { --paper: #F3EEE5; --surface: #FFFDF8; --line: #DDD3C4; --line-soft: #EAE3D8; --ink: #2B2620; --ink-2: #6A5F52;
  --ink-3: #9A8E80; --amber: #B5651D; --amber-dark: #8C4C12; --amber-soft: #F7E8D6; }
[data-theme="sombre"] { color-scheme: dark; --ink: #E4E9EE; --ink-2: #A9B4BF; --ink-3: #7D8995; --paper: #12171C; --surface: #1B2229;
  --line: #2E3843; --line-soft: #252E37; --amber: #E8942A; --amber-dark: #F2AE57; --amber-soft: #3A2C17;
  --in: #4FB37E; --in-soft: #183527; --out: #E36B5E; --out-soft: #3B201C; }
[data-theme="sombre"] input, [data-theme="sombre"] select, [data-theme="sombre"] textarea { background: var(--surface); color: var(--ink); }
[data-theme="sombre"] tbody tr.click:hover td, [data-theme="sombre"] .add-bar { background: #222B33; }
[data-theme="sombre"] table.inv .compte-h, [data-theme="sombre"] table.inv td.compte { background: #2A2419; }
[data-theme="sombre"] .btn-ink { background: #E4E9EE; color: #12171C; border-color: #E4E9EE; }
[data-theme="sombre"] .toast { background: #E4E9EE; color: #12171C; }
[data-theme="sombre"] dialog { background: var(--surface); color: var(--ink); }
[data-theme="sombre"] .img-prev { background: #fff; }
.themes { display: flex; gap: 6px; padding: 2px 0; }
.theme-pastille { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.theme-pastille.on { box-shadow: 0 0 0 2px var(--ink); }
.theme-pastille[data-theme-choix="clair"] { background: linear-gradient(135deg, #FFFFFF 50%, #D9800A 50%); }
.theme-pastille[data-theme-choix="sombre"] { background: linear-gradient(135deg, #1B2229 50%, #E8942A 50%); }
.theme-pastille[data-theme-choix="bleu"] { background: linear-gradient(135deg, #FFFFFF 50%, #1F6FB2 50%); }
.theme-pastille[data-theme-choix="vert"] { background: linear-gradient(135deg, #FFFFFF 50%, #2E7D5B 50%); }
.theme-pastille[data-theme-choix="sable"] { background: linear-gradient(135deg, #F3EEE5 50%, #B5651D 50%); }
.theme-pastille[data-theme-choix="violet"] { background: linear-gradient(135deg, #FFFFFF 50%, #6D4AB0 50%); }
@media print { :root, [data-theme] { --ink: #000; --paper: #fff; --surface: #fff; } }

/* ---------- Thème et position du menu dans Administration ---------- */
.nav-affichage { display: grid; gap: 8px; padding: 10px 20px 12px; margin-top: 6px; border-top: 1px solid var(--line-soft); }
.nav-aff-titre { font-size: 12px; color: var(--ink-3); }
.nav-affichage .themes { flex-wrap: wrap; }
.menu-haut .nav-affichage { padding: 10px 16px 6px; }

/* ---------- Utilisateurs et droits ---------- */
dialog:has(form.dlg-large) { width: min(820px, 96vw); max-height: 92vh; }
dialog form.dlg-large { width: 100%; }
dialog form.dlg-large .dlg-body { max-height: calc(92vh - 72px); overflow-y: auto; }
@media (max-width: 700px) { table.u-droits .c { width: auto; } .u-drapeaux { grid-template-columns: 1fr; } }
.u-depots { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.u-modeles { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 14px 0 8px; font-size: 14px; }
.btn-mini { height: 28px; padding: 0 10px; font-size: 13px; }
table.u-droits { width: 100%; margin-bottom: 12px; }
table.u-droits td, table.u-droits th { padding: 5px 8px; }
table.u-droits .c { text-align: center; width: 110px; }
table.u-droits tbody tr:hover td { background: var(--paper); }
.u-drapeaux { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; }
.tag-type-admin { background: var(--ink); color: var(--surface); }
.tag-type-responsable { background: var(--amber-soft); color: var(--amber-dark); }

/* ---------- Versements des livreurs ---------- */
.vrs-saisie { padding: 16px 18px; display: grid; gap: 12px; max-width: 640px; }
.vrs-total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); font-size: 16px; }
.vrs-total strong { font-size: 24px; }
.vrs-envoyer { height: 46px; font-size: 17px; }
.vrs-liste { display: grid; gap: 10px; max-width: 640px; }
.vrs-carte { padding: 12px 16px; display: grid; gap: 4px; }
.vrs-ligne { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.vrs-detail { font-size: 13px; }
.nav-badge { margin-left: 6px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--out); color: #fff;
  font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
@media (max-width: 600px) { .vrs-saisie table.billetage input.q { width: 70px; } }

/* ---------- Dépenses de tournée ---------- */
.vrs-sous-titre { font-size: 15px; margin: 6px 0 0; }
.vrs-dep { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(100px, 1.5fr) 110px 32px; gap: 8px; align-items: center; margin-bottom: 8px; }
.vrs-recap { display: grid; gap: 2px; }
.vrs-total.petit { font-size: 14px; padding: 2px 0; border: 0; color: var(--ink-2); }
table.vrs-deps-caisse { width: 100%; margin: 6px 0; }
table.vrs-deps-caisse td, table.vrs-deps-caisse th { padding: 5px 8px; }
input.vrs-acc { width: 110px; text-align: right; }
@media (max-width: 600px) { .vrs-dep { grid-template-columns: 1fr 1fr; } .vrs-dep input[data-d=libelle] { grid-column: 1 / -1; order: 3; } }

/* ---------- Versements : chèques, GIFTY, carte ---------- */
.vrs-ajouts { display: flex; flex-wrap: wrap; gap: 6px; }
.vrs-reg { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; margin-bottom: 8px; border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--paper); }
.vrs-reg strong { min-width: 110px; }
.vrs-reg input { flex: 1 1 130px; min-width: 0; }
.vrs-reg input[data-r=montant] { flex: 0 1 120px; text-align: right; }
input.vrs-acc-reg { width: 110px; text-align: right; }

/* ---------- Versements : saisie par type ---------- */
.vrs-types-titre { font-weight: 600; margin-top: 4px; }
.vrs-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vrs-types button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--surface); font-weight: 700; font-size: 15px; cursor: pointer; color: var(--ink); }
.vrs-types button span { font-size: 24px; line-height: 1; }
.vrs-types button:hover, .vrs-types button:focus-visible { border-color: var(--amber); background: var(--amber-soft); }
.vrs-bloc { border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 10px; background: var(--surface); }
.vrs-bloc-tete { display: flex; justify-content: space-between; align-items: center; font-size: 16px; }
.vrs-scan { justify-self: start; }
.vrs-photo-btn { display: inline-flex; align-items: center; cursor: pointer; }
.vrs-photo { max-width: 100%; max-height: 220px; border-radius: var(--r); border: 1px solid var(--line); object-fit: contain; }
.vrs-miniature { display: block; margin-top: 6px; max-width: 160px; max-height: 90px; border: 1px solid var(--line); border-radius: 4px; cursor: zoom-in; }
.qr-fenetre video { width: 100%; max-height: 60vh; background: #000; border-radius: var(--r); }
select.vrs-cat-dep { max-width: 190px; }
#vr-lignes { display: grid; gap: 12px; }
@media (max-width: 420px) { .vrs-types { grid-template-columns: repeat(2, 1fr); } }

.vrs-alertes { padding: 12px 16px; display: grid; gap: 6px; max-width: 640px; border-left: 4px solid var(--out); margin-bottom: 14px; }
.vrs-alerte { font-size: 14px; }
.vrs-alertes .btn { justify-self: start; }
td.chq-actions { white-space: nowrap; }
td.chq-actions .btn + .btn { margin-left: 6px; }

table.prix-portees { width: 100%; }
table.prix-portees th, table.prix-portees td { padding: 4px 6px; text-align: left; }
table.prix-portees input { width: 100%; }

/* ---------- Lots et DLC ---------- */
.lot-saisie { display: flex; gap: 6px; margin-top: 6px; }
.lot-saisie input { height: 30px; font-size: 13px; padding: 0 6px; min-width: 0; }
.lot-saisie input[data-f=lot_code] { width: 120px; }
.lot-saisie input[data-f=dlc] { width: 140px; }

/* ---------- Tableau de bord ---------- */
.tb-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 16px; }
.tb-carte { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; color: inherit; text-decoration: none; }
a.tb-carte[href]:hover { border-color: var(--amber); }
.tb-carte .lbl { font-size: 13px; color: var(--ink-2); }
.tb-carte .val { font-size: 24px; font-weight: 700; margin-top: 4px; }
.tb-sous { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.tb-notifs { padding: 12px 16px; margin-bottom: 16px; display: grid; gap: 4px; }
.tb-notifs h3 { margin: 0 0 6px; font-size: 16px; }
.tb-rien { color: var(--in); font-weight: 600; }
.tb-notif { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 6px; color: var(--ink); text-decoration: none; }
.tb-notif:hover { background: var(--paper); }
.tb-point { width: 9px; height: 9px; border-radius: 50%; background: var(--amber); flex: none; }
.tb-notif.alerte .tb-point { background: var(--out); }
.tb-notif.alerte { font-weight: 600; }
.tb-fleche { margin-left: auto; color: var(--ink-3); font-size: 18px; }
.tb-bloc { padding: 14px 16px; margin-bottom: 16px; }
.tb-bloc-tete { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.tb-bloc h3 { margin: 0; font-size: 16px; }
.tb-bloc h4 { margin: 10px 0 4px; font-size: 13.5px; }
.tb-bloc table td, .tb-bloc table th { padding: 6px 8px; }
.tb-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 0 16px; align-items: start; }
.tb-graphe { width: 100%; height: auto; }
.tb-graphe rect { fill: var(--amber); opacity: .75; }
.tb-graphe rect.we { opacity: .35; }
.tb-graphe rect.auj { opacity: 1; }
.tb-graphe text { font-size: 11px; fill: var(--ink-3); }
.tb-mini { display: grid; gap: 4px; margin-top: 8px; }
.tb-mini a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 8px; border-radius: 6px; background: var(--paper); color: inherit; text-decoration: none; font-size: 14px; }
.tb-mini a.out strong, .tb-mini a.out span { color: var(--out); }
.tb-routes td:first-child { white-space: nowrap; }
.tb-note { font-size: 13px; margin: 6px 0 0; }
.tb-rang { display: inline-block; width: 22px; color: var(--ink-3); font-weight: 700; }
@media (max-width: 900px) { .tb-grille { grid-template-columns: 1fr; } }

/* ---------- Accès direct au tableau de bord ---------- */
.brand-accueil { color: inherit; text-decoration: none; }
.btn-accueil { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding: 5px 10px; border-radius: 999px;
  background: var(--amber-soft); color: var(--amber-dark); font-size: 13px; font-weight: 600; letter-spacing: 0; text-decoration: none; white-space: nowrap; }
.btn-accueil:hover { background: var(--amber); color: #fff; }
.btn-accueil svg { width: 15px; height: 15px; }
.shell:not(.menu-haut) .btn-accueil span { display: none; }

/* ---------- Versements en temps réel ---------- */
.toast-lien { cursor: pointer; border-left: 4px solid var(--amber); line-height: 1.4; }
.nav-toggle .badge-groupe, .nav-title .badge-groupe { margin-left: 6px; }
.vrs-notif-demande { padding: 10px 14px; margin-bottom: 14px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ---------- Préparation des chargements ---------- */
.prep-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.prep-carte { text-align: left; padding: 14px 16px; display: grid; gap: 6px; cursor: pointer; font: inherit; color: inherit; border: 1px solid var(--line); }
.prep-carte:hover { border-color: var(--amber); }
.prep-tiers { font-size: 16px; font-weight: 600; }
.prep-barre { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.prep-barre span { display: block; height: 100%; background: var(--in); transition: width .2s; }
.prep-compte { font-size: 13px; }
.prep-progression { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; margin-bottom: 14px; }
.prep-progression .prep-barre { height: 12px; border-radius: 6px; }
.prep-lignes { display: grid; gap: 8px; margin-bottom: 18px; }
.prep-ligne { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; cursor: pointer; border: 2px solid transparent; }
.prep-ligne input { width: 26px; height: 26px; accent-color: var(--in); cursor: pointer; }
.prep-ligne.coche { border-color: var(--in); background: var(--in-soft); }
.prep-ligne.coche .prep-prod { text-decoration: line-through; text-decoration-color: var(--ink-3); }
.prep-prod { font-size: 15px; }
.prep-qte { font-size: 17px; white-space: nowrap; }
.prep-valider { width: 100%; height: 52px; font-size: 18px; }
.prep-ok { padding: 12px 16px; margin-bottom: 14px; color: var(--in); font-weight: 600; }
.magasin-etat { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2); text-align: right; }
@media (max-width: 600px) { .prep-ligne { grid-template-columns: 30px 1fr; } .prep-qte { grid-column: 2; } }

/* ---------- Validations magasin et livreur ---------- */
.valid-badges { display: inline-flex; gap: 4px; margin-left: 6px; vertical-align: 1px; }
.valid-badge { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--in-soft); color: var(--in); white-space: nowrap; }
.valid-badge.attente { background: var(--amber-soft); color: var(--amber-dark); }
.prep-ligne-lecture { grid-template-columns: 1fr auto; cursor: default; }

/* ---------- Retour VAN par le livreur ---------- */
.mr-table td, .mr-table th { padding: 6px 6px; }
.mr-table input.q { width: 64px; }
a.prep-carte { text-decoration: none; }

/* ---------- Solde du livreur ---------- */
.ms-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 18px; margin-bottom: 14px; max-width: 640px;
  border-left: 5px solid var(--in); color: inherit; text-decoration: none; }
.ms-total.doit { border-left-color: var(--out); }
.ms-total strong { font-size: 26px; }
.ms-total.doit strong { color: var(--out); }
.ms-resume { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.ms-resume div { background: var(--paper); border-radius: 6px; padding: 8px 10px; display: grid; gap: 2px; }
.ms-resume span { font-size: 12.5px; color: var(--ink-2); }
.ms-table td, .ms-table th { padding: 6px 8px; }

/* ---------- Remises en banque ---------- */
.rb-etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 14px; }
.rb-etapes div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; display: grid; gap: 2px; font-size: 13px; color: var(--ink-3); }
.rb-etapes div.fait { border-color: var(--in); color: var(--ink-2); }
.rb-etapes div.fait strong { color: var(--in); }
.rb-cheques { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; }
.rb-cheque { display: grid !important; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 6px; background: var(--paper); }
.rb-action { max-width: none; }
.remise-retard { border-color: var(--out) !important; }

/* ---------- Distribution ---------- */
.ds-alerte { display: grid; gap: 4px; text-decoration: none; color: inherit; max-width: none; }
.ds-generer { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; }
.ds-generer label { font-size: 12px; }
.ds-defaut { font-size: 12px; display: flex; gap: 8px; align-items: center; }
.ds-groupe table td, .ds-groupe table th { padding: 5px 8px; }
.ds-groupe select { max-width: 220px; }
.ds-bloquee td { background: var(--out-soft); }
.ds-sans td { color: var(--out); font-weight: 600; }
select.ds-change { border-color: var(--amber); background: var(--amber-soft); }
.ds-barre { position: sticky; top: 0; z-index: 5; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 10px 14px; margin-bottom: 12px;
  background: var(--ink); color: var(--surface); border-radius: var(--r); }
.ds-barre select { max-width: 260px; }

/* ---------- Dispatch en colonnes par livreur ---------- */
.ds-tete { display: flex; justify-content: space-between; align-items: end; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ds-tete .onglets { margin: 0; }
.kb { display: flex; gap: 12px; overflow-x: auto; align-items: stretch; padding-bottom: 8px; height: calc(100vh - 290px); min-height: 380px; }
.kb-col { flex: 0 0 250px; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.kb-col.survol { border-color: var(--amber); background: var(--amber-soft); }
.kb-col header { padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface); border-radius: var(--r) var(--r) 0 0; display: grid; gap: 2px; }
.kb-col header strong { font-size: 14px; }
.kb-tot { font-size: 12px; color: var(--ink-3); }
.kb-mt { font-size: 15px; font-weight: 700; }
.kb-sans header { background: var(--out-soft); }
.kb-sans header strong { color: var(--out); }
.kb-cartes { flex: 1; overflow-y: auto; padding: 8px; display: grid; gap: 8px; align-content: start; }
.kb-carte { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--in); border-radius: 6px; padding: 8px 10px; cursor: grab; display: grid; gap: 3px; font-size: 13px; }
.kb-carte:hover { border-color: var(--amber); }
.kb-carte.bloquee { border-left-color: var(--out); }
.kb-carte.glisse { opacity: .4; }
.kb-nom { font-weight: 700; font-size: 14px; }
.kb-ligne { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.kb-defaut { color: var(--amber); }
.kb-bloc { color: var(--out); font-weight: 600; font-size: 12px; }
.kb-vide { color: var(--ink-3); font-size: 13px; text-align: center; padding: 18px 6px; border: 2px dashed var(--line); border-radius: 6px; }
.kb-detail { max-height: 50vh; overflow-y: auto; }
.kb-action { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; font-size: 13px; }

.u-routes { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.u-nouvelle-route { flex-basis: 100%; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 6px; padding-top: 8px; border-top: 1px dashed var(--line); }
.u-nouvelle-route input { flex: 1 1 220px; }
.u-pv-l { flex-basis: 100%; display: grid; gap: 4px; margin-top: 8px; font-size: 13px; }
.u-pv-l .muted { font-size: 12px; }
.kb-pv { font-size: 11.5px; color: var(--ink-3); font-family: var(--num); letter-spacing: .02em; }
.kb-bl { justify-self: start; margin-top: 6px; }

/* ---------- Détail des commandes dans le dispatch ---------- */
.kb-onglets { display: flex; gap: 4px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.kc-ligne { cursor: pointer; }
.kc-ligne:hover td { background: var(--paper); }
.kc-fleche { display: inline-block; color: var(--ink-3); transition: transform .15s; }
.kc-ligne.ouvert .kc-fleche { transform: rotate(90deg); }
.kc-produits > td { background: var(--paper); padding: 6px 10px 10px; }
table.kc-lignes { width: 100%; font-size: 13px; }
table.kc-lignes th, table.kc-lignes td { padding: 4px 8px; }

/* ---------- Bons de chargement déjà faits (cartes figées) ---------- */
.kb-nbl { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--in); color: #fff; font-size: 11px; font-weight: 700; vertical-align: 2px; cursor: help; }
.kb-deja { font-size: 11.5px; color: var(--in); font-weight: 600; }
.kb-sep { font-size: 12px; font-weight: 700; color: var(--ink-2); padding: 6px 2px 0; border-top: 1px dashed var(--line); margin-top: 4px; }
.kb-figee { border-left-color: var(--ink-3) !important; background: var(--paper); opacity: .8; cursor: pointer; }
.kb-figee:hover { opacity: 1; }

/* ---------- Livraisons du livreur ---------- */
.ml-lignes td, .ml-lignes th { padding: 6px; }
.ml-lignes input.q { width: 72px; }
.ml-lignes input.q.erreur { border-color: var(--out); background: var(--out-soft); }
.mj-ecart { font-size: 15px; margin: 4px 0 8px; }
.mj-ecart strong { font-size: 22px; margin-right: 6px; }
.rp-creer { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.rp-creer input { width: 56px; text-align: right; }