/* LEKK — gestion de restaurant · identité : braise (piment), mangue, charbon, crème */
:root{
  --pim:#E0472B; --pim2:#C2381F; --pimL:#FDE6DF; --pimG:linear-gradient(135deg,#F0653C 0%,#E0472B 55%,#C2381F 100%);
  --man:#F5A524; --manL:#FFF1D6; --manG:linear-gradient(135deg,#FFC453,#F5A524);
  --cha:#1F1A17; --cha2:#3A322D; --cha3:#2A231F;
  --cre:#FFF8EF; --cre2:#FBF0E2; --card:#FFFFFF; --line:#EFE4D6; --line2:#E5D6C3; --mut:#7B6E64; --txt:#231C17;
  --ok:#1F9D6B; --okL:#DDF5EA; --warn:#E08A00; --bad:#D63A2E; --badL:#FDE3E0; --info:#2D6CDF; --infoL:#E3ECFD; --vio:#8E6CC9; --vioL:#EFE8FA;
  --r:18px; --r2:24px;
  --sh:0 1px 2px rgba(60,30,10,.05),0 8px 24px -8px rgba(60,30,10,.12);
  --sh2:0 2px 4px rgba(60,30,10,.06),0 18px 40px -12px rgba(60,30,10,.25);
  --font:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --disp:'Bricolage Grotesque','Nunito',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:var(--font);background:var(--cre);color:var(--txt);font-size:15px;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--pim2)}
.hidden{display:none!important}
h1,h2,h3{margin:0 0 8px;line-height:1.15;font-family:var(--disp);letter-spacing:-.01em}
h1{font-size:1.6rem;font-weight:800}
h2{font-size:1.22rem;font-weight:800}
h3{font-size:1.02rem;font-weight:700}
small,.mut{color:var(--mut)}
.num{font-variant-numeric:tabular-nums}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(224,71,43,.45)}70%{box-shadow:0 0 0 14px rgba(224,71,43,0)}100%{box-shadow:0 0 0 0 rgba(224,71,43,0)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(6deg)}}
@keyframes blink{50%{opacity:.35}}
@keyframes spin{to{transform:rotate(360deg)}}
.rise{animation:rise .35s ease both}
.blink{animation:blink 1s infinite}

