:root{--or:#D07020;--or-d:#a85a18;--dk:#141414;--panel:#1f1f1f;--line:#333;--tx:#f3f3f3;--mut:#a5a5a5;--ok:#2e9e5b;--bad:#d9534f}
@media (prefers-color-scheme: light){:root{--dk:#f6f4f1;--panel:#fff;--line:#ddd;--tx:#1b1b1b;--mut:#666}}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--dk);color:var(--tx);font:16px/1.4 system-ui,Arial,sans-serif;display:flex;flex-direction:column}
.top{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--or);color:#141414}
.top h1{font-size:1.2rem;margin:0}
.status{display:flex;gap:8px;align-items:center}
.pill{padding:4px 10px;border-radius:99px;background:#141414;color:#fff;font-size:.85rem;border:0}
.pill.on{background:var(--ok)} .pill.off{background:var(--bad)}
.btn-pill{cursor:pointer}
.icon-btn{background:transparent;border:0;font-size:1.4rem;cursor:pointer;color:#141414;min-width:44px;min-height:44px}
.layout{flex:1;display:grid;grid-template-columns:1fr 380px;gap:12px;padding:12px;min-height:0}
@media (max-width:820px){html,body{height:auto;min-height:100%}.layout{grid-template-columns:1fr;grid-template-rows:auto auto}.catalog{overflow:visible}.catalog #results{max-height:42vh;overflow:auto}.top{flex-wrap:wrap;gap:6px;padding:8px 12px}.top h1{font-size:1rem}.pill{white-space:nowrap}.status{gap:6px;flex-wrap:wrap}}
.catalog,.cart{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;min-height:0;display:flex;flex-direction:column}
.catalog{overflow:hidden}
#search{width:100%;padding:14px;font-size:1.1rem;border-radius:10px;border:2px solid var(--line);background:var(--dk);color:var(--tx)}
#search:focus{outline:none;border-color:var(--or)}
.grid{margin-top:12px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;overflow:auto;align-content:start}
.tile{background:var(--dk);border:1px solid var(--line);border-radius:10px;padding:10px;text-align:left;color:var(--tx);cursor:pointer;min-height:84px}
.tile:hover,.tile:focus{border-color:var(--or);outline:none}
.tile .n{font-weight:600}.tile .l{color:var(--mut);font-size:.85rem}
.tile .p{color:var(--or);font-weight:700;margin-top:4px}
.tile .s{font-size:.8rem;color:var(--mut)} .tile.low .s{color:var(--bad)}
.cart-head{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.cart-head h2{margin:0;font-size:1.1rem}
.cart-actions{display:flex;gap:6px}
.lines{list-style:none;margin:8px 0;padding:0;flex:1;overflow:auto}
.lines li{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.lines .name small{display:block;color:var(--mut)}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:38px;height:38px;border-radius:8px;border:1px solid var(--line);background:var(--dk);color:var(--tx);font-size:1.2rem;cursor:pointer}
.empty{color:var(--mut);text-align:center;padding:24px 0}
.total{display:flex;justify-content:space-between;align-items:baseline;font-size:1.1rem;padding:8px 0}
.total strong{font-size:1.6rem}
.methods{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.method{padding:12px;border-radius:10px;border:2px solid var(--line);background:var(--dk);color:var(--tx);cursor:pointer;font-size:1rem}
.method.on{border-color:var(--or);background:rgba(208,112,32,.18)}
.cash{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.cash input{width:140px;padding:10px;font-size:1.1rem;text-align:right;border-radius:8px;border:2px solid var(--line);background:var(--dk);color:var(--tx)}
.change{min-height:1.4em;color:var(--ok);font-weight:600;text-align:right;margin:4px 0}
.change.short{color:var(--bad)}
button.primary{width:100%;padding:16px;font-size:1.15rem;font-weight:700;border:0;border-radius:12px;background:var(--or);color:#141414;cursor:pointer}
button.primary:disabled{opacity:.4;cursor:not-allowed}
button.ghost{padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--tx);cursor:pointer;font-size:.9rem}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--tx);max-width:460px;width:92%}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog label{display:block;margin:10px 0}dialog input{width:100%;padding:10px;border-radius:8px;border:2px solid var(--line);background:var(--dk);color:var(--tx);margin-top:4px}
.row{display:flex;gap:8px;justify-content:flex-end}
.queue{list-style:none;padding:0;margin:0 0 12px}
.queue li{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.rcpt table{width:100%;border-collapse:collapse;margin:8px 0}.rcpt td{padding:3px 0}.rcpt td:last-child{text-align:right}
.rcpt .tot{font-size:1.3rem;font-weight:700}.rcpt .ref{color:var(--mut);font-size:.9rem}
#toast{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);background:#000;color:#fff;padding:10px 16px;border-radius:99px;opacity:0;transition:opacity .2s;pointer-events:none;max-width:90%}
#toast.show{opacity:1}
@media print{body>*:not(dialog){display:none}dialog{border:0;color:#000;background:#fff}dialog form{display:none}}

/* --- ajouts : paiement agrégateur, ventes, impression --- */
.cart-head h2 small{font-weight:400;color:var(--mut);font-size:.8rem}
.qr{display:flex;justify-content:center;background:#fff;border-radius:12px;padding:10px;max-width:260px;margin:8px auto}
.qr svg{width:100%;height:auto;display:block}
.pay-amount{text-align:center;font-size:1.5rem;font-weight:700;margin:6px 0}
.hint{color:var(--mut);font-size:.85rem;margin:4px 0}
.pay-status{text-align:center;font-weight:600;padding:8px;border-radius:8px;background:var(--dk)}
.pay-status.ok{color:var(--ok)} .pay-status.bad{color:var(--bad)}
.err{color:var(--bad);min-height:1.2em;margin:4px 0}
.row.split{justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
dialog select{width:100%;padding:10px;border-radius:8px;border:2px solid var(--line);background:var(--dk);color:var(--tx);margin-top:4px}
dialog fieldset{border:1px solid var(--line);border-radius:10px;margin:10px 0;padding:8px 12px}
dialog fieldset legend{color:var(--or);font-weight:600;padding:0 6px}
dialog .check{display:flex;align-items:center;gap:8px}dialog .check input{width:auto;margin:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.queue li{flex-wrap:wrap}
.queue .meta{color:var(--mut);font-size:.85rem;display:block}
.queue .warn{color:var(--bad)}
.queue .tag{font-size:.75rem;padding:2px 8px;border-radius:99px;background:var(--bad);color:#fff;margin-left:6px}
.queue .tag.mine{background:var(--ok)}
.retline{display:flex;justify-content:space-between;align-items:center;padding:6px 0;gap:8px}
.method:disabled{opacity:.4;cursor:not-allowed}
.cancelled{opacity:.6;text-decoration:line-through}
@page{margin:4mm}
@media print{.rcpt{max-width:72mm;margin:0 auto}.row{display:none}}

.custbar{border-top:1px solid var(--line);padding:8px 0;display:grid;gap:4px}
.custbar .check{display:flex;gap:8px;align-items:center;font-size:.9rem}
.custbar[hidden],.custbar [hidden]{display:none}
.tile .p s{color:var(--mut);font-weight:400;margin-right:6px;font-size:.85em}
#custSearch{width:100%;margin-bottom:8px}
#custNew{margin:8px 0}#custNew label{display:block;margin:6px 0}
.rcpt .pts{color:var(--ok);font-weight:600}

/* --- catégories, modes de service, offres, identité du client --- */
.cats{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;margin-bottom:4px;-webkit-overflow-scrolling:touch}
.cats[hidden],.modes[hidden]{display:none}
.cat{flex:0 0 auto;padding:12px 18px;border-radius:99px;border:2px solid var(--line);background:var(--dk);color:var(--tx);font-size:1rem;font-weight:600;cursor:pointer;min-height:48px}
.cat.on{background:var(--or);border-color:var(--or);color:#141414}
.modes{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:8px 0 0}
.mode{padding:10px 6px;border-radius:10px;border:2px solid var(--line);background:var(--dk);color:var(--tx);font-size:.95rem;cursor:pointer}
.mode.on{border-color:var(--or);background:rgba(227,194,125,.18);font-weight:700}
.free-tag{color:#141414;background:var(--or);border-radius:99px;padding:2px 10px;font-size:.75rem;font-weight:700}
.top .logo{height:52px;width:auto;display:block}
.branded .top{background:var(--dk);color:var(--tx);border-bottom:2px solid var(--or)}
.branded .icon-btn{color:var(--tx)}
.branded .tile{min-height:92px}
.branded .tile .n{font-size:1.02rem}
.branded button.primary,.branded .cat.on{color:#0F3322}

/* ---------- écran « Gérer » (catalogue, stock, promotions, TVA) ---------- */
dialog.mgr{max-width:860px;width:96%;max-height:92vh;overflow:auto}
.mgr-head{display:flex;justify-content:space-between;align-items:center;gap:8px}.mgr-head h2{margin:0}
.mgr-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.mgr .err{color:#ff8d7a;min-height:1.2em;margin:4px 0}
.mgr-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin:8px 0}.mgr-bar input,.mgr-bar select{flex:1;min-width:140px}
.mgr-list{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.mgr-list li{display:flex;gap:8px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--dk)}
.mgr-list li.off{opacity:.55}.mgr-list li.empty{justify-content:center;color:var(--mut,#9aa)}
.mgr-list .grow{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}.mgr-list .grow input{margin:0}
.mgr .meta{display:block;font-size:.82rem;color:var(--mut,#9aa)}.mgr .meta.low{color:#ff8d7a}
.mgr .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:600px){.mgr .two{grid-template-columns:1fr}.mgr-list li{flex-wrap:wrap}}
.vr{display:grid;grid-template-columns:1.4fr 1fr auto .8fr auto;gap:6px;align-items:center;margin:6px 0}.vr input{margin:0}
@media (max-width:600px){.vr{grid-template-columns:1fr 1fr}}
.mgr .sq{width:70px;margin:0}.mgr button.small{width:auto;padding:10px 16px;font-size:1rem}.mgr button.danger{border-color:#a4472f;color:#ff8d7a}
.mgr .row.split{display:flex;gap:8px;justify-content:space-between;margin-top:12px}
.mgr [hidden]{display:none!important}
/* caissiers, billets rapides, notes */
.who{background:#141414;cursor:pointer}
.login{text-align:center;max-width:380px}
.login h2{margin:.2em 0 .6em}
.login-names{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.who-btn{padding:18px 8px;font-size:1.1rem;font-weight:600;border-radius:12px;border:2px solid var(--line);background:var(--dk);color:var(--tx);cursor:pointer}
.who-btn:hover,.who-btn:focus{border-color:var(--or);outline:none}
.login-who{font-weight:600;margin:0 0 6px}
.dots{display:flex;gap:10px;justify-content:center;margin:8px 0 12px;min-height:16px}
.dots span{width:14px;height:14px;border-radius:50%;border:2px solid var(--mut)}.dots span.full{background:var(--or);border-color:var(--or)}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pad button{padding:16px 0;font-size:1.4rem;border-radius:12px;border:1px solid var(--line);background:var(--dk);color:var(--tx);cursor:pointer}
.pad button:active{background:var(--or);color:#141414}.pad .okk{background:var(--or);color:#141414;font-weight:700}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.qk{flex:1 1 70px;padding:14px 8px;font-size:1.05rem;font-weight:600;border-radius:10px;border:2px solid var(--line);background:var(--dk);color:var(--tx);cursor:pointer}
.qk.exact{border-color:var(--ok);color:var(--ok)}.qk:hover{border-color:var(--or)}
.tablenote{width:100%;padding:10px;margin-top:8px;border-radius:8px;border:2px solid var(--line);background:var(--dk);color:var(--tx)}
.lines .note{display:block;color:var(--or);font-size:.85rem;font-style:normal}
#charge{font-size:1.2rem;padding:16px}
.cats{flex-shrink:0}#search{flex-shrink:0}
.lines .acts{display:flex;gap:4px}.lines .acts button{min-width:38px;height:38px;padding:0}
.lines .free-tag{grid-column:span 2}
.mgr-list .grow .tn,.mgr-list .grow .catn{width:100%}.mgr-list .tp{width:130px;margin:0}.mgr-list li{flex-wrap:wrap}.mgr-list li>.grow{flex:1 1 180px}

/* encadré « Aujourd'hui » (écran Ventes) */
.today{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:0 0 10px}
.today .tnet{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.95rem}
.today .tnet b{font-size:1.35rem;color:var(--or)}
.today .tgrid{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:4px;font-size:.85rem}
.today .tgrid span{display:flex;gap:6px}
.today .neg b{color:var(--bad)}
.today .tline{margin-top:4px;font-size:.8rem;color:var(--mut)}
.today .tline b{color:inherit;font-weight:700}

/* illustrations des plats */
.tile.withic{display:flex;flex-direction:column;align-items:flex-start}
.tile .ic{width:44px;height:44px;margin-bottom:4px}
.tile .ic svg{width:100%;height:100%;display:block}
.grid{grid-auto-rows:max-content}
.tile.withic{overflow:visible;min-height:112px}
.tile .ic{width:40px;height:40px}
.queue .items{display:block;margin-top:3px;font-size:.85rem;color:var(--tx);opacity:.85}
.queue .items i{color:var(--bad);font-style:normal}

/* écrans tactiles 4:3 (ex. 1024×768) : plus de place pour les lignes du panier */
@media (min-width:821px) and (max-height:800px){
  .top{padding:6px 14px}
  .cart{padding:8px}
  .cart-actions button,.cart .modes button{padding:6px 8px}
  .lines{min-height:150px}
  .lines li{padding:5px 0}
  .total{padding:4px 0}.total strong{font-size:1.4rem}
  .quick{flex-wrap:nowrap;gap:6px;margin:4px 0}
  .qk{flex:1 1 0;min-width:0;padding:8px 4px;font-size:.9rem}
  .cash{margin:2px 0}
  .tile.withic{min-height:96px}.tile .ic{width:32px;height:32px}
}

/* ticket imprimé (80 mm) : seul #ticketPrint est imprimé quand body.tk-print */
#ticketPrint{display:none}
@media print{
  body.tk-print{background:#fff!important;color:#000!important}
  body.tk-print>*:not(#ticketPrint){display:none!important}
  body.tk-print #ticketPrint{display:block}
  .tk{width:100%;max-width:72mm;margin:0 auto;color:#000;font:600 12.5px/1.3 Arial,Helvetica,sans-serif}
  .tk hr{border:0;border-top:1.5px dashed #000;margin:6px 0}
  .tk-logo{display:block;margin:0 auto 4px;image-rendering:pixelated}
  .tk-shop{text-align:center;font-size:20px;font-weight:800;margin-bottom:2px}
  .tk-info{text-align:center;font-size:11.5px;font-weight:500}
  .tk-mode{text-align:center;font-size:15px;font-weight:800;letter-spacing:.5px}
  .tk-order{text-align:center;font-size:24px;font-weight:900;margin:2px 0}
  .tk-meta{text-align:center;font-size:11.5px;font-weight:500}
  .tk-l{display:grid;grid-template-columns:auto 1fr auto;gap:6px;padding:2px 0;font-size:13px}
  .tk-l .q{font-weight:800}.tk-l .p{font-weight:800;text-align:right}
  .tk-l small{display:block;font-size:10.5px;font-weight:500}.tk-l small.nt,.tk-k small.nt{font-style:italic}
  .tk-total{display:flex;justify-content:space-between;align-items:baseline;font-size:19px;font-weight:900;border-top:2.5px solid #000;border-bottom:2.5px solid #000;padding:4px 0;margin:4px 0}
  .tk-r{display:flex;justify-content:space-between;font-size:12px;font-weight:600;padding:1px 0}.tk-r.b{font-weight:900;font-size:14px}
  .tk-ref{text-align:center;font-size:11px;font-weight:500}
  .tk-foot{text-align:center;font-size:13px;font-weight:700;margin-top:6px}
  .tk-k{font-size:18px;font-weight:600;padding:3px 0}.tk-k b{font-weight:900}.tk-k small{display:block;font-size:13px;font-weight:500}
}
.top .logo{background:#f6f1e8;border-radius:10px;padding:4px 12px;box-sizing:content-box}

.tile .ph{width:100%;height:76px;margin-bottom:6px;border-radius:7px;overflow:hidden;background:#f6f1e8}
.tile .ph img{width:100%;height:100%;object-fit:cover;display:block}
.tile.withic:has(.ph){min-height:140px}
@media (max-width:520px){.tile .ph{height:64px}}