/* EcomPilot — base commune (jetons, polices, composants partagés). Grille 8 px. */
@font-face{font-family:"Clash Display";src:url(../fonts/ClashDisplay-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Clash Display";src:url(../fonts/ClashDisplay-Semibold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Satoshi";src:url(../fonts/Satoshi-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Satoshi";src:url(../fonts/Satoshi-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Satoshi";src:url(../fonts/Satoshi-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/JetBrainsMono-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/JetBrainsMono-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../fonts/JetBrainsMono-Bold.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  /* Palette « Latérite & Fleuve » */
  --fleuve:#0F3D3A; --fleuve-900:#0A2725; --fleuve-700:#14524D; --fleuve-100:#DCE8E4;
  --laterite:#C8553D; --laterite-ink:#A9432C; --laterite-btn:#B04A31; --laterite-100:#F6DDD3;
  --sable:#F4EDE1; --sable-200:#EBE1D0; --sable-300:#DDD0BA;
  --encre:#1B1B1B; --gris:#5E5A52; --blanc:#FFFFFF;
  --momo:#FFCB05;            /* RÉSERVÉ aux paiements MoMo */
  --airtel:#E40000;          /* repère Airtel Money (pastille seulement) */
  --ok:#1E7A4F; --ok-bg:#DDF0E5; --wait:#8A5A00; --wait-bg:#FFF4D1; --route:#1E6B8A; --route-bg:#DCEBF2;
  /* Rôles (thème clair) */
  --bg:var(--sable); --surface:var(--blanc); --surface-2:#FAF6EF; --line:var(--sable-300);
  --text:var(--encre); --muted:var(--gris); --accent:var(--laterite-ink); --brand:var(--fleuve);
  /* Formes */
  --r-sm:8px; --r-md:16px; --r-lg:24px; --r-pill:999px;
  --shadow-1:0 1px 2px rgba(15,61,58,.06),0 8px 24px rgba(15,61,58,.08);
  --shadow-2:0 2px 4px rgba(15,61,58,.08),0 24px 64px rgba(15,61,58,.18);
  --f-title:"Clash Display",system-ui,sans-serif; --f-text:"Satoshi",system-ui,sans-serif; --f-num:"JetBrains Mono",ui-monospace,monospace;
}
:root[data-theme="dark"]{
  --bg:#071C1A; --surface:#0C2A27; --surface-2:#0A2422; --line:#1B403C;
  --text:#F4EDE1; --muted:#A8B8B3; --accent:#E3876F; --brand:#9FC7BF;
  --ok:#5FD39A; --ok-bg:#0F3A2A; --wait:#F2C46B; --wait-bg:#3A2E0E; --route:#7CC3E0; --route-bg:#0E3342;
  --shadow-1:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
}
*{box-sizing:border-box;margin:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-family:var(--f-text);color:var(--text);background:var(--bg);font-size:16px;line-height:1.5}
.num{font-family:var(--f-num);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Pastilles de statut */
.pill{display:inline-flex;align-items:center;gap:8px;height:24px;padding:0 10px 0 8px;border-radius:var(--r-pill);font-size:13px;font-weight:500;white-space:nowrap}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.pill.ok{color:var(--ok);background:var(--ok-bg)}
.pill.wait{color:var(--wait);background:var(--wait-bg)}
.pill.route{color:var(--route);background:var(--route-bg)}

/* Moyens de paiement */
.pay{display:inline-flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap}
.pay i{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;font:700 9px/1 var(--f-text);font-style:normal;letter-spacing:.02em}
.pay.momo i{background:var(--momo);color:#1B1B1B}
.pay.airtel i{background:var(--airtel);color:#fff}
.pay.cash i{background:var(--fleuve-100);color:var(--fleuve)}
:root[data-theme="dark"] .pay.cash i{background:#1B403C;color:#9FC7BF}

/* Motif original « tresse de pistes » (inspiré de l'esprit wax, création EcomPilot) */
.motif{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23C8553D' stroke-width='1.5'%3E%3Cpath d='M0 32a16 16 0 0 1 32 0 16 16 0 0 0 32 0'/%3E%3Cpath d='M8 32a8 8 0 0 1 16 0M40 32a8 8 0 0 0 16 0'/%3E%3Cpath d='M32 0l6 6-6 6-6-6zM32 52l6 6-6 6-6-6z'/%3E%3C/g%3E%3Ccircle cx='0' cy='0' r='3' fill='%230F3D3A'/%3E%3Ccircle cx='64' cy='0' r='3' fill='%230F3D3A'/%3E%3Ccircle cx='0' cy='64' r='3' fill='%230F3D3A'/%3E%3Ccircle cx='64' cy='64' r='3' fill='%230F3D3A'/%3E%3C/svg%3E")}
[hidden]{display:none!important}