/* PulseCOD par GOUDI — palette Cauri, clair terrain et sombre. */
:root[data-theme="light"] {
  --ground:#F6F4EF;
  --panel:#FFFFFF;
  --panel-2:#EEEDE7;
  --line:#BDC3C5;
  --control-line:#737D86;
  --ink:#0A0F1C;
  --muted:#465365;
  --faint:#536174;
  --brand:#14B87A;
  --kola:#FF7A3D;
  --chalk:#F4F1EA;
  --slate:#94A0B4;
  --action:#0B7A52;
  --action-ink:#FFFFFF;
  --active-soft:#E7F3ED;
  --good:#086843;
  --good-soft:#E7F3ED;
  --bad:#B42332;
  --bad-soft:#FCEBED;
  --warning:#993B12;
  --warning-soft:#FFF0E6;
  --wait:#255A92;
  --wait-soft:#EAF0F8;
  --track:#D9DEE0;
  --field:#FFFFFF;
  --logo-bg:#FFFFFF;
  --count-bg:#0000000D;
  --overlay:#0A0F1CBF;
  --shadow-color:#0A0F1C1A;
  --focus-color:#0B7A5233;
  --clear:transparent;
  --surface:var(--panel); --gold:var(--action); --gold-soft:var(--action); --gold-ink:var(--action-ink);
  --status-ink-weight:25%; --status-bg-weight:12%;
  --radius:18px; --radius-sm:12px; --space:16px; --space-lg:24px;
  --shadow:0 6px 20px -12px var(--shadow-color); --focus:0 0 0 3px var(--focus-color);
  color-scheme:light;
}
:root[data-theme="dark"] {
  --ground:#0A0F1C;
  --panel:#141D2C;
  --panel-2:#1D293A;
  --line:#3D4B60;
  --control-line:#7D8BA0;
  --ink:#F4F1EA;
  --muted:#C0C8D4;
  --faint:#ACB8CA;
  --brand:#14B87A;
  --kola:#FF7A3D;
  --chalk:#F4F1EA;
  --slate:#94A0B4;
  --action:#14B87A;
  --action-ink:#0A0F1C;
  --active-soft:#17372C;
  --good:#59D9A4;
  --good-soft:#17372C;
  --bad:#FF929B;
  --bad-soft:#3C202C;
  --warning:#FFA478;
  --warning-soft:#3C291F;
  --wait:#9DC7F5;
  --wait-soft:#1D3049;
  --track:#3D4B60;
  --field:#0E1725;
  --logo-bg:#0A0F1C;
  --count-bg:#FFFFFF0D;
  --overlay:#0A0F1CCC;
  --shadow-color:#00000055;
  --focus-color:#14B87A44;
  --clear:transparent;
  --surface:var(--panel); --gold:var(--action); --gold-soft:var(--action); --gold-ink:var(--action-ink);
  --status-ink-weight:25%; --status-bg-weight:12%;
  --radius:18px; --radius-sm:12px; --space:16px; --space-lg:24px;
  --shadow:0 6px 20px -12px var(--shadow-color); --focus:0 0 0 3px var(--focus-color);
  color-scheme:dark;
}
* {box-sizing:border-box}
html {margin:0;scroll-padding-block:24px 100px}
body {margin:0;background:var(--ground);color:var(--ink);font:16px/1.6 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea {font:inherit}
button,a,input,select,summary {-webkit-tap-highlight-color:var(--clear)}
button,a,summary {touch-action:manipulation}
button {cursor:pointer}
button,input:not([type=hidden]),select,summary {min-height:44px;min-width:44px}
input,select,textarea {max-width:100%}
a {color:var(--action);text-underline-offset:4px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible {outline:3px solid var(--action);outline-offset:3px;box-shadow:var(--focus)}
button:disabled {opacity:.5;cursor:default}
::placeholder {color:var(--faint);opacity:1}
::selection {background:var(--action);color:var(--action-ink)}
.num,.v,.q,.val,.cmd,.kpis,input,table {font-variant-numeric:tabular-nums}
.muted {color:var(--muted)}
.small {font-size:.875rem;line-height:1.65}
.pos {color:var(--good)}
.neg {color:var(--bad)}
.wrap {max-width:1248px;margin:auto;padding:24px 16px calc(100px + env(safe-area-inset-bottom))}
/* Navigation identique ; barre basse accessible au pouce sur téléphone. */
header.top {display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.brand {display:flex;gap:12px;align-items:center;flex:1 1 100%;min-width:0}
.brand>div:last-child {min-width:0}
.logo {width:46px;height:46px;flex:0 0 auto;border:1px solid var(--line);border-radius:14px;background:var(--logo-bg);color:var(--brand);display:grid;place-items:center;font:700 24px "Space Grotesk",sans-serif}
.brand h1 {font-family:"Space Grotesk",sans-serif;font-size:1.125rem;line-height:1.4;letter-spacing:-.035em;margin:0;overflow-wrap:anywhere}
.brand p {margin:3px 0 0;color:var(--muted);font-size:.875rem;line-height:1.5}
.spacer {display:none}
nav.app {position:fixed;z-index:6;bottom:0;left:0;right:0;display:flex;gap:4px;padding:8px 16px calc(8px + env(safe-area-inset-bottom));background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -8px 24px var(--shadow-color)}
nav.app a {flex:1;min-width:0;min-height:48px;display:flex;justify-content:center;align-items:center;text-decoration:none;white-space:nowrap;padding:8px 4px;border:1px solid var(--clear);border-radius:10px;color:var(--muted);font-size:.875rem;font-weight:700}
nav.app a.on {background:var(--action);color:var(--action-ink);border-color:var(--action)}
.iconbtn {display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--muted);font-size:.875rem;font-weight:600;text-decoration:none}
.periods {order:4;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;flex:1 1 100%;padding:4px;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.periods button {border:1px solid var(--clear);background:var(--clear);color:var(--muted);border-radius:9px;padding:8px;font-size:.875rem;font-weight:700}
.periods button.on {background:var(--action);color:var(--action-ink)}
/* Chiffres : la marge constitue le point d'entrée du Cockpit. */
.kpis {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:24px}
.kpi {min-width:0;padding:16px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow)}
.kpi.hero {grid-column:1/-1;padding:24px;background:var(--panel);border-color:var(--control-line);border-top:3px solid var(--ink)}
.klabel {font-size:.875rem;color:var(--muted);line-height:1.5;font-weight:600}
.kpi .v {font-family:"Space Grotesk",sans-serif;font-size:clamp(1.25rem,4.8vw,1.75rem);font-weight:600;letter-spacing:-.045em;line-height:1.4;margin-top:10px;overflow-wrap:anywhere}
.kpi.hero .v {font-size:clamp(1.875rem,8vw,2.875rem);margin-top:12px}
.kpi.hero .klabel {color:var(--ink);font-weight:700}
.kpi .v small {font:600 .8125rem "Inter",sans-serif;letter-spacing:.02em;color:var(--muted);margin-left:3px}
.kpi .sub {font-size:.875rem;color:var(--muted);line-height:1.55;margin-top:8px;overflow-wrap:anywhere}
.card {min-width:0;padding:20px 16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);margin-bottom:20px}
.card h2 {font-family:"Space Grotesk",sans-serif;font-size:1rem;font-weight:600;line-height:1.5;letter-spacing:-.025em;margin:0 0 20px;color:var(--ink)}
.card h2>.small {display:block;margin-top:6px}
.row2 {display:grid;grid-template-columns:minmax(0,1fr);gap:0 20px}
h3.sec {font-family:"Space Grotesk",sans-serif;font-size:1rem;font-weight:600;line-height:1.5;margin:28px 0 14px;color:var(--ink);letter-spacing:-.02em}
canvas {display:block;width:100%;max-width:100%;height:200px}
.bars {display:flex;flex-direction:column;gap:20px;padding-top:12px}
.barrow {display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px;font-size:1rem}
.barrow .lab {overflow-wrap:anywhere}
.barrow .val {font-family:"Space Grotesk",sans-serif;font-size:.875rem;font-weight:600;white-space:nowrap}
.bartrack {height:8px;background:var(--track);border-radius:99px;overflow:hidden}
.bartrack>i {display:block;height:100%;border-radius:99px}
.barrow .bartrack {grid-column:1/-1;grid-row:2}
.alert {display:flex;align-items:flex-start;gap:10px;padding:14px 16px;border:1px solid var(--clear);border-radius:12px;font-size:1rem;margin-bottom:10px;overflow-wrap:anywhere}
.alert.warn {background:var(--warning-soft);color:var(--warning);border-color:var(--warning)}
.alert.good {background:var(--good-soft);color:var(--good);border-color:var(--good)}
.alert:last-child {margin-bottom:0}
/* Champs et commandes tactiles. */
.form-grid {display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.fld {display:flex;flex-direction:column;gap:7px;min-width:0}
.fld label {font-size:.875rem;line-height:1.5;color:var(--muted);font-weight:600}
.fld input,.fld select,.search,.login input,.prod-row input,.cfg-row input {width:100%;background:var(--field);border:1px solid var(--control-line);border-radius:10px;color:var(--ink);padding:12px;font-size:1rem;min-height:48px}
.fld input:focus,.fld select:focus,.search:focus,.login input:focus {border-color:var(--action)}
.btn-gold,.login button[name="login"] {border:1px solid var(--action);border-radius:11px;padding:12px 18px;font-size:1rem;line-height:1.5;font-weight:700;background:var(--action);color:var(--action-ink);min-height:48px}
.btn-ghost {border:1px solid var(--control-line);border-radius:10px;background:var(--panel-2);color:var(--ink);padding:10px 14px;font-size:.875rem;line-height:1.5;font-weight:700}
.btn-ghost.on {color:var(--action);border-color:var(--action);background:var(--active-soft)}
#newProd {width:100%;min-width:0;font-size:1rem}
#entryForm>.btn-gold {width:100%}
/* Tables : le débordement reste dans leur cadre, y compris les réglages. */
.tbl-wrap,.settings-scroll {max-width:100%;overflow:auto;overscroll-behavior-x:contain;scrollbar-color:var(--muted) var(--panel);scrollbar-width:thin;border-radius:10px}
table {width:100%;min-width:820px;border-collapse:collapse;font-size:1rem;font-variant-numeric:tabular-nums}
th,td {padding:14px 16px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
th {background:var(--field);color:var(--muted);font-size:.75rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase;line-height:1.6}
th:nth-child(-n+3),td:nth-child(-n+3) {text-align:left}
.page-agences th:nth-child(4),.page-agences td:nth-child(4) {text-align:left}
tbody tr:last-child td {border-bottom:0}
#adsTbl td.adname {white-space:normal;min-width:240px;max-width:320px}
#adsTbl tr.best td {background:var(--good-soft)}
#adsTbl tr.best td:first-child {box-shadow:inset 3px 0 var(--good)}
td .pubedit {border:1px dashed var(--control-line);border-radius:8px;background:var(--clear);color:var(--ink);padding:8px 10px;font:inherit}
td .del {min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--panel-2);color:var(--bad);font-size:1rem}
td a {display:inline-flex;min-height:44px;align-items:center}
.tag {display:inline-block;border:1px solid var(--line);border-radius:6px;background:var(--panel-2);padding:3px 8px;font-size:.8125rem}
.pill {display:inline-block;border-radius:8px;padding:5px 10px;font-size:1rem;font-weight:700}
.p-ok {background:var(--good-soft);color:var(--good)}
.p-ko {background:var(--bad-soft);color:var(--bad)}
.p-wait {background:var(--wait-soft);color:var(--wait)}
.empty {padding:32px 16px;text-align:center;color:var(--muted);font-size:1rem;white-space:normal}
details.reglages summary {display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;font-family:"Space Grotesk",sans-serif;font-size:1rem;font-weight:600;color:var(--ink)}
details.reglages summary::-webkit-details-marker {display:none}
details.reglages summary::after {content:"+";color:var(--action);font:400 26px "Inter",sans-serif}
details.reglages[open] summary::after {content:"−"}
.settings-scroll {margin-top:16px;padding:4px 4px 12px}
.prod-row,.cfg-row {display:grid;gap:10px;align-items:center;margin-top:10px}
.prod-row {grid-template-columns:1.5fr repeat(4,1fr) 48px;min-width:780px}
.cfg-row {grid-template-columns:1.6fr repeat(3,1fr) 48px;min-width:620px}
.prod-head,.cfg-head {color:var(--muted);font-size:.8125rem;font-weight:600}
.stock {display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;align-items:center;margin-bottom:22px}
.stock:last-child {margin-bottom:0}
.stock .n {font-size:1rem;font-weight:600;overflow-wrap:anywhere}
.stock .q {font-family:"Space Grotesk",sans-serif;font-size:1.25rem;font-weight:600;letter-spacing:-.03em}
.stock .bartrack,.stock .s {grid-column:1/-1}
.stock .s {color:var(--muted);font-size:.875rem}
.wrap>p a {display:inline-flex;align-items:center;min-height:44px}
.credit {text-align:center;color:var(--faint);font-size:.8125rem;line-height:1.7;margin:28px 0 0}
/* Commandes : lecture du haut vers le bas, actions principales en première ligne. */
#cmdCard {padding:0;border:0;background:var(--clear);box-shadow:none}
.agtabs {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px}
.agtabs button {position:relative;min-width:0;border:1px solid var(--line);border-radius:14px;padding:14px 12px;background:var(--panel);color:var(--ink);text-align:left;font-size:1rem;font-weight:700;line-height:1.55}
.agtabs button b {display:block;font-family:"Space Grotesk",sans-serif;font-size:1.75rem;line-height:1.25;letter-spacing:-.04em;margin-bottom:6px}
.agtabs button span {display:block;color:var(--muted);font-size:.8125rem;font-weight:500;margin-top:4px}
.agtabs button br {display:none}
.agtabs button.on {background:var(--active-soft);border-color:var(--action);box-shadow:inset 0 2px var(--action)}
.agtabs button.on b {color:var(--action)}
.agtabs button.alerte b {color:var(--warning)}
.ftabs {display:flex;gap:8px;overflow:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--muted) var(--clear);margin-bottom:14px;padding:4px 4px 10px;max-width:100%}
.ftabs button {flex:0 0 auto;display:flex;align-items:center;gap:8px;white-space:nowrap;border:1px solid var(--line);border-radius:99px;background:var(--panel);color:var(--muted);padding:9px 14px;font-size:.875rem;font-weight:600}
.ftabs b {min-width:24px;padding:1px 6px;border-radius:6px;background:var(--count-bg);font-variant-numeric:tabular-nums;text-align:center}
.ftabs button.on {border-color:var(--action);background:var(--action);color:var(--action-ink)}
.ftabs button.on b {background:var(--count-bg)}
.search {margin-bottom:20px;min-height:52px;background:var(--panel);padding-inline:16px}
#orders {display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-height:none;overflow:visible;padding:0}
.cmd {display:flex;flex-direction:column;gap:10px;min-width:0;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--c,var(--line));border-radius:16px;padding:16px 14px;box-shadow:var(--shadow)}
.cmd .top {display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cmd .nm {font-family:"Space Grotesk",sans-serif;font-size:1.125rem;font-weight:600;letter-spacing:-.025em;overflow-wrap:anywhere}
.cmd .dt {color:var(--faint);font-size:.8125rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.cmd .ln {color:var(--muted);font-size:1rem;line-height:1.65;overflow-wrap:anywhere}
.cmd .top+.ln {color:var(--ink);font-weight:500}
.cmd .st {display:inline-block;border-radius:8px;padding:5px 10px;font-size:1rem;font-weight:700;line-height:1.5;background:color-mix(in srgb,var(--c) var(--status-bg-weight),var(--panel));color:color-mix(in srgb,var(--c) var(--status-ink-weight),var(--ink));border:1px solid color-mix(in srgb,var(--c) var(--status-ink-weight),var(--ink))}
.route {display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px 6px;max-width:100%;border-radius:10px;padding:0 8px;border:1px solid var(--line);background:var(--field);font-size:1rem;line-height:1.5;font-weight:600;overflow-wrap:anywhere}
.route.yaounde {color:var(--ink)}
.route.douala {color:var(--wait)}
.route.attribuer {color:var(--warning);border-color:var(--warning)}
.route a {display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:62px;color:var(--muted);font-weight:600;cursor:pointer;text-decoration:underline}
.cmd .acts {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:auto;padding-top:10px}
.cmd .acts a,.cmd .acts button {display:flex;align-items:center;justify-content:center;min-width:0;min-height:48px;border:1px solid var(--control-line);border-radius:10px;padding:10px 4px;background:var(--field);color:var(--ink);font-size:1rem;line-height:1.5;font-weight:700;text-decoration:none}
.cmd .acts .call {background:var(--action);border-color:var(--action);color:var(--action-ink);min-height:52px}
.cmd .acts .wa {background:var(--good-soft);border-color:var(--good);color:var(--good);min-height:52px}
.cmd .acts .stb {color:var(--action)}
.cmd .acts .agb {color:var(--wait)}
#more .btn-ghost {width:100%;min-height:48px}
/* Fenêtres : feuilles basses mobiles et panneaux centrés sur ordinateur. */
.modal {position:fixed;inset:0;z-index:10;display:none;align-items:flex-end;justify-content:center;background:var(--overlay);padding:24px 0 0}
.modal.show {display:flex}
body:has(.modal.show) {overflow:hidden}
.mbox {width:100%;max-width:560px;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;background:var(--panel);border:1px solid var(--control-line);border-bottom:0;border-radius:24px 24px 0 0;padding:12px 16px calc(24px + env(safe-area-inset-bottom));box-shadow:0 -20px 80px var(--shadow-color);scroll-padding:20px}
.mbox::before {content:"";display:block;width:40px;height:4px;border-radius:99px;background:var(--control-line);margin:0 auto 20px}
.mbox h3 {font-family:"Space Grotesk",sans-serif;font-size:1.125rem;line-height:1.5;letter-spacing:-.025em;margin:0 0 20px}
.mbox .form-grid {grid-template-columns:minmax(0,1fr)!important}
.mbox .btn-gold,.mbox .btn-ghost {min-height:48px}
.villes {display:grid;gap:12px}
.villes button {display:flex;flex-direction:column;gap:5px;align-items:flex-start;border:1px solid var(--control-line);border-radius:12px;padding:16px;background:var(--panel-2);color:var(--ink);text-align:left}
.villes button b {font-size:1rem}
.villes button span {color:var(--muted);font-size:.875rem}
.villes button.hint {border-color:var(--action);box-shadow:inset 3px 0 var(--action)}
.preview {max-height:220px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--field);border:1px solid var(--line);border-radius:12px;padding:16px;margin:0;font:1rem/1.65 "Inter",sans-serif;color:var(--ink)}
.stgrid {display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.stgrid button {border:1px solid var(--control-line);border-radius:10px;padding:12px;background:var(--panel-2);color:var(--ink);font-size:1rem;font-weight:600;text-align:left;min-height:48px}
.stgrid button.on {border-color:var(--action);background:var(--active-soft);color:var(--action);box-shadow:inset 3px 0 var(--action)}
#toast {position:fixed;z-index:20;left:50%;bottom:calc(88px + env(safe-area-inset-bottom));transform:translateX(-50%);display:none;max-width:calc(100vw - 32px);width:max-content;padding:14px 18px;border:1px solid var(--action);border-radius:12px;background:var(--panel-2);color:var(--ink);font-weight:600;box-shadow:var(--shadow)}
/* Accès : cette règle reste prioritaire sur toutes les mises en page. */
body.closeuse .fin {display:none!important}
/* L'authentification des trois pages converge toujours vers index.php. */
.login {width:calc(100% - 32px);max-width:420px;margin:clamp(48px,12vh,140px) auto;padding:28px 24px;background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--line);border-radius:22px;box-shadow:var(--shadow)}
.login .logo {width:60px;height:60px;margin:0 auto 24px;font-size:30px}
.login h1 {font-family:"Space Grotesk",sans-serif;text-align:center;font-size:1.375rem;letter-spacing:-.04em;line-height:1.5;margin:0 0 8px}
.login p {color:var(--muted);text-align:center;margin:0 0 28px}
.login input {margin-bottom:16px;min-height:52px}
.login button[name="login"] {width:100%;min-height:52px;margin-top:4px}
.login .err {background:var(--bad-soft);color:var(--bad);border-radius:10px;padding:12px;margin-bottom:16px;text-align:center}
@media (min-width:600px) {
  .brand {flex:1 1 320px}
  .brand h1 {font-size:1.375rem}
  .periods {grid-template-columns:repeat(4,minmax(0,1fr))}
  .form-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .agtabs {grid-template-columns:repeat(4,minmax(0,1fr))}
  #orders {grid-template-columns:repeat(2,minmax(0,1fr))}
  .modal {align-items:center;padding:24px}
  .mbox {border:1px solid var(--control-line);border-radius:22px;padding:24px;max-height:calc(100dvh - 48px)}
  .mbox::before {display:none}
  .mbox .form-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stgrid {grid-template-columns:repeat(2,minmax(0,1fr))}
  #entryForm>.btn-gold {width:auto}
  .card {padding:24px}
}
@media (min-width:960px) {
  .wrap {padding:32px 32px 56px}
  header.top {gap:12px;margin-bottom:28px;padding-bottom:24px}
  .brand {flex:1 1 300px}
  nav.app {position:static;flex:0 0 auto;padding:4px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:none}
  nav.app a {padding:8px 14px;min-height:44px}
  .periods {flex:0 1 auto;margin-left:auto;grid-template-columns:repeat(4,auto)}
  .periods button {padding-inline:18px}
  .kpis {grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .kpi {padding:20px}
  .kpi.hero {grid-column:span 2}
  .page-cockpit #kpis {grid-template-columns:repeat(4,minmax(0,1fr))}
  .page-cockpit #kpis .hero {grid-row:span 2;display:flex;flex-direction:column;justify-content:center}
  .page-cockpit #kpis>.kpi:last-child {grid-column:span 2}
  .page-cockpit #kpis .hero .v {font-size:3rem}
  .row2 {grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid {grid-template-columns:repeat(4,minmax(0,1fr))}
  .agtabs {gap:16px}
  .agtabs button {padding:18px 20px}
  .agtabs button b {float:right;margin:0 0 0 12px;font-size:2rem}
  .ftabs {flex-wrap:wrap;overflow:visible}
  #orders {grid-template-columns:repeat(3,minmax(0,1fr))}
  .cmd {padding:20px 16px}
  #more .btn-ghost {width:auto;padding-inline:32px}
  #toast {bottom:24px}
}
@media (hover:hover) {
  button:not(:disabled):hover,.iconbtn:hover,nav.app a:not(.on):hover {border-color:var(--control-line)}
  .cmd .acts a:hover {text-decoration:underline;text-underline-offset:4px}
  tbody tr:hover td {background:var(--panel-2)}
}
@media (prefers-reduced-motion:no-preference) {
  button,a,input,select {transition:background-color .15s,border-color .15s}
  .modal.show .mbox {animation:sheet-in .16s ease-out}
  @keyframes sheet-in {from {opacity:.5;transform:translateY(12px)} to {opacity:1;transform:translateY(0)}}
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Ajustements terrain : cibles, densité, chiffres et couches de navigation. */
.brand-name {display:block;font:700 1rem/1.4 "Space Grotesk",sans-serif;letter-spacing:-.025em;margin-bottom:3px}
.brand-by {color:var(--muted);font:500 .8125rem/1.5 "Inter",sans-serif;letter-spacing:0}
.brand h1+.brand-by {display:block;margin-top:2px}
.logo svg {display:block}
.theme-btn {flex:0 0 44px;font-size:1.125rem;color:var(--ink)}
.login {position:relative}
.login .theme-btn {position:absolute;right:12px;top:12px;width:44px;height:44px;padding:8px;background:var(--panel);border:1px solid var(--line)}
.login>.brand-by {display:block;text-align:center;margin-bottom:8px}
a {min-width:44px;min-height:44px}
button {min-width:44px}
.cmd .acts .call {order:-2}
.cmd .acts .wa {order:-1}
.cmd .acts .stb {color:var(--ink)}
.cmd .ln b {color:var(--ink);font-variant-numeric:tabular-nums}
.stock:has(.q.neg) {--bad:var(--warning)}
/* Les alertes de perte du Cockpit partagent .warn avec le taux faible : rouge conservateur. */
.page-cockpit #alerts .alert.warn {background:var(--bad-soft);color:var(--bad);border-color:var(--bad)}
.alert:has(#estimDla) {background:var(--warning-soft);color:var(--warning);border-color:var(--warning)}
#autoInfo {background:var(--wait-soft);color:var(--wait);border-color:var(--wait)}
/* Sélection d’annulation / échec : rouge, sans modifier les couleurs --c des cartes. */
.stgrid [data-k="annule"],.stgrid [data-k="non_livre"] {color:var(--bad)}
.stgrid [data-k="annule"].on,.stgrid [data-k="non_livre"].on {background:var(--bad-soft);border-color:var(--bad);box-shadow:inset 3px 0 var(--bad)}
.tbl-wrap {max-height:560px;isolation:isolate}
th {position:sticky;top:0;z-index:2}
tbody td {background:var(--panel)}
tbody tr:nth-child(even) td {background:var(--panel-2)}
#adsTbl th:nth-child(n+3),#adsTbl td:nth-child(n+3) {text-align:right}
.page-agences th:nth-child(5),.page-agences td:nth-child(5) {text-align:left}
#adsTbl th:first-child,#adsTbl td:first-child {position:sticky;left:0;z-index:1;white-space:normal;min-width:160px;max-width:240px;border-right:1px solid var(--line)}
#adsTbl th:first-child {z-index:3}
#adsTbl td.adname {min-width:160px;max-width:240px}
#adsTbl .best td {background:var(--good-soft)}
#adsTbl .best td:first-child {box-shadow:inset 3px 0 var(--good)}
#toast {max-height:40dvh;overflow:auto}
@media (max-width:599px) {
  .wrap {padding-top:16px}
  header.top {gap:8px;padding-bottom:12px;margin-bottom:16px}
  .brand {flex:1 1 200px;gap:10px}
  .brand h1 {font-size:1.0625rem}
  .brand p {font-size:.8125rem}
  .page-commandes header.top>.iconbtn:not(.theme-btn) {margin-top:0}
  .agtabs {gap:8px;margin-bottom:12px}
  .agtabs button {padding:9px 10px;font-size:.875rem}
  .agtabs button b {display:inline;font-size:1.25rem;margin-right:8px}
  .agtabs button span {font-size:.75rem;margin-top:2px}
  .ftabs {margin-bottom:8px;padding-bottom:6px}
  .search {margin-bottom:12px}
  .cmd .top {align-items:flex-start;flex-wrap:wrap;gap:2px 8px}
  .periods {margin-top:4px}
  .kpi.hero {padding:24px 20px}
}
@media (min-width:600px) and (max-width:959px) {
  .wrap {padding-bottom:calc(112px + env(safe-area-inset-bottom))}
}
@media (forced-colors:active) {
  .logo,.cmd,.st,button,a {border:1px solid currentColor}
}

#tbl [title="frais Douala estimés"] {color:var(--warning)}
#autoInfo.warn {background:var(--bad-soft);color:var(--bad);border-color:var(--bad)}
#adsTbl td:first-child,#adsTbl td.adname,#adsTbl td.adname * {overflow-wrap:anywhere;word-break:break-word}
/* Barre du bas à 4 onglets (admin) : tient sur un petit téléphone */
nav.app a {overflow:hidden;text-overflow:ellipsis}
@media (max-width:480px) {
  nav.app {gap:2px;padding-left:6px;padding-right:6px}
  nav.app a {font-size:.75rem;padding:8px 2px;letter-spacing:-.01em}
}
/* Barre du bas à 5 onglets (admin, avec « Page ») : emoji au-dessus du mot */
@media (max-width:480px) {
  nav.app:has(a:nth-child(5)) a {white-space:normal;text-align:center;line-height:1.15;font-size:.6875rem;padding:6px 1px;min-height:52px}
}