:root{
  --vert:#0B7A4B; --vert-fonce:#085f3a; --or:#F5A623; --or-doux:#fdf0d8;
  --corail:#FF6B4A; --rouge:#D01C1F; --encre:#15211C; --gris:#6b736f;
  --fond:#FBF7EF; --bord:#E7E0D2; --ok:#1e8e4e;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
body{font-family:"Cairo",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;background:var(--fond);color:var(--encre);line-height:1.5;font-size:16px;}
body[dir="rtl"]{font-family:"Cairo","Tahoma",system-ui,Arial,sans-serif;}
.topbar{position:sticky;top:0;z-index:10;background:var(--vert);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;box-shadow:0 2px 8px rgba(0,0,0,.12);}
.brand{color:#fff;text-decoration:none;font-weight:800;font-size:21px;display:flex;gap:8px;align-items:center;}
.brand .logo{width:26px;height:26px;flex:0 0 auto;}
.brand .bn{font-weight:800;letter-spacing:.3px;}
.brand .ba{color:var(--or);font-size:15px;font-weight:700;}
.langsw{display:flex;gap:2px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);border-radius:22px;padding:3px;}
.langopt{background:transparent;color:#dcefe1;border:none;border-radius:18px;padding:5px 12px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;}
.langopt.on{background:var(--or);color:var(--vert-fonce);}
main{max-width:680px;margin:0 auto;padding:16px 16px 40px;}
.loader{text-align:center;color:var(--gris);padding:40px;font-size:24px;}
h1{font-size:23px;margin:6px 0 4px;}
h2{font-size:18px;color:var(--vert);margin:22px 0 8px;}
.muted{color:var(--gris);font-size:14px;}
.hero{background:linear-gradient(135deg,var(--vert),#0a7d44);color:#fff;border-radius:14px;padding:22px;margin-bottom:18px;}
.hero h1{color:#fff;font-size:24px;margin:0 0 6px;}
.hero p{margin:0;color:#dcefe1;font-size:15px;}
.card{background:#fff;border:1px solid var(--bord);border-radius:12px;padding:16px;margin:12px 0;box-shadow:0 1px 4px rgba(0,0,0,.04);}
label{display:block;font-size:13px;font-weight:600;color:var(--vert-fonce);margin:10px 0 4px;}
input,textarea{width:100%;padding:11px 12px;border:1px solid var(--bord);border-radius:9px;font-size:16px;font-family:inherit;background:#fff;}
input:focus,textarea:focus{outline:none;border-color:var(--vert);}
textarea{min-height:64px;resize:vertical;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;background:var(--vert);color:#fff;border:none;border-radius:10px;padding:14px;font-size:16px;font-weight:700;margin-top:14px;cursor:pointer;}
.btn:active{transform:scale(.99);}
.btn.or{background:var(--or);color:var(--vert-fonce);}
.btn.act{background:var(--corail);color:#fff;}
.btn.ghost{background:#fff;color:var(--vert);border:1.5px solid var(--vert);}
.btn.wa{background:#25D366;color:#fff;}
.btn.sm{width:auto;padding:8px 14px;font-size:14px;margin:0;}
.btn.danger{background:#fff;color:var(--rouge);border:1.5px solid var(--rouge);}
.row{display:flex;gap:10px;flex-wrap:wrap;}
.row>*{flex:1;}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.prod{background:#fff;border:1px solid var(--bord);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;}
.prod .ph{aspect-ratio:1/1;background:var(--or-doux);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.prod .ph img{width:100%;height:100%;object-fit:cover;}
.prod .ph .noimg{font-size:34px;opacity:.5;}
.prod .body{padding:10px;flex:1;display:flex;flex-direction:column;}
.prod .nm{font-weight:700;font-size:14px;}
.prod .pr{color:var(--vert);font-weight:800;margin:4px 0;}
.prod .de{font-size:12px;color:var(--gris);flex:1;}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700;}
.pill.nouvelle{background:#e7f0fb;color:#1c5fb0;}
.pill.payee{background:#fff3cf;color:#8a6d00;}
.pill.livree{background:#e1f3e8;color:var(--ok);}
.order{background:#fff;border:1px solid var(--bord);border-radius:12px;padding:14px;margin:10px 0;}
.order .top{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.order .it{font-size:14px;color:#333;margin:2px 0;}
.tot{font-weight:800;color:var(--vert);margin-top:6px;}
.tabs{display:flex;gap:8px;margin:10px 0;}
.tabs button{flex:1;background:#fff;border:1px solid var(--bord);border-radius:10px;padding:10px;font-weight:700;color:var(--gris);}
.tabs button.on{background:var(--vert);color:#fff;border-color:var(--vert);}
.banner{background:var(--or-doux);border:1px solid var(--or);border-radius:10px;padding:12px;margin:12px 0;font-size:14px;}
.banner code{background:#fff;padding:2px 6px;border-radius:5px;font-size:13px;word-break:break-all;}
.cartbar{position:sticky;bottom:0;background:#fff;border-top:2px solid var(--vert);padding:12px 16px;margin:0 -16px -40px;display:flex;gap:10px;align-items:center;}
.cartbar .t{flex:1;font-weight:700;}
.empty{text-align:center;color:var(--gris);padding:30px 10px;}
.qty{display:flex;align-items:center;gap:8px;}
.qty button{width:32px;height:32px;border-radius:8px;border:1px solid var(--bord);background:#fff;font-size:18px;font-weight:700;}
.foot{text-align:center;color:var(--gris);font-size:12px;padding:18px;}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--vert-fonce);color:#fff;padding:12px 18px;border-radius:24px;font-size:14px;box-shadow:0 4px 16px rgba(0,0,0,.25);z-index:50;}
a.inline{color:var(--vert);}
.vbadge{display:inline-block;background:#e1f3e8;color:var(--ok);border:1px solid #b6e3c6;border-radius:20px;padding:2px 10px;font-size:12px;font-weight:700;vertical-align:middle;margin-inline-start:8px;white-space:nowrap;}
.hero .vbadge{background:rgba(255,255,255,.18);color:#fff;border-color:rgba(255,255,255,.55);}
.qrbox{display:flex;justify-content:center;padding:8px 0;}
.qrbox img{width:200px;height:200px;background:#fff;border:1px solid var(--bord);border-radius:10px;padding:6px;image-rendering:pixelated;}