/* DISTRICT — styles */
:root {
  --ink: #0E1726; --muted: #5B6576; --line: #E4E7EC; --bg: #F5F6F8; --card: #FFFFFF; --soft: #F0F2F5;
  --accent: #C2410C; --accent-d: #9A3412; --accent-s: #FFF1E8;
  --blue: #1D4ED8; --blue-s: #E8EFFF; --blue-t: #1E3A8A;
  --green: #15803D; --green-s: #E7F6EC; --green-t: #14532D;
  --amber-s: #FFF6DB; --amber-t: #854D0E;
  --red: #B91C1C; --red-s: #FDECEC; --red-t: #991B1B;
  --violet: #7E22CE; --violet-s: #F3E8FF; --violet-t: #581C87;
  --side: #0E1726; --side2: #1C2738;
  --r: 12px;
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink); background: var(--bg);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); -webkit-tap-highlight-color: transparent; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.mono { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.xs { font-size: 12px; }
.bold { font-weight: 800; }
.hidden { display: none !important; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; min-width: 0; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sr { position: absolute; left: -9999px; }

/* boutons */
.btn { min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; color: var(--ink); }
.btn.primary { background: var(--accent); color: #fff; border: 0; }
.btn.dark { background: var(--ink); color: #fff; border: 0; }
.btn.green { background: var(--green); color: #fff; border: 0; }
.btn.red { background: var(--red); color: #fff; border: 0; }
.btn.violet { background: var(--violet); color: #fff; border: 0; }
.btn.ghost { background: transparent; border: 0; color: var(--muted); }
.btn.big { min-height: 56px; font-size: 17px; font-weight: 800; border-radius: 14px; width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.chip { min-height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--line); background: #fff; font-weight: 700; font-size: 14px; }
.chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.seg { display: inline-flex; background: #E9ECF0; border-radius: 10px; padding: 3px; gap: 2px; }
.seg button { min-height: 38px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 13px; }
.seg button.on { background: #fff; color: var(--ink); font-weight: 800; box-shadow: 0 1px 2px rgba(14,23,38,.1); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 800; white-space: nowrap; }
.p-plan { background: var(--blue-s); color: var(--blue-t); }
.p-cours { background: var(--accent-s); color: var(--accent-d); }
.p-ok { background: var(--green-s); color: var(--green-t); }
.p-dem { background: var(--soft); color: #3D4757; border: 1.5px dashed #9AA3B2; }
.p-red { background: var(--red-s); color: var(--red-t); }
.p-violet { background: var(--violet-s); color: var(--violet-t); }
.p-amber { background: var(--amber-s); color: var(--amber-t); }
.plate { display: inline-flex; align-items: center; gap: 5px; padding: 2px 7px; border: 1.5px solid var(--ink); border-radius: 4px; background: #fff; font-family: "JetBrains Mono", monospace; font-size: 12px; }
.plate::before { content: ""; width: 5px; height: 11px; background: var(--blue); border-radius: 1px; }

/* formulaires */
label.f { display: flex; flex-direction: column; gap: 6px; font-weight: 700; font-size: 14px; }
.inp, select.inp, textarea.inp { min-height: 46px; padding: 0 12px; border: 1px solid #C9D0D9; border-radius: 10px; background: #fff; font-weight: 500; width: 100%; }
textarea.inp { padding: 10px 12px; min-height: 80px; resize: vertical; }
.inp:focus, .btn:focus-visible, .chip:focus-visible { outline: 3px solid rgba(194,65,12,.35); outline-offset: 1px; }

/* cartes */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.note { padding: 10px 12px; border-radius: 10px; font-size: 13px; }
.note.amber { background: var(--amber-s); color: #5C3B07; }
.note.red { background: var(--red-s); color: var(--red-t); }
.note.green { background: var(--green-s); color: var(--green-t); }
.note.blue { background: var(--blue-s); color: var(--blue-t); }
.note.violet { background: var(--violet-s); color: var(--violet-t); }

/* toast + modal */
#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 100; background: var(--ink); color: #fff; padding: 12px 16px; border-radius: 12px; font-weight: 600; font-size: 14px; max-width: min(92vw, 520px); box-shadow: 0 8px 24px rgba(14,23,38,.3); }
.modal-bg { position: fixed; inset: 0; z-index: 90; background: rgba(14,23,38,.55); display: flex; align-items: flex-start; justify-content: center; padding: 30px 12px; overflow-y: auto; }
.modal { width: 100%; max-width: 560px; background: #fff; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 24px 64px rgba(14,23,38,.35); }
.modal h2 { margin: 0; font-size: 19px; }
.sheet-bg { position: fixed; inset: 0; z-index: 90; background: rgba(14,23,38,.5); display: flex; align-items: flex-end; }
.sheet { width: 100%; background: #fff; border-radius: 20px 20px 0 0; padding: 16px 16px 28px; max-height: 85vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
img.doc { width: 100%; border-radius: 8px; border: 1px solid var(--line); background: #fff; }

/* ---------- bureau ---------- */
.desk { display: flex; min-height: 100vh; }
.side { width: 236px; flex-shrink: 0; background: var(--side); color: #C9D1DC; padding: 20px 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 0; height: 100vh; }
.brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; }
.logo { width: 34px; height: 34px; border-radius: 9px; background: var(--accent); display: flex; align-items: center; justify-content: center; }
.brand b { color: #fff; letter-spacing: .12em; font-size: 17px; }
.nav a { display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: #C9D1DC; text-decoration: none; font-weight: 500; }
.nav a.on { background: var(--side2); color: #fff; font-weight: 800; }
.nav .badge { background: var(--accent); color: #fff; border-radius: 10px; padding: 1px 8px; font-size: 12px; font-weight: 800; }
.side .me { margin-top: auto; padding: 10px; font-size: 13px; border-top: 1px solid var(--side2); }
.main { flex: 1; min-width: 0; padding: 26px 30px; display: flex; flex-direction: column; gap: 18px; }
.head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-end; }
.head h1 { margin: 2px 0 0; font-size: 28px; }
.kicker { font-size: 12px; font-weight: 800; color: var(--accent); text-transform: uppercase; letter-spacing: .08em; }
.topbar { display: none; }

/* planning */
.plan { overflow-x: auto; }
.plan-in { min-width: 820px; }
.plan-h, .plan-r { display: grid; grid-template-columns: 190px 1fr; align-items: center; }
.plan-h { padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--muted); }
.hours { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); }
.plan-r { min-height: 76px; border-bottom: 1px solid #F0F2F5; }
.who { display: flex; flex-direction: column; gap: 3px; padding-right: 8px; }
.track { position: relative; height: 62px; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 11 - 1px), #F0F2F5 calc(100% / 11 - 1px), #F0F2F5 calc(100% / 11)); }
.track.over { background-color: #EEF4FF; }
.blk { position: absolute; top: 5px; bottom: 5px; border-radius: 9px; padding: 4px 8px; overflow: hidden; text-align: left; border: 0; font-size: 12px; cursor: grab; }
.blk b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.blk span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-plan { background: linear-gradient(180deg, rgba(29,78,216,.22), rgba(29,78,216,.05)); border-left: 4px solid var(--blue); color: var(--blue-t); }
.b-cours { background: linear-gradient(180deg, rgba(234,88,12,.25), rgba(234,88,12,.06)); border-left: 4px solid #EA580C; color: #7C2D12; }
.b-ok { background: linear-gradient(180deg, rgba(21,128,61,.22), rgba(21,128,61,.05)); border-left: 4px solid var(--green); color: var(--green-t); cursor: pointer; }
.b-dem { background: #fff; border: 1.5px dashed #9AA3B2; color: #3D4757; }
.b-red { background: var(--red-s); border-left: 4px solid var(--red); color: var(--red-t); }
.b-violet { background: var(--violet-s); border: 1.5px dashed var(--violet); color: var(--violet-t); }
.b-sel { outline: 2px solid var(--ink); outline-offset: 1px; }
.nowline { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--accent); z-index: 1; pointer-events: none; }
.gap { position: absolute; top: 5px; bottom: 5px; border-radius: 9px; border: 1.5px dashed var(--green); background: #F2FBF5; color: var(--green-t); font-size: 11px; font-weight: 800; padding: 4px 6px; overflow: hidden; white-space: nowrap; }
.gap.on { background: var(--green); color: #fff; border-color: var(--green); }
.lock { position: absolute; top: 0; bottom: 0; left: 0; background: repeating-linear-gradient(135deg, rgba(154,163,178,.35) 0 6px, rgba(240,242,245,.6) 6px 12px); }
.split { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start; }
.split > .wide { flex: 999 1 600px; min-width: 0; }
.split > .narrow { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.countdown { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 16px; background: var(--amber-s); border: 1.5px solid #B45309; border-radius: 14px; }
.countdown .t { font-family: "JetBrains Mono", monospace; font-size: 26px; color: var(--amber-t); min-width: 70px; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-size: 12px; color: var(--muted); padding: 10px 8px; border-bottom: 1px solid var(--line); }
table.t td { padding: 10px 8px; border-bottom: 1px solid #F0F2F5; vertical-align: top; }
.trucks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tphoto { width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; background: linear-gradient(160deg, #3A4A61, #0E1726); object-fit: cover; display: flex; align-items: center; justify-content: center; color: #C9D1DC; font-size: 12px; }
.items-edit .r { display: grid; grid-template-columns: 1fr 120px 40px; gap: 6px; margin-bottom: 6px; }

@media (max-width: 820px) {
  .desk { flex-direction: column; }
  .side { display: none; }
  .topbar { display: flex; position: sticky; top: 0; z-index: 20; align-items: center; gap: 10px; padding: 10px 12px; background: var(--side); color: #fff; }
  .topbar .t { flex: 1; font-weight: 800; }
  .topbar button { width: 44px; height: 44px; border: 0; border-radius: 10px; background: var(--side2); color: #fff; }
  .mobnav { display: flex; flex-direction: column; background: var(--side); padding: 0 10px 10px; position: fixed; top: 64px; left: 0; right: 0; z-index: 19; max-height: calc(100vh - 64px); overflow-y: auto; box-shadow: 0 12px 24px rgba(14,23,38,.35); }
  .mobnav.hidden { display: none; }
  .main { padding: 16px; }
  .head h1 { font-size: 23px; }
}
@media (min-width: 821px) { .mobnav { display: none !important; } }

/* ---------- livreur ---------- */
.drv { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.dhead { background: var(--side); color: #fff; padding: 18px 18px 20px; }
.dhead h1 { margin: 2px 0 0; font-size: 24px; }
.dbar { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--line); padding: 10px 10px; display: flex; align-items: center; gap: 6px; }
.dbar { flex-direction: column; align-items: stretch; }
.dbar-row { display: flex; align-items: center; gap: 6px; }
/* En-tête de mission coloré selon l'étape, en fondu vers le bas */
.dbar.hph { background: linear-gradient(180deg, rgba(var(--ph), .42) 0%, rgba(var(--ph), .16) 60%, rgba(var(--ph), .04) 100%), #fff; border-top: 4px solid rgb(var(--ph)); border-bottom: 1px solid rgba(var(--ph), .25); transition: background .4s; }
.dbar.hph h1, .dbar.hph .back { color: var(--ph-t); }
.dbar.hph .muted { color: var(--ph-t); opacity: .8; }
.hsteps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 8px 6px 2px; }
.hsteps div { border-top: 4px solid rgba(14, 23, 38, .12); padding-top: 4px; font-size: 11px; font-weight: 800; color: rgba(14, 23, 38, .45); }
.hsteps div.on { border-color: rgb(var(--ph)); color: var(--ph-t); }
.dbar .back { width: 44px; height: 44px; border: 0; background: transparent; font-size: 22px; }
.dbar h1 { margin: 0; font-size: 18px; }
.dbody { flex: 1; padding: 14px 16px 90px; display: flex; flex-direction: column; gap: 12px; }
.mcard { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); text-align: left; width: 100%; }
.mcard.violet { background: #FBF7FF; border: 1.5px dashed var(--violet); }
.num { width: 34px; height: 34px; border-radius: 17px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; background: #E9ECF0; }
.num.cur { background: var(--accent); color: #fff; }
.num.done { background: var(--green); color: #fff; }
.next { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; text-align: left; padding: 16px; border: 0; border-radius: 16px; background: var(--accent); color: #fff; width: 100%; box-shadow: 0 6px 16px rgba(194,65,12,.3); }
.next small { font-size: 12px; font-weight: 800; letter-spacing: .08em; opacity: .85; }
.next b { font-size: 20px; }
.acts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.acts button { min-height: 64px; border-radius: 14px; border: 1.5px solid var(--ink); background: #fff; font-weight: 800; font-size: 13px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.acts button.dk { background: var(--ink); color: #fff; border: 0; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.steps div { border-top: 4px solid #D5DAE1; padding-top: 6px; font-size: 12px; font-weight: 800; color: var(--muted); }
.steps div.on { border-color: var(--accent); color: var(--accent-d); }
/* Étapes de distribution : bleu préparation, orange en cours, vert livrée */
.ph-prep { --ph: 29, 78, 216; --ph-t: #1E3A8A; }
.ph-cours { --ph: 234, 88, 12; --ph-t: #9A3412; }
.ph-livre { --ph: 21, 128, 61; --ph-t: #14532D; }
.ph { background-image: linear-gradient(180deg, rgba(var(--ph), .22) 0, rgba(var(--ph), .08) 38px, rgba(var(--ph), 0) 76px); border-top: 3px solid rgb(var(--ph)) !important; }
.mcard.ph { background-color: #fff; }
.phtag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; color: var(--ph-t); background: rgba(var(--ph), .12); }
.phtag i { width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--ph)); }
.phbanner { padding: 14px 16px 18px; background: linear-gradient(180deg, rgba(var(--ph), .30) 0%, rgba(var(--ph), .12) 55%, rgba(var(--ph), 0) 100%); border-top: 4px solid rgb(var(--ph)); color: var(--ph-t); }
.phbanner .phtitle { font-size: 22px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; }
.phbanner .steps { margin-top: 12px; }
.phbanner .steps div { border-top-color: rgba(14, 23, 38, .12); }
.phbanner .steps div.on { border-color: rgb(var(--ph)); color: var(--ph-t); }
.chk { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.9); }
.chk.ok { border: 1.5px solid var(--green); background: rgba(231,246,236,.95); }
.chk.ko { border: 1.5px solid var(--red); background: rgba(253,236,236,.95); }
.box { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; border: 2px solid #9AA3B2; }
.chk.ok .box { background: var(--green); color: #fff; border: 0; }
.chk.ko .box { background: var(--red); color: #fff; border: 0; }
.paper { background: #F7F7F3; border-radius: 6px; box-shadow: 0 4px 14px rgba(14,23,38,.15); padding: 10px; }
.sigwrap { position: relative; }
.sigwrap canvas { width: 100%; display: block; border-radius: 6px; touch-action: none; background: #fff; }
.pausebox { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--amber-s); color: #5C3B07; }
.pausebox .t { font-family: "JetBrains Mono", monospace; font-size: 26px; }
.offline { padding: 10px 12px; background: var(--ink); color: #fff; border-radius: 12px; font-size: 13px; }
.alert-full { position: fixed; inset: 0; z-index: 95; background: rgba(14,23,38,.94); color: #fff; padding: 90px 24px 40px; display: flex; flex-direction: column; gap: 14px; }
.stepper { display: flex; align-items: center; gap: 10px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.stepper button { width: 48px; height: 48px; border-radius: 12px; border: 1px solid #C9D0D9; background: #fff; font-size: 22px; font-weight: 800; }
.stepper button.plus { background: var(--ink); color: #fff; border: 0; }
.stepper .n { min-width: 34px; text-align: center; font-size: 24px; font-weight: 800; }

/* connexion */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--side); padding: 20px; }
.login form { width: 100%; max-width: 380px; background: #fff; border-radius: 18px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- Encaissement (style terminal de paiement) ---------- */
.tpe { display: flex; flex-direction: column; gap: 12px; }
.tpe-screen { background: #0E1726; color: #C9D1DC; border-radius: 16px; padding: 14px 16px; text-align: right; display: flex; flex-direction: column; gap: 4px; transition: background .3s; }
.tpe-screen.paid { background: #14532D; }
.tpe-amount { font: 800 38px/1.1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #fff; letter-spacing: .02em; }
.tpe-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tpe-keys button { min-height: 58px; border-radius: 14px; border: 1px solid var(--line); background: #fff; font-size: 24px; font-weight: 800; }
.tpe-keys button:active { background: var(--soft); transform: scale(.97); }
.tpe-keys button.clr { color: var(--red); }
.qr { width: 240px; height: 240px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.paid-ok { width: 88px; height: 88px; border-radius: 50%; background: var(--green); color: #fff; font-size: 52px; font-weight: 800; display: grid; place-items: center; margin-top: 8px; }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .9s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.pay { background: #1D4ED8; color: #fff; border-color: #1D4ED8; }
.paybox { padding: 10px 12px; border: 1px dashed var(--blue); border-radius: 12px; background: var(--blue-s); }

/* ---------- Manuel ---------- */
.manual { gap: 12px; }
.man-sec h2 { margin: 0; font-size: 18px; }
.man-sec p { margin: 0; line-height: 1.5; }
.man-sec ul, .man-sec ol, .man-new ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; line-height: 1.45; }
.man-new { border-color: var(--blue); background: var(--blue-s); }
.man-new summary { cursor: pointer; }
.man-toc { display: flex; flex-wrap: wrap; gap: 6px; }
.man-sec { scroll-margin-top: 70px; }
.newdot { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; vertical-align: middle; }

/* Badge de stade (bêta) */
.beta { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 6px; background: #FDBA74; color: #0E1726; font-size: 10.5px; font-weight: 800; letter-spacing: .08em; vertical-align: middle; }