/* ---------- Boutons, champs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:0 17px;border-radius:999px;border:1px solid var(--line2);background:#fff;font-weight:800;cursor:pointer;white-space:nowrap;text-decoration:none;color:var(--txt);transition:transform .12s,box-shadow .2s,background .2s,border-color .2s}
.btn:hover{border-color:#d8c4ad;box-shadow:0 4px 14px -6px rgba(60,30,10,.25)}
.btn:active{transform:scale(.96)}
.btn.p{background:var(--pimG);border-color:transparent;color:#fff;box-shadow:0 8px 20px -8px rgba(224,71,43,.7)}
.btn.p:hover{filter:brightness(1.05)}
.btn.ok{background:var(--ok);border-color:var(--ok);color:#fff}
.btn.dk{background:var(--cha);border-color:var(--cha);color:#fff}
.btn.man{background:var(--manG);border-color:transparent;color:#2a1a00}
.btn.wave{background:#1DC8F2;border-color:#1DC8F2;color:#fff}
.btn.om{background:#FF7900;border-color:#FF7900;color:#fff}
.btn.bad{color:var(--bad);border-color:#f3c5c0}
.btn.ghost{background:transparent;border-color:transparent}
.btn.sm{min-height:34px;padding:0 13px;font-size:13px}
.btn.lg{min-height:56px;font-size:17px;padding:0 24px}
.btn.blk{width:100%}
.btn:disabled{opacity:.5;cursor:default;box-shadow:none}
.ic{width:20px;height:20px;flex:none}
label.f{display:block;font-size:13px;font-weight:800;color:var(--mut);margin:12px 0 5px}
.in,select.in,textarea.in{width:100%;min-height:46px;border:1.5px solid var(--line);background:#fff;border-radius:14px;padding:8px 13px;font-size:16px;outline:none;transition:border-color .15s,box-shadow .15s}
.in:focus{border-color:var(--pim);box-shadow:0 0 0 4px var(--pimL)}
textarea.in{min-height:72px;resize:vertical}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row>.grow,.li>.grow{flex:1;min-width:0}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.chk{display:flex;gap:10px;align-items:center;margin:10px 0;cursor:pointer;font-weight:700}
.chk input{width:22px;height:22px;accent-color:var(--pim);flex:none}
.seg{display:flex;background:var(--cre2);border-radius:999px;padding:4px;gap:4px;flex-wrap:wrap}
.seg button{flex:1;border:none;background:transparent;border-radius:999px;min-height:40px;padding:0 12px;font-weight:800;cursor:pointer;color:var(--cha2);transition:background .2s,color .2s}
.seg button.on{background:#fff;color:var(--pim2);box-shadow:0 4px 12px -4px rgba(60,30,10,.25)}

/* ---------- Cartes, pastilles ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r2);padding:18px;box-shadow:var(--sh)}
.card.hov{transition:transform .15s,box-shadow .2s;cursor:pointer}
.card.hov:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.pill{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800;background:var(--cre2);color:var(--cha2);white-space:nowrap}
.pill.ok{background:var(--okL);color:var(--ok)}
.pill.bad{background:var(--badL);color:var(--bad)}
.pill.man{background:var(--manL);color:#9a5b00}
.pill.pim{background:var(--pimL);color:var(--pim2)}
.pill.info{background:var(--infoL);color:var(--info)}
.pill.vio{background:var(--vioL);color:var(--vio)}
.pill.dk{background:var(--cha);color:#fff}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;margin-bottom:16px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:16px;box-shadow:var(--sh);position:relative;overflow:hidden}
.kpi .bub{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;margin-bottom:10px;background:var(--cre2)}
.kpi .l{font-size:12px;font-weight:800;color:var(--mut);text-transform:uppercase;letter-spacing:.05em}
.kpi .v{font-size:1.55rem;font-weight:800;margin-top:4px;font-family:var(--disp);letter-spacing:-.02em}
.kpi .s{font-size:12px;color:var(--mut);margin-top:3px;line-height:1.35}
.kpi.hot{background:var(--pimG);color:#fff;border:none;box-shadow:0 14px 30px -12px rgba(224,71,43,.6)}
.kpi.hot .l,.kpi.hot .s{color:rgba(255,255,255,.85)}
.kpi.hot .bub{background:rgba(255,255,255,.2)}
.note{padding:12px 15px;border-radius:16px;background:var(--manL);border:1px solid #F7D9A0;margin:10px 0;line-height:1.45}
.note.bad{background:var(--badL);border-color:#F3C5C0}
.note.ok{background:var(--okL);border-color:#BDE8D3}
.note.info{background:var(--infoL);border-color:#C6D7FA}
.empty{text-align:center;color:var(--mut);padding:34px 10px}
.empty .big{font-size:44px;display:block;margin-bottom:6px}
table.t{width:100%;border-collapse:collapse;background:#fff}
table.t th,table.t td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
table.t tr:last-child td{border-bottom:none}
table.t th{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);background:#FCF6EE;font-weight:800}
table.t td.r,table.t th.r{text-align:right}
table.t tbody tr:hover,table.t tr:hover td{background:#FFFBF6}
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);background:#fff}
.list>*+*{border-top:1px solid var(--line)}
.li{display:flex;gap:10px;align-items:center;padding:11px 0}
.av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;flex:none;font-family:var(--disp)}
.av.patron{background:var(--pimG)}.av.caisse{background:linear-gradient(135deg,#4F8BF0,#2D6CDF)}.av.cuisine{background:var(--manG);color:#2a1a00}.av.livreur{background:linear-gradient(135deg,#34C38F,#1F9D6B)}

/* ---------- Écran d'accueil et connexion ---------- */
#splash{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 35%,#3b2a20,var(--cha) 60%);color:#fff;z-index:50}
#splash svg{animation:pop 1.4s ease infinite}
#splash .brand{font-size:2.4rem;font-weight:800;letter-spacing:.12em;margin-top:14px;font-family:var(--disp)}
#login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr;background:var(--cre)}
.lg-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 15% 15%,#4a3123 0,var(--cha) 58%);color:#fff;padding:48px;display:flex;flex-direction:column;justify-content:space-between}
.lg-hero::after{content:'';position:absolute;right:-120px;bottom:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(224,71,43,.55),transparent 70%)}
.lg-hero .food{position:absolute;font-size:46px;animation:float 6s ease-in-out infinite;opacity:.9;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35))}
.lg-hero h1{font-size:clamp(2rem,4vw,3.2rem);line-height:1.05;margin:0;position:relative;z-index:1}
.lg-hero h1 em{font-style:normal;background:var(--manG);-webkit-background-clip:text;background-clip:text;color:transparent}
.lg-hero p{color:#e3d4c6;max-width:420px;font-size:1.05rem;line-height:1.5;position:relative;z-index:1}
.lg-hero .feat{display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:1}
.lg-hero .feat span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);padding:7px 12px;border-radius:999px;font-weight:700;font-size:13px}
.lg-side{display:flex;align-items:center;justify-content:center;padding:28px}
.lgbox{width:100%;max-width:440px;animation:rise .4s ease both}
.lgbox .who{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:16px}
.lgbox .who button{border:1.5px solid var(--line);background:#fff;border-radius:20px;padding:16px 10px;cursor:pointer;text-align:center;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:var(--sh);transition:transform .15s,border-color .15s}
.lgbox .who button:hover{border-color:var(--pim);transform:translateY(-3px)}
.lgbox .who .av{width:52px;height:52px;font-size:20px}
.lgbox .who small{font-weight:700}
.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.pinpad button{min-height:64px;border-radius:20px;border:1.5px solid var(--line);background:#fff;font-size:26px;font-weight:800;cursor:pointer;font-family:var(--disp);box-shadow:var(--sh);transition:transform .1s,background .15s}
.pinpad button:active{background:var(--pimL);transform:scale(.95)}
.dots{display:flex;gap:14px;justify-content:center;margin:18px 0 4px}
.dots i{width:17px;height:17px;border-radius:50%;border:2.5px solid var(--pim);display:block;transition:background .15s,transform .15s}
.dots i.on{background:var(--pim);transform:scale(1.1)}
.dots.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.logo-row{display:flex;align-items:center;gap:12px}
.logo-row .nm{font-weight:800;font-size:1.3rem;font-family:var(--disp)}
.logo-row img{width:52px;height:52px;border-radius:14px;object-fit:cover}

/* ---------- Mise en page ---------- */
#app{display:flex;min-height:100vh}
#side{width:248px;flex:none;background:linear-gradient(180deg,#241D19,#1A1512);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
#side .hd{padding:20px 16px 16px;display:flex;align-items:center;gap:11px}
#side .hd b{display:block;font-size:15.5px;line-height:1.2;font-family:var(--disp)}
#side .hd small{color:#b9a999;font-size:12px}
#side nav{padding:4px 10px;flex:1}
#side .sec{font-size:10.5px;font-weight:900;letter-spacing:.12em;color:#8d7d70;padding:14px 12px 6px}
#side nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:14px;color:#e2d6cb;text-decoration:none;font-weight:700;cursor:pointer;position:relative;margin-bottom:2px;transition:background .15s}
#side nav a:hover{background:rgba(255,255,255,.06)}
#side nav a.on{background:var(--pimG);color:#fff;box-shadow:0 8px 18px -8px rgba(224,71,43,.8)}
#side nav a .bd{margin-left:auto}
#side .ft{padding:14px;margin:10px;border-radius:18px;background:rgba(255,255,255,.05);display:flex;align-items:center;gap:10px}
#side .ft b{display:block;font-size:14px}
#side .ft button{background:none;border:none;color:#cdbfb3;font-weight:700;cursor:pointer;padding:0;font-size:12.5px;text-decoration:underline}
.bd{min-width:20px;height:20px;border-radius:10px;background:var(--man);color:#2a1a00;font-size:11.5px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
#main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;gap:12px;padding:14px 26px;border-bottom:1px solid var(--line);background:rgba(255,248,239,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);position:sticky;top:0;z-index:5}
.top .tt{flex:1;min-width:0}
.top h1{margin:0;font-size:1.35rem}
#topx{flex-wrap:nowrap}
#topx .in{min-height:36px;padding:4px 10px;font-size:14px}
.top .sub{font-size:12.5px;color:var(--mut);font-weight:700;text-transform:capitalize}
.net{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px;background:var(--okL);color:var(--ok)}
.net i{width:8px;height:8px;border-radius:50%;background:currentColor}
.net.off{background:var(--badL);color:var(--bad)}
.net.off i{animation:blink 1s infinite}
.tbtn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative;color:var(--cha2)}
.tbtn.on{background:var(--okL);border-color:#BDE8D3;color:var(--ok)}
#view{padding:22px 26px 110px;max-width:1440px;width:100%;animation:rise .3s ease both}
#tabs{display:none}

/* ---------- Bandeau du patron ---------- */
.hero{background:radial-gradient(circle at 85% 20%,rgba(245,165,36,.35),transparent 45%),var(--pimG);color:#fff;border-radius:28px;padding:24px 26px;margin-bottom:16px;display:grid;grid-template-columns:1.3fr 1fr;gap:20px;box-shadow:0 20px 40px -18px rgba(224,71,43,.7);position:relative;overflow:hidden}
.hero h1{font-size:1.5rem;margin:0 0 4px}
.hero .ca{font-family:var(--disp);font-size:clamp(2.2rem,4vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.hero small,.hero .mut{color:rgba(255,255,255,.85)}
.hero .mini{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:center}
.hero .mini div{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:10px 12px}
.hero .mini b{display:block;font-size:1.15rem;font-family:var(--disp)}

/* ---------- Caisse ---------- */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 390px;gap:18px;align-items:start}
.pos>*,.g2>*,.g3>*,.board>*{min-width:0}
.search{position:relative;margin-bottom:12px}
.search input{padding-left:42px}
.search .ic{position:absolute;left:14px;top:13px;color:var(--mut)}
.cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:8px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cats button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 16px;font-weight:800;cursor:pointer;white-space:nowrap;transition:all .15s}
.cats button.on{background:var(--cha);color:#fff;border-color:var(--cha)}
.dishes{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.dish{background:#fff;border:1.5px solid var(--line);border-radius:20px;padding:10px;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:6px;position:relative;box-shadow:var(--sh);transition:transform .12s,border-color .15s,box-shadow .2s}
.dish:hover{border-color:var(--pim);transform:translateY(-2px);box-shadow:var(--sh2)}
.dish:active{transform:scale(.97)}
.dish.off{opacity:.45;filter:grayscale(.6)}
.dish.in{border-color:var(--pim)}
.dish .ph{height:92px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:46px;overflow:hidden;background:var(--tint,linear-gradient(135deg,var(--manL),var(--pimL)))}
.dish .ph img{width:100%;height:100%;object-fit:cover}
.dish b{font-size:14px;line-height:1.2}
.dish .pr{font-weight:900;color:var(--pim2);font-size:14.5px}
.dish .tag{position:absolute;top:8px;left:8px;z-index:1}
.dish .qb{position:absolute;top:-8px;right:-8px;min-width:30px;height:30px;border-radius:15px;background:var(--pimG);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 7px;box-shadow:0 6px 14px -4px rgba(224,71,43,.8);animation:pop .3s;font-size:13px}
.cart{position:sticky;top:84px;background:var(--cha);color:#fff;border-radius:var(--r2);padding:18px;box-shadow:var(--sh2)}
.cart h2{color:#fff}
.cart .lines{max-height:44vh;overflow-y:auto;margin:10px 0}
.cart .empty{color:#a8998c}
.cl{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px dashed rgba(255,255,255,.14)}
.cl .nm{flex:1;min-width:0;font-weight:700;line-height:1.2}
.cl .nm small{display:block;font-weight:600;color:#b9a999}
.qty{display:flex;align-items:center;gap:4px}
.qty button{width:30px;height:30px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-weight:900;cursor:pointer}
.qty span{min-width:30px;text-align:center;font-weight:900}
.cart .btn.sm{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#fff}
.tot{display:flex;justify-content:space-between;align-items:baseline;font-size:1.35rem;font-weight:900;padding:12px 0;font-family:var(--disp)}
.cart .tot{border-top:1px solid rgba(255,255,255,.14);margin-top:4px}
.cart .tot span:last-child{font-size:1.7rem}

/* ---------- Commandes ---------- */
.board{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:14px;align-items:start}
.col{background:var(--cre2);border-radius:var(--r2);padding:12px;min-height:200px}
.col h3{display:flex;align-items:center;gap:8px;margin:2px 4px 12px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--cha2);font-family:var(--font);font-weight:900}
.col h3 .dot{width:10px;height:10px;border-radius:50%}
.oc{background:#fff;border:1px solid var(--line);border-radius:18px;padding:13px;margin-bottom:10px;cursor:pointer;box-shadow:var(--sh);position:relative;overflow:hidden;transition:transform .12s,box-shadow .2s;animation:rise .3s ease both}
.oc::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--line)}
.oc:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.oc.st-nouvelle::before{background:var(--info)}.oc.st-planifiee::before{background:var(--vio)}.oc.st-cuisine::before{background:var(--man)}.oc.st-prete::before{background:var(--ok)}.oc.st-en_route::before{background:var(--pim)}.oc.st-livree::before{background:#bbb}
.oc.st-nouvelle{animation:rise .3s ease both,pulse 2s infinite}
.oc .hd{display:flex;align-items:center;gap:6px;margin-bottom:5px;flex-wrap:wrap}
.oc .n{font-weight:800;font-size:1.15rem;font-family:var(--disp)}
.oc .it{font-size:13px;color:var(--cha2);line-height:1.4}
.oc .ft{display:flex;align-items:center;gap:6px;margin-top:9px;flex-wrap:wrap}

/* ---------- Tables ---------- */
.tables{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.tb{background:#fff;border:2px solid var(--line);border-radius:24px;padding:16px;cursor:pointer;min-height:128px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--sh);transition:transform .15s;position:relative}
.tb:hover{transform:translateY(-3px)}
.tb b{font-size:1.15rem;font-family:var(--disp)}
.tb::after{content:'🍽️';position:absolute;right:14px;top:12px;font-size:20px;opacity:.35}
.tb.busy{border-color:var(--man);background:linear-gradient(160deg,#fff,var(--manL))}
.tb.ready{border-color:var(--ok);background:linear-gradient(160deg,#fff,var(--okL))}
.tb.ready::after{content:'✅';opacity:1}

/* ---------- Écran cuisine ---------- */
body.kds{background:#120F0D;color:#f3ece6}
body.kds #view{max-width:none}
body.kds .top{background:rgba(18,15,13,.9);border-color:#2b2420}
body.kds .top h1{color:#fff}
body.kds .card,body.kds .kpi{background:#1f1a17;border-color:#2f2723;color:#f3ece6}
body.kds .tbtn{background:#1f1a17;border-color:#3a302a;color:#e2d6cb}
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.kt{background:#1E1916;border:2px solid #3a302a;border-radius:22px;padding:16px;display:flex;flex-direction:column;gap:9px;animation:rise .3s ease both}
.kt .hd{display:flex;align-items:center;gap:8px}
.kt .n{font-size:2rem;font-weight:800;font-family:var(--disp)}
.kt .clock{margin-left:auto;font-size:1.6rem;font-weight:800;font-variant-numeric:tabular-nums;font-family:var(--disp)}
.kt .bar{height:6px;border-radius:3px;background:#2e2622;overflow:hidden}
.kt .bar i{display:block;height:100%;background:var(--ok);transition:width 1s linear}
.kt.mid{border-color:var(--man)}.kt.mid .bar i{background:var(--man)}
.kt.late{border-color:var(--bad);background:#2a1512;animation:rise .3s ease both,pulse 1.6s infinite}
.kt.late .clock{color:#ff7a6b}.kt.late .bar i{background:var(--bad)}
.kt.ready{border-color:var(--ok);opacity:.7}
.kt ul{margin:0;padding:0;list-style:none;font-size:1.12rem;line-height:1.55}
.kt li b{color:var(--man);margin-right:6px}
.kt li small{display:block;color:#c6b5a8;font-size:13px}
.kt .who{color:#c6b5a8;font-size:13px}

/* ---------- Fenêtre ---------- */
.modal{position:fixed;inset:0;background:rgba(20,12,6,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:30px 14px;z-index:40;overflow-y:auto;animation:fade .2s}
@keyframes fade{from{opacity:0}}
.modal .box{background:#fff;color:var(--txt);border-radius:28px;width:100%;max-width:580px;padding:22px;box-shadow:0 30px 70px rgba(0,0,0,.35);position:relative;animation:rise .25s ease both}
.modal .box.wide{max-width:880px}
.modal .box>.row:first-of-type{padding-right:44px}
.modal .x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:none;background:var(--cre2);font-size:20px;cursor:pointer}
.modal .acts{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
#toast{position:fixed;left:50%;bottom:92px;transform:translate(-50%,20px);background:var(--cha);color:#fff;padding:13px 20px;border-radius:999px;font-weight:800;z-index:60;opacity:0;pointer-events:none;transition:.25s;max-width:90vw;text-align:center;box-shadow:0 12px 30px rgba(0,0,0,.3)}
#toast.on{opacity:1;transform:translate(-50%,0)}
#toast.err{background:var(--bad)}

/* ---------- Rapport ---------- */
.bars{display:flex;align-items:flex-end;gap:8px;height:130px;padding-top:10px}
.bars div{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;height:100%;justify-content:flex-end}
.bars i{display:block;width:100%;max-width:46px;background:var(--manL);border-radius:10px 10px 4px 4px;min-height:4px;transition:height .6s ease}
.bars div.on i{background:var(--pimG)}
.bars small{font-size:11px;font-weight:700}
.meter{height:10px;background:var(--cre2);border-radius:6px;overflow:hidden}
.meter i{display:block;height:100%;background:var(--ok);border-radius:6px;transition:width .6s ease}
.meter i.w{background:var(--man)}
.meter i.b{background:var(--bad)}

/* ---------- QR à imprimer ---------- */
.qrs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.qrc{background:#fff;border:1px solid var(--line);border-radius:26px;padding:18px;text-align:center;box-shadow:var(--sh);position:relative;overflow:hidden}
.qrc::before{content:'';position:absolute;inset:0 0 auto 0;height:6px;background:var(--pimG)}
.qrc .qr{display:flex;justify-content:center;margin:12px 0;padding:10px;background:#fff;border-radius:16px;border:2px dashed var(--line)}
.qrc .qr img,.qrc .qr canvas{width:170px!important;height:170px!important}

/* ---------- Bannière notifications / hors ligne ---------- */
.banner{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px;margin-bottom:14px;background:var(--cha);color:#fff;box-shadow:var(--sh)}
.banner .grow{flex:1}
.banner.off{background:var(--bad)}

/* ---------- Téléphone ---------- */
@media (max-width:900px){
  #login{grid-template-columns:1fr}
  .lg-hero{padding:28px 22px 34px;min-height:auto}
  .lg-hero .food{font-size:32px}
  .lg-hero .feat{display:none}
  #side{display:none}
  #tabs{display:flex;position:fixed;bottom:0;left:0;right:0;background:rgba(26,21,18,.97);backdrop-filter:blur(10px);z-index:20;overflow-x:auto;padding-bottom:env(safe-area-inset-bottom);scrollbar-width:none;border-radius:22px 22px 0 0;box-shadow:0 -8px 24px rgba(0,0,0,.18)}
  #tabs::-webkit-scrollbar{display:none}
  #tabs a{flex:1 0 auto;min-width:74px;color:#cdbfb3;text-decoration:none;font-size:11px;font-weight:800;display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px 8px;position:relative}
  #tabs a.on{color:#fff}
  #tabs a.on .ic{color:var(--man)}
  #tabs a .bd{position:absolute;top:3px;right:12px;transform:scale(.85)}
  #tabs .sec{display:none}
  #view{padding:14px 14px 120px}
  .top{padding:10px 14px}
  .top h1{font-size:1.15rem}
  .top .sub,.top .net span{display:none}
  .top{flex-wrap:wrap;row-gap:8px}
  #topx{order:5;width:100%;overflow-x:auto;scrollbar-width:none}
  #topx:empty{display:none}
  #topx::-webkit-scrollbar{display:none}
  .hero{grid-template-columns:1fr;padding:20px}
  .pos{grid-template-columns:minmax(0,1fr)}
  .cart{position:static}
  .board{grid-template-columns:minmax(0,1fr)}
  .g3{grid-template-columns:1fr 1fr}
  .dishes{grid-template-columns:repeat(auto-fill,minmax(136px,1fr))}
  .dish .ph{height:76px;font-size:36px}
  .modal{padding:10px 8px}
  .modal .box{padding:18px;border-radius:24px}
}
@media (max-width:520px){.g2{grid-template-columns:1fr}}

/* =========================================================
   Page du client (QR code) — commande.html
   ========================================================= */
body.client{background:var(--cre)}
.cl-hero{position:relative;overflow:hidden;background:radial-gradient(circle at 90% 0%,rgba(245,165,36,.45),transparent 45%),radial-gradient(circle at 0% 100%,rgba(224,71,43,.55),transparent 55%),var(--cha);color:#fff;padding:22px 18px 40px;border-radius:0 0 34px 34px}
.cl-hero .food{position:absolute;font-size:30px;opacity:.22;animation:float 7s ease-in-out infinite}
.cl-hero .logo-row{position:relative;z-index:1}
.cl-hero .logo-row .nm{color:#fff;font-size:1.45rem}
.cl-hero small{color:#e8d9cb}
.cl-hero .open{display:inline-flex;align-items:center;gap:6px;margin-top:12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);padding:5px 12px;border-radius:999px;font-size:12.5px;font-weight:800;position:relative;z-index:1}
.cl-hero .open i{width:8px;height:8px;border-radius:50%;background:#4ADE80;box-shadow:0 0 0 4px rgba(74,222,128,.25)}
.cl-wrap{max-width:720px;margin:0 auto;padding:0 14px 140px}
.cl-where{position:relative;z-index:2;margin-top:-22px;background:#fff;border-radius:24px;padding:14px;box-shadow:var(--sh2);border:1px solid var(--line)}
.cl-jour{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
.cl-jour::-webkit-scrollbar{display:none}
.cl-jour .jc{flex:0 0 78%;max-width:300px;scroll-snap-align:start;border-radius:24px;overflow:hidden;background:var(--pimG);color:#fff;box-shadow:0 14px 30px -14px rgba(224,71,43,.7);position:relative}
.cl-jour .jc .ph{height:120px;display:flex;align-items:center;justify-content:center;font-size:64px;background:rgba(255,255,255,.12)}
.cl-jour .jc .ph img{width:100%;height:100%;object-fit:cover}
.cl-jour .jc .tx{padding:12px 14px;display:flex;align-items:center;gap:10px}
.cl-jour .jc .tx div{flex:1}
.cl-jour .jc b{display:block;font-family:var(--disp);font-size:1.1rem}
.cl-jour .jc .add{background:#fff;color:var(--pim2)}
.cl-cats{position:sticky;top:0;z-index:5;background:linear-gradient(var(--cre) 80%,transparent);padding:12px 0 10px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.cl-cats::-webkit-scrollbar{display:none}
.cl-cats button{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:9px 15px;font-weight:800;white-space:nowrap;cursor:pointer;transition:all .15s}
.cl-cats button.on{background:var(--cha);border-color:var(--cha);color:#fff}
.cl-dish{display:flex;gap:13px;background:#fff;border:1px solid var(--line);border-radius:22px;padding:10px;margin-bottom:11px;align-items:center;box-shadow:var(--sh);animation:rise .3s ease both}
.cl-dish .ph{width:92px;height:92px;border-radius:17px;flex:none;display:flex;align-items:center;justify-content:center;font-size:44px;overflow:hidden;background:var(--tint,linear-gradient(135deg,var(--manL),var(--pimL)))}
.cl-dish .ph img{width:100%;height:100%;object-fit:cover}
.cl-dish .tx{flex:1;min-width:0}
.cl-dish .tx b{display:block;font-size:15.5px}
.cl-dish .tx small{display:block;margin:2px 0 5px;line-height:1.3}
.cl-dish .pr{font-weight:900;color:var(--pim2)}
.add{width:44px;height:44px;border-radius:50%;border:none;background:var(--pimG);color:#fff;font-size:26px;font-weight:700;cursor:pointer;flex:none;box-shadow:0 8px 18px -6px rgba(224,71,43,.75);transition:transform .12s}
.add:active{transform:scale(.88)}
.cl-bar{position:fixed;left:0;right:0;bottom:0;padding:12px 14px calc(14px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--cre) 35%);z-index:10;animation:rise .3s ease both}
.cl-bar .btn{max-width:720px;margin:0 auto;display:flex;width:100%;justify-content:space-between;min-height:60px;font-size:17px;border-radius:20px}
.cl-bar .cnt{background:rgba(255,255,255,.22);border-radius:12px;padding:3px 10px;margin-right:6px}
.steps{display:flex;flex-direction:column;margin:16px 0}
.step{display:flex;gap:14px;align-items:flex-start;padding-bottom:20px;position:relative}
.step:not(:last-child)::before{content:'';position:absolute;left:17px;top:36px;bottom:0;width:3px;border-radius:2px;background:var(--line)}
.step i{width:36px;height:36px;border-radius:50%;background:var(--cre2);display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:900;flex:none;color:var(--mut);font-size:16px}
.step.done i{background:var(--ok);color:#fff}
.step.cur i{background:var(--pimG);color:#fff;animation:pulse 1.8s infinite}
.step.done:not(:last-child)::before{background:var(--ok)}
.step b{display:block;font-size:15.5px}
.bignum{font-family:var(--disp);font-size:3.4rem;font-weight:800;line-height:1;letter-spacing:-.03em;background:var(--pimG);-webkit-background-clip:text;background-clip:text;color:transparent}
.stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin-top:10px}
.stamps span{aspect-ratio:1;border-radius:50%;border:2px dashed #E6CFB2;display:flex;align-items:center;justify-content:center;font-size:20px}
.stamps span.on{background:var(--manG);border:2px solid var(--man);animation:pop .4s}
.paybox{border:2px solid var(--line);border-radius:18px;padding:12px;cursor:pointer;display:flex;gap:12px;align-items:center;margin-bottom:9px;background:#fff;transition:all .15s}
.paybox.on{border-color:var(--pim);background:var(--pimL);box-shadow:0 6px 16px -8px rgba(224,71,43,.6)}
.paybox .lg{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;flex:none}
.paybox .auto{margin-left:auto}
.spin{width:22px;height:22px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@media print{
  #side,#tabs,.top,.noprint,.banner{display:none!important}
  body{background:#fff}
  #view{padding:0}
  .qrc{break-inside:avoid;border:2px solid #ddd;box-shadow:none}
}