:root {
  --bg: #fdf8f0; --card: #ffffff; --ink: #2b2118; --muted: #7a6a58; --line: #eadfce;
  --brand: #b45309; --brand-d: #92400e; --brand-l: #fef3c7;
  --good: #15803d; --warn: #b45309; --bad: #b91c1c; --wa: #1fa855;
  --radius: 14px; --shadow: 0 1px 3px rgba(60,40,10,.08), 0 4px 14px rgba(60,40,10,.05);
}
@media (prefers-color-scheme: dark) {
  :root:not(.light) { --bg:#17120d; --card:#231c14; --ink:#f4ece1; --muted:#b2a291; --line:#3a2f23; --brand-l:#3b2a10; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
a { color: var(--brand); }
h1 { font-size: 1.45rem; margin: .2rem 0 .6rem; line-height:1.2; }
h2 { font-size: 1.08rem; margin: 0 0 .7rem; }
h3 { margin: 0 0 .4rem; }
.container { max-width: 980px; margin: 0 auto; padding: 14px 16px 24px; }
.muted { color: var(--muted); } .small { font-size: .85rem; }
.r { text-align: right; } .pos { color: var(--good); } .neg { color: var(--bad); }
code { background: var(--brand-l); padding: 1px 5px; border-radius: 5px; font-size: .85em; word-break: break-all; }

/* Barre du haut */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); background: var(--brand); color: #fff; }
.brand { color:#fff; text-decoration:none; font-weight:700; white-space:nowrap; margin-right:auto; }
.brand span { display:none; }
.batch-switch select { max-width: 42vw; padding: 6px 8px; border-radius: 8px; border: 0; background: rgba(255,255,255,.95); color:#2b2118; font-size:.9rem; }
.icon-btn { background: transparent; border: 0; color: inherit; font-size: 1.15rem; cursor: pointer; padding: 6px 8px; border-radius: 8px; text-decoration: none; line-height: 1; }
.topbar .icon-btn { color:#fff; } .topbar .icon-btn:hover { background: rgba(255,255,255,.18); }
.icon-btn.on { background: rgba(255,255,255,.25); }

/* Navigation : barre basse sur mobile, haute sur desktop */
.tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; background: var(--card); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.tabs a { flex: 1; text-align: center; padding: 7px 2px 6px; font-size: .7rem; text-decoration: none; color: var(--muted); }
.tabs a span { display:block; font-size: 1.3rem; line-height: 1.2; }
.tabs a.active { color: var(--brand); font-weight: 700; box-shadow: inset 0 3px 0 var(--brand); }
@media (min-width: 760px) {
  body { padding-bottom: 0; }
  .brand span { display: inline; }
  .tabs { position: sticky; top: 52px; bottom: auto; border-top: 0; border-bottom: 1px solid var(--line); justify-content: center; }
  .tabs a { flex: 0 0 auto; padding: 10px 18px; font-size: .9rem; }
  .tabs a span { display: inline; font-size: 1rem; margin-right: 6px; }
  .tabs a.active { box-shadow: inset 0 -3px 0 var(--brand); }
}

.page-head, .row-between { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 14px; box-shadow: var(--shadow); }
.card.next { border-left: 5px solid var(--brand); } .card.next.urgent { border-left-color: var(--bad); background: #fef2f2; }
@media (prefers-color-scheme: dark) { .card.next.urgent { background:#3a1717; } }
.label { display:block; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

.grid { display: grid; gap: 10px; }
.kpis { grid-template-columns: repeat(2, 1fr); margin-bottom: 14px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); }
.kpi strong { display:block; font-size: 1.4rem; line-height: 1.25; }
.kpi small { color: var(--muted); display:block; font-size:.78rem; }
.kpi.big { grid-column: 1 / -1; background: var(--brand-l); }
.kpi.big strong { font-size: 2rem; }
.kpi.good strong { color: var(--good); } .kpi.warn strong { color: var(--warn); } .kpi.bad strong { color: var(--bad); }
.fin { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .fin strong { font-size: 1.2rem; display:block; }
@media (min-width: 760px) { .kpis { grid-template-columns: repeat(4, 1fr); } .kpi.big { grid-column: span 2; } }

/* Formulaires */
.form-grid { display: grid; grid-template-columns: 1fr; gap: 10px 12px; }
@media (min-width: 640px) { .form-grid { grid-template-columns: 1fr 1fr; } .span2 { grid-column: span 2; } }
label { display: block; font-size: .85rem; font-weight: 600; color: var(--muted); }
input, select, textarea { width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
label.check { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--ink); }
label.check input { width: 22px; height: 22px; margin: 0; accent-color: var(--brand); flex: none; }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.btn { display:inline-block; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; text-align:center; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-d); }
.btn-ghost { background: transparent; } .btn-danger { color: var(--bad); border-color: var(--bad); background: transparent; }
.btn-wa { background: var(--wa); border-color: var(--wa); color: #fff; }
.btn-notif { background: var(--brand-l); border: 2px dashed var(--brand); color: var(--brand-d); margin-bottom: 12px; }
.btn-notif.on { background: #dcfce7; border: 2px solid var(--good); color: var(--good); }
.btn-block { display:block; width:100%; }
.btn-row { display:flex; gap: 8px; flex-wrap: wrap; align-items: center; } .btn-row form { margin: 0; }

.flash { padding: 10px 14px; border-radius: 10px; margin-bottom: 12px; font-weight: 500; }
.flash-ok { background: #dcfce7; color: #14532d; } .flash-err { background: #fee2e2; color: #7f1d1d; } .flash-warn { background: #fef3c7; color: #78350f; }
.chip { display:inline-block; padding: 2px 10px; border-radius: 99px; background: var(--line); font-size: .75rem; font-weight: 700; color: var(--ink); vertical-align: middle; }
.chip-ok { background:#dcfce7; color:#14532d; } .chip-warn { background:#fef3c7; color:#78350f; } .chip-bad { background:#fee2e2; color:#7f1d1d; }

/* Tables */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: 8px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); white-space: nowrap; }
td.r, th.r { text-align: right; } tfoot th { color: var(--ink); font-size: .85rem; }
td form { margin: 0; }

/* Programme sanitaire */
.card.health { border-left: 5px solid var(--line); } .card.health.soon { border-left-color: var(--warn); }
.card.health.late { border-left-color: var(--bad); } .card.health.done { border-left-color: var(--good); opacity: .8; }
.health-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .health-info { flex: 1; min-width: 200px; }
.health .check { flex: none; font-size: .8rem; max-width: 110px; }

.subtabs { display:flex; gap: 6px; margin-bottom: 14px; overflow-x:auto; }
.subtabs a { padding: 8px 14px; border-radius: 99px; text-decoration:none; background: var(--card); border: 1px solid var(--line); color: var(--ink); white-space: nowrap; font-size: .9rem; }
.subtabs a.active { background: var(--brand); color:#fff; border-color: var(--brand); }

.bar-row { display:grid; grid-template-columns: 1fr; gap: 2px; margin-bottom: 10px; font-size: .9rem; }
@media (min-width: 640px) { .bar-row { grid-template-columns: 220px 1fr 140px; align-items:center; gap: 10px; } .bar-row strong { text-align:right; } }
.bar { height: 10px; background: var(--line); border-radius: 99px; overflow:hidden; } .bar i { display:block; height:100%; background: var(--brand); }

.foot { text-align:center; color: var(--muted); font-size: .8rem; padding: 10px 0 20px; }
.net.off { color: var(--bad); font-weight: 700; } .net.on::before { content:"● "; color: var(--good); } .net.off::before { content:"● "; }
.offline-banner { position: fixed; top: 0; left:0; right:0; z-index: 50; background: var(--bad); color:#fff; text-align:center; padding: 6px; font-size:.85rem; }

.login { min-height: 100vh; display:grid; place-items:center; padding: 16px; } .login .card { width: 100%; max-width: 380px; }
.btn-block + p, .login p { margin-top: 12px; }

/* Vitrine publique */
.vitrine { padding-bottom: 0; }
.hero { background: linear-gradient(135deg, var(--brand), #d97706); color:#fff; text-align:center; padding: 44px 16px 38px; }
.hero h1 { font-size: 2rem; } .hero p { font-size: 1.1rem; opacity:.95; margin: 0 0 18px; }
.offer .price { font-size: 1.5rem; font-weight: 800; color: var(--brand); margin: .3rem 0; }

/* Rapport imprimable */
.report { background:#e7e5e4; padding-bottom: 0; color:#111; }
.report-bar { max-width: 210mm; margin: 12px auto; display:flex; gap: 8px; padding: 0 12px; }
.sheet { background:#fff; max-width: 210mm; margin: 0 auto 24px; padding: 14mm; box-shadow: var(--shadow); font-size: 10.5pt; }
.sheet-head { border-bottom: 3px solid var(--brand); margin-bottom: 8px; }
.sheet h1 { font-size: 18pt; margin: 0; } .sheet h2 { font-size: 12pt; margin: 16px 0 6px; padding-bottom: 3px; border-bottom: 1px solid #ccc; color: var(--brand-d); }
.sheet table { margin-bottom: 8px; font-size: 9.5pt; } .sheet th, .sheet td { padding: 4px 6px; border-bottom: 1px solid #ddd; }
.sheet table.kv th { width: 22%; text-transform:none; font-size: 9.5pt; letter-spacing:0; color:#444; } .sheet .total td, .sheet .total th { border-top: 2px solid #111; font-size: 11pt; }

@media print {
  @page { size: A4; margin: 12mm; }
  .no-print, .tabs, .topbar, .foot, .btn-notif { display: none !important; }
  body, .report { background: #fff !important; color: #000 !important; padding: 0 !important; font-size: 10.5pt; }
  .card, .sheet { box-shadow: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .sheet h2 { break-after: avoid; } .sheet table { break-inside: auto; } .sheet tr { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ===== Logo, installation, commandes, utilisateurs ===== */
.brand { display:flex; align-items:center; gap:8px; }
.brand-logo { height: 30px; width: 30px; object-fit: contain; border-radius: 8px; background:#fff; padding:2px; }
.brand span { display:none; } @media (min-width:760px){ .brand span { display:inline; } }
.login-logo { max-height: 84px; max-width: 70%; object-fit: contain; margin-bottom: 6px; }
.install-btn { display:inline-flex; align-items:center; gap:6px; } .install-btn span { display:none; font-size:.8rem; font-weight:700; }
@media (min-width:900px){ .install-btn span { display:inline; } }
.linklike { background:none; border:0; padding:0; font:inherit; color: var(--brand); text-decoration: underline; cursor:pointer; }
.install-btn[hidden], .linklike[hidden] { display:none !important; }
.tabs a span { position: relative; }
.badge { position:absolute; top:-4px; right:-12px; background: var(--bad); color:#fff; font-size:.62rem; border-radius:99px; min-width:17px; height:17px; line-height:17px; padding:0 4px; text-align:center; font-weight:700; }
.tabs a { min-width: 0; }
.logo-box { display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:12px; border:1px dashed var(--line); border-radius:12px; }
.logo-prev { width:96px; height:96px; border-radius:16px; background:#fff; border:1px solid var(--line); display:grid; place-items:center; font-size:2.6rem; flex:none; overflow:hidden; }
.logo-prev img { max-width:92px; max-height:92px; width:auto; height:auto; object-fit:contain; }
.logo-box > div:last-child { flex:1; min-width:220px; }
fieldset.perms { border:1px solid var(--line); border-radius:12px; padding:10px 14px; display:grid; gap:6px; margin:0; }
fieldset.perms legend { font-weight:700; padding:0 6px; font-size:.9rem; }
.card.inactive { opacity:.6; }
.order-new { border-left:5px solid var(--warn); } .order-confirmed { border-left:5px solid var(--good); }
.order-delivered { border-left:5px solid var(--good); opacity:.85; } .order-cancelled { border-left:5px solid var(--bad); opacity:.7; }