:root{--y:#FFD000;--on-y:#141414;--y2:color-mix(in srgb,var(--y) 65%,#fff);--k:#141414;--on-k:#fff;--bg:#F6F4EE;--surf:#FFFFFF;--line:#ECE9E1;--mut:#5C584F;--red:#E4362B;--ok:#1FA855;--err:#E4362B;--green:var(--ok);--sub:color-mix(in srgb,var(--k) 5%,var(--surf));--glow:var(--y);--hdr:var(--bg);--nav:var(--surf);--splash:var(--y);--y-on-k:var(--y);--r:22px;--sh:0 6px 20px color-mix(in srgb,var(--k) 8%,transparent);--sh2:0 14px 34px color-mix(in srgb,var(--k) 16%,transparent)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{font-family:Inter,system-ui,sans-serif;color:var(--k);background:color-mix(in srgb,var(--bg) 88%,var(--k))}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
a{color:inherit;text-decoration:none}
img{display:block}
.lil{font-family:'Lilita One',sans-serif;font-weight:400;letter-spacing:.2px}

/* ---- stage / phone frame ---- */
.stage{min-height:100%;display:flex;align-items:center;justify-content:center;gap:60px;padding:24px}
.side{max-width:300px;color:color-mix(in srgb,var(--mut) 80%,var(--k))}
.side p{line-height:1.5}.side .muted{font-size:13px;opacity:.75}
.phone{position:relative;width:390px;height:844px;background:var(--bg);border-radius:46px;overflow:hidden;box-shadow:0 0 0 10px var(--k),0 30px 80px color-mix(in srgb,var(--k) 35%,transparent);isolation:isolate}
/* v10s : plein écran dès que le panneau latéral disparaît (mobile + tablette < 1024).
   Sur PC (≥ 1024) hors back-office : cadre téléphone conservé pour la démo. */
@media (max-width:1023px){
  .side{display:none}
  /* v11v — black-translucent makes the visual viewport taller than a naive
     100dvh box; pin the phone to the screen and paint html/body with the
     nav surface so the home-indicator zone never shows the desktop gray. */
  /* v12a — iOS standalone (black-translucent): an explicit height (100dvh /
     -webkit-fill-available) is resolved against a box that can be shorter
     than the physical screen, so the phone stopped above the home indicator
     and the page background showed as an extra band under the nav.
     The phone is now sized ONLY by inset:0 (top+bottom of the viewport),
     and html/body are painted with the nav colour as a last resort. */
  /* v12e — Safari NAVIGATEUR (onglet, vue in-app) : plus AUCUN position:fixed pour le cadre.
     Bug iOS 26 (WebKit 312149 / 297779) : un élément fixed ancré en bas est peint au mauvais endroit quand
     la barre d'adresse se replie/déplie -> cadre + barre du bas restaient au milieu de l'écran.
     Le document ne défile plus jamais (html/body verrouillés, overflow hidden) : le cadre est un bloc
     normal, la barre du bas est en bas de ce bloc ; seul .screen défile à l'intérieur.
     v12y — height:100% / 100vh suit le grand viewport iOS : la feuille et la tab bar passent sous
     la barre d'URL du bas. Cadre en 100dvh (viewport dynamique, au-dessus de la barre d'URL) +
     env(safe-area-inset-bottom). Le standalone reste en 100vh (WebKit 254868, règles plus bas). */
  html,body{background:var(--nav,#fff);height:100%;height:100dvh;max-height:100dvh;overflow:hidden;overscroll-behavior:none}
  .stage{padding:0;display:block;min-height:0;height:100%;height:100dvh;max-height:100dvh}
  .phone{position:relative;inset:auto;width:100%;height:100%;height:100dvh;min-height:0;max-height:100dvh;border-radius:0;box-shadow:none;zoom:1!important;overflow:hidden}
}
/* v12b — installed PWA only (home screen, black-translucent + viewport-fit=cover).
   WebKit bug 254868 (still present iOS 18): in standalone, 100%, 100dvh, 100svh,
   -webkit-fill-available, inset:0 and absolute bottom:0 all resolve to the screen
   MINUS the safe-area insets, so the frame/nav ended above the home indicator.
   Only 100vh = the full physical screen there, and position:fixed bars anchor to
   the real bottom. Safari tabs are untouched (v12a rules above). */
@media (max-width:1023px) and (display-mode:standalone){
  html,body{height:100vh;min-height:100vh;max-height:none}
  html .phone{position:fixed;top:0;left:0;right:0;bottom:auto;height:100vh;max-height:none}
  html .stage{height:100vh;max-height:none}
  html .nav,html .cartbar,html .ordbar{position:fixed}
}
@media (max-width:1023px){
  html.ios-sa,html.ios-sa body{height:100vh;min-height:100vh;max-height:none}
  html.ios-sa .phone{position:fixed;top:0;left:0;right:0;bottom:auto;height:100vh;max-height:none}
  html.ios-sa .stage{height:100vh;max-height:none}
  html.ios-sa .nav,html.ios-sa .cartbar,html.ios-sa .ordbar{position:fixed}
}
@media (min-width:1024px){
  .side{display:block}
}

/* ---- logo ---- */
.logo{display:inline-flex;flex-direction:column;align-items:center;line-height:1}
.logo .row{display:flex;align-items:flex-end;position:relative;padding-top:.32em}
.logo .f{font-family:'Lilita One';font-size:.55em;margin:0 .06em .3em 0}
.logo .q{font-family:'Kaushan Script',cursive;font-size:1em;line-height:1}
.logo svg{position:absolute;top:0;inset-inline-end:-.12em;width:.42em;height:.38em}
.logo .sf{font-weight:800;text-transform:uppercase;letter-spacing:.38em;font-size:.12em;margin-top:1.7em;padding-inline-start:.38em}

/* ---- splash ---- */
.splash{position:absolute;inset:0;z-index:50;background:var(--splash);color:var(--on-splash,var(--on-y));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .5s ease}
.splash.out{opacity:0;pointer-events:none}
.splash-logo{font-size:104px;opacity:0}
.splash-logo.go{animation:spIn .9s cubic-bezier(.22,.8,.3,1) .1s forwards,spBreath 2.8s ease-in-out 1.2s infinite}
.splash-logo .sf{opacity:0}
.splash-logo.go .sf{animation:spUp .6s ease .6s forwards}
.splash-tag{font-weight:700;font-size:13px}
.splash-line{width:56px;height:2px;border-radius:2px;background:color-mix(in srgb,currentColor 18%,transparent);overflow:hidden;margin-top:26px;opacity:0;animation:spUp .5s ease .9s forwards}
.splash-line i{display:block;width:40%;height:100%;border-radius:2px;background:color-mix(in srgb,currentColor 55%,transparent);animation:spSlide 1.6s ease-in-out infinite}
@keyframes spIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@keyframes spUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes spBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes spSlide{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
[dir=rtl] .splash-line i{animation-direction:reverse}
@media (prefers-reduced-motion:reduce){.splash-logo,.splash-logo .sf,.splash-line{animation:none!important;opacity:1}.splash-line i{animation:none!important;width:100%}}
@keyframes bounce{0%{opacity:0}100%{opacity:1}}
@keyframes fade{to{opacity:1}}

/* ---- screens ---- */
#screens{position:absolute;inset:0}
.screen{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding-bottom:120px;opacity:0;transform:translateX(18px);pointer-events:none;transition:opacity .28s ease,transform .28s ease;scrollbar-width:none}
.screen::-webkit-scrollbar{display:none}
.screen.on{opacity:1;transform:none;pointer-events:auto}
.pad{padding:0 20px}
.h2{font-size:19px;font-weight:800;margin:0}
.sec{display:flex;justify-content:space-between;align-items:baseline;margin:26px 20px 12px}
.sec a{font-size:13px;font-weight:700;color:var(--k);border-bottom:2px solid var(--y)}

/* ---- home header ---- */
.hero-top{background:var(--y);padding:50px 20px 22px;border-radius:0 0 30px 30px;position:relative;overflow:hidden;color:var(--on-y)}
.hero-top:after{content:"";position:absolute;inset-inline-end:-60px;top:-50px;width:200px;height:200px;border-radius:50%;background:color-mix(in srgb,var(--surf) 22%,transparent)}
.hero-row{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}
.hero-row .logo{font-size:42px;align-items:flex-start}
.pill-pts{background:var(--k);color:var(--y-on-k);font-weight:800;font-size:13px;padding:9px 14px;border-radius:999px;display:flex;gap:6px;align-items:center;box-shadow:0 4px 12px color-mix(in srgb,var(--k) 20%,transparent)}
.hello{font-size:25px;font-weight:900;line-height:1.18;margin:18px 0 16px;position:relative;z-index:1}
.seg{display:grid;grid-template-columns:repeat(var(--seg-n, 2), minmax(0, 1fr));background:color-mix(in srgb,var(--k) 10%,transparent);border-radius:16px;padding:4px;position:relative;z-index:1}
.seg[data-n="1"],.seg.seg-1{--seg-n:1;grid-template-columns:1fr}
.seg[data-n="2"],.seg.seg-n2{--seg-n:2}
.seg[data-n="3"],.seg.seg-n3{--seg-n:3}
/* v12l — 3 modes: stack icon+label, equal thirds, no truncation (wrap) · 320/390 */
.seg .seg-ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0}
.seg .seg-lab{display:inline;min-width:0;text-align:center;line-height:1.15}
.seg[data-n="3"] button,.seg.seg-n3 button,.seg[data-n="3"] .seg-chip,.seg.seg-n3 .seg-chip{
  flex-direction:column;gap:2px;height:auto;min-height:48px;padding:6px 3px;font-size:11px;
  white-space:normal;overflow:visible;text-overflow:clip;line-height:1.15
}
.seg[data-n="3"] .seg-ic svg,.seg.seg-n3 .seg-ic svg{width:16px;height:16px}
.seg[data-n="3"] .seg-lab,.seg.seg-n3 .seg-lab{font-size:11px;font-weight:800;white-space:normal;overflow-wrap:anywhere;word-break:break-word}
@media (max-width:360px){
  .seg[data-n="3"] button,.seg.seg-n3 button{font-size:10px;padding:5px 2px;gap:1px;min-height:46px}
  .seg[data-n="3"] .seg-lab,.seg.seg-n3 .seg-lab{font-size:10px}
  .seg[data-n="3"] .seg-ic svg,.seg.seg-n3 .seg-ic svg{width:14px;height:14px}
  .seg[data-n="2"] button{font-size:12px;padding:0 4px;gap:4px}
  .seg[data-n="2"] .seg-lab{font-size:12px}
}
[dir=rtl] .seg button,[dir=rtl] .seg .seg-chip{flex-direction:column}

.seg .seg-chip{height:42px;min-height:44px;border-radius:12px;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--k);color:var(--y-on-k);box-shadow:0 4px 10px color-mix(in srgb,var(--k) 20%,transparent)}
.hero-top .seg .seg-chip{background:var(--k);color:var(--y-on-k)}
.seg button{height:42px;border-radius:12px;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;color:color-mix(in srgb,var(--k) 82%,var(--surf));transition:.2s}
.seg button.on{background:var(--k);color:var(--y-on-k);box-shadow:0 4px 10px color-mix(in srgb,var(--k) 20%,transparent)}
.addr{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:600;position:relative;z-index:1}
.addr b{font-weight:800}

/* ---- carousel ---- */
.car{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:20px 20px 22px;margin-bottom:-14px;scroll-padding:0 20px;scrollbar-width:none}
.car::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;height:196px;border-radius:24px;position:relative;overflow:hidden;scroll-snap-align:center;box-shadow:var(--sh2);color:var(--on-k);text-align:start}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;max-width:none}
.slide .grad{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--k) 78%,transparent) 0%,color-mix(in srgb,var(--k) 45%,transparent) 48%,transparent 78%)}
.slide .txt{position:absolute;inset-inline-start:18px;top:18px;bottom:18px;width:62%;display:flex;flex-direction:column;justify-content:center;gap:6px}
.slide .tag{align-self:flex-start;background:var(--y);color:var(--k);font-size:10.5px;font-weight:900;letter-spacing:1px;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.slide .tt{font-family:'Lilita One';font-size:30px;line-height:1.02}
.slide .st{font-size:13px;font-weight:600;opacity:.92}
.slide .cta{align-self:flex-start;margin-top:4px;background:var(--surf);color:var(--k);font-weight:800;font-size:12.5px;padding:8px 13px;border-radius:999px}
.slide.yel{color:var(--k)}.slide.yel .grad{background:linear-gradient(90deg,var(--y) 0%,var(--y) 46%,transparent 80%)}
.slide.yel .tag{background:var(--k);color:var(--y-on-k)}.slide.yel .cta{background:var(--k);color:var(--on-k)}
.slide.red .grad{background:linear-gradient(90deg,color-mix(in srgb,var(--red) 85%,#000) 0%,color-mix(in srgb,var(--red) 90%,transparent) 44%,transparent 80%)}
.spons{position:absolute;inset-inline-end:10px;top:10px;background:color-mix(in srgb,var(--surf) 92%,transparent);color:var(--mut);font-size:10px;font-weight:700;padding:3px 8px;border-radius:999px;letter-spacing:.3px}
.dots{display:flex;justify-content:center;gap:6px;margin:12px 0 0}
.dots i{width:7px;height:7px;border-radius:99px;background:color-mix(in srgb,var(--k) 17%,var(--surf));transition:.3s}
.dots i.on{width:22px;background:var(--k)}

/* ---- categories ---- */
.cats{display:flex;gap:14px;overflow-x:auto;padding:2px 20px 6px;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cat{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:12.5px;font-weight:700;width:70px}
.cat .ph{width:70px;height:70px;border-radius:50%;overflow:hidden;background:var(--surf);box-shadow:var(--sh);border:3px solid var(--surf)}
.cat .ph img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;max-width:none}

/* ---- product cards ---- */
.hscroll{display:flex;gap:14px;overflow-x:auto;padding:4px 20px 14px;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.card{background:var(--surf);border-radius:20px;overflow:hidden;box-shadow:var(--sh);position:relative;display:flex;flex-direction:column;text-align:start;transition:transform .15s}
.card:active{transform:scale(.97)}
.hscroll .card{flex:0 0 158px}
.card .ph{height:132px;position:relative;background:var(--sub);overflow:hidden;flex:none}
.card .ph img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center center;max-width:none;border:0}
.card .bd{padding:16px 12px 14px;display:flex;flex-direction:column;gap:8px;flex:1;min-height:0}
.card .nm{font-size:14.5px;font-weight:800;line-height:1.25;margin:0}
.card .ds{font-size:11.5px;color:var(--mut);line-height:1.4;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .ft{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px}
.price{font-family:'Lilita One';font-size:19px}.price small{font-family:Inter;font-size:11px;font-weight:800;margin-inline-start:2px}
.plus{width:36px;height:36px;border-radius:50%;background:var(--y);font-size:22px;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 10px color-mix(in srgb,var(--y) 55%,transparent);transition:transform .15s;color:var(--on-y)}
.plus:active{transform:scale(.85)}
.badge{position:absolute;inset-inline-start:10px;top:10px;background:var(--k);color:var(--y-on-k);font-size:10px;font-weight:900;text-transform:uppercase;letter-spacing:.6px;padding:4px 8px;border-radius:999px}
.badge{text-transform:none;letter-spacing:.2px;font-weight:800;font-size:10.5px;padding:3px 9px;background:color-mix(in srgb,var(--surf) 92%,transparent);color:var(--k);border:1px solid color-mix(in srgb,var(--k) 10%,transparent);backdrop-filter:blur(4px)}
.badge.b-nouveau{background:var(--y);color:var(--on-y);border-color:transparent}
.badge.b-promo,.badge.b-epice{color:var(--err)}.badge.b-vegetarien{color:var(--ok)}
.bobadges{max-height:420px;overflow-y:auto}.bb-row{padding:10px 0;border-bottom:1px solid var(--line)}.bb-row:last-of-type{border-bottom:0}
.bb-h{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px}.bb-h small{display:block;color:var(--err);font-weight:600;font-size:11.5px}
.bb-f{display:flex;gap:8px;margin-top:8px;align-items:center;flex-wrap:wrap}.bb-f select,.bb-f input{font:inherit;font-size:13px;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surf);color:var(--k)}.bb-f label{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--mut)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:4px 20px}

/* ---- ad strip ---- */
.ad{margin:22px 20px 0;border-radius:20px;overflow:hidden;position:relative;height:104px;display:flex;align-items:center;background:color-mix(in srgb,var(--ok) 30%,#000);color:var(--on-k);box-shadow:var(--sh)}
.ad img{position:absolute;inset-inline-end:0;top:0;height:100%;width:52%;object-fit:cover;object-position:center;max-width:none}
.ad .g{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--ok) 30%,#000) 45%,transparent 75%)}
.ad .t{position:relative;padding:0 18px;width:66%}
.ad .t b{display:block;font-family:'Lilita One';font-weight:400;font-size:21px;line-height:1.05}
.ad .t span{font-size:12px;opacity:.85}
.ad .spons{top:8px;inset-inline-end:8px}

/* ---- info card ---- */
.info{margin:22px 20px 0;background:var(--k);color:var(--on-k);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:12px}
.info .l{display:flex;gap:12px;align-items:center;font-size:13.5px}
.info .ic{width:36px;height:36px;border-radius:12px;background:var(--y);display:flex;align-items:center;justify-content:center;flex:0 0 36px;color:var(--on-y)}
.fine{text-align:center;font-size:11.5px;color:var(--mut);margin:18px 20px 0}

/* ---- menu screen ---- */
.mhead{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--hdr) 96%,transparent);backdrop-filter:blur(10px);padding:50px 0 10px}
.mtitle{display:flex;justify-content:space-between;align-items:center;padding:0 20px}
.mtitle h1{font-family:'Lilita One';font-weight:400;font-size:32px;margin:0}
.search{margin:12px 20px 12px;height:46px;border-radius:14px;background:var(--surf);box-shadow:var(--sh);display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--mut);font-size:14px}
.tabs{display:flex;gap:8px;overflow-x:auto;padding:2px 20px 4px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:0 0 auto;display:flex;align-items:center;gap:7px;height:40px;padding:0 14px 0 5px;border-radius:999px;background:var(--surf);font-weight:700;font-size:13px;box-shadow:0 2px 8px color-mix(in srgb,var(--k) 5%,transparent);transition:.2s}
.tab img{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:center;max-width:none}
.tab.all{padding:0 16px}
.tab.on{background:var(--k);color:var(--y-on-k)}
.cattitle{margin:18px 20px 10px;font-family:'Lilita One';font-size:22px;font-weight:400}

/* ---- product screen ---- */
.pimg{height:min(42vh,300px);height:min(42dvh,300px);min-height:200px;max-height:340px;position:relative;overflow:hidden;background:var(--sub);flex:none}
.pimg img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center center;max-width:none;border:0}
.pimg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--k) 35%,transparent),transparent 30%)}
.round{position:absolute;top:calc(8px + var(--sat));z-index:2;width:44px;height:44px;border-radius:50%;background:var(--surf);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh)}
.round.l{inset-inline-start:18px}.round.r{inset-inline-end:18px}
.psheet{background:var(--bg);border-radius:28px 28px 0 0;margin-top:-20px;position:relative;z-index:1;padding:32px 20px 28px;display:flex;flex-direction:column;gap:0}
.psheet h1{font-family:'Lilita One';font-weight:400;font-size:28px;margin:0;line-height:1.1;padding-top:6px}
.prow{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-top:2px}
.psheet .price{font-size:26px;white-space:nowrap;line-height:1.1;padding-top:4px}
.pdesc{color:var(--mut);font-size:14px;line-height:1.45;margin:12px 0 0}
.kcal{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;margin-bottom:4px}
.kcal span{background:var(--surf);border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700;box-shadow:0 2px 6px color-mix(in srgb,var(--k) 5%,transparent)}
.og{background:var(--surf);border-radius:20px;padding:16px;margin-top:14px;box-shadow:var(--sh)}
.og h3{margin:0 0 2px;font-size:15px;font-weight:800;display:flex;justify-content:space-between}
.og h3 em{font-style:normal;font-size:11px;font-weight:700;color:var(--mut);background:var(--bg);padding:3px 8px;border-radius:99px}
.opt{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;font-weight:600;width:100%;text-align:start}
.opt:last-child{border-bottom:0;padding-bottom:2px}
.opt .ck{width:24px;height:24px;border-radius:50%;border:2px solid color-mix(in srgb,var(--k) 20%,var(--surf));display:flex;align-items:center;justify-content:center;transition:.15s;flex:0 0 24px}
.opt.sq .ck{border-radius:8px}
.opt.on .ck{background:var(--k);border-color:var(--k)}
.opt.on .ck:after{content:"";width:9px;height:9px;border-radius:50%;background:var(--y);color:var(--on-y)}
.opt.sq.on .ck:after{border-radius:2px}
.opt .ex{color:var(--mut);font-weight:700;font-size:13px;margin-inline-start:auto;margin-inline-end:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{height:36px;padding:0 14px;border-radius:999px;background:var(--bg);font-weight:700;font-size:13px;border:2px solid transparent;transition:.15s}
.chip.on{background:var(--y);border-color:var(--k);color:var(--on-y)}
.addbar{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:40;background:var(--surf);padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));display:none;gap:12px;align-items:center;box-shadow:0 -8px 30px color-mix(in srgb,var(--k) 10%,transparent);border-radius:22px 22px 0 0;border-top:1px solid var(--line)}
.addbar.on{display:flex}
.addbar .big[disabled],.addbar .big.is-off{opacity:.45;pointer-events:none;filter:grayscale(.2)}
.addbar .hint{position:absolute;top:-28px;inset-inline:16px;font-size:12px;font-weight:700;color:var(--danger,#E4362B);background:var(--surf);padding:4px 10px;border-radius:8px;box-shadow:var(--sh);display:none}
.addbar.has-hint .hint{display:block}
#s-produit{padding-bottom:calc(108px + env(safe-area-inset-bottom,0px))!important;display:flex;flex-direction:column}
#s-produit .psheet{flex:1 0 auto}
.qty{display:flex;align-items:center;gap:4px;background:var(--bg);border-radius:16px;padding:4px}
.qty button{width:40px;height:44px;border-radius:12px;font-size:22px;font-weight:800}
.qty button:active{background:var(--surf)}
.qty b{min-width:22px;text-align:center;font-size:17px}
.big{flex:1;height:54px;border-radius:18px;background:var(--y);font-weight:900;font-size:16px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;box-shadow:0 6px 16px color-mix(in srgb,var(--y) 50%,transparent);color:var(--on-y)}
.big.k{background:var(--k);color:var(--on-k);box-shadow:0 6px 16px color-mix(in srgb,var(--k) 25%,transparent)}
.big.k .v{color:var(--y-on-k)}
.big.c{justify-content:center;gap:10px}

/* ---- cart ---- */
.phead{padding:50px 20px 6px;display:flex;align-items:center;gap:12px}
.phead h1{font-family:'Lilita One';font-weight:400;font-size:30px;margin:0}
.back{width:44px;height:44px;border-radius:50%;background:var(--surf);display:flex;align-items:center;justify-content:center;box-shadow:var(--sh)}
.hero-top .seg button:not(.on){color:var(--on-y)}
.seg.l{background:var(--surf);box-shadow:var(--sh);margin:12px 20px 0}
.seg.l button{color:var(--mut)}
.box{background:var(--surf);border-radius:20px;padding:16px;margin:14px 20px 0;box-shadow:var(--sh)}
.box h3{margin:0 0 10px;font-size:15px;font-weight:800}
.ci{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.box>.ci-swipe{padding:0;border-bottom:1px solid var(--line)}
.box>.ci-swipe:last-child{border-bottom:0}
.ci-swipe .ci{border:0;padding:0}
.ci:last-child{border-bottom:0}
.ci img{width:64px;height:64px;border-radius:14px;object-fit:cover;object-position:center;flex:0 0 64px;max-width:none}
.ci .m{flex:1;min-width:0}
.ci .m b{display:block;font-size:14px;line-height:1.25;margin:0 0 2px}
.ci .m span{display:block;font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci .m i{font-style:normal;font-weight:800;font-size:14px}
.ci .qty{padding:2px;border-radius:12px}.ci .qty button{width:30px;height:32px;font-size:18px;border-radius:10px}.ci .qty b{font-size:14px;min-width:16px}
.zones{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.zone{border:2px solid var(--line);border-radius:14px;padding:10px 12px;text-align:start;transition:.15s}
.zone b{display:block;font-size:13px}.zone span{font-size:11.5px;color:var(--mut)}
.zone em{font-style:normal;float:inline-end;font-weight:900;font-size:13px}
.zone.on{border-color:var(--k);background:color-mix(in srgb,var(--y) 16%,var(--surf))}
.prog{margin-top:14px;background:color-mix(in srgb,var(--y) 16%,var(--surf));border-radius:14px;padding:12px}
.prog p{margin:0 0 8px;font-size:12.5px;font-weight:700}
.bar{height:8px;background:color-mix(in srgb,var(--y) 22%,var(--line));border-radius:99px;overflow:hidden}.bar i{display:block;height:100%;background:var(--k);border-radius:99px;transition:width .4s}
.warn{margin-top:10px;background:color-mix(in srgb,var(--err) 10%,var(--surf));color:color-mix(in srgb,var(--err) 75%,#000);border-radius:12px;padding:10px 12px;font-size:12.5px;font-weight:700}
.sum div{display:flex;justify-content:space-between;font-size:14px;padding:5px 0;color:var(--mut)}
.sum .free{color:var(--green);font-weight:800}
.sum .tot{color:var(--k);font-size:18px;font-weight:900;border-top:1px dashed color-mix(in srgb,var(--k) 17%,var(--surf));margin-top:6px;padding-top:12px}
.earn{margin:14px 20px 0;background:var(--k);border-radius:16px;padding:13px 16px;display:flex;justify-content:space-between;align-items:center;color:var(--on-k);font-size:13px}
.earn b{color:var(--y-on-k);font-size:15px}
.ups{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.ups::-webkit-scrollbar{display:none}
.up{flex:0 0 112px;background:var(--bg);border-radius:16px;overflow:hidden;position:relative;text-align:start}
.up img{display:block;width:100%;height:78px;object-fit:cover;object-position:center center;max-width:none;flex:none}
.up div{padding:10px 9px 11px;font-size:12px;font-weight:700;line-height:1.3}
.up .plus{position:absolute;inset-inline-end:6px;top:52px;width:30px;height:30px;font-size:18px}
.ctas{display:flex;flex-direction:column;gap:10px;margin:18px 20px 0}
.wa{height:54px;border-radius:18px;background:var(--green);color:var(--on-k);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 6px 16px color-mix(in srgb,var(--ok) 35%,transparent)}
.pay{font-size:12px;color:var(--mut);text-align:center;margin-top:2px}
.empty{text-align:center;padding:40px 30px}
.empty img{width:180px;height:180px;border-radius:50%;object-fit:cover;margin:0 auto 18px;box-shadow:var(--sh2)}

/* ---- fidelity ---- */
.fhead{background:var(--y);padding:50px 20px 120px;position:relative;overflow:hidden;color:var(--on-y)}
.fhead:after{content:"";position:absolute;inset-inline-start:-70px;bottom:-90px;width:240px;height:240px;border-radius:50%;background:color-mix(in srgb,var(--surf) 25%,transparent)}
.fhead h1{font-family:'Lilita One';font-weight:400;font-size:32px;margin:0;position:relative;z-index:1}
.fhead p{margin:4px 0 0;font-weight:600;font-size:14px;position:relative;z-index:1}
.qrcard{margin:-100px 20px 0;background:var(--surf);border-radius:26px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:10px;box-shadow:var(--sh2);position:relative;z-index:2}
.qrcard canvas{width:176px;height:176px;image-rendering:pixelated}
.code{font-family:'Lilita One';font-size:30px;letter-spacing:6px}
.timer{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--mut);font-weight:600}
.timer .ring{width:18px;height:18px;border-radius:50%;background:conic-gradient(var(--k) var(--p,100%),var(--line) 0)}
.ptsbox{margin:16px 20px 0;background:var(--k);color:var(--on-k);border-radius:22px;padding:18px}
.ptsbox .t{display:flex;justify-content:space-between;align-items:baseline}
.ptsbox .n{font-family:'Lilita One';font-size:34px;color:var(--y-on-k)}
.ptsbox .n small{font-family:Inter;font-size:14px;font-weight:800}
.ptsbox .s{font-size:12px;color:color-mix(in srgb,var(--k) 20%,var(--surf))}
.ptsbox .bar{background:color-mix(in srgb,var(--k) 82%,var(--surf));margin-top:12px;height:10px}.ptsbox .bar i{background:var(--y);color:var(--on-y)}
.rw{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:0 20px}
.rcard{background:var(--surf);border-radius:20px;overflow:hidden;box-shadow:var(--sh);position:relative}
.rcard img{display:block;width:100%;height:104px;object-fit:cover;object-position:center;max-width:none}
.rcard .b{padding:10px 12px 12px}
.rcard b{font-size:13.5px;display:block}
.rcard .p{display:inline-block;margin-top:6px;background:var(--y);font-size:11.5px;font-weight:900;padding:4px 9px;border-radius:99px;color:var(--on-y)}
.rcard.lock img{filter:grayscale(.6) brightness(.9)}
.rcard.lock .p{background:var(--bg)}
.rcard .lk{position:absolute;inset-inline-end:8px;top:8px;width:28px;height:28px;border-radius:50%;background:color-mix(in srgb,var(--surf) 92%,transparent);display:flex;align-items:center;justify-content:center}
.steps{margin:16px 20px 0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.steps div{background:var(--surf);border-radius:16px;padding:12px 8px;text-align:center;font-size:11.5px;font-weight:700;box-shadow:var(--sh)}
.steps i{display:flex;width:30px;height:30px;margin:0 auto 6px;border-radius:50%;background:var(--y);align-items:center;justify-content:center;font-style:normal;font-weight:900;color:var(--on-y)}

/* ---- profile ---- */
.prof{background:var(--k);color:var(--on-k);padding:50px 20px 26px;border-radius:0 0 30px 30px;display:flex;align-items:center;gap:14px}
.av{width:64px;height:64px;border-radius:50%;background:var(--y);color:var(--k);display:flex;align-items:center;justify-content:center;font-family:'Lilita One';font-size:28px}
.prof b{font-size:20px;display:block}.prof span{font-size:13px;color:color-mix(in srgb,var(--k) 20%,var(--surf))}
.prof .pill-pts{margin-inline-start:auto;background:var(--y);color:var(--k)}
.list{background:var(--surf);border-radius:20px;margin:16px 20px 0;box-shadow:var(--sh);overflow:hidden}
.li{display:flex;align-items:center;gap:14px;padding:15px 16px;border-bottom:1px solid var(--line);font-weight:700;font-size:14.5px;width:100%;text-align:start}
.li:last-child{border-bottom:0}
.li .ic{width:36px;height:36px;border-radius:12px;background:var(--bg);display:flex;align-items:center;justify-content:center;flex:0 0 36px}
.li .chev{margin-inline-start:auto;color:color-mix(in srgb,var(--mut) 50%,var(--surf))}
.li small{display:block;font-weight:500;color:var(--mut);font-size:12px;margin-top:1px}
.lang{margin-inline-start:auto;display:flex;background:var(--bg);border-radius:10px;padding:3px}
.lang span{padding:5px 9px;border-radius:8px;font-size:12px}.lang span.on{background:var(--k);color:var(--y-on-k)}

/* ---- nav, cartbar, toast ---- */
.nav{position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:30;height:84px;background:var(--nav);display:flex;justify-content:space-around;align-items:flex-start;padding-top:10px;box-shadow:0 -6px 24px color-mix(in srgb,var(--k) 6%,transparent);border-radius:24px 24px 0 0;transition:transform .3s ease}
.nav.hide{transform:translateY(150%)}
.nav a{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--mut);min-width:58px;position:relative}
.nav a.on{color:var(--k);font-weight:800}
.nav a svg{width:24px;height:24px}
.nav .qr{width:64px;height:64px;margin-top:-30px;border-radius:50%;background:var(--k);display:flex;align-items:center;justify-content:center;border:5px solid var(--bg);box-shadow:0 8px 20px color-mix(in srgb,var(--k) 25%,transparent);min-width:0}
.nav .qr.on{background:var(--y);color:var(--on-y)}
.nav .cnt{position:absolute;top:-4px;inset-inline-end:12px;background:var(--red);color:var(--on-k);font-size:10px;font-weight:900;min-width:18px;height:18px;border-radius:99px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid var(--surf)}
.cartbar{position:absolute;inset-inline-start:16px;inset-inline-end:16px;bottom:96px;z-index:25;transform:translateY(30px);opacity:0;pointer-events:none;transition:.3s}
.cartbar.on{transform:none;opacity:1;pointer-events:auto}
.cartbar a{height:58px;border-radius:18px;background:var(--k);color:var(--on-k);display:flex;align-items:center;justify-content:space-between;padding:0 16px;font-weight:800;font-size:15px;box-shadow:0 12px 28px color-mix(in srgb,var(--k) 30%,transparent)}
.cartbar .n{background:var(--y);color:var(--k);min-width:28px;height:28px;border-radius:99px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;margin-inline-end:10px}
.cartbar .v{color:var(--y-on-k);font-family:'Lilita One';font-weight:400;font-size:19px}
.toast{position:absolute;left:50%;top:54px;z-index:60;transform:translate(-50%,-30px);opacity:0;background:var(--k);color:var(--on-k);font-weight:700;font-size:13.5px;padding:12px 18px;border-radius:999px;transition:.3s;white-space:nowrap;box-shadow:0 10px 24px color-mix(in srgb,var(--k) 30%,transparent);display:flex;gap:8px;align-items:center;pointer-events:none;max-width:350px}
.toast.on{transform:translate(-50%,0);opacity:1}
.toast b{color:var(--y-on-k)}
.pop{animation:pop .4s}
@keyframes pop{40%{transform:scale(1.25)}}
.side-logo{font-size:90px;margin-bottom:10px}

.seg.l button.on{color:var(--y-on-k)}
.ctas .big{flex:none}
.hscroll{padding-bottom:20px;margin-bottom:-6px}
/* Zoom du cadre démo : uniquement quand le téléphone est encadré (PC ≥ 1024, hors desk) */
@media (min-width:1024px) and (max-height:900px){body:not(.desk) .phone{zoom:.86}}
@media (min-width:1024px) and (max-height:780px){body:not(.desk) .phone{zoom:.76}}
@media (min-width:1024px) and (max-height:680px){body:not(.desk) .phone{zoom:.66}}

/* ---- v3 : QR + récompenses ---- */
.pill-pts.qrp{border:0;cursor:pointer;padding:6px 14px 6px 6px;gap:8px;font-family:inherit}
.pill-pts .qi{width:30px;height:30px;border-radius:50%;background:var(--y);color:var(--k);display:flex;align-items:center;justify-content:center}
.pill-pts .qi svg{width:18px;height:18px}
.rrow{display:flex;gap:14px;overflow-x:auto;padding:4px 20px 16px;scrollbar-width:none;scroll-snap-type:x mandatory}
.rrow::-webkit-scrollbar{display:none}
.rrow .rc{flex:0 0 172px;scroll-snap-align:start}
.rc{background:var(--surf);border-radius:18px;box-shadow:var(--sh);padding:16px 12px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
.rc .ring,.rd-ring{width:112px;height:112px;border-radius:50%;position:relative;display:flex;align-items:center;justify-content:center}
.rc .ring:before,.rd-ring:before{content:"";position:absolute;inset:0;border-radius:50%;padding:3px;background:conic-gradient(from 200deg,var(--y),color-mix(in srgb,var(--y) 50%,var(--red)),var(--red),color-mix(in srgb,var(--y) 50%,var(--red)) 60%,var(--y) 75%,transparent 76%,transparent 99%,var(--y));-webkit-mask:linear-gradient(var(--k) 0 0) content-box,linear-gradient(var(--k) 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.rc .ring img,.rd-ring img{width:92px;height:92px;object-fit:contain;position:relative;filter:drop-shadow(0 6px 8px color-mix(in srgb,var(--k) 18%,transparent))}
.rc .rp{border:2px solid transparent;border-radius:999px;padding:2px 12px;font-size:13px;font-weight:800;background:linear-gradient(var(--surf),var(--surf)) padding-box,linear-gradient(90deg,var(--red),color-mix(in srgb,var(--y) 75%,var(--red))) border-box}
.rc b{font-size:13.5px;line-height:1.3;min-height:36px;display:flex;align-items:center}
.rc .ex{width:100%;height:36px;border-radius:12px;background:var(--sub);color:color-mix(in srgb,var(--mut) 62%,var(--surf));font-weight:800;font-size:13px;font-family:inherit;border:0}
.rule{margin:2px 20px 0;font-size:12.5px;color:var(--mut);font-weight:600;text-align:center}
.rulebox{display:flex;gap:12px;align-items:center;text-align:start;background:var(--k);color:var(--on-k);border-radius:18px;padding:14px 16px;margin:0 20px 18px;font-weight:500;font-size:13px;line-height:1.45}
.rulebox b{color:var(--y-on-k);font-size:15px}
.ctop{display:flex;align-items:center;gap:12px;padding:50px 20px 8px}
.ctop .back,.phead .back{flex:none}
.ctop span{font-weight:800;font-size:16px;flex:1}
.ctop b{font-weight:800;font-size:15px}
.ctop .back{width:44px;height:44px;border-radius:50%;background:var(--surf);box-shadow:var(--sh);display:flex;align-items:center;justify-content:center}
.ctitle{font-family:Inter,sans-serif;font-weight:900;font-size:24px;margin:14px 20px 16px;letter-spacing:-.3px}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:0 20px}
/* fidélité façon McDo */
.ftop{display:flex;justify-content:space-between;align-items:center;padding:50px 20px 14px}
.mlogo{background:var(--surf);border-radius:999px;padding:6px 16px 4px;box-shadow:var(--sh);font-size:26px;display:inline-flex}
.ppill{background:var(--surf);border-radius:999px;padding:10px 12px 10px 16px;box-shadow:var(--sh);font-weight:800;font-size:14px;display:flex;align-items:center;gap:4px;color:var(--k)}
.ppill svg{width:16px;height:16px}
.ycard{margin:0 20px;background:var(--y);border-radius:22px;padding:22px 20px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;box-shadow:0 0 0 4px var(--surf),var(--sh2);color:var(--on-y)}
.info-i{position:absolute;inset-inline-end:16px;top:16px;width:28px;height:28px;border-radius:50%;border:2px solid var(--k);font-weight:800;font-family:Georgia,serif;font-size:15px;background:transparent;color:var(--k)}
.qbox{background:var(--surf);border-radius:14px;padding:16px 16px 10px;display:flex;flex-direction:column;align-items:center;gap:8px;border:0;font-family:inherit;color:var(--k)}
.qbox canvas{width:150px;height:150px;image-rendering:pixelated}
.qbox b{font-size:15px;letter-spacing:.5px}
.ycard p{margin:0;font-size:14px;font-weight:500}
.tline{font-size:11.5px;color:color-mix(in srgb,var(--k) 65%,transparent)}
.h2.big2{font-size:23px;font-weight:900}
.sec .vt{border:0;text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:2px;text-underline-offset:3px}
/* feuille QR plein écran */
.qrsheet{position:absolute;inset:0;z-index:40;background:var(--surf);display:flex;flex-direction:column;align-items:center;padding:50px 24px 30px;transform:translateY(100%);transition:transform .38s cubic-bezier(.2,.8,.2,1);text-align:center}
.qrsheet.on{transform:none}
.qs-top{width:100%;display:flex;justify-content:space-between;align-items:center}
.qs-top .mlogo{box-shadow:none;background:var(--y);color:var(--on-y)}
.qs-x{width:44px;height:44px;border-radius:50%;background:var(--sub);border:0;font-size:18px;font-weight:800;color:var(--k)}
.qrsheet h2{font-family:'Lilita One',sans-serif;font-weight:400;font-size:30px;margin:22px 0 4px}
.qs-sub{margin:0 10px;color:var(--mut);font-size:13.5px;line-height:1.45}
.qs-qr{margin-top:22px;padding:18px;border-radius:24px;background:var(--surf);box-shadow:0 0 0 3px var(--k),0 0 0 9px var(--y)}
.qs-qr canvas{width:236px;height:236px;image-rendering:pixelated;display:block}
.qs-code{margin-top:22px;font-size:32px;font-weight:900;letter-spacing:3px}
.qs-t{width:240px;margin-top:10px;font-size:12.5px;color:var(--mut)}
.qs-bar{height:6px;border-radius:6px;background:var(--sub);overflow:hidden;margin-bottom:8px}
.qs-bar i{display:block;height:100%;background:var(--k);border-radius:6px;transition:width 1s linear}
.qs-pts{margin-top:18px;background:var(--k);color:var(--on-k);border-radius:16px;padding:10px 18px;display:flex;gap:12px;align-items:center;font-size:12.5px}
.qs-pts b{color:var(--y-on-k);font-size:16px}
.qs-hint{margin-top:auto;background:color-mix(in srgb,var(--y) 20%,var(--surf));border-radius:14px;padding:10px 14px;font-size:12.5px;font-weight:600}
.rrow{scroll-padding:0 20px}
.rulebox span{flex:1}
/* v3.1 : code fixe, retrait sur place, échange 4 chiffres */
.rc .sp{display:block;font-size:11px;font-weight:600;color:var(--mut);margin:4px 0 0}
.steps.st2{margin-top:10px}
.qs-fix{margin-top:12px;font-size:13px;font-weight:600;color:var(--k);background:var(--sub);border-radius:999px;padding:8px 14px}
.qrsheet.rd{justify-content:flex-start}
.rd-demo{margin-top:10px;font-size:11.5px;font-weight:700;color:color-mix(in srgb,var(--y) 45%,#000);background:color-mix(in srgb,var(--y) 24%,var(--surf));border-radius:999px;padding:5px 12px}
.ring.rd-ring{width:150px;height:150px;margin:18px auto 6px}
.qrsheet.rd h2{text-align:center;padding:0 10px}
.rd-code{display:flex;gap:10px;margin:18px 0 6px}
.rd-code i{font-style:normal;width:58px;height:72px;border-radius:16px;background:var(--y);color:var(--k);font-size:40px;font-weight:800;display:grid;place-items:center}
.rd-code.exp i{background:var(--sub);color:color-mix(in srgb,var(--mut) 50%,var(--surf))}
.rd-ring img{width:120px!important;height:120px!important}
.qrsheet.rd .qs-hint{margin-top:auto}
/* v3.2 : barre du haut commune + bannières éditoriales */
.tbar{position:sticky;top:0;z-index:12;display:flex;justify-content:space-between;align-items:center;padding:46px 16px 10px;background:color-mix(in srgb,var(--hdr) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.mhead{padding-top:0}.mhead .tbar{position:relative;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.tb-logo{background:var(--surf);border-radius:999px;padding:6px 16px 3px;box-shadow:0 4px 14px color-mix(in srgb,var(--k) 12%,transparent);font-size:25px;display:inline-flex;transition:transform .12s}
.tb-r{display:flex;gap:8px;align-items:center}
.tb-qr{width:46px;height:46px;border-radius:14px;background:var(--y);color:var(--on-y);display:grid;place-items:center;box-shadow:0 5px 14px color-mix(in srgb,var(--glow) 45%,transparent),inset 0 -3px 0 color-mix(in srgb,var(--k) 8%,transparent);transition:transform .12s,box-shadow .12s}
.tb-qr svg{width:26px;height:26px;stroke-width:2.4}
.tb-pts{height:46px;background:var(--surf);border-radius:999px;padding:0 12px 0 16px;box-shadow:0 4px 14px color-mix(in srgb,var(--k) 12%,transparent);font-weight:800;font-size:14.5px;display:flex;align-items:center;gap:3px;color:var(--k);transition:transform .12s,box-shadow .12s}
.tb-pts svg{width:16px;height:16px}
.tb-qr:active,.tb-pts:active,.tb-logo:active{transform:scale(.92);box-shadow:0 2px 6px color-mix(in srgb,var(--k) 18%,transparent)}
.hero-top{padding:18px 20px 22px;margin:2px 14px 0;border-radius:28px}
.prof{padding:22px 20px 24px;margin:2px 14px 0;border-radius:28px}
.phead{padding-top:24px} /* v11w: title/back fully below sticky tbar */
#s-fid .ycard{margin-top:6px}
/* bannières pleine largeur façon McDo */
.edito{display:block;width:calc(100% - 28px);margin:18px 14px 0;background:var(--surf);border-radius:26px;overflow:hidden;box-shadow:var(--sh);text-align:start;position:relative;transition:transform .15s}
.edito:active,.wheel-card:active{transform:scale(.985)}
.ed-art{height:190px;position:relative;overflow:hidden;background:linear-gradient(90deg,color-mix(in srgb,var(--y) 90%,var(--red)) 0 50%,color-mix(in srgb,var(--red) 55%,var(--surf)) 50%)}
.ed-art .ph{width:100%;height:100%;object-fit:cover;object-position:center;max-width:none}
.ed-art img.c1,.ed-art img.c2,.ed-art img.c3{position:absolute;filter:drop-shadow(0 10px 12px color-mix(in srgb,var(--k) 28%,transparent))}
.ed-art .c1{width:120px;inset-inline-start:6px;bottom:6px}.ed-art .c2{width:170px;left:50%;bottom:-6px;transform:translateX(-50%)}.ed-art .c3{width:110px;inset-inline-end:6px;bottom:10px}
.ed-k{position:absolute;top:14px;left:50%;transform:translateX(-50%) rotate(-3deg);font-family:'Lilita One';font-size:34px;color:var(--on-k);white-space:nowrap;text-shadow:0 3px 0 color-mix(in srgb,var(--red) 70%,var(--k)),0 6px 14px color-mix(in srgb,var(--k) 25%,transparent);z-index:2}
.sky i{position:absolute;font-style:normal;font-size:46px;top:6px}.sky i:first-child{inset-inline-start:-6px}.sky i:last-child{inset-inline-end:4px}
.ed-txt{padding:16px 64px 18px 18px;position:relative}
.ed-txt b{display:block;font-size:21px;line-height:1.2;font-weight:900;margin-bottom:6px}
.ed-txt p{margin:0;font-size:13.5px;color:color-mix(in srgb,var(--k) 80%,var(--surf));line-height:1.45}
.ed-go{position:absolute;inset-inline-end:16px;bottom:18px;width:40px;height:40px;border-radius:50%;background:var(--sub);display:grid;place-items:center;font-size:20px;font-weight:700}
.edito.adx .ed-art{background:color-mix(in srgb,var(--k) 13%,var(--surf))}
.edito.adx .spons{position:absolute;top:12px;inset-inline-start:12px;background:color-mix(in srgb,var(--surf) 92%,transparent);color:var(--mut);font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px}
.edito.ftour .ed-art{background:radial-gradient(circle at 75% 20%,color-mix(in srgb,var(--red) 60%,var(--k)),color-mix(in srgb,var(--red) 25%,var(--k)) 70%)}
.edito.ftour .ed-k{text-shadow:0 3px 0 color-mix(in srgb,var(--y) 60%,#000),0 6px 14px color-mix(in srgb,var(--k) 40%,transparent);color:color-mix(in srgb,var(--y) 70%,#fff)}
.moon{position:absolute;inset-inline-end:16px;top:10px;font-size:40px}.lant{position:absolute;inset-inline-start:14px;top:12px;font-size:24px;letter-spacing:4px}
.edito.ftour .c2{inset-inline-start:38%}.edito.ftour .c3{inset-inline-end:18px}
.edito.etu .ed-art{background:repeating-linear-gradient(45deg,var(--y) 0 22px,color-mix(in srgb,var(--y) 85%,var(--red)) 22px 44px)}
.edito.etu .ed-k{color:var(--k);text-shadow:0 3px 0 var(--surf)}
.cap{position:absolute;inset-inline-end:14px;top:8px;font-size:40px;transform:rotate(12deg)}
/* roue */
.wheel-card{display:flex;align-items:center;gap:6px;margin:18px 14px 0;border-radius:26px;overflow:hidden;background:radial-gradient(circle at 20% 50%,color-mix(in srgb,var(--y) 50%,var(--red)),var(--red) 75%);box-shadow:var(--sh2);padding:16px 14px;color:var(--on-k);cursor:pointer;transition:transform .15s}
.wheel{flex:0 0 156px;height:156px;border-radius:50%;position:relative;border:6px solid var(--y);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 70%,#000),0 10px 20px color-mix(in srgb,var(--k) 30%,transparent);background:conic-gradient(from -30deg,color-mix(in srgb,var(--red) 75%,#000) 0 60deg,color-mix(in srgb,var(--y) 22%,var(--surf)) 60deg 120deg,color-mix(in srgb,var(--red) 75%,#000) 120deg 180deg,color-mix(in srgb,var(--y) 22%,var(--surf)) 180deg 240deg,color-mix(in srgb,var(--red) 75%,#000) 240deg 300deg,color-mix(in srgb,var(--y) 22%,var(--surf)) 300deg 360deg)}
.wheel i{position:absolute;left:50%;top:50%;font-style:normal;font-size:10.5px;font-weight:900;text-transform:uppercase;width:60px;text-align:center;transform:translate(-50%,-50%) rotate(var(--a)) translateY(-46px);color:var(--y-on-k)}
.wheel i:nth-child(odd){color:color-mix(in srgb,var(--red) 75%,#000)}
.wheel .go{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:radial-gradient(var(--y2),color-mix(in srgb,var(--y) 75%,var(--red)));color:color-mix(in srgb,var(--red) 75%,#000);font-weight:900;font-size:17px;display:grid;place-items:center;box-shadow:0 3px 8px color-mix(in srgb,var(--k) 35%,transparent);z-index:2}
.wheel:before{content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%);border:9px solid transparent;border-top:16px solid var(--y);z-index:3}
.wh-t{flex:1;padding-inline-start:6px}.wh-t span{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:1px;background:var(--y);color:var(--k);padding:4px 9px;border-radius:999px}
.wh-t b{display:block;font-family:'Lilita One';font-weight:400;font-size:28px;line-height:1.05;margin:10px 0 6px}.wh-t p{margin:0;font-size:12.5px;opacity:.92}
.edito.adx .spons{inset-inline-end:auto;width:auto}
/* v3.3 : tickets gourmands F-Quick (remplacent les cartes à anneau) */
.rrow{padding-top:40px;align-items:stretch}
.rrow .tk{flex:0 0 176px;scroll-snap-align:start}
.rgrid{row-gap:44px;padding-top:34px}
.tk{position:relative;margin-top:0;border-radius:20px;text-align:center;
  background:radial-gradient(circle at 0 92px,transparent 11px,var(--y) 12px) left/51% 100% no-repeat,radial-gradient(circle at 100% 92px,transparent 11px,var(--y) 12px) right/51% 100% no-repeat;
  filter:drop-shadow(0 8px 14px color-mix(in srgb,color-mix(in srgb,var(--y) 55%,#000) 28%,transparent));opacity:0;transform:translateY(26px) scale(.96)}
.tk.in{animation:tkIn .55s cubic-bezier(.2,.9,.3,1.25) forwards;animation-delay:calc(var(--i) * 80ms)}
@keyframes tkIn{to{opacity:1;transform:none}}
.tk.bump{animation:tkBump .42s cubic-bezier(.3,1.6,.5,1)}
@keyframes tkBump{0%{transform:scale(1)}35%{transform:scale(.94)}70%{transform:scale(1.03)}100%{transform:scale(1)}}
.tk:active{transform:scale(.97)}
.tk-hat{position:absolute;inset-inline-start:10px;top:10px;width:30px;height:30px;border-radius:50%;background:var(--k);color:var(--on-k);--hat:var(--k);display:grid;place-items:center;z-index:2;box-shadow:0 3px 8px color-mix(in srgb,var(--k) 25%,transparent)}
.tk-hat svg{width:19px;height:19px}
.tk-img{display:block;width:124px;height:124px;object-fit:contain;margin:-34px auto 0;position:relative;filter:drop-shadow(0 10px 10px color-mix(in srgb,var(--k) 28%,transparent));transition:transform .3s}
.tk.in .tk-img{animation:tkPop .6s .15s cubic-bezier(.2,.9,.3,1.4) both;animation-delay:calc(var(--i) * 80ms + 120ms)}
@keyframes tkPop{from{transform:translateY(14px) scale(.85) rotate(-6deg)}to{transform:none}}
.tk-body{margin-top:2px;padding:14px 13px 13px;border-top:2.5px dashed color-mix(in srgb,var(--k) 28%,transparent);display:flex;flex-direction:column;gap:8px}
.tk-body>b{font-size:13.5px;line-height:1.25;min-height:34px;display:flex;align-items:center;justify-content:center;color:var(--k)}
.tk-gauge{height:9px;border-radius:9px;background:color-mix(in srgb,var(--k) 14%,transparent);overflow:hidden}
.tk-gauge i{display:block;height:100%;width:0;border-radius:9px;background:repeating-linear-gradient(45deg,var(--k) 0 8px,color-mix(in srgb,var(--k) 82%,var(--surf)) 8px 16px);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.tk.in .tk-gauge i{width:var(--g);transition-delay:calc(var(--i) * 80ms + 250ms)}
.tk-meta{display:flex;justify-content:space-between;font-size:11.5px;font-weight:600;color:color-mix(in srgb,var(--k) 75%,transparent)}
.tk-meta em{font-style:normal;background:var(--k);color:var(--y-on-k);border-radius:999px;padding:1px 8px;font-weight:800;font-size:10.5px}
.tk .sp{margin:0;color:color-mix(in srgb,var(--k) 70%,transparent)}
.tk .ex{height:36px;border-radius:12px;border:0;font-family:inherit;font-weight:800;font-size:13px;background:color-mix(in srgb,var(--surf) 55%,transparent);color:color-mix(in srgb,var(--k) 45%,transparent);transition:transform .12s}
.tk .ex:active{transform:scale(.94)}
.rd-prev{margin-top:8px;background:var(--y);color:var(--k);border:0;border-radius:999px;padding:6px 12px;font:inherit;font-weight:800;font-size:12px}
.rd-tk{position:relative;width:170px;height:150px;margin:40px auto 4px;border-radius:22px;background:var(--y);display:flex;justify-content:center;color:var(--on-y)}
.rd-tk img{width:150px;height:150px;object-fit:contain;margin-top:-34px;filter:drop-shadow(0 10px 10px color-mix(in srgb,var(--k) 28%,transparent))}
.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:60}
@media (prefers-reduced-motion:reduce){.tk{opacity:1;transform:none;animation:none!important}.tk-gauge i{width:var(--g)}}
/* v3.4 : livraison au prix calculé (adresses enregistrées, jamais de km affichés) */
.achips{display:flex;gap:8px}
.achip{flex:1;min-width:0;border:2px solid var(--line);background:var(--surf);border-radius:16px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:inherit;transition:transform .12s,border-color .15s,background .15s}
.achip span{font-size:20px;line-height:1}
.achip b{font-size:13px}
.achip small{font-size:10.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.achip.on{border-color:var(--k);background:color-mix(in srgb,var(--y) 16%,var(--surf));box-shadow:0 4px 10px color-mix(in srgb,var(--k) 8%,transparent)}
.achip:active{transform:scale(.95)}
.dfee{margin-top:12px;background:color-mix(in srgb,var(--y) 16%,var(--surf));border-radius:14px;padding:12px 14px;animation:dIn .3s ease}
.dfee div{display:flex;align-items:baseline;gap:6px}
.dfee b{font-size:20px;font-weight:900}
.dfee span{font-size:14px;font-weight:700;color:var(--mut)}
.dfee small{display:block;margin-top:4px;font-size:11.5px;color:var(--mut)}
.hz{margin-top:12px;background:color-mix(in srgb,var(--err) 10%,var(--surf));color:color-mix(in srgb,var(--err) 75%,#000);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;animation:dIn .3s ease}
.hz b{font-size:14.5px}.hz span{font-size:12.5px;color:color-mix(in srgb,var(--err) 50%,#000)}
.hz button{align-self:flex-start;margin-top:4px;background:var(--k);color:var(--on-k);border:0;border-radius:999px;padding:8px 14px;font:inherit;font-weight:800;font-size:12.5px}
@keyframes dIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* v3.5 : barème des cadeaux, cartes atteignables allumées / non atteignables grisées */
.tk.ok .ex{background:var(--k);color:var(--y-on-k);box-shadow:0 4px 10px color-mix(in srgb,var(--k) 22%,transparent)}
.tk.ok .tk-meta em{background:var(--ok);color:var(--on-k)}
.tk.lock{--y:var(--line);filter:drop-shadow(0 6px 10px color-mix(in srgb,var(--k) 10%,transparent))}
.tk.lock .tk-img{filter:grayscale(1) opacity(.55) drop-shadow(0 8px 8px color-mix(in srgb,var(--k) 15%,transparent))}
.tk.lock .tk-hat{background:var(--mut);font-size:14px}
.tk.lock .tk-body>b{color:var(--mut)}
.tk.lock .tk-gauge i{background:repeating-linear-gradient(45deg,var(--mut) 0 8px,color-mix(in srgb,var(--mut) 80%,var(--surf)) 8px 16px)}
.tk.lock .tk-meta em{background:var(--mut);color:var(--on-k)}
.tk.lock .sp b{color:var(--k)}
.tk.lock .ex{background:color-mix(in srgb,var(--surf) 70%,transparent);color:var(--mut);cursor:not-allowed}
.tk.lock:active{transform:none}
.sw{margin-inline-start:auto;flex:0 0 46px;width:46px;height:28px;border-radius:999px;border:0;background:color-mix(in srgb,var(--k) 20%,var(--surf));position:relative;transition:background .2s}
.sw i{position:absolute;inset-inline-start:3px;top:3px;width:22px;height:22px;border-radius:50%;background:var(--surf);box-shadow:0 2px 4px color-mix(in srgb,var(--k) 20%,transparent);transition:transform .2s}
.sw.on{background:var(--ok)}.sw.on i{transform:translateX(18px)}

/* ---------- v3.6 : paiement (CMI démo / terminal / espèces), commande envoyée, back-office ---------- */
.pays{display:flex;gap:8px}
.pchip{flex:1;min-width:0;border:2px solid var(--line);background:var(--surf);border-radius:16px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;font-family:inherit;text-align:center;transition:transform .12s,border-color .15s,background .15s}
.pchip span{font-size:20px;line-height:1}
.pchip b{font-size:12.5px;line-height:1.15}
.pchip small{font-size:10.5px;color:var(--mut)}
.pchip.on{border-color:var(--k);background:color-mix(in srgb,var(--y) 18%,var(--surf));box-shadow:0 4px 10px color-mix(in srgb,var(--k) 8%,transparent)}
.pchip:active{transform:scale(.95)}
.pnote{margin-top:10px;background:color-mix(in srgb,var(--red) 6%,var(--surf));border:1px dashed color-mix(in srgb,var(--red) 40%,var(--surf));border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.pnote b{font-size:13px}.pnote span{font-size:11.5px;color:var(--mut)}
.ord{text-align:center}
.ord>small{color:var(--mut);font-size:12px}
.ord .no{font-family:'Lilita One';font-size:40px;letter-spacing:.5px;margin:2px 0 12px}
.ost{display:flex;gap:12px;align-items:center;text-align:start;border-radius:16px;padding:12px 14px;background:color-mix(in srgb,var(--y) 18%,var(--surf))}
.ost>span{font-size:26px}
.ost b{display:block;font-size:14.5px}.ost small{font-size:12px;color:var(--mut)}
.ost.ok{background:color-mix(in srgb,var(--ok) 12%,var(--surf))}.ost.ko{background:color-mix(in srgb,var(--err) 12%,var(--surf))}
.osteps{display:flex;margin:16px 20px 0;gap:6px}
.osteps div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10.5px;color:var(--mut);text-align:center}
.osteps i{width:100%;height:6px;border-radius:9px;background:var(--line)}
.osteps .d i{background:var(--green)}.osteps .d{color:var(--k);font-weight:700}
.osteps .x i{background:color-mix(in srgb,var(--err) 30%,var(--surf))}
.wamsg{background:color-mix(in srgb,var(--ok) 20%,var(--surf));border-radius:14px 14px 4px 14px;padding:12px 14px;font-size:13px;line-height:1.5;color:color-mix(in srgb,var(--ok) 18%,#000);box-shadow:0 2px 6px color-mix(in srgb,var(--k) 6%,transparent)}
.bo{background:color-mix(in srgb,var(--bg) 94%,var(--k))}
.bohead{display:flex;align-items:center;gap:12px;padding:50px 20px 4px}
.bohead>div:first-child{font-size:24px;line-height:1}
.bohead b{display:block;font-size:17px}.bohead small{color:var(--mut);font-size:12px}
.bohead .cnt{margin-inline-start:auto;background:var(--red);color:var(--on-k);font-weight:800;font-size:12px;border-radius:99px;padding:6px 10px;white-space:nowrap}
.boc{padding:14px 16px}
.boc.att{border-inline-start:5px solid var(--y)}.boc.ok{border-inline-start:5px solid var(--green);opacity:.85}.boc.ko{border-inline-start:5px solid var(--red);opacity:.7}
.boc .r1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.boc .r1>b{font-size:16px}
.b{font-style:normal;font-size:10.5px;font-weight:800;border-radius:99px;padding:3px 8px}
.b.wapp{background:color-mix(in srgb,var(--ok) 20%,var(--surf));color:color-mix(in srgb,var(--ok) 70%,#000)}.b.app{background:var(--sub)}.b.att{background:color-mix(in srgb,var(--y) 30%,var(--surf))}.b.ok{background:color-mix(in srgb,var(--ok) 12%,var(--surf));color:color-mix(in srgb,var(--ok) 70%,#000)}.b.ko{background:color-mix(in srgb,var(--err) 12%,var(--surf));color:color-mix(in srgb,var(--err) 75%,#000)}
.boc .t{margin-inline-start:auto;font-size:11.5px;color:var(--mut)}
.boc .t.late{color:var(--red);font-weight:800}
.boc .who{font-size:12px;color:var(--mut);margin-top:4px}
.boc ul{margin:8px 0 0;padding-inline-start:18px;font-size:13px;line-height:1.5}
.boc .r2{display:flex;justify-content:space-between;margin-top:8px;font-size:13px}
.boc .r2 b{font-size:16px}
.acts{display:flex;gap:8px;margin-top:12px}
.acts button{flex:1;height:46px;border-radius:14px;font-weight:800;font-family:inherit;font-size:14px;border:0}
.acts .ok{background:var(--green);color:var(--on-k);flex:2}.acts .ko{background:var(--surf);border:2px solid color-mix(in srgb,var(--err) 30%,var(--surf));color:color-mix(in srgb,var(--err) 75%,#000)}

/* ---------- v4 : prêt pour l'arabe (dir="rtl") — propriétés logiques ci-dessus, miroirs ici ---------- */
[dir=rtl] .lc-dir{transform:scaleX(-1)}
[dir=rtl] .sw.on i{transform:translateX(-18px)}

/* ---------- v4 : homogénéité, zones tactiles ≥ 44 px, fluidité ---------- */
[hidden]{display:none!important}
:root{--dx:1}[dir=rtl]{--dx:-1}
.screen{transform:translateX(calc(var(--dx) * 18px))}
.screen.on{transform:none}
/* zones tactiles : 44 px minimum (visuel inchangé quand une zone invisible suffit) */
.tb-logo{height:46px;align-items:center;padding:3px 16px 0}
.seg button,.tab,.chip,.tk .ex,.lang button{min-height:44px}
.opt{min-height:48px}
.nav a{min-height:48px;justify-content:center}
.plus,.info-i,.sw,.ci .qty button{position:relative}
.plus::after,.ci .qty button::after{content:"";position:absolute;inset:-5px}
.info-i::after{content:"";position:absolute;inset:-8px}
.sw::after{content:"";position:absolute;inset:-8px -4px}
.ci .qty button{width:34px;height:36px}
.sec a{padding:12px 0 2px;margin-block:-12px -2px}
/* sélecteur de langue : FR actif, EN / AR « bientôt » */
.lang{gap:2px}
.lang button{padding:0 10px;border-radius:8px;font-size:12px;font-weight:800;color:var(--k);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.lang button.on{background:var(--k);color:var(--y-on-k)}
.lang button:not(.on){color:var(--mut)}
.lang small{font-size:9px;font-weight:700;color:var(--mut)}
/* recherche du menu (vrai champ) */
.search input{flex:1;min-width:0;height:44px;border:0;background:transparent;font:inherit;font-size:14px;color:var(--k);outline:0}
.search input::placeholder{color:var(--mut)}
.search:focus-within{box-shadow:0 0 0 2px var(--k),var(--sh)}
.mempty{padding:30px 30px 10px}.mempty p{color:var(--mut);margin:6px 0 0}
/* même retour visuel au toucher partout */
.back,.round,.li,.pchip,.achip,.big,.wa,.edito,.card,.cat{transition:transform .12s}
.back:active,.round:active,.li:active,.pchip:active,.achip:active,.big:active,.wa:active,.cat:active,.card:active{transform:scale(.97)}
.li:active{transform:none;background:color-mix(in srgb,var(--k) 3%,var(--surf))}
/* focus clavier visible */
:focus-visible{outline:3px solid var(--k);outline-offset:2px;border-radius:12px}
/* cadeaux : la règle sous l'en-tête commun */
#s-cadeaux .rulebox{margin-top:12px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.screen{transform:none}}
.tk .ex{height:44px}
.qty button{width:44px}
.lang button{min-width:44px}
.sec a{display:inline-flex;align-items:flex-end;min-height:44px;padding:0 0 1px;margin-block:-14px -4px;border-bottom:0;text-decoration:underline;text-decoration-color:var(--y);text-decoration-thickness:2px;text-underline-offset:4px}
.bohead small{white-space:nowrap}
.logo,.codetxt,.qs-code,.rd-code,.ord .no{direction:ltr;unicode-bidi:isolate}

/* sélecteur de langue : libellé arabe en vraie police arabe (Noto Kufi Arabic, gratuite) */
.lang .ln[lang=ar]{font-family:'Noto Kufi Arabic',Tahoma,sans-serif;font-size:14px;font-weight:700;line-height:1.2}

/* ---------- v5 ---------- */
/* gris plus foncés (accessibilité) : --mut var(--mut), nav et langues var(--mut), cadeaux verrouillés var(--mut) */
.hsearch{margin:12px 0 0;box-shadow:none;border:1.5px solid color-mix(in srgb,var(--k) 12%,transparent)}
.hsearch input,.search input{color:var(--k)}
.hhban{margin:14px 20px 0;display:flex;gap:12px;align-items:center;background:var(--k);color:var(--on-k);border-radius:18px;padding:12px 16px}
.hhban .hh-ic,.bohh .hh-ic{width:38px;height:38px;flex:none;border-radius:12px;background:var(--y);color:var(--k);display:flex;align-items:center;justify-content:center;font-size:20px}
.hhban b{display:block;font-size:14.5px}.hhban span{font-size:12px;color:color-mix(in srgb,var(--bg) 88%,var(--k))}
.hhban.now{box-shadow:0 0 0 3px var(--y)}
.earn .hhe{display:block;color:var(--y-on-k);font-size:11.5px;font-weight:700;margin-top:2px}
/* mon compte */
.hist{margin-top:12px}
.h-r1{display:flex;align-items:center;gap:8px}.h-r1 b{font-size:15px}.h-r1 span{margin-inline-start:auto;font-size:12px;color:var(--mut);font-weight:600}
.h-r1 .b{font-style:normal;font-size:11px;font-weight:800;border-radius:99px;padding:3px 9px;background:color-mix(in srgb,var(--ok) 12%,var(--surf));color:color-mix(in srgb,var(--ok) 65%,#000)}
.h-r1 .b.refusee{background:color-mix(in srgb,var(--err) 12%,var(--surf));color:color-mix(in srgb,var(--err) 75%,#000)}
.h-imgs{display:flex;gap:6px;margin:10px 0 4px}.h-imgs img{width:48px;height:48px;border-radius:12px;object-fit:cover;object-position:center;background:var(--bg);max-width:none}
.hist ul{margin:6px 0;padding-inline-start:18px;font-size:12.5px;color:var(--mut);line-height:1.55}
.h-r2{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.h-pts{font-style:normal;font-weight:800;font-size:12px;background:var(--y2);border-radius:99px;padding:3px 10px}
.h-re{margin-top:12px;width:100%;justify-content:center}
.adl .li{width:100%}
.deftag{font-style:normal;font-size:11px;font-weight:800;background:var(--y);color:var(--k);border-radius:99px;padding:4px 10px;margin-inline-start:auto}
.adadd{margin:14px 20px 12px;width:calc(100% - 40px);justify-content:center}
/* back-office : happy hour points */
.bosec{margin:22px 20px 6px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.bohh .hh-h{display:flex;align-items:center;gap:12px}
.bohh .hh-h div{flex:1}.bohh .hh-h b{display:block;font-size:15px}.bohh .hh-h small{font-size:12px;color:var(--mut)}
.bohh h4{margin:16px 0 8px;font-size:13px}
.hh-body.off{opacity:.45}
.hh-pl{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;font-weight:600}
.hh-pl input{flex:1;height:42px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);font:inherit;font-size:15px;font-weight:700;padding:0 10px;color:var(--k)}
.hh-del{width:36px;height:36px;border-radius:50%;border:0;background:var(--sub);font-weight:800;color:var(--k)}
.hh-add{border:1.5px dashed color-mix(in srgb,var(--k) 30%,transparent);background:none;border-radius:12px;height:40px;width:100%;font-weight:700;color:var(--k)}
.hh-m{display:flex;gap:8px}.hh-m button{flex:1;height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--surf);font-weight:700;font-size:13px;color:var(--k)}
.hh-m button.on{background:var(--k);color:var(--on-k);border-color:var(--k)}
.hh-prev{margin-top:14px;background:var(--bg);border-radius:14px;padding:10px 12px;font-size:13px}
.hh-prev small{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin-bottom:3px}
/* QR fidélité : mode scan automatique (plein écran blanc pur, QR noir agrandi, écran maintenu allumé) */
.qrsheet.scan{background:var(--surf);padding:44px 18px 26px;justify-content:flex-start}
.qrsheet.scan .qs-nm{font-family:'Lilita One',sans-serif;font-size:22px;color:var(--k)}
.qrsheet.scan .qs-x{background:var(--sub);color:var(--k)}
.qrsheet.scan .qs-qr{margin-top:26px;padding:14px;border-radius:0;background:var(--surf);box-shadow:none}
.qrsheet.scan .qs-qr canvas{width:min(312px,78vw);height:min(312px,78vw)}
.qrsheet.scan .qs-code{margin-top:16px;font-size:34px;color:var(--k)}
.qrsheet.scan .qs-sub{margin-top:6px;color:color-mix(in srgb,var(--k) 85%,var(--surf))}
.qs-wl{margin-top:14px;font-size:13px;font-weight:700;color:var(--k);background:var(--sub);border-radius:999px;padding:8px 14px}
.qs-wl:empty,.qs-wl[hidden]{display:none}
.qs-wl.off{background:transparent;font-weight:600;color:var(--mut);padding:0;border-radius:0;margin-top:10px}
.qrsheet.scan .qs-pts{margin-top:auto}
/* v5.1 : back-office en 2 onglets (Commandes / Réglages) + sélecteur de démo « Voir comme » */
.bodemo{display:flex;align-items:center;gap:8px;margin:12px 20px 0;padding:6px 6px 6px 10px;border:1.5px dashed color-mix(in srgb,var(--k) 28%,transparent);border-radius:14px;font-size:12px;font-weight:700;color:var(--mut)}
.bodemo em{font-style:normal;font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;background:var(--k);color:var(--on-k);border-radius:6px;padding:3px 6px}
.bodemo-s{margin-inline-start:auto;display:flex;background:color-mix(in srgb,var(--k) 8%,transparent);border-radius:10px;padding:3px}
.bodemo-s button{border:0;background:none;font:inherit;font-size:12.5px;font-weight:800;color:var(--k);padding:7px 12px;border-radius:8px}
.bodemo-s button.on{background:var(--surf);box-shadow:0 1px 4px color-mix(in srgb,var(--k) 12%,transparent)}
.botabs{display:flex;gap:6px;margin:14px 20px 0;background:var(--surf);border-radius:16px;padding:5px;box-shadow:var(--sh)}
.botabs button{flex:1;height:44px;border:0;border-radius:12px;background:none;font:inherit;font-weight:800;font-size:14px;color:var(--mut);display:flex;align-items:center;justify-content:center;gap:6px}
.botabs button.on{background:var(--k);color:var(--on-k)}
.botabs button i{font-style:normal;font-size:11px;font-weight:900;background:var(--red);color:var(--on-k);border-radius:99px;min-width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
.boalert{display:flex;align-items:center;gap:12px;margin:14px 20px 0;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--err) 12%,var(--surf));color:color-mix(in srgb,var(--err) 55%,#000);border:1.5px solid color-mix(in srgb,var(--err) 30%,var(--surf))}
.boalert>span{font-size:22px}.boalert b{display:block;font-size:14px}.boalert small{font-size:12px}
.boempty{text-align:center;font-weight:700;color:var(--mut);font-size:13.5px}
.boscan p{margin:0 0 10px;font-size:12.5px;color:var(--mut)}
.boscan label{display:block;font-size:11.5px;font-weight:800;color:var(--mut)}
.boscan input{display:block;width:100%;box-sizing:border-box;margin-top:4px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--bg);font:inherit;font-size:15px;font-weight:700;padding:0 12px;color:var(--k)}
.bs-f{display:grid;grid-template-columns:1fr 1fr;gap:8px}.bs-m{margin-top:8px}
.boscan .big{margin-top:12px;width:100%;justify-content:center}
.boinfo{padding:6px 16px 12px}
.bo-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.bo-row:last-of-type{border-bottom:0}
.bo-row span{color:var(--mut);font-weight:600}.bo-row span small{display:block;font-size:11.5px;font-weight:500;margin-top:2px}
.bo-row b{text-align:end}
.bo-ro{font-size:12.5px;background:var(--bg);border-radius:99px;padding:6px 10px;white-space:nowrap}
.bo-ex{display:block;font-size:11.5px;color:var(--mut);margin-top:6px}
.bo-edit{margin-top:8px;width:100%;height:40px;border-radius:12px;border:1.5px solid var(--line);background:var(--surf);font:inherit;font-weight:800;font-size:13px;color:var(--k)}

/* ---------- v6 : icônes au trait monochromes (Lucide, icons.js) ---------- */
:root{--ico:var(--k)}
.lc{flex:none;display:inline-block;vertical-align:-.18em;stroke-width:2}
.li .ic,.info .ic{width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:color-mix(in srgb,var(--y) 20%,var(--surf));color:var(--ico);display:flex;align-items:center;justify-content:center}
.li .ic .lc,.info .ic .lc{width:20px;height:20px}
.achip span,.pchip span{display:flex;color:var(--ico)}
.achip.on span,.pchip.on span{color:var(--k)}
.steps i{color:var(--k)} .steps i .lc{width:16px;height:16px}
.kcal span{display:inline-flex;align-items:center;gap:5px}.kcal .lc{color:var(--k)}
.rulebox>.lc{color:var(--y-on-k)}
.ost>span{display:flex;color:var(--k)}
.empty-ic{color:var(--mut);display:flex;justify-content:center;margin-bottom:10px}
.boalert>span{display:flex}
.botabs button,.big,.bo-ro,.boempty,.vt,.h-r2 span,.qs-sub,.toast{align-items:center}
.botabs button .lc,.big .lc,.toast .lc{margin-inline-end:4px}
.sky i,.moon,.lant,.cap{color:var(--k);line-height:0}
.ed-go .lc{color:var(--k)}
.tbar{transition:transform .2s ease,opacity .2s ease;will-change:transform,opacity}
/* Pre-v12u: header slides away on scroll down, returns on scroll up */
.tbar.tb-hide{transform:translateY(-100%);opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.tbar{transition:none}}

/* Pointage (v7) */
.bopt{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:12px}.bopt>div{flex:1;min-width:0}.bopt b{display:block;font-size:14.5px}.bopt small{color:var(--mut);font-size:12px}
.pt-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--y2);color:var(--on-y);flex:0 0 38px}
.pt-btn{border:0;border-radius:999px;padding:10px 14px;font:inherit;font-weight:800;font-size:13px;background:var(--y);color:var(--on-y);white-space:nowrap}.pt-btn.out{background:var(--k);color:var(--on-k)}
.pt-tot{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:6px}.pt-tot div{background:var(--sub);border-radius:12px;padding:8px 10px}.pt-tot small{display:block;color:var(--mut);font-size:11px}.pt-tot b{font-size:15px}
.pt-row{gap:8px}.pt-row small{display:block;color:var(--mut);font-size:11.5px;font-weight:500}.pt-row em{color:var(--err);font-style:normal}.pt-fix{margin:0;padding:6px 10px;font-size:12px}

/* v7 : info sous le QR, jamais par-dessus (zone de silence du QR libre) */
.qbox{margin:4px 0}
.info-l{display:inline-flex;align-items:center;gap:6px;margin-top:2px;padding:8px 14px;border-radius:999px;border:1.5px solid color-mix(in srgb,var(--on-y) 35%,transparent);background:transparent;color:var(--on-y);font:inherit;font-size:13px;font-weight:700;min-height:36px}
.info-l svg{flex:0 0 auto}
.ycard p,.ycard .tline{text-align:center}
.pt-row{display:grid;grid-template-columns:1fr auto auto;align-items:center}.pt-row>b{white-space:nowrap;font-size:14px}.bo-edit.pt-fix{width:auto;margin:0;padding:6px 12px}
/* icônes venant de la BDD (champ icon, Lucide) : couleur du thème */
.dbic{display:inline-flex;vertical-align:-2px;margin-inline-end:5px;color:var(--ico)}
.catl{display:inline-flex;align-items:center;justify-content:center}
.vt-canal{display:flex;gap:8px;margin:8px 0}.vt-canal button{flex:1;display:flex;gap:6px;align-items:center;justify-content:center;padding:8px;border-radius:12px;border:1px solid var(--line,#ddd);background:none;color:inherit;font:inherit}.vt-canal button.on{background:var(--ico);color:#fff;border-color:var(--ico)}
.vt-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--line,#eee)}.vt-row small{display:block;opacity:.7}.vt-q{display:flex;align-items:center;gap:10px}.vt-q button{width:30px;height:30px;border-radius:50%;border:1px solid var(--line,#ddd);background:none;color:inherit;display:grid;place-items:center}
.vt-tot,.vt-tk{display:flex;justify-content:space-between;margin:10px 0;gap:8px}.vt-ok{display:flex;gap:6px;align-items:center;font-weight:700}
.vt-claim{display:flex;gap:12px;align-items:center;margin:10px 0}.vt-claim canvas{width:96px;height:96px;image-rendering:pixelated;flex:none}.vt-claim .codetxt{font-size:20px;letter-spacing:2px;display:block}.vt-claim small{opacity:.75}
.bo-edit.vt-cl{width:100%;margin-top:8px}
.claim-l{display:flex;align-items:center;gap:10px;width:calc(100% - 32px);margin:12px 16px 0;padding:12px;border-radius:14px;border:1px solid var(--line,#e5e5e5);background:var(--card,#fff);color:inherit;font:inherit;text-align:start}.claim-l span{flex:1}.claim-l small{display:block;opacity:.7}.claim-l .lc{color:var(--ico)}
[dir=rtl] .claim-l>.lc:last-child{transform:scaleX(-1)}
.cl-p{margin:0 0 10px}.pal-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.pal{border:2px solid transparent;border-radius:14px;padding:6px;background:none;color:inherit;font:inherit;text-align:start}.pal.on{border-color:var(--k)}
.pal-v{display:block;border:1px solid;border-radius:10px;padding:6px;height:64px}.pal-h{display:block;border-radius:6px;padding:4px 8px;font-weight:800;font-size:13px}.pal-c{display:flex;align-items:center;gap:6px;margin-top:6px;border-radius:6px;padding:4px 8px;font-size:12px}.pal-c i{width:10px;height:10px;border-radius:50%}
.pal-n{display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;margin-top:6px}
.cl-tg{width:100%;margin-top:12px}.cl-live{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0;padding:10px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}.cl-btn{padding:8px 14px;border-radius:999px;font-weight:800}.cl-txt{color:var(--k);font-weight:700}.cl-mut{color:var(--mut);font-size:13px}
.cl-warn{display:flex;gap:6px;align-items:flex-start;font-size:13px;margin-bottom:8px}.cl-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}.cl-row small{display:block;opacity:.6;font-size:11px}.cl-row input{width:44px;height:32px;border:1px solid var(--line);border-radius:8px;padding:0;background:none}
.cl-u.warn b{color:var(--err)}
.ptk{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center}
.ptk-in{background:var(--surf,#fff);width:100%;max-width:480px;border-radius:24px 24px 0 0;padding:18px 18px 28px;max-height:92vh;overflow:auto}
.ptk-h{display:flex;align-items:center;gap:8px;margin-bottom:12px}.ptk-h b{flex:1;font-size:19px;text-align:center}
.ptk-x{border:0;background:transparent;padding:6px;color:inherit}
.ptk-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ptk-p{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:14px;border-radius:16px;border:1.5px solid var(--line,#e5e2da);background:var(--bg,#f6f4ee);color:inherit;text-align:start}
.ptk-p b{font-size:16px}.ptk-p small{opacity:.7}.ptk-p em{font-style:normal;font-size:12px;display:flex;gap:4px;align-items:center;margin-top:4px}
.ptk-p.on{border-color:var(--ok,#1FA855)}.ptk-p.on em{color:var(--ok,#1FA855)}
.ptk-f{display:block;margin-top:14px;opacity:.7;font-size:12px}
.ptk-q{text-align:center;margin:4px 0 14px}.ptk-err{color:var(--err,#E4362B);font-weight:600;display:inline-flex;gap:6px;align-items:center}
.ptk-dots{display:flex;justify-content:center;gap:14px;margin-bottom:18px}.ptk-dots i{width:16px;height:16px;border-radius:50%;border:2px solid currentColor;opacity:.5}.ptk-dots i.f{background:currentColor;opacity:1}
.ptk-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:300px;margin:0 auto}
.ptk-pad button{height:62px;border-radius:16px;border:0;background:var(--bg,#f1efe8);font-size:24px;font-weight:700;color:inherit;display:flex;align-items:center;justify-content:center}
.ptk-pad button:disabled{opacity:.35}
.eq-row.off{opacity:.55}.eq-row .bo-edit{margin-inline-start:6px}
.eq-add{display:grid;gap:10px;padding:12px 0}.eq-add label{display:grid;gap:4px;font-size:13px;font-weight:600}
.eq-add input,.eq-add select{padding:10px 12px;border-radius:12px;border:1.5px solid var(--line,#e5e2da);font:inherit;background:var(--bg,#fff);color:inherit}
.eq-btns{display:flex;gap:10px;justify-content:flex-end}.eq-plus{margin-top:10px;display:inline-flex;gap:6px;align-items:center}
.eq-row{gap:6px}.eq-row>span{flex:1;min-width:0}.eq-row .bo-edit{flex:none;width:auto;min-width:0;padding:7px 11px;font-size:13px}
/* ---------- v10 : back-office PC / grande tablette (≥ 1024 px) ---------- */
body.desk .stage{padding:0;display:block;min-height:100vh}
body.desk .side{display:none}
body.desk .phone{width:100vw;height:100vh;height:100dvh;border-radius:0;box-shadow:none;zoom:1}
.dk{display:grid;grid-template-columns:248px minmax(0,1fr);padding:0;overflow:hidden}
.dk-side{background:var(--k);color:var(--on-k);display:flex;flex-direction:column;gap:18px;padding:22px 14px;overflow-y:auto}
.dk-logo{display:flex;flex-direction:column;gap:4px;padding:0 10px;font-size:26px;line-height:1}
.dk-logo b{font-size:22px}.dk-logo small{font-size:12px;opacity:.75;font-weight:600}
.dk-nav{display:flex;flex-direction:column;gap:4px}
.dk-nav button{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 14px;border:0;border-radius:12px;background:none;color:inherit;font:inherit;font-weight:700;font-size:15px;text-align:start;opacity:.82;cursor:pointer}
.dk-nav button:hover{opacity:1;background:color-mix(in srgb,var(--on-k) 10%,transparent)}
.dk-nav button.on{opacity:1;background:var(--y);color:var(--y-on)}
.dk-nav button i{margin-inline-start:auto;font-style:normal;font-size:11px;font-weight:900;background:var(--red);color:#fff;border-radius:99px;min-width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center}
.dk-lang{margin-top:auto;display:flex;gap:6px;padding:0 6px}
.dk-lang a{flex:1;text-align:center;padding:8px 0;border-radius:10px;color:inherit;text-decoration:none;font-weight:800;font-size:13px;border:1.5px solid color-mix(in srgb,var(--on-k) 30%,transparent)}
.dk-lang a.on{background:var(--on-k);color:var(--k)}
.dk-main{overflow-y:auto;min-width:0}
.dk-top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;padding:18px 32px;background:color-mix(in srgb,var(--bg) 94%,var(--k));border-bottom:1px solid var(--line)}
.dk-top h1{margin:0;font-size:24px}.dk-top small{color:var(--mut);font-size:13px}
.dk-top .cnt{margin-inline-start:auto;background:var(--red);color:var(--on-k);font-weight:800;font-size:13px;border-radius:99px;padding:7px 12px}
.dk-top .bodemo-s{display:flex;gap:4px;align-items:center;background:var(--surf);border-radius:12px;padding:4px;box-shadow:var(--sh)}
.dk-top .cnt+.bodemo-s{margin-inline-start:0}.dk-top>div:first-child+.bodemo-s{margin-inline-start:auto}
.dk-top .bodemo-s em{font-style:normal;font-size:11px;font-weight:800;color:var(--mut);padding:0 8px;text-transform:uppercase}
.dk-top .bodemo-s button{border:0;background:none;font:inherit;font-weight:700;font-size:13px;padding:8px 12px;border-radius:9px;color:var(--mut);cursor:pointer}
.dk-top .bodemo-s button.on{background:var(--k);color:var(--on-k)}
.dk-body{padding:24px 32px 48px;max-width:1500px}
.dk-body .box,.dk-body .boalert{margin:0}
.dk-body .bosec{margin:24px 0 8px}
.dk-h{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);margin:26px 0 10px}
.dk-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:18px}
.dk-kpi{background:var(--surf);border-radius:18px;padding:16px 18px;box-shadow:var(--sh);display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:center}
.dk-kpi span{grid-row:span 2;width:40px;height:40px;border-radius:12px;background:var(--bg);display:grid;place-items:center;color:var(--k)}
.dk-kpi small{color:var(--mut);font-size:12.5px;font-weight:700}.dk-kpi b{font-size:22px}
.dk-g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.dk-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.dk-tw{padding:0;overflow-x:auto}
.dk-t{width:100%;border-collapse:collapse;font-size:14px}
.dk-t th{text-align:start;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);padding:12px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
.dk-t td{padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.dk-t td small{display:block;color:var(--mut);font-size:12px}
.dk-t tr:last-child td{border-bottom:0}.dk-t .n{text-align:end;white-space:nowrap}
.dk-t tr.off td{opacity:.6}.dk-t tr.off td:last-child{opacity:1}
.dk-blk{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:10px;border:1.5px solid var(--red);background:var(--surf);color:var(--red);font:inherit;font-weight:800;font-size:13px;white-space:nowrap;cursor:pointer}
.dk-blk.on{border-color:var(--line);color:var(--k)}
.dk-note{margin-top:12px}
.dk-intro{margin:0 0 16px;color:var(--mut);font-size:15px;max-width:760px}
.dk-caisse{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,400px);gap:22px;align-items:start}
.dk-cat{display:flex;align-items:center;gap:8px;font-size:14px;margin:18px 0 10px;color:var(--k)}.dk-cat:first-child{margin-top:0}
.dk-prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.dk-prod{position:relative;min-height:88px;border:2px solid transparent;border-radius:16px;background:var(--surf);box-shadow:var(--sh);font:inherit;text-align:start;padding:14px;display:flex;flex-direction:column;justify-content:space-between;gap:6px;cursor:pointer;color:var(--k)}
.dk-prod span{font-weight:800;font-size:15px}.dk-prod small{color:var(--mut);font-weight:700}
.dk-prod.on{border-color:var(--k)}
.dk-prod i{position:absolute;top:8px;inset-inline-end:8px;font-style:normal;background:var(--k);color:var(--on-k);border-radius:99px;min-width:26px;height:26px;display:grid;place-items:center;font-weight:900;font-size:13px}
.dk-prod:active{transform:scale(.97)}
.dk-cr{position:sticky;top:92px}
.dk-ticket .vt-canal button{min-height:48px}
.dk-lines{max-height:calc(100vh - 430px);overflow-y:auto;margin:8px 0}
.dk-ticket .vt-q button{width:44px;height:44px}
.dk-vide{color:var(--mut);display:flex;gap:8px;align-items:center;font-size:14px;padding:18px 0}
.dk-pay{min-height:64px;font-size:18px;margin-top:12px}
.dk-coul .pal-grid,.dk-coul .pals{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.dk-m .dk-kpis{margin:14px 20px}.dk-m .dk-h{margin:20px 20px 8px}.dk-m .box{margin:0 20px}.dk-m .dk-note{margin:10px 20px}
@media (max-width:1180px){.dk{grid-template-columns:212px minmax(0,1fr)}.dk-body{padding:20px 22px 40px}.dk-top{padding:16px 22px}.dk-caisse{grid-template-columns:minmax(0,1fr) 340px}}
.dk-main,.dk-body{display:block}.dk-body>*{grid-column:auto}
.dk-logo svg,.dk-logo img{width:72px;height:auto;max-height:72px}
.dk-caisse{width:100%}
.dk-logo{align-items:flex-start}.dk-pay{width:100%;justify-content:center}
.dk-kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media (max-width:1180px){.dk-kpi{padding:14px}.dk-kpi b{font-size:19px}.dk-kpi span{width:34px;height:34px}.dk-t{font-size:13px}.dk-t th,.dk-t td{padding:10px 9px}.dk-t th{font-size:11px;white-space:normal}.dk-blk{padding:0 8px}}
.dk-logo svg,.dk-logo img{width:140px;max-height:none;display:block}.dk-logo small{margin-top:6px}
@media (max-width:1180px){.dk-adm th:nth-child(2),.dk-adm td:nth-child(2){display:none}}
.dk-logo svg,.dk-logo img{width:auto;height:1em;max-height:none}.dk-logo .logo{font-size:34px}
@media (max-width:1180px){.dk-blk{width:38px;padding:0;justify-content:center;font-size:0;gap:0}}
/* v10.1 : calme visuel (client + back-office) — aucune animation d'entrée, flash, halo ou pulsation. Seuls restent : léger feedback de pression et confettis (canvas JS) à l'échange d'un cadeau. */
*:not(.splash):not(.splash *):not(.tbar):not(.ordbar),*:not(.splash *)::before,*:not(.splash *)::after{animation:none!important;transition:transform .1s ease!important}
/* v10i : exceptions voulues — intro unique du logo (douce, sans lueur) et header masquable (translateY 200 ms) */
.screen,.screen.on{transform:none!important;opacity:0}.screen.on{opacity:1}
.tk{opacity:1!important;transform:none!important}.tk-gauge i{width:var(--g)!important}.splash-tag{opacity:1}
.tb-qr,.dk-pay,.bo .big,.bo button{box-shadow:none}
button:active,a:active,.dk-prod:active{transform:scale(.97)}
.dk-prod.on{border-color:var(--k);background:var(--surf)}
.bo *:hover{filter:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}button:active,a:active,.dk-prod:active{transform:none}}
/* v10.3 — suivi de livraison (carte calme, monochrome, sans animation clignotante) */
.screen,.llive{--lsub:color-mix(in srgb,var(--k) 64%,transparent)}
.lmap{position:relative;height:260px;border-radius:14px;overflow:hidden;background:var(--bg);isolation:isolate}
.lmap.big{height:min(62vh,560px)}
.lmap .leaflet-tile-pane{filter:grayscale(1) contrast(.92) brightness(1.04)}
.lattr{display:block;margin-top:6px;font-size:11px;color:var(--lsub)}
.lbox{padding:10px}
.ldiv{background:none;border:0}
.lpin{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;box-shadow:0 1px 4px rgba(0,0,0,.25);position:relative}
.lpin.r{background:var(--k);color:var(--y-on-k)} .lpin.h{background:var(--surf);color:var(--k);border:2px solid var(--k)}
.lpin.c{background:var(--y);color:var(--on-y);border:2px solid var(--k)}
.lpin b{position:absolute;inset-block-start:-8px;inset-inline-end:-10px;background:var(--k);color:var(--on-k);font-size:10px;border-radius:8px;padding:1px 4px;line-height:1.3}
.leaflet-marker-icon.ldiv{transition:transform 1s linear}
.lsvg{position:absolute;inset:0;width:100%;height:100%;background:repeating-linear-gradient(0deg,transparent 0 23px,var(--line) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,var(--line) 23px 24px)}
.lsvgpin{position:absolute;transform:translate(-50%,-50%);transition:left 1s linear,top 1s linear}
.leta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.leta small{display:block;color:var(--lsub);font-weight:600}.leta b{font-size:30px;font-weight:900;display:flex;color:var(--k)}
.leta span{color:var(--lsub);font-weight:600;text-align:end}
.lsteps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.lsteps li{display:grid;grid-template-columns:24px 1fr auto;align-items:center;gap:10px;color:var(--lsub);font-weight:600}
.lsteps li i{width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center}
.lsteps li.d{color:var(--k)}.lsteps li.d i{background:var(--k);border-color:var(--k);color:var(--on-k)}
.lsteps li.cur span{font-weight:800}.lsteps time{font-size:13px;color:var(--lsub)}
.lav{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--k);color:var(--on-k);font-weight:800;flex:none}
.lav.s{width:26px;height:26px;font-size:11px;display:inline-grid;vertical-align:middle;margin-inline-end:6px}
.lcour{display:flex;align-items:center;gap:12px}.lcour>div{flex:1;min-width:0}.lcour small{display:block;color:var(--lsub)}.lcour b{display:block;font-size:17px}.lcour em{font-style:normal;font-size:12px;color:var(--lsub)}
.lcall{display:inline-flex;align-items:center;gap:6px;background:var(--k);color:var(--on-k);border-radius:999px;padding:10px 14px;font-weight:700;text-decoration:none}
.liv-go,.lbtn{display:flex;align-items:center;justify-content:center;gap:8px;margin:14px 20px 0;padding:14px;border-radius:14px;background:var(--k);color:var(--on-k);font-weight:800;text-decoration:none;border:0;font:inherit;font-weight:800;cursor:pointer}
.lbtn{margin:12px 0 0;width:100%}
.lcur{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--k)}.lcur div{flex:1}.lcur b{display:block}.lcur small{color:var(--lsub)}
.lvr{padding-bottom:30px}
.lvhead{display:flex;align-items:center;gap:12px;padding:18px 20px 6px;flex-wrap:wrap}.lvhead>div{flex:1}.lvhead small{display:block;color:var(--lsub)}
.lshare{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;border:1.5px solid var(--line);color:var(--lsub);font-size:13px;font-weight:700}
.lshare.on{border-color:var(--k);color:var(--k);background:var(--surf)}
.lh2{margin:14px 20px 0;font-size:18px}
.lrun .lr1{display:flex;justify-content:space-between;align-items:center}.lrun p{display:flex;gap:6px;align-items:center;margin:8px 0 0;color:var(--lsub)}
.lst{font-style:normal;font-size:12px;font-weight:800;padding:3px 8px;border-radius:8px;background:var(--bg);color:var(--k)}
.lrun.route .lst{background:var(--k);color:var(--on-k)}.lrun.fini{opacity:.6}
.llive{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr);gap:18px;align-items:start}
.llive .lbox{background:var(--surf);border-radius:18px;box-shadow:var(--sh)}
.llive.m{display:block;margin:0}.llive.m .lmap.big{height:300px}.llive.m .llist{margin-top:12px}
.llist{background:var(--surf);border-radius:18px;padding:14px;box-shadow:var(--sh)}
.llh{margin-bottom:8px}
.ltab{width:100%;border-collapse:collapse;font-size:14px}.ltab th{text-align:start;color:var(--lsub);font-size:12px;font-weight:700;padding:6px 4px;border-bottom:1px solid var(--line)}
.ltab td{padding:10px 4px;border-bottom:1px solid var(--line);vertical-align:middle}.ltab td small{display:block;color:var(--lsub)}
.llate{font-style:normal;font-weight:800;color:var(--err)}.lok{font-style:normal;color:var(--lsub)}
.lwait{display:flex;gap:6px;align-items:center;margin-top:10px;color:var(--lsub);font-size:13px}
.lnone{color:var(--lsub)}
@media (prefers-reduced-motion:reduce){.leaflet-marker-icon.ldiv,.lsvgpin{transition:none}}
/* v10.4 — barre « commande en cours » au-dessus de la navigation (glissement doux à l'entrée, une seule fois) */
.ordbar{position:absolute;inset-inline:12px;bottom:92px;z-index:26;transform:translateY(16px);opacity:0;pointer-events:none;transition:transform .35s ease,opacity .35s ease,bottom .2s ease}
.ordbar.on{transform:none;opacity:1;pointer-events:auto}.ordbar.up{bottom:162px}
.ordbar:empty{display:none}
.ob-in{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 14px;border-radius:16px;background:var(--k);color:var(--on-k);text-decoration:none;box-shadow:0 8px 20px color-mix(in srgb,var(--k) 22%,transparent)}
.ob-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--y);color:var(--on-y);flex:none}
.ob-t{flex:1;min-width:0;display:grid;gap:6px}.ob-t b{font-size:15px}
.ob-p{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.ob-p i{height:4px;border-radius:2px;background:color-mix(in srgb,var(--on-k) 25%,transparent)}.ob-p i.d{background:var(--y)}
.ob-eta{font-family:'Lilita One';font-size:20px;color:var(--y-on-k);white-space:nowrap}
.ob-rate{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--y);background:none;color:var(--y-on-k);border-radius:999px;padding:7px 12px;font:inherit;font-weight:800;cursor:pointer}
body.has-ob .screen{padding-bottom:200px}body.has-ob #s-menu{padding-bottom:260px}
@media (prefers-reduced-motion:reduce){.ordbar{transition:none}}
/* v10.5 — attribution OSM repliée dans un bouton « © » discret (coin bas, côté fin de ligne ; inversé en RTL) */
.lcopy{position:absolute;bottom:6px;inset-inline-end:6px;z-index:500;display:flex;align-items:center;gap:6px;flex-direction:row-reverse}
.lcopy-b{width:22px;height:22px;border-radius:50%;border:0;background:rgba(255,255,255,.7);color:#666;font:700 12px/22px Inter,sans-serif;padding:0;cursor:pointer;opacity:.75}
.lcopy-t{background:rgba(255,255,255,.85);color:#555;font-size:11px;padding:2px 8px;border-radius:10px;white-space:nowrap}
.lcopy-t a{color:#444}
/* v10.6 — notation après livraison (sobre, sans glow) */
.lrate,.lmynote{display:flex;align-items:center;gap:12px}.lrate>div,.lmynote>div{flex:1;min-width:0}.lrate small,.lmynote small{display:block;color:var(--lsub);font-size:12.5px}
.lrate-b{border:0;background:var(--k);color:var(--on-k);border-radius:999px;padding:9px 14px;font:inherit;font-weight:800;cursor:pointer}
.rtsheet{position:absolute;inset:0;z-index:70;pointer-events:none}
.rtsheet .rt-bg{position:absolute;inset:0;background:rgba(0,0,0,.35);opacity:0;transition:opacity .25s}
.rtsheet .rt-in{position:absolute;inset-inline:0;bottom:0;max-height:88%;overflow:auto;background:var(--surf);border-radius:22px 22px 0 0;padding:22px 20px 28px;transform:translateY(100%);transition:transform .3s ease;--lsub:color-mix(in srgb,var(--k) 64%,transparent)}
.rtsheet.on{pointer-events:auto}.rtsheet.on .rt-bg{opacity:1}.rtsheet.on .rt-in{transform:none}
.rt-x{position:absolute;top:14px;inset-inline-end:14px}
.rt-in h2{margin:0 0 6px;font-size:19px;padding-inline-end:44px}.rt-in section{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.rt-in h3{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:15px}
.rstars{display:flex;gap:6px}.rstars button{border:0;background:none;padding:2px;color:var(--line);cursor:pointer}
.rstars button.on{color:var(--k)}.rstars button.on svg{fill:var(--y)}
.rtags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.rtags button{border:1.5px solid var(--line);background:var(--surf);color:var(--k);border-radius:999px;padding:7px 12px;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.rtags button.on{background:var(--k);color:var(--on-k);border-color:var(--k)}
.rcom{display:grid;gap:6px;margin-top:16px;font-weight:700;font-size:14px}.rcom textarea{font:inherit;border:1.5px solid var(--line);border-radius:12px;padding:10px;background:var(--bg);color:var(--k);resize:none}
.rt-in .lbtn{margin-top:16px}.rt-in .lbtn:disabled{opacity:.4;cursor:default}
.rt-ok{display:grid;justify-items:center;text-align:center;gap:6px;padding:20px 0 0;color:var(--k)}.rt-ok b{font-size:19px}.rt-ok p{margin:0;color:var(--lsub)}.rt-ok .lbtn{width:100%}
.lcol{display:grid;gap:18px}.llive.m .lcol{gap:12px;margin-top:12px}.llive.m .lcol .llist{margin-top:0}
.lnrow{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)}.lnrow bdi{flex:1;font-weight:700}.lnst{display:inline-flex;align-items:center;gap:4px;font-weight:800}.lnst svg{fill:var(--y)}.lnrow small{color:var(--lsub)}
.lnlow{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}.lnsc{display:flex;gap:12px;color:var(--err);font-weight:700;margin-top:4px}
.lntags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.lntags i{font-style:normal;font-size:12px;background:var(--bg);border-radius:8px;padding:2px 8px}
.lnlow p{margin:6px 0 0;color:var(--lsub)}
@media (prefers-reduced-motion:reduce){.rtsheet .rt-in,.rtsheet .rt-bg{transition:none}}

/* ---------- v10.7 ops.js : caisse, téléphone, pause, notifications, logo, super-admin (sans glow ni animation) ---------- */
.cz{display:grid;gap:12px}.cz-h{display:flex;gap:8px;align-items:center;font-size:16px;margin:0 0 4px}
.cz-st{display:flex;gap:6px;align-items:center;font-weight:700;margin:0;color:var(--mut)}
.cz-k{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0}.cz-k .dk-kpi{box-shadow:none;border:1px solid var(--line);padding:10px 12px}.cz-k .dk-kpi b{font-size:17px}
.cz-g{display:grid;gap:14px}@media(min-width:1024px){.cz-g{grid-template-columns:1fr 1fr}}
.cz-sub{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--mut);margin:10px 0 6px}
.cz-li{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}.cz-li small{display:block;color:var(--mut);font-size:12px}
.op-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.op-row>*{flex:1 1 130px;min-width:0}
.cz input,.cz select,.ph input,.ph select,.op-sh select,.ad-ed input,.ad-pay input{font:inherit;font-size:15px;padding:10px 12px;border:1.5px solid var(--line);border-radius:12px;background:var(--surf);color:inherit;min-height:44px;width:100%;box-sizing:border-box}
.op-f{display:grid;gap:4px;font-size:13px;font-weight:700;color:var(--mut)}
.cz-z .bo-row b{font-variant-numeric:tabular-nums}.cz-tot b{font-size:18px}.cz-ok b{color:color-mix(in srgb,var(--ok) 75%,#000)}.cz-bad b{color:var(--err)}
.ph{display:grid;gap:8px;margin:10px 0}.ph-st{display:flex;gap:6px;align-items:center;font-weight:700;color:var(--mut)}.ph-st.ok{color:color-mix(in srgb,var(--ok) 75%,#000)}
.op-pause{display:inline-flex;gap:6px;align-items:center;border:1.5px solid var(--line);background:var(--surf);color:inherit;font:inherit;font-weight:800;font-size:13px;border-radius:999px;padding:8px 12px;min-height:40px;cursor:pointer;margin-inline-end:8px;white-space:nowrap}
.op-pause.on{background:var(--err);color:#fff;border-color:var(--err)}
.bohead .op-pause{padding:6px 10px;font-size:12px}.bohead .op-pause span{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.op-ov{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.45);display:grid;place-items:end center}
@media(min-width:700px){.op-ov{place-items:center}}
.op-sh{background:var(--surf);color:var(--text,inherit);width:min(440px,100%);border-radius:22px 22px 0 0;padding:20px;display:grid;gap:12px;box-sizing:border-box}@media(min-width:700px){.op-sh{border-radius:22px}}
.op-sh h3{display:flex;gap:8px;align-items:center;margin:0}.op-sh p{margin:0;color:var(--mut);font-size:14px}
.op-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 12px}.op-chips button{font:inherit;font-weight:700;font-size:14px;border:1.5px solid var(--line);background:var(--surf);color:inherit;border-radius:999px;padding:8px 14px;min-height:40px;cursor:pointer}
.op-chips button.on{background:var(--k);color:var(--on-k);border-color:var(--k)}
.op-hor{display:flex;gap:6px;color:var(--mut)}.op-act{display:flex;gap:10px;justify-content:flex-end;align-items:center}.op-act .big{width:auto;padding-inline:20px}
.op-closed{display:flex;gap:12px;align-items:center;margin:10px 16px;padding:12px 14px;border-radius:16px;background:color-mix(in srgb,var(--err) 10%,var(--surf));border:1.5px solid color-mix(in srgb,var(--err) 40%,transparent)}
.op-closed b{display:block}.op-closed small{color:var(--mut)}.op-closed>svg{color:var(--err);flex:none}
#op-notif{position:fixed;top:calc(var(--sat, env(safe-area-inset-top, 0px)) + 8px);left:50%;transform:translate(-50%,-140%);z-index:90;width:min(360px,calc(100% - 24px));display:flex;gap:10px;align-items:center;background:var(--surf);color:inherit;border:1px solid var(--line);border-radius:16px;padding:10px 14px;box-shadow:0 8px 24px rgba(0,0,0,.18);opacity:0;pointer-events:none}
#op-notif.on{transform:translate(-50%,0);opacity:1}#op-notif small{display:block;color:var(--mut)}
.op-ni{width:36px;height:36px;border-radius:10px;background:var(--bg);display:grid;place-items:center;flex:none;color:var(--k)}
.op-nt{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 16px}.op-nt>div{flex:1 1 160px}.op-nt small{display:block;color:var(--mut)}
.op-sw{width:46px;height:28px;border-radius:999px;border:0;background:var(--line);position:relative;cursor:pointer;flex:none}.op-sw i{position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff}
.op-sw.on{background:var(--k)}.op-sw.on i{inset-inline-start:21px}
.lg{display:grid;gap:12px}.lg-lock{display:flex;gap:8px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--bg);font-weight:700;font-size:13.5px}.lg-lock.open{background:color-mix(in srgb,var(--y) 22%,var(--surf))}
.lg-up{display:grid;gap:6px}.lg-up>span{font-weight:700;font-size:13.5px}.lg-f{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lg-f label{cursor:pointer;display:inline-flex;gap:6px;align-items:center}.lg-f label.dis{opacity:.45;cursor:not-allowed}
.lg-th{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;background:#fff}.lg-th.dk{background:#111}.lg-th img{max-width:100%;max-height:100%}
.lg-m{display:inline-grid;place-items:center;border-radius:22%;overflow:hidden;background:var(--k);color:var(--on-k);flex:none}.lg-m.rond{border-radius:50%}.lg-m img{width:100%;height:100%;object-fit:cover;background:#fff}.lg-m b{line-height:1}
.lg-prev{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media(min-width:1024px){.lg-prev{grid-template-columns:repeat(4,1fr)}}
.lg-prev figure{margin:0;display:grid;gap:4px}.lg-prev figcaption{font-size:12px;color:var(--mut);text-align:center}
.lg-prev figure>div{border:1px solid var(--line);border-radius:14px;min-height:110px;display:grid;place-items:center;align-content:center;gap:6px;padding:10px;box-sizing:border-box;text-align:center;font-size:12.5px}
.lg-hd{grid-auto-flow:column;justify-content:start;background:var(--surf);align-content:start!important}
.lg-en{background:#151515;color:#fff}.lg-tk{background:#fff;color:#111;font-family:ui-monospace,monospace}.lg-tk small{color:#555}.lg-tk i{display:block;width:80%;height:2px;background:repeating-linear-gradient(90deg,#bbb 0 4px,transparent 4px 8px)}
.lg-ic{background:var(--bg)}.lg-ic .lg-m{border-radius:24%}.lg-ic .lg-m.rond{border-radius:50%}
.ad-seg{margin-bottom:14px}.ad-t td{white-space:nowrap}.ad-lnk{border:0;background:none;color:inherit;font:inherit;font-size:12.5px;font-weight:700;display:inline-flex;gap:4px;align-items:center;padding:4px 6px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ad-h{margin:6px 0 0;padding-inline-start:16px;font-size:12px;color:var(--mut)}.ad-ed{display:flex;gap:6px;align-items:center}.ad-ed input{width:70px;min-height:36px;padding:6px 8px}.ad-ed input#ad-r{width:150px}
.ad-bars{display:grid;gap:10px}.ad-bar{display:grid;grid-template-columns:70px 1fr 100px;gap:10px;align-items:center}.ad-bar span{height:14px;background:var(--bg);border-radius:999px;overflow:hidden}.ad-bar i{display:block;height:100%;background:var(--k);border-radius:999px}.ad-bar b{text-align:end;font-variant-numeric:tabular-nums;font-size:13px}
.ad-f{margin-bottom:12px}.ad-fh{display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:space-between;align-items:baseline;margin-bottom:6px}.ad-fh span{font-size:13px;color:var(--mut)}.ad-fh span b{color:var(--text,inherit)}
.ad-inv{flex-wrap:wrap}.ad-inv>span:first-child{flex:1 1 180px}.ad-pay{display:flex;gap:6px;align-items:center}.ad-pay input{width:100px;min-height:36px;padding:6px 8px}
.ad-al{justify-content:flex-start}
@media(max-width:1023px){.dk-m .ad-t td,.dk-m .ad-t th{padding:10px}.ad-bar{grid-template-columns:56px 1fr 84px}}
@media(max-width:1023px){.ad-t thead{display:none}.ad-t,.ad-t tbody,.ad-t tr,.ad-t td{display:block;width:auto}.ad-t tr{padding:10px 4px;border-bottom:1px solid var(--line)}.ad-t td{border:0;padding:3px 10px!important;white-space:normal}.ad-t td.n{text-align:start}.dk-tw:has(.ad-t){overflow:visible}
.lg-f label,.lg-f button{width:auto;flex:0 0 auto}}
/* v10.8 assistant de création d'un resto (pas d'animation, pas de lueur) */
.wz{background:var(--bg)}.wz-in{max-width:1080px;margin:0 auto;padding:18px 0 40px}
.wz-in>.box,.wz-in>.wz-rec,.wz-in>div:not(.box){margin-inline:16px}
.wz-back{display:inline-flex;gap:4px;align-items:center;margin:4px 16px 8px;color:var(--k);font-weight:700;font-size:14px;text-decoration:none}
.wz-h{display:flex;gap:8px;align-items:center;font-size:22px;margin:6px 16px 4px;line-height:1.2}.wz-top .wz-h{margin:0}
.wz-p{color:var(--mut);margin:0 16px 8px;font-size:14px}.wz-top .wz-p,.box .wz-p{margin-inline:0}
.wz-top{display:flex;gap:12px;align-items:center;margin:4px 16px 12px}
.wz-card{margin:12px 0 0}.wz-card h3{display:flex;gap:6px;align-items:center}
.wz-g2{display:grid;gap:12px}@media(min-width:1024px){.wz-g2{grid-template-columns:1fr 1fr}}
.wz-f{display:grid;gap:5px;font-size:13.5px;font-weight:700}.wz-f small{font-weight:500;color:var(--mut)}
.wz-f input,.wz-emp input,.wz-emp select{height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--surf);color:var(--k);font:inherit;font-weight:500;padding:0 12px;min-width:0;width:100%;box-sizing:border-box}
.wz-f input:focus-visible,.wz-emp input:focus-visible,.wz-emp select:focus-visible{outline:2px solid var(--k);outline-offset:1px}
.wz-pct,.wz-pin{display:flex;gap:8px;align-items:center}.wz-pct input{max-width:110px}.wz-pin input{max-width:120px;letter-spacing:.2em}
.wz-go{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;min-height:50px;margin-top:14px;border:0;border-radius:14px;background:var(--k);color:var(--on-k);font:inherit;font-weight:800;font-size:15px;text-decoration:none;cursor:pointer}
.wz-row{display:flex;gap:8px;flex-wrap:wrap}.wz-row .bo-edit{flex:1;display:inline-flex;gap:6px;align-items:center;justify-content:center;text-decoration:none;color:var(--k);min-width:150px}
.wz-link{background:var(--bg);border:1px dashed var(--line);border-radius:12px;padding:10px;overflow-wrap:anywhere;font-size:12.5px;direction:ltr;text-align:left}
.wz-hash{overflow-wrap:anywhere;direction:ltr;unicode-bidi:embed;font-size:11px}
.wz-il{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--line)}.wz-il>span{flex:1;min-width:150px;display:grid}.wz-il small{color:var(--mut)}
.wz-newb{margin:0 0 14px}.wz-newb .wz-go{width:auto;display:inline-flex;padding:0 20px;margin:0}.wz-newb .wz-card{margin-top:12px}
.dk-main .wz-newb,.bopanel .wz-newb{padding:0}.bo .wz-newb{margin:12px 20px}
.wz-steps{list-style:none;display:grid;grid-template-columns:repeat(6,1fr);gap:4px;padding:0;margin:8px 16px 14px}
.wz-steps button{width:100%;display:grid;justify-items:center;gap:3px;padding:8px 2px;border:1.5px solid var(--line);border-radius:12px;background:var(--surf);color:var(--mut);font:inherit;font-size:11px;font-weight:700}
.wz-steps li.on button{border-color:var(--k);color:var(--k);background:var(--surf)}.wz-steps li.ok button{color:var(--k);background:var(--y2)}.wz-steps button:disabled{opacity:.55}
@media(max-width:420px){.wz-steps span{display:none}.wz-steps li.on span{display:block}.wz-steps{grid-template-columns:repeat(5,1fr) 1.6fr}}
@media(max-width:420px){.wz-steps li.on{grid-column:auto}}
.wz-sh{margin:0 16px}.wz-sh small{color:var(--mut);font-weight:700}.wz-sh h2{margin:2px 0 0;font-size:19px}
.wz-sub{display:flex;gap:6px;align-items:center;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--mut);margin:16px 0 8px}
.wz-hor{display:grid;gap:6px}.wz-hr{display:grid;grid-template-columns:88px auto 1fr;gap:8px;align-items:center;min-height:44px}.wz-hr.off b{color:var(--mut)}
.wz-tg{height:34px;border-radius:999px;border:1.5px solid var(--line);background:var(--surf);color:var(--mut);font:inherit;font-weight:700;font-size:12.5px;padding:0 12px}.wz-tg.on{background:var(--k);color:var(--on-k);border-color:var(--k)}
.wz-t{display:flex;gap:6px;align-items:center;justify-content:flex-end}.wz-t input{height:38px;border:1.5px solid var(--line);border-radius:10px;padding:0 6px;font:inherit;background:var(--surf);color:var(--k);min-width:0;width:100%;max-width:120px}
.wz-hr{min-width:0;max-width:100%;box-sizing:border-box}
.wz-t{min-width:0;flex-wrap:wrap}
@media(max-width:520px){.wz-hr{grid-template-columns:1fr auto}.wz-t{grid-column:1/-1;justify-content:flex-start}}
.wz-pals{grid-template-columns:repeat(2,1fr)}@media(min-width:1024px){.wz-pals{grid-template-columns:repeat(3,1fr)}}
.wz-free{display:grid!important;place-items:center;border-style:dashed!important;border-color:var(--line)!important}
.wz-cols{display:grid;gap:6px;margin-top:10px}@media(min-width:1024px){.wz-cols{grid-template-columns:1fr 1fr;column-gap:20px}}
.wz-mini{margin-top:12px;max-width:360px}
.wz-ph{border:1px solid var(--line);border-radius:26px;padding:8px;background:#111;max-width:360px;margin:0 auto}
.wz-app{background:var(--bg);color:var(--k);border-radius:20px;padding:14px;display:grid;gap:10px}
.wz-ah{display:flex;gap:8px;align-items:center}.wz-ah b{flex:1;font-size:15px}.wz-pts{background:var(--y);color:var(--on-y);border-radius:999px;padding:4px 10px;font-weight:800;font-size:12px}
.wz-app h4{margin:2px 0;font-size:19px;line-height:1.2}.wz-q{display:flex;gap:6px;align-items:center;background:var(--surf);border:1px solid var(--line);border-radius:12px;padding:10px;color:var(--mut);font-size:13px}
.wz-cats{display:flex;gap:6px}.wz-cats span{border-radius:999px;padding:6px 10px;background:var(--surf);border:1px solid var(--line);font-size:12px;font-weight:700}.wz-cats .on{background:var(--k);color:var(--on-k);border-color:var(--k)}
.wz-pr{display:grid;grid-template-columns:1fr 1fr;gap:8px}.wz-pr div{background:var(--surf);border-radius:14px;padding:8px;display:grid;gap:6px}.wz-pr img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center;border-radius:10px;max-width:none}.wz-pr b{font-size:13px}.wz-pr small{color:var(--mut);font-weight:700}
.wz-cta{display:flex;gap:6px;justify-content:center;align-items:center;background:var(--y);color:var(--on-y);border-radius:14px;min-height:44px;font-weight:800}
.wz-zone{display:flex;gap:12px;align-items:center;margin-top:12px}.wz-zone>span{position:relative;width:84px;height:84px;border-radius:50%;border:1.5px dashed var(--line);display:grid;place-items:center;flex:none}
.wz-zone i{position:absolute;width:var(--r);height:var(--r);border-radius:50%;background:var(--y2);inset:0;margin:auto}.wz-zone svg{position:relative}.wz-zone small{color:var(--mut)}
.wz-emp{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 0;border-top:1px solid var(--line);align-items:center}.wz-emp>input{grid-column:1/-1}
@media(min-width:1024px){.wz-emp{grid-template-columns:2fr 1fr 1.4fr auto}.wz-emp>input{grid-column:auto}}
.wz-rec{display:grid;gap:16px}@media(min-width:1024px){.wz-rec{grid-template-columns:1.2fr 1fr;align-items:start}}
.wz-rr{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:10px 0;border-bottom:1px solid var(--line)}.wz-rr>span:first-child{display:flex;gap:6px;align-items:center}.wz-rr>span:nth-child(2){grid-column:1;display:grid;font-size:14px}.wz-rr small{color:var(--mut)}.wz-rr .ad-lnk{grid-row:1/3;grid-column:2;align-self:center}
.wz-lk{display:flex;gap:6px;align-items:center;font-weight:700;font-size:13.5px;margin:12px 0 0}
.wz-nav{display:flex;justify-content:space-between;gap:10px;margin:14px 16px 0}.wz-nav .bo-edit,.wz-nav .wz-go{width:auto;min-width:130px;margin:0;display:inline-flex;gap:6px;align-items:center;justify-content:center;padding:0 18px}.wz-nav .wz-go{min-height:46px}
.wz-done,.wz-bad{display:grid;justify-items:center;text-align:center;gap:6px}.wz-done h2,.wz-bad h2{margin:4px 0}.wz-done .wz-go{width:100%}
.wz-ex{display:block;margin:16px}
body.desk .wz .wz-in{padding-top:32px}

/* Factures de frais de service technique du patron (lecture seule) */
.fa-box{padding:14px 16px}
.fa-taux{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;background:var(--bg);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.fa-card{border-top:1px solid var(--line);padding-top:10px;margin-top:6px}
.fa-card:first-of-type{border-top:0}
.fa-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14.5px}
.fa-no{display:block;color:var(--mut);font-size:11.5px;margin-top:2px}
.fa-st{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;border-radius:99px;padding:4px 10px;white-space:nowrap}
.fa-paye{background:color-mix(in srgb,var(--ok) 16%,transparent);color:color-mix(in srgb,var(--ok) 70%,#000)}
.fa-du{background:color-mix(in srgb,var(--err) 12%,transparent);color:var(--err)}
.fa-t td small{display:block;color:var(--mut);font-size:11.5px;font-weight:500}
.fa-t td,.fa-card b{font-variant-numeric:tabular-nums}
.fa-note{display:block;margin-top:10px}

/* ========== v10s — responsive mobile + tablette (05/11/2026) ========== */
/* Safe areas (encoche iPhone) */
.nav{padding-bottom:env(safe-area-inset-bottom,0px);height:calc(84px + env(safe-area-inset-bottom,0px))}
.screen{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
body.has-ob .screen{padding-bottom:calc(200px + env(safe-area-inset-bottom,0px))}
body.has-ob #s-menu{padding-bottom:calc(260px + env(safe-area-inset-bottom,0px))}
.bohead,.tbar,.prof,.fhead,.hero-top{padding-top:calc(50px + var(--sat))}
.tbar{padding-top:calc(46px + var(--sat))}
.ordbar{bottom:calc(92px + env(safe-area-inset-bottom,0px))}
.ordbar.up{bottom:calc(162px + env(safe-area-inset-bottom,0px))}
.cartbar{bottom:calc(96px + env(safe-area-inset-bottom,0px))}

/* Toast : ne déborde plus sur petit écran */
.toast{white-space:normal;max-width:min(350px,calc(100% - 24px));left:50%;right:auto;text-align:center;line-height:1.35}

/* Header back-office : ne déborde plus (pause + compteur) */
.bohead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:46px 14px 6px;padding-top:calc(46px + var(--sat))}
.bohead>div:first-child{flex:0 0 auto}
.bohead>div:nth-child(2){flex:1 1 120px;min-width:0}
.bohead>div:nth-child(2) b,.bohead>div:nth-child(2) small{overflow:hidden;text-overflow:ellipsis}
.bohead .op-pause{flex:1 1 auto;min-width:0;max-width:100%;justify-content:center}
.bohead .op-pause span{max-width:min(140px,40vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:bottom}
.bohead .cnt{margin-inline-start:0;flex:0 1 auto;max-width:100%;white-space:nowrap}
@media (max-width:400px){
  .bohead::after{content:"";flex-basis:100%;width:0;height:0;order:2}
  .bohead>div:first-child,.bohead>div:nth-child(2){order:1}
  .bohead .op-pause{order:3;flex:1 1 calc(50% - 6px)}
  .bohead .cnt{order:4;flex:1 1 calc(50% - 6px);text-align:center;justify-content:center;display:inline-flex;align-items:center}
}

/* Démo « Voir comme » : zones tactiles + retour à la ligne */
.bodemo{flex-wrap:wrap;gap:8px;margin:10px 14px 0;padding:8px}
.bodemo-s button{min-height:40px;padding:8px 12px}
.bodemo>span{flex:1 1 auto;min-width:0}

/* Onglets back-office mobile : défilement horizontal propre */
.botabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:12px 14px 0}
.botabs::-webkit-scrollbar{display:none}
.botabs button{flex:0 0 auto;min-width:max(44px,28%);padding:0 12px;white-space:nowrap}

/* Zones tactiles ≥ 44 px (cible réelle via ::after déjà présent, on grossit un peu le visuel) */
.plus{width:40px;height:40px}
.plus::after{inset:-6px}
.ci .qty button{width:40px;height:40px;min-width:40px}
.up .plus{width:36px;height:36px}
.hh-del{width:44px;height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
.wz-tg{min-height:40px;min-width:72px}
.bodemo-s button,.dk-top .bodemo-s button{min-height:40px}
.ad-lnk{min-height:36px;padding:8px 6px}
.pt-btn,.cl-btn{min-height:44px}

/* Happy hour : plages qui tiennent sur 320 px */
.hh-pl{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hh-pl input[type=time]{flex:1 1 110px;min-width:0;min-height:44px}
.hh-pl .hh-del{flex:0 0 auto}

/* Factures patron : cartes déjà OK ; éviter le débordement des montants */
.fa-h{flex-wrap:wrap}.fa-st{flex:0 0 auto}
.fa-box .dk-t{font-size:13px}
.fa-taux{flex-wrap:wrap;gap:6px;line-height:1.35}

/* Carte livreur / suivi : hauteur adaptée au viewport */
.lmap{height:clamp(180px,32vh,260px)}
.lmap.big{height:clamp(220px,min(52vh,560px),560px)}
.llive .leta b{font-size:clamp(22px,7vw,30px)}

/* Tablette (plein écran 600–1023) : un peu plus d'air, 2 colonnes utiles */
@media (min-width:600px) and (max-width:1023px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding-inline:20px}
  .hscroll .card{flex:0 0 220px}
  .dk-m .dk-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dk-m .ad-bars{grid-template-columns:1fr 1fr}
  .boc .acts button{min-height:48px}
  .wz-g2{grid-template-columns:1fr 1fr}
  .wz-pals{grid-template-columns:repeat(3,1fr)}
  .wz-cols{grid-template-columns:1fr 1fr;column-gap:20px}
  .wz-rec{grid-template-columns:1.1fr 1fr}
  .lg-prev{grid-template-columns:repeat(4,1fr)}
  .bopanel .box,.bo .box{margin-inline:20px}
  .botabs{margin-inline:20px}
  .bohead{padding-inline:20px}
  .cz-g{grid-template-columns:1fr 1fr}
  .op-nt{margin-inline:20px}
}

/* Très petit téléphone (320) */
@media (max-width:360px){
  .nav a{min-width:48px;font-size:10px;gap:2px}
  .nav .qr{width:58px;height:58px;margin-top:-26px;border-width:4px}
  .pad,.sec{padding-inline:14px}
  .list{margin-inline:14px}
  .box{margin-inline:14px}
  .hero-top{padding-inline:14px}
  .steps{margin-inline:14px;gap:6px}
  .steps div{padding:10px 4px;font-size:10.5px}
  .fa-taux{font-size:13px;padding:8px 10px}
  .bohead b{font-size:15px}
  .bohead>div:first-child{font-size:20px}
  .splash-logo{font-size:84px}
  .wz-nav .bo-edit,.wz-nav .wz-go{min-width:0;flex:1;padding:0 12px}
  .wz-steps{margin-inline:10px;gap:3px}
  .pchip,.achip{padding:8px 4px}
  .pchip b,.achip b{font-size:13px}
}

/* Desk étroit (tablette paysage 1024×768) : sidebar + caisse plus compactes */
@media (min-width:1024px) and (max-height:820px){
  .dk-side{padding:14px 10px;gap:12px}
  .dk-nav button{min-height:42px;font-size:14px}
  .dk-top{padding:12px 20px}
  .dk-body{padding:16px 20px 32px}
  .dk-caisse{grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:14px}
  .dk-cr{top:72px}
  .dk-lines{max-height:calc(100vh - 360px)}
  .dk-prods{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
  .dk-prod{min-height:76px;padding:10px}
}
@media (min-width:1024px) and (max-width:1100px){
  .dk{grid-template-columns:200px minmax(0,1fr)}
  .dk-caisse{grid-template-columns:minmax(0,1fr) minmax(260px,320px)}
  .dk-g2{grid-template-columns:1fr}
  .dk-cards{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
}

/* Modales / feuilles : ne dépassent pas le viewport */
.ptk-in,.op-sh,.rtsheet .rt-in{max-height:min(92vh,920px);max-height:min(92dvh,920px);overflow:auto;-webkit-overflow-scrolling:touch}
.qs,.qsheet{max-height:min(96vh,960px)}

/* RTL : miroirs déjà en place ; s'assurer que les ellipses et bars restent cohérents */
[dir=rtl] .bohead .cnt{margin-inline-start:0}
[dir=rtl] .toast{left:50%;right:auto}

/* Contenu client tablette : colonne confortable centrée (sans double marge+width) */
@media (min-width:700px) and (max-width:1023px){
  .screen:not(.bo):not(.wz) .pad,
  .screen:not(.bo):not(.wz) .sec{padding-inline:max(20px,calc((100% - 720px)/2))}
  .screen:not(.bo):not(.wz) .list,
  .screen:not(.bo):not(.wz) .box,
  .screen:not(.bo):not(.wz) .ad,
  .screen:not(.bo):not(.wz) .edito,
  .screen:not(.bo):not(.wz) .wheel-card,
  .screen:not(.bo):not(.wz) .steps{
    width:auto;max-width:720px;box-sizing:border-box;
    margin-left:auto;margin-right:auto;
  }
  .screen:not(.bo):not(.wz) .edito{width:min(720px,calc(100% - 28px))}
  .screen:not(.bo):not(.wz) .grid{padding-inline:max(20px,calc((100% - 720px)/2));grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
}

/* Éviter tout débordement horizontal global */
.phone,.screen,.dk,.wz-in{overflow-x:hidden}
.dk-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* Images de contenu seulement — pas les icônes SVG inline */
/* Contenir les images libres sans casser le object-fit:cover des cadres (.ph, .pimg, .slide…) */
.screen img:not(.leaflet-tile):not(.ph):not([class]){max-width:100%}
.tk-img,.rd-tk img{max-width:none}
/* Cadres photo : toujours remplir le cadre, sujet centré */
.card .ph img,.cat .ph img,.slide img,.pimg img,.up img,.ad img,.ci img,.rcard img,.tab img,.h-imgs img,.ed-art .ph,.wz-pr img,.lg-m img{max-width:none!important;height:100%!important;width:100%!important;object-fit:cover!important;object-position:center center!important}
.up img{height:78px!important}
.ci img{width:64px!important;height:64px!important}
.tab img{width:30px!important;height:30px!important}
.h-imgs img{width:48px!important;height:48px!important}
.ad img{width:52%!important;height:100%!important}
.wz-pr img{height:auto!important;aspect-ratio:4/3}
.rcard img{height:104px!important}
.tk-img,.rd-tk img,.rc .ring img,.rd-ring img{height:auto!important;width:auto!important;max-width:100%;object-fit:contain!important}
.qrc{max-width:none}


/* ===== v11 catalogue : menu, cuisine, zones, stats, rupture ===== */
.card.oos{opacity:.55;filter:grayscale(.35);pointer-events:auto}
.card.oos .plus{opacity:.4;pointer-events:none}
.oos-b{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.02em;background:var(--k);color:#fff;padding:2px 7px;border-radius:99px;margin-inline-end:6px;vertical-align:middle}
.opt[disabled],.chip[disabled]{opacity:.45;pointer-events:none;text-decoration:line-through}
.prod-live{margin:8px 20px 0;color:var(--mut)}

.mg-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.mg-tabs button,.mg-add{min-height:44px;padding:8px 14px;border-radius:12px;border:1px solid var(--bd);background:var(--surf);font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.mg-tabs button.on{background:var(--y);border-color:var(--y);color:var(--on-k,var(--k))}
.mg-list{display:flex;flex-direction:column;gap:8px}
.mg-row{display:flex;align-items:center;gap:12px;padding:10px;border-radius:14px;background:var(--surf);border:1px solid var(--bd);text-align:start;min-height:64px;cursor:pointer}
.mg-row.on{outline:2px solid var(--y)}
.mg-row.oos{opacity:.6}
.mg-row img{width:52px;height:52px;border-radius:12px;object-fit:cover;flex-shrink:0}
.mg-row span{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.mg-row small{color:var(--mut);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-ex{font-size:10px;font-style:normal;font-weight:800;background:var(--bg);color:var(--mut);padding:2px 6px;border-radius:99px}
.mg-stk,.mg-opt button{min-width:44px;min-height:44px;border-radius:12px;border:1px solid var(--bd);background:var(--bg);display:inline-flex;align-items:center;justify-content:center}
.mg-stk.on,.mg-opt button.on{background:var(--k);color:#fff;border-color:var(--k)}
.mg-ed .op-f{margin-top:10px}
.mg-ph{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mg-ph img{width:96px;height:96px;border-radius:16px;object-fit:cover}
.mg-grp{background:var(--bg);border-radius:14px;padding:12px;margin-top:10px}
.mg-gh{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.mg-opt{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--bd)}
.mg-opt.oos{opacity:.5}
.mg-opt span{flex:1}
.mg-check{flex-direction:row!important;align-items:center;gap:8px}
.mg-grid{align-items:start}

.ku-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.ku-snd{display:inline-flex;align-items:center;gap:8px;font-weight:700;min-height:44px}
.ku-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ku-col{background:var(--bg);border-radius:16px;padding:12px;min-height:280px}
.ku-col h2{margin:0 0 10px;font-size:15px;font-weight:800}
.ku-card{background:var(--surf);border-radius:14px;padding:12px;margin-bottom:10px;border:1px solid var(--bd);box-shadow:var(--sh)}
.ku-card.late{border-color:var(--danger,#E4362B)}
.ku-card header{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ku-card header em{font-style:normal;font-size:11px;font-weight:700;background:var(--bg);padding:3px 8px;border-radius:99px}
.ku-age{margin-inline-start:auto;font-weight:800;font-size:13px}
.ku-who{color:var(--mut);font-size:12px;margin-bottom:8px}
.ku-card ul{list-style:none;padding:0;margin:0 0 8px}
.ku-card li{padding:6px 0;border-top:1px solid var(--bd)}
.ku-card li b{display:block}
.ku-card li small{display:block;color:var(--mut);font-size:12px}
.ku-n{color:var(--danger,#E4362B);font-size:12px;font-weight:700;margin:4px 0}
.ku-act{display:flex;gap:8px;flex-wrap:wrap}
.ku-act button{min-height:44px;padding:8px 14px;border-radius:12px;border:0;background:var(--y);color:var(--on-k,var(--k));font-weight:800}
.ku-act button[data-kutk]{background:var(--bg);border:1px solid var(--bd)}
.ku-empty{color:var(--mut);padding:24px 8px;text-align:center;font-size:13px}
.ku-ov .ku-sheet{max-width:360px}
.ku-tk{font-family:ui-monospace,monospace;font-size:13px;background:#fff;color:#111;padding:12px;margin:12px auto;border:1px dashed #999}
.ku-tkh{display:flex;justify-content:space-between;font-size:16px;font-weight:800}
.ku-tkl{margin:8px 0}
@media (max-width:1023px){
  .ku-board{grid-template-columns:1fr}
}

.zn-wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px;align-items:start}
.zn-map{background:var(--surf);border-radius:16px;overflow:hidden;border:1px solid var(--bd);aspect-ratio:4/3}
.zn-map svg{width:100%;height:100%;display:block}
.zn-list{display:flex;flex-direction:column;gap:10px}
.zn-card .zn-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.zn-card .zn-h em{font-style:normal;font-size:11px;font-weight:700;background:var(--bg);padding:3px 8px;border-radius:99px}
@media (max-width:1023px){
  .zn-wrap{grid-template-columns:1fr}
}

.st-filt{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.st-filt label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;min-height:44px}
.st-filt input{min-height:44px;padding:8px 10px;border-radius:12px;border:1px solid var(--bd);background:var(--surf)}
.st-heat{overflow-x:auto;padding:12px!important}
.st-hrow{display:grid;grid-template-columns:40px repeat(14,minmax(18px,1fr));gap:3px;align-items:center;margin-bottom:3px}
.st-hrow b{font-size:11px}
.st-hrow span{font-size:10px;text-align:center;color:var(--mut)}
.st-hrow i{display:block;aspect-ratio:1;border-radius:4px;background:var(--y);opacity:calc(0.12 + var(--v) * 0.0088)}
.st-hh i{visibility:hidden}
@media (max-width:700px){
  .st-hrow{grid-template-columns:28px repeat(14,minmax(14px,1fr))}
}

.dk-menu .mg-tabs,.dk-cuisine .ku-top,.dk-zones .zn-wrap,.dk-stats .st-filt{margin-top:4px}
.pnote input{width:100%;min-height:44px;margin-top:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);font:inherit}
.pnote h3{margin-bottom:0}

/* Mobile BO catalogue : une colonne, air autour */
.bopanel{padding:12px 14px calc(24px + env(safe-area-inset-bottom,0px));}
.bopanel .dk-g2,.bopanel .mg-grid{grid-template-columns:1fr!important;gap:14px;}
.bopanel .dk-h{margin-inline:0;padding-inline:0;}
.bopanel .mg-ed{margin-top:4px;}
.bopanel .mg-tabs{padding-inline:0;}
/* v11e : bouton Commander du panier toujours visible, collé au-dessus de la barre du bas (et du suivi de commande s'il est affiché).
   Le padding du conteneur réduit la zone sticky dans Chrome : on le remplace par une marge sur le dernier bloc. */
#s-panier,body.has-ob #s-panier{padding-bottom:0!important}
#s-panier .pbar{position:sticky;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:20;margin:18px 0 0;padding:8px 20px;background:var(--bg)}
body.has-ob #s-panier .pbar{bottom:calc(156px + env(safe-area-inset-bottom,0px))}
#s-panier .pbar .big{width:100%}
#s-panier .ctas{margin-top:8px}
#s-panier>.fine{margin-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
body.has-ob #s-panier>.fine{margin-bottom:calc(200px + env(safe-area-inset-bottom,0px))}
/* v11f : Menu Duo — articles du menu (emplacements), sobre */
.du-wrap{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.du-slot{background:var(--surf);border:1px solid var(--line);border-radius:18px;padding:12px 14px 4px}
.du-slot .og{margin-top:10px}
.du-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.du-h h2{font-size:17px;font-weight:900;margin:0}
.du-link{min-height:44px;padding:0 12px;border-radius:12px;font-weight:800;font-size:13px;color:var(--k);background:var(--bg)}
.du-same{display:flex;align-items:center;gap:12px;background:var(--surf);border:1px solid var(--line);border-radius:18px;padding:12px 14px}
.du-same>span{flex:1;min-width:0}
.du-same b{display:block;font-size:15px}
.du-same small{display:block;color:var(--mut);font-size:12.5px;line-height:1.35;overflow-wrap:anywhere}
.du-chg{flex:none;min-height:44px;padding:0 14px;border-radius:14px;background:var(--k);color:var(--on-k);font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.du-note{margin:0;color:var(--mut);font-size:13px}
.ci .m .ci-sl{white-space:normal;overflow:visible}
.ci .m .ci-note{display:block;font-size:11.5px;color:var(--danger,#E4362B);font-weight:700;white-space:normal;overflow:visible;margin-top:2px}
.ci-sl>span{display:block;white-space:normal;overflow-wrap:anywhere;line-height:1.35}
.ci-sl em{font-style:normal;font-weight:800;color:var(--k)}
.ku-sl{margin:4px 0 2px;padding-inline-start:10px;border-inline-start:3px solid var(--k)}
.ku-sl em{font-style:normal;font-weight:900;margin-inline-end:6px}
.ku-sl b{display:inline!important}
.ku-tsl{margin:4px 0 0;font-weight:700}
.du-mg{margin-top:14px}
.du-mode{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.du-mode>span{font-weight:800;width:100%}
.du-mode button{min-height:44px;padding:0 12px;border-radius:12px;border:1px solid var(--bd);background:var(--bg);font-weight:700;font-size:13px;text-align:start;flex:1 1 200px}
.du-mode button.on{background:var(--k);color:var(--on-k);border-color:var(--k)}
.du-mgs .mg-gh{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.du-mgs select,.du-add select{min-height:44px;border-radius:12px;border:1px solid var(--bd);background:var(--surf);padding:0 10px;max-width:100%}
.du-flags{display:flex;flex-wrap:wrap;gap:6px 16px;margin:8px 0;font-size:13px}
.du-flags label{display:inline-flex;align-items:center;gap:6px;min-height:36px}
.du-supl{display:inline-flex;align-items:center;gap:4px;font-weight:700}
.du-supl input{width:64px;min-height:40px;border-radius:10px;border:1px solid var(--bd);padding:0 8px;text-align:center}
.du-add{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.du-add select{flex:1 1 160px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* v11f : onglets mobiles Menu / Cuisine du back-office sans débordement */
.bo .bohead>div:first-child{flex:1 1 auto;min-width:0;max-width:100%}
.bo .bohead h1{overflow-wrap:anywhere}
.bo .mg-grid{grid-template-columns:minmax(0,1fr)}
.bo .mg-grid>div,.dk-g2>div{min-width:0}

/* v11i calories */
.kcal-note{margin:8px 0 0;font-size:12px;color:var(--mut);font-weight:600}
.ci-kcal{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--mut);margin-top:2px}
.pan-kcaltot{padding:0 20px;margin-top:8px}
.kcal-n{font-variant-numeric:tabular-nums}

/* v11k recipe editor */
.kcal-ed{margin-top:14px}
.kcal-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:8px 0}
.kcal-row select{flex:1 1 160px;min-height:44px;border-radius:12px;border:1px solid var(--bd);background:var(--surf);padding:0 10px}
.kcal-prev{font-weight:800;margin:8px 0 0}
.kcal-prev.bad{color:var(--mut);font-weight:600}

/* v11l allergènes (fiche client + cases patron) — monochrome, sans effet */
.alg .alg-l{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 0;padding:0}
.alg .alg-l li{border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:700;background:var(--surf);color:var(--k);line-height:1.3}
.alg-ed{margin-top:14px}
.alg-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:8px}
.alg-c{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--surf);font-weight:700;font-size:13.5px;cursor:pointer;min-width:0}
.alg-c input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--k)}
.alg-c span{min-width:0;overflow-wrap:anywhere}

/* v11l rupture par ingrédient (patron + caissier) */
.ing-rupt{margin:0 0 14px;padding:12px 14px}
.ing-rupt summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;cursor:pointer;font-weight:800;list-style:none}
.ing-rupt summary::-webkit-details-marker{display:none}
.ing-rupt summary>span{display:inline-flex;align-items:center;gap:8px;min-width:0}
.ing-rupt summary em{font-style:normal;font-size:12.5px;font-weight:800;border:1px solid var(--k);border-radius:999px;padding:3px 10px;white-space:nowrap}
.ing-rupt .dk-intro{margin:6px 0 10px}
.ing-g{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;margin-bottom:8px}
.ing-b{display:flex;align-items:center;gap:8px;min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:12px;background:var(--bg);text-align:start;font-weight:700;font-size:13px;min-width:0;color:var(--k)}
.ing-b span{flex:1;min-width:0;overflow-wrap:anywhere}
.ing-b small{color:var(--mut);font-weight:600;white-space:nowrap}
.ing-b.on{background:var(--k);color:var(--on-k,#fff);border-color:var(--k)}
.ing-b.on small{color:inherit;opacity:.8}
.mg-opt span small{display:block;font-size:11.5px;color:var(--mut);font-weight:600}
.mg-opt button:disabled{opacity:.6;cursor:not-allowed}
.bopanel .ing-rupt{margin-inline:0}
@media (max-width:430px){.ing-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ing-b small{display:none}.alg-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ========== v11n / v3.22 — ticket légal, tip, schedule, table, claims ========== */
.v322-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.v322-chips button { border: 1px solid var(--border); background: var(--surf); color: var(--k); border-radius: 999px; padding: 8px 14px; font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.v322-chips button.on { background: var(--y); color: var(--on-y); border-color: transparent; }
.v322-in { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; font: 500 15px/1.2 Inter, system-ui, sans-serif; background: var(--surf); color: var(--k); margin-top: 8px; }
.v322-when .seg, .v322-modes { margin-bottom: 4px; }
.v322-modes { display: grid !important; /* colonnes via --seg-n / data-n */ }
.v322-modes button { font-size: 12px; padding: 10px 6px; }
.v322-vat { color: var(--mut); font-size: 13px; }
.v322-pro .li.danger { color: var(--danger); }
.v322-pro .li.danger small { color: var(--mut); }
.v322-prepbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 0 4px; font-size: 12px; color: var(--mut); }
.v322-prepbar button { border: 1px solid var(--border); background: var(--surf); border-radius: 8px; padding: 4px 8px; font-weight: 700; cursor: pointer; color: var(--k); }
.v322-prepbar em { background: var(--primary-soft, #ffe45c); color: var(--k); border-radius: 6px; padding: 2px 8px; font-style: normal; font-weight: 600; }
.v322-prepbar em.hold { background: #fff3cd; }
.ku-card.v322-hold { opacity: .72; border-style: dashed; }
.v322-tkleg { font-size: 11px; line-height: 1.35; color: #333; text-align: center; margin-top: 6px; }
.v322-tkleg small { display: block; margin-top: 4px; color: #777; font-size: 9px; }
.v322-lgvat { display: block; font-size: 9px; color: #888; margin-top: 4px; font-style: normal; }
.v322-legal .op-f { margin-top: 8px; }
.b.rembourse { background: #e8f5e9; color: #1b5e20; }

/* v11p — real-device framing. The decorative desktop frame keeps its fake
   status gap; a full-bleed viewport has only the OS safe area + 10px.
   Nested hero/profile cards must never pay that safe area a second time. */
@media (max-width:1023px){
  /* v11u — opaque header/page color under the clock (no frosted gray mix).
     Does NOT recolor Accueil yellow or Profil black (v11q rejected). */
  .tbar{padding-top:calc(10px + var(--sat));background:var(--hdr);backdrop-filter:none;-webkit-backdrop-filter:none}
  /* In-app toasts sit under the OS status bar, never over the time/network/battery. */
  .toast{top:calc(var(--sat, env(safe-area-inset-top, 0px)) + 8px)}
  .mhead{background:var(--hdr);backdrop-filter:none;-webkit-backdrop-filter:none}
  .bohead{padding-top:calc(12px + var(--sat))}
  .hero-top{padding-top:18px}
  .prof{padding-top:22px}
  .fhead{padding-top:20px}
  .screen>.hero-top:first-child{padding-top:calc(18px + var(--sat))}
  .screen>.prof:first-child{padding-top:calc(22px + var(--sat))}
  .screen>.fhead:first-child{padding-top:calc(20px + var(--sat))}

  /* 64px interactive row + one integrated home-indicator inset (border-box).
     The white footer fills the physical bottom edge; no separate empty strip.
     v11v: phone is position:fixed inset 0 + html/body bg=var(--nav), so this
     padding paints nav white through the home-indicator zone. */
  .nav{height:calc(64px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);border-radius:0;background:var(--nav)}
  .nav .qr{width:56px;height:56px;margin-top:-14px;border-width:4px}
  .cartbar{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .ordbar{bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .ordbar.up{bottom:calc(142px + env(safe-area-inset-bottom,0px))}
  .screen{padding-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
  body.has-ob .screen{padding-bottom:calc(180px + env(safe-area-inset-bottom,0px))}
  body.has-ob #s-menu{padding-bottom:calc(240px + env(safe-area-inset-bottom,0px))}
  #s-panier .pbar{bottom:calc(68px + env(safe-area-inset-bottom,0px))}
  body.has-ob #s-panier .pbar{bottom:calc(136px + env(safe-area-inset-bottom,0px))}
  #s-panier>.fine{margin-bottom:calc(100px + env(safe-area-inset-bottom,0px))}
  body.has-ob #s-panier>.fine{margin-bottom:calc(180px + env(safe-area-inset-bottom,0px))}
}
/* Desktop owner workspace is full-bleed, not a simulated phone. Its .dk
   header/navigation are independent and deliberately untouched. */
body.desk .bohead{padding-top:calc(12px + var(--sat))}

/* v11u — black-translucent + opaque .tbar/.mhead on mobile; no v11q Accueil/Profil recolor */
/* v11v — bottom: html/body + .phone fill under home indicator; nav surface bleed; top unchanged */


/* v11w — edit cart line + header title clearance */
.ci-main{display:flex;gap:12px;align-items:center;flex:1;min-width:0;margin:0;padding:0;border:0;background:transparent;text-align:start;font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ci-main:active{opacity:.88}
.ci-main img{width:64px;height:64px;border-radius:14px;object-fit:cover;object-position:center;flex:0 0 64px;max-width:none;pointer-events:none}
.oos-edit-notice{margin:0 0 12px;padding:10px 12px;border-radius:12px;background:color-mix(in srgb,var(--y) 35%,var(--surf));color:var(--k);font-size:13px;font-weight:700;line-height:1.35}
.screen>.tbar+.phead,.screen>.tbar+.prof{position:relative;z-index:1}


/* v11x — swipe delete, modifié badge, abandon sheet, edit scope */
.ci-swipe{position:relative;overflow:hidden;border-bottom:1px solid var(--line);touch-action:pan-y}
.ci-swipe:last-child{border-bottom:0}
.ci-del-bg{position:absolute;inset:0;display:flex;justify-content:flex-end;align-items:stretch;background:var(--red,#E4362B)}
[dir=rtl] .ci-del-bg{justify-content:flex-start}
.ci-del{border:0;background:transparent;color:#fff;font:700 13px/1.2 Inter,system-ui,sans-serif;padding:0 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:88px;cursor:pointer}
.ci-front{position:relative;z-index:1;display:flex;gap:8px;align-items:center;background:var(--surf);padding:10px 0;transition:transform .22s ease;will-change:transform}
.ci-swipe.open .ci-front{box-shadow:-4px 0 12px color-mix(in srgb,var(--k) 8%,transparent)}
[dir=rtl] .ci-swipe.open .ci-front{box-shadow:4px 0 12px color-mix(in srgb,var(--k) 8%,transparent)}
.ci-trash-desk{display:none;flex:none;width:36px;height:36px;border:0;border-radius:10px;background:color-mix(in srgb,var(--red,#E4362B) 12%,var(--surf));color:var(--red,#E4362B);align-items:center;justify-content:center;cursor:pointer}
@media (hover:hover) and (pointer:fine){
  .ci-trash-desk{display:flex}
  .ci-swipe:hover .ci-trash-desk{background:color-mix(in srgb,var(--red,#E4362B) 18%,var(--surf))}
}
.ci-mod .ci-front{animation:ciFlash 2s ease}
@keyframes ciFlash{0%,15%{background:color-mix(in srgb,var(--y) 28%,var(--surf))}100%{background:var(--surf)}}
.ci-badge{display:inline-block;margin-inline-start:6px;padding:2px 7px;border-radius:999px;background:var(--y);color:var(--on-y);font:700 10px/1.2 Inter,system-ui,sans-serif;vertical-align:middle;letter-spacing:.02em}
.toast.toast-act{pointer-events:auto;gap:10px;flex-wrap:wrap;justify-content:center}
.toast-undo{border:0;background:var(--y);color:var(--on-y);font:800 12px/1 Inter,system-ui,sans-serif;padding:7px 12px;border-radius:999px;cursor:pointer}
.edleave{position:absolute;inset:0;z-index:80;display:flex;align-items:flex-end;justify-content:center;pointer-events:none;opacity:0;transition:opacity .22s}
.edleave.on{pointer-events:auto;opacity:1}
.edleave-bk{position:absolute;inset:0;background:color-mix(in srgb,var(--k) 45%,transparent)}
.edleave-card{position:relative;z-index:1;width:100%;max-width:420px;background:var(--surf);border-radius:22px 22px 0 0;padding:22px 20px calc(18px + env(safe-area-inset-bottom,0px));box-shadow:0 -12px 40px color-mix(in srgb,var(--k) 18%,transparent);transform:translateY(24px);transition:transform .22s}
.edleave.on .edleave-card{transform:none}
.edleave-card h2{margin:0 0 8px;font-family:'Lilita One',sans-serif;font-weight:400;font-size:22px}
.edleave-card p{margin:0 0 18px;color:var(--mut);font-size:14px;line-height:1.4}
.edleave-acts{display:flex;flex-direction:column;gap:10px}
.edleave-go{border:0;background:var(--red,#E4362B);color:#fff;font:800 15px/1 Inter,system-ui,sans-serif;padding:14px 16px;border-radius:14px;cursor:pointer}
.edleave-stay{border:1px solid var(--line);background:var(--surf);color:var(--k);font:700 15px/1 Inter,system-ui,sans-serif;padding:14px 16px;border-radius:14px;cursor:pointer}
/* unit tabs + same toggle */
.unit-bar{margin:0 0 14px;padding:14px;border-radius:18px;background:var(--surf);box-shadow:var(--sh);border:1px solid var(--line)}
.unit-head{margin:0 0 10px}.unit-head b{display:block;font-size:15px;font-weight:800}.unit-head small{display:block;margin-top:2px;font-size:12px;color:var(--mut)}
.unit-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.unit-same{display:inline-flex;align-items:center;gap:8px;flex:1;min-width:160px;border:1px solid var(--line);background:var(--bg);border-radius:14px;padding:10px 12px;font:700 12.5px/1.2 Inter,system-ui,sans-serif;color:var(--k);cursor:pointer;margin:0}
.unit-same.on{background:color-mix(in srgb,var(--y) 28%,var(--surf));border-color:transparent}
.unit-copy{display:inline-flex;align-items:center;gap:6px;border:1px dashed var(--line);background:var(--bg);border-radius:14px;padding:10px 12px;font:700 12.5px/1.2 Inter,system-ui,sans-serif;color:var(--k);cursor:pointer}
.unit-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.unit-tabs::-webkit-scrollbar{display:none}
.unit-tab{flex:none;border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:10px 14px;min-height:44px;font:700 13px/1 Inter,system-ui,sans-serif;color:var(--mut);cursor:pointer;white-space:nowrap}
.unit-tab.on{background:var(--k);color:var(--on-k);border-color:transparent}
.unit-prix{display:block;margin-top:8px;font-size:12.5px;font-weight:700;color:var(--k)}
.ci-num{display:inline-block;margin-inline-end:6px;padding:1px 7px;border-radius:999px;background:var(--k);color:var(--on-k);font-size:11px;font-weight:800;vertical-align:middle}
/* keep prior ci-main rules */

.ci-front .ci-main img{width:64px!important;height:64px!important;border-radius:14px;object-fit:cover;flex:0 0 64px}
.ci-front .m{flex:1;min-width:0}
.ci-front .m b{display:block;font-size:14px;line-height:1.25;margin:0 0 2px}
.ci-front .m span{display:block;font-size:11.5px;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ci-front .m i{font-style:normal;font-weight:800;font-size:14px}
.ci-front .qty{padding:2px;border-radius:12px;display:flex;align-items:center;gap:2px;background:var(--sub)}
.ci-front .qty button{width:34px;height:36px;font-size:18px;border-radius:10px;border:0;background:var(--surf);cursor:pointer}
.ci-front .qty b{font-size:14px;min-width:16px;text-align:center}
.ci-front .m .ci-sl{white-space:normal;overflow:visible}
.ci-front .m .ci-note{display:block;font-size:11.5px;color:var(--danger,#E4362B);font-weight:700;white-space:normal;overflow:visible;margin-top:2px}
.ci-front .ci-kcal{display:block;font-style:normal;font-size:12px;font-weight:700;color:var(--mut);margin-top:2px}

/* v11y — unit summary + reduced motion */
.unit-sum{margin:8px 2px 0;font-size:12px;line-height:1.45;color:var(--mut)}
.unit-sum b{color:var(--k);font-weight:700}
@media (prefers-reduced-motion:reduce){
  .ci-front{transition:none!important}
  .ci-mod .ci-front{animation:none!important;box-shadow:inset 3px 0 0 var(--y)}
  [dir=rtl] .ci-mod .ci-front{box-shadow:inset -3px 0 0 var(--y)}
  .edleave,.edleave-card{transition:none!important}
  .edleave-card{transform:none!important}
  .unit-tab,.unit-same{transition:none!important}
}

.wablk+.wablk{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
.wadar-sep{font-weight:800;text-align:center;margin-bottom:4px}
.wablk[data-dar]{font-family:'Noto Kufi Arabic',Tahoma,sans-serif}
.mg-dar{display:block;margin-top:4px;width:100%;max-width:180px;border:1px solid var(--line);border-radius:8px;padding:4px 8px;font-size:12px;background:var(--surf);color:var(--k)}

/* v11z — kitchen message on KDS + ticket */
.ku-msg{display:grid;gap:8px;margin:0 0 8px;font-size:13px;line-height:1.45}
.ku-blk{background:var(--bg);border-radius:10px;padding:8px 10px;white-space:normal}
.ku-blk[data-dar]{font-family:'Noto Kufi Arabic',Tahoma,sans-serif}
.ku-tkb{white-space:normal;line-height:1.4}
.ku-tkb+.ku-tkb{border-top:1px dashed #999;margin-top:8px;padding-top:6px}
.ku-tkb[data-dar]{font-family:Tahoma,'Noto Kufi Arabic',sans-serif}
/* v12c — the resto name is painted from the very first frame (#splashLogo pre-filled, system font);
   when the styled logo replaces it, no fade from 0 (that looked like a blink). */
#splashLogo.go{opacity:1;animation:spBreath 2.8s ease-in-out 1.2s infinite}
/* v12c — validité des points */
.lx-card{margin:12px 16px;padding:14px 16px}.lx-h{display:flex;gap:8px;align-items:center}.lx-card small{color:var(--mut);display:block;margin-top:4px}
.lx-card h4{margin:12px 0 6px;font-size:13px}.lx-hist{list-style:none;margin:0;padding:0}.lx-hist li{display:flex;justify-content:space-between;padding:6px 0;border-top:1px solid var(--line);font-size:13px}
.lx-hist li small{display:inline;margin-inline-start:8px}.lx-hist .lx-expiration b{color:var(--err)}.lx-hist .lx-gain b{color:var(--ok)}
.lx-bo{margin-top:12px}.lx-ex{display:block;margin-top:10px;line-height:1.45}
/* v12c — back-office ordinateur : l'écran .dk héritait du padding-bottom des écrans client (120px + inset,
   200px avec les barres flottantes), la grille sidebar/contenu s'arrêtait donc avant le bas de la fenêtre.
   Le back-office n'a pas de barre du bas : 0 en bas, chaque colonne défile seule. */
.screen.dk,body.has-ob .screen.dk{padding-bottom:0!important;height:100%}
.dk>.dk-side,.dk>.dk-main{min-height:0;height:100%}
/* v12c — page « Codes ticket » : une grille unique, colonnes alignées, chips et actions au même endroit */
.ck{display:flex;flex-direction:column;gap:12px}
.ck-ex{display:flex;gap:10px;align-items:flex-start;padding:14px 16px}.ck-ex p{margin:0;line-height:1.45;font-size:14px}.ck-ex svg{flex:none;color:var(--mut)}
.ck-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ck-k{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:12px 14px;margin:0}
.ck-k svg{grid-row:1/3;color:var(--mut)}.ck-k b{font-size:22px;line-height:1.1}.ck-k small{color:var(--mut);font-size:12px}.ck-k.warn svg,.ck-k.warn b{color:var(--err)}
.ck-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.ck-f{display:inline-flex;background:var(--surf);border:1px solid var(--line);border-radius:999px;padding:3px}
.ck-f button{border:0;background:none;font:inherit;font-weight:700;font-size:13px;padding:8px 14px;border-radius:999px;cursor:pointer;color:var(--mut);min-height:36px}
.ck-f button.on{background:var(--k);color:var(--on-k)}
.ck-seuil{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--mut)}.ck-seuil select{font:inherit;padding:4px 6px;border:1px solid var(--line);border-radius:8px;background:var(--surf);min-height:32px}
.ck-list{padding:0;overflow:hidden;margin:0}
.ck-r{display:grid;grid-template-columns:minmax(120px,1.4fr) minmax(96px,1fr) 70px 70px 54px minmax(170px,1.2fr) 240px;gap:10px;align-items:center;padding:12px 16px;border-top:1px solid var(--line);font-size:14px}
.ck-r:first-child{border-top:0}.ck-hd{font-size:12px;font-weight:700;color:var(--mut);text-transform:uppercase;letter-spacing:.04em;padding-block:10px}
.ck-r .n{text-align:end}.ck-r.is-al{background:color-mix(in srgb,var(--err) 6%,var(--surf))}
.ck-who{display:flex;flex-direction:column;min-width:0}.ck-who small{color:var(--mut);font-size:12px}.ck-tk{font-family:ui-monospace,Menlo,monospace;font-size:13px}
.ck-x{text-decoration:line-through;color:var(--mut)}
.ck-chip{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;line-height:1.2}
.ck-chip.al{background:color-mix(in srgb,var(--err) 14%,var(--surf));color:var(--err)}.ck-chip.st{background:color-mix(in srgb,#E08A00 16%,var(--surf));color:#8a5200}.ck-chip.ok{background:color-mix(in srgb,var(--ok) 12%,var(--surf));color:var(--ok)}
.ck-act{font:inherit;font-size:13px;font-weight:700;padding:8px 12px;border-radius:10px;border:1px solid var(--err);background:var(--surf);color:var(--err);cursor:pointer;min-height:36px;white-space:nowrap}
.ck-act.ghost{border-color:var(--line);color:var(--k)}.ck-done{font-size:13px;color:var(--mut)}.ck-a{text-align:end}
.ck-vide{padding:18px;margin:0;color:var(--mut)}
@media (max-width:1180px){.ck-r{grid-template-columns:minmax(110px,1.3fr) 1fr 64px 64px 48px;}.ck-r .ck-c,.ck-r .ck-a{grid-column:1/-1}.ck-r .ck-a{text-align:start}.ck-hd span:nth-child(n+6){display:none}}
@media (max-width:700px){.ck-kpis{grid-template-columns:1fr 1fr 1fr}.ck-k{grid-template-columns:1fr;text-align:center}.ck-k svg{grid-row:auto;justify-self:center}.ck-k b{font-size:18px}
  .ck-hd{display:none}.ck-r{grid-template-columns:1fr auto;row-gap:4px}.ck-r>span:nth-child(2),.ck-r>span:nth-child(3){font-size:12px;color:var(--mut)}.ck-r>span:nth-child(4){display:none}.ck-r .ck-c,.ck-r .ck-a{grid-column:1/-1}}
.dk-nav button{line-height:1.2}
/* v12c — bloc marque de la sidebar back-office : logo du resto contenu (toque à sa taille normale, plus de
   chevauchement), nom une seule fois (le logo texte EST le nom ; logo image -> nom en texte dessous), sous-titre. */
.dk-side .dk-logo{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:4px 10px 0;line-height:1;max-width:100%;overflow:visible}
.dk-side .dk-lg{display:block;font-size:30px;max-width:100%;padding-top:.32em;padding-inline-end:.3em}
.dk-side .dk-lg .logo{font-size:1em;white-space:nowrap}
.dk-side .dk-lg .logo svg{width:.42em!important;height:.38em!important;max-height:none!important;display:inline!important}
.dk-side .dk-lg img{display:block;width:auto!important;height:auto!important;max-width:170px;max-height:56px!important;object-fit:contain}
.dk-side .dk-nm{font-size:16px;font-weight:800}
.dk-side .dk-logo small{margin:0;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
@media (max-width:1180px){.dk-side .dk-lg{font-size:26px}}
/* v12d — écran cuisine : action principale explicite (prochaine étape), impression en bouton secondaire lisible,
   cartes de même structure (action collée en bas). */
.ku-card{display:flex;flex-direction:column;min-height:240px;border:1px solid var(--line)}
.ku-msg{flex:1}
.ku-st{font-size:12.5px;color:var(--mut);margin:2px 0 8px}.ku-st b{color:var(--k)}.ku-s-new b{color:var(--err)}.ku-s-ready b{color:var(--ok)}
.ku-act{margin-top:10px;display:grid;grid-template-columns:1fr;gap:8px}
.ku-act button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;font:inherit;font-weight:800;font-size:14.5px;border-radius:12px;cursor:pointer}
.ku-act .ku-next{background:var(--y);color:var(--on-y,var(--k));border:0}
.ku-act .ku-next.ku-n-ready{background:color-mix(in srgb,var(--ok) 70%,#000);color:#fff}
.ku-act .ku-print,.ku-act button[data-kutk]{background:var(--surf);color:var(--k);border:1.5px solid var(--k);opacity:1}
/* v12e — panier : plus de bouton rouge permanent (il réduisait la largeur du nom sur ordinateur).
   Supprimer = « − » devient une corbeille à 1 article (avec Annuler), ou glisser la ligne (doigt ou souris). */
.ci-trash-desk{display:none!important}
.qty .q-del{color:var(--err)}
/* v12e — option « Notifications de suivi » : ligne compacte sous le suivi */
.op-nt{flex-wrap:nowrap;padding:12px 14px}.op-nt>div{min-width:0}
.op-ntdemo{display:inline-flex;align-items:center;gap:4px;margin-top:4px;padding:0;border:0;background:none;color:var(--k);font:inherit;font-size:12.5px;font-weight:700;text-decoration:underline;cursor:pointer;min-height:28px}
/* v12e — fiche produit : bande opaque sous la barre d'état iOS (le texte ne passe plus derrière l'heure) */
#s-produit::before{content:'';display:block;position:sticky;top:0;height:var(--sat);background:var(--bg);z-index:35;pointer-events:none}
#s-produit > .sat-space{height:var(--sat);flex:none}

/* v12f — spacer reserves the status-bar band; image bleeds under it; buttons stay below */
#s-produit > .sat-space{height:var(--sat);flex:none;pointer-events:none}
#s-produit .pimg{margin-top:calc(-1 * var(--sat))}
/* v12f — product sheet: compact sticky header (back + name) after scrolling; floating buttons always below the status bar */
:root{--sat:env(safe-area-inset-top,0px)}
#s-produit .pbar{position:sticky;top:0;z-index:40;height:0;margin:0;overflow:visible;pointer-events:none}
#s-produit .pbar>*{opacity:0;transition:opacity .15s}
#s-produit .pbar::before{content:'';position:absolute;left:0;right:0;top:0;height:calc(var(--sat) + 56px);background:var(--bg);box-shadow:0 1px 0 var(--line,rgba(0,0,0,.08));opacity:0;transition:opacity .15s}
#s-produit .pbar.on::before,#s-produit .pbar.on>*{opacity:1}
#s-produit .pbar.on{pointer-events:auto}
#s-produit .pbar-b{position:absolute;top:calc(var(--sat) + 6px);inset-inline-start:12px;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surf);z-index:1}
#s-produit .pbar b{position:absolute;top:calc(var(--sat) + 16px);inset-inline:66px 16px;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:1}
#s-produit .pbar:not(.on) *{pointer-events:none}
.round{z-index:36}

/* v12f — floating top controls always below the status bar, tappable */
.round{top:calc(8px + var(--sat));width:44px;height:44px;z-index:36;pointer-events:auto}
#s-produit .pimg{z-index:1}
#s-produit .pbar{z-index:40}
#s-produit::before{z-index:35;pointer-events:none}
.phead .back,.ctop .back{position:relative;z-index:2;min-width:44px;min-height:44px}

/* v12g — mobile BO role switcher: Super-admin reachable, 44px, below status bar */
.bohead{padding-top:calc(12px + var(--sat))}
.bodemo{margin-top:10px}
.bodemo-s{flex-wrap:wrap;gap:4px;max-width:100%}
.bodemo-s button,.dk-top .bodemo-s button{min-height:44px;min-width:44px;padding:10px 14px;font-size:13px}
.bodemo-s button[data-borole="admin"]{font-weight:900}
@media (max-width:1023px){
  .bodemo{flex-direction:column;align-items:stretch}
  .bodemo-s{margin-inline-start:0;width:100%;justify-content:stretch}
  .bodemo-s button{flex:1 1 auto}
}

/* v12h — super-admin resto cards (mobile + desktop): every resto visible with delivery block */
.ad-restos{display:flex;flex-direction:column;gap:12px;margin:0 14px 20px;padding:0}
.ad-card{background:var(--surf);border-radius:16px;padding:14px 14px 12px;box-shadow:var(--sh);border:1px solid var(--line)}
.ad-card.off{opacity:.72}
.ad-card-h{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:8px}
.ad-card-h b{font-size:16px;display:block}.ad-card-h small{color:var(--mut);font-size:12px}
.ad-card-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0;font-size:13px;border-top:1px solid var(--line)}
.ad-card-row>span{color:var(--mut);font-weight:600}
.ad-card-liv{margin-top:8px;padding:10px;border-radius:12px;background:var(--bg);border:1px dashed color-mix(in srgb,var(--k) 20%,transparent)}
.ad-card-liv .ad-card-row{border:0;padding:4px 0}
.ad-liv-block{margin-top:6px!important;gap:12px}
.ad-liv-block .op-sw{flex:none;min-width:48px;min-height:28px}
.ad-card-acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.ad-liv-reason{margin:6px 0 0;color:var(--err)}
@media (min-width:1024px){
  .ad-restos{margin:0 0 24px;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
}
.ad-card,.ad-card-row,.ad-card-taux,.ad-taux-val{min-width:0}
.ad-card-taux{flex-wrap:wrap;align-items:flex-start}
.ad-taux-val{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:flex-end;max-width:100%}
.ad-card-row>span:first-child{flex:0 1 auto}


/* v12j — rôles et droits */
.wz-rolehint, .eq-rolehint { display:block; margin:6px 0 0; line-height:1.35; max-width:36rem; }
.wz-emp { display:grid; gap:6px; grid-template-columns:1fr auto auto auto; align-items:start; }
.wz-emp .wz-rolehint { grid-column:1 / -1; }
.eq-rights, [data-rolematrix] { margin-top:10px; }
.role-matrix-sh { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.45); display:flex; align-items:flex-end; justify-content:center; padding:12px; }
@media (min-width:720px){ .role-matrix-sh { align-items:center; } }
.role-matrix-card { background:var(--surface,#fff); color:var(--text,#111); border-radius:16px; width:min(920px,100%); max-height:min(86vh,720px); display:flex; flex-direction:column; box-shadow:0 12px 40px rgba(0,0,0,.25); }
.role-matrix-h { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border,#e5e5e5); }
.role-matrix-scroll { overflow:auto; -webkit-overflow-scrolling:touch; padding:8px 12px 16px; }
.role-matrix-t { border-collapse:collapse; width:100%; font-size:12px; }
.role-matrix-t th, .role-matrix-t td { border:1px solid var(--border,#e5e5e5); padding:8px 6px; text-align:center; white-space:nowrap; }
.role-matrix-t th[scope=row] { text-align:start; position:sticky; left:0; background:var(--surface,#fff); }
.role-matrix-t thead th { position:sticky; top:0; background:var(--surface,#fff); z-index:1; }
.role-matrix-t td.ok { color:var(--success,#0a7); font-weight:700; }
.role-matrix-t td.ko { color:var(--mut,#888); }

/* v12j — shared app sheet */
.op-ov.app-sheet-ov,.op-ov{align-items:end;padding:0;place-items:end center}
@media(min-width:700px){.op-ov.app-sheet-ov,.op-ov{place-items:center;padding:16px}}
.op-sh.app-sheet{display:flex;flex-direction:column;width:min(480px,100%);max-height:min(92dvh,920px);max-height:min(92vh,920px);padding:0;border-radius:22px 22px 0 0;overflow:hidden;padding-bottom:env(safe-area-inset-bottom,0px)}
@media(min-width:700px){.op-sh.app-sheet{border-radius:22px;max-height:min(86vh,720px)}}
.app-sheet-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top,0px));border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surf);z-index:2}
.app-sheet-h b{font-size:16px;line-height:1.3;min-width:0}
.app-sheet-x{width:44px;height:44px;border:0;border-radius:12px;background:var(--bg);color:inherit;display:grid;place-items:center;flex:none;cursor:pointer}
.app-sheet-body{padding:14px 16px;overflow:auto;-webkit-overflow-scrolling:touch;flex:1;min-height:0;display:grid;gap:12px}
.app-sheet-act{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);background:var(--surf);position:sticky;bottom:0;z-index:2}
.app-sheet-act .big{flex:1 1 140px;min-height:44px}
.app-sheet-act .bo-edit{min-height:44px;min-width:44px}

/* v12o — app-sheet form fields (never reuse .bo-edit as a label wrapper) */
.ash-field{display:flex;flex-direction:column;align-items:stretch;gap:8px;width:100%;margin:0;padding:0;border:0;background:none;font:inherit;text-align:start;min-height:0}
.ash-field>span,.ash-field>label>span{font-size:13px;font-weight:800;color:var(--mut);line-height:1.3}
.ash-field input,.ash-field select,.ash-field textarea{
  font:inherit;font-size:16px;font-weight:700;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;
  background:var(--surf);color:inherit;min-height:48px;width:100%;box-sizing:border-box;display:block
}
.ash-field input.ash-pin{
  text-align:center;letter-spacing:.55em;font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;
  padding-inline:18px;min-height:56px
}
.ash-field input:focus,.ash-field select:focus,.ash-field textarea:focus{outline:2px solid var(--k);outline-offset:2px}
.app-sheet-body .cl-p,.app-sheet-body>p{margin:0;color:var(--mut);font-size:14px;line-height:1.45}
.app-sheet-act{align-items:stretch}
.app-sheet-act .bo-edit,.app-sheet-act .big{
  flex:1 1 140px;min-height:48px;height:48px;margin:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:15px;font-weight:800;border-radius:14px;box-sizing:border-box
}
.app-sheet-act .big{justify-content:center;padding:0 18px}
.app-sheet-act .big .lc,.app-sheet-act .big svg{flex:none;margin:0}
/* DÉMO badge in desk Voir comme: own chip, not crammed into the role pills */
.dk-top .bodemo-s em{
  display:inline-flex;align-items:center;justify-content:center;align-self:center;
  height:28px;margin:0 6px 0 2px;padding:0 10px;border-radius:8px;
  background:color-mix(in srgb,var(--k) 10%,transparent);color:var(--mut);
  font-size:10px;font-weight:900;letter-spacing:.06em;white-space:nowrap
}

.ad-ed-row{display:flex;align-items:center;gap:8px}
.ad-ed-row input{flex:1;min-width:0}
.ad-h-sheet{margin:0;padding-inline-start:18px;line-height:1.5}
.ad-f,.ad-inv,.ad-pay{min-width:0}
.ad-pay{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ad-pay input{flex:1 1 100px;min-width:0;max-width:100%}
.eq-add{max-width:100%;min-width:0}
.wz-emp{grid-template-columns:minmax(0,1fr) auto auto auto;max-width:100%}
@media(max-width:520px){.wz-emp{grid-template-columns:minmax(0,1fr) auto;}.wz-emp .wz-pin{grid-column:1/-1}}
.dk-body,.dk-main{min-width:0;overflow-x:hidden}
.dk-m{min-width:0}

/* v12k — aperçu icône PWA dans le wizard */
.wz-icon{margin:14px 0 4px;padding:12px;border:1px solid var(--line);border-radius:16px;background:var(--surf)}
.wz-iconrow{display:flex;align-items:flex-end;gap:14px;margin:8px 0}
.wz-ic{border-radius:10px;box-shadow:0 1px 4px #0002;background:#fff}
.wz-ic48{width:48px;height:48px}.wz-ic32{width:32px;height:32px}.wz-ic16{width:16px;height:16px;border-radius:4px}
.wz-ichome{width:64px;height:64px;border-radius:14px;display:grid;place-items:center;box-shadow:0 2px 8px #0002}
.wz-ichome img{width:40px;height:40px;border-radius:8px}

/* v12m — découpe: never use native disabled (dead on desktop); aria-disabled + click toast */
.lg-forme button{cursor:pointer;min-height:44px}
.lg-forme button.is-locked{opacity:.55}
.lg-forme button:focus-visible{outline:2px solid var(--k);outline-offset:2px}


/* v12q — discreet technical credit (not a brand header) */
.fq-credit{display:block;text-align:center;font-size:11px;line-height:1.4;color:var(--text_muted,#8a867c);padding:18px 16px 28px;font-weight:500;letter-spacing:.01em}
.fq-credit[hidden]{display:none!important}
.leg-page{padding:16px 18px 32px;max-width:640px}
.leg-page h1{font-size:1.35rem;margin:0 0 8px}
.leg-page h2{font-size:1.05rem;margin:22px 0 8px}
.leg-page p,.leg-page li{font-size:.95rem;color:var(--text_muted,#555);line-height:1.5}
.leg-id{margin:12px 0 20px;padding:12px 14px;border-radius:12px;background:var(--surface,#f3f1ea)}
.leg-id b{display:block;color:var(--text,#111)}
.leg-host{margin-top:24px;font-size:.85rem;color:var(--text_muted,#8a867c)}


.ap-badge{font-style:normal;font-size:11px;font-weight:800;padding:3px 8px;border-radius:99px;white-space:nowrap}
.ap-badge.att{background:#dc2626;color:#fff}
.ap-badge.soon{background:#16a34a;color:#fff}
.ap-badge.paid{background:#e4e4e7;color:#141414}
.ap-gain{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ap-gain small{display:block;color:#71717a}

/* v12q branding icons + pin / wa sheets */
.icn-prevs{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;margin:12px 0}
.icn-prev{margin:0;text-align:center}
.icn-prev img{display:block;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #e4e4e7;object-fit:cover;max-width:120px;max-height:120px;width:auto;height:auto}
.icn-prev figcaption{font-size:12px;color:#71717a;margin-top:6px}
#pin-action-sheet .ash-pin,#wa-code-sheet .ash-pin,#eq-pin-in,.ash-pin{letter-spacing:.4em;font-size:1.4rem;text-align:center;width:100%;box-sizing:border-box}
.ku-wait[disabled]{opacity:.7;cursor:not-allowed}

.ad-avoir b.neg, b.neg, .fa-doit, .bo-row .neg{color:#b91c1c}
.ad-avoir{background:#fff7ed}

/* ===== v12r — Annuaire Restyo (découvrir l'appli de chaque resto) =====
   Couleur = photos ; identité Restyo en noir ; pas de jaune/teal/orange marketplace. */
/* v12s — the resto app locks html/body (overflow:hidden) so only .screen scrolls.
   The directory must scroll the document instead. overflow:auto on both html and body
   breaks iOS/Android scroll; scroll html, keep body overflow visible. */
html.mkt-mode{
  height:auto!important;min-height:100%!important;max-height:none!important;
  overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:auto!important;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;position:static!important;
  margin:0!important;padding:0!important;width:100%!important;box-sizing:border-box}
html.mkt-mode body,body.mkt-mode{
  background:#fff!important;margin:0!important;padding:0!important;width:100%!important;box-sizing:border-box;
  height:auto!important;min-height:100%!important;max-height:none!important;
  overflow:visible!important;overscroll-behavior:auto!important;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;position:static!important}
body.mkt-mode .stage,body.mkt-mode .side,body.mkt-mode #phone,body.mkt-mode #splash,
body.mkt-mode #fq-credit,body.mkt-mode #app,body.mkt-mode [data-fq-app]{display:none!important}
body.mkt-mode #mkt-root{position:relative;z-index:2;min-height:100vh;height:auto!important;width:100%;overflow:visible!important;background:#fff}
.mkt{width:100%;box-sizing:border-box;
  font-family:Inter,system-ui,sans-serif;color:#141414;background:#fff}
.mkt-page{max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box;
  padding:12px 16px calc(40px + env(safe-area-inset-bottom,0px))}
@media (max-width:1023px){
  html.mkt-mode,html.mkt-mode.ios-sa{
    height:auto!important;min-height:100%!important;max-height:none!important;
    overflow-x:hidden!important;overflow-y:auto!important;background:#fff!important;position:static!important}
  html.mkt-mode body,html.mkt-mode.ios-sa body,body.mkt-mode{
    height:auto!important;min-height:100%!important;max-height:none!important;
    overflow:visible!important;background:#fff!important;position:static!important}
}
@media (max-width:1023px) and (display-mode:standalone){
  html.mkt-mode,html.mkt-mode body,html.mkt-mode .phone,html.mkt-mode .stage{
    position:static!important;height:auto!important;max-height:none!important;overflow:visible!important}
  html.mkt-mode{overflow-x:hidden!important;overflow-y:auto!important}
}
.mkt *{box-sizing:border-box}
/* v12u — sticky directory header (blur + solid fallback). Slogan/banner are NOT in this bar. */
.mkt-top{position:sticky;top:0;z-index:40;width:100%;
  background:#fff; /* solid fallback */
  background:rgba(255,255,255,.88);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid rgba(20,20,20,.08);
  padding-top:var(--sat,env(safe-area-inset-top,0px))}
@supports not ((backdrop-filter:blur(16px)) or (-webkit-backdrop-filter:blur(16px))){
  .mkt-top{background:#fff}
}
.mkt-top-inner{max-width:1200px;margin:0 auto;width:100%;box-sizing:border-box;padding:0 16px}
.mkt-top-bar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand loc search";align-items:center;gap:8px;height:56px}
.mkt-brand{grid-area:brand;min-width:0;color:inherit;text-decoration:none;cursor:pointer;border:0;background:transparent;padding:0;display:flex;align-items:center;max-width:100%}
.mkt-brand:focus-visible{outline:2px solid #141414;outline-offset:3px;border-radius:10px}
.mkt-mark{display:flex;align-items:center;gap:10px;min-width:0}
.mkt-icon-r{display:block;width:36px;height:36px;border-radius:9px;flex:none}
.mkt-brand b.mkt-wm{display:none}
.mkt-search-btn{grid-area:search;border:0;background:#f4f4f5;color:#141414;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;cursor:pointer;flex:none;padding:0}
.mkt-search-btn.on{background:#141414;color:#fff}
.mkt-langs{display:flex;gap:4px}
.mkt-langs button{border:1.5px solid #e4e4e7;background:#fff;color:#141414;border-radius:10px;min-height:40px;padding:8px 11px;font-weight:800;font-size:12px;cursor:pointer}
.mkt-langs button.on{background:#141414;color:#fff;border-color:#141414}
.mkt-langs-desk{display:none}
.mkt-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin:4px 0 10px}
.mkt-tag{margin:0;color:#3f3f46;font-size:13px;font-weight:600;line-height:1.3;flex:1;min-width:0}
.mkt-search{display:none;padding:0 0 12px}
.mkt-top.search-open .mkt-search{display:block}
.mkt-loc{grid-area:loc;position:relative;min-width:0}
.mkt-loc-in{display:flex;align-items:center;gap:10px;height:54px;padding:0 8px 0 16px;border:2px solid #141414;border-radius:16px;background:#fff;box-shadow:0 6px 18px rgba(20,20,20,.08);cursor:text}
.mkt-loc-in svg{flex:none;color:#141414}
.mkt-loc-in input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:inherit;font-size:16px;font-weight:700;color:#141414}
.mkt-loc-in input::placeholder{color:#71717a;font-weight:600}
.mkt-loc-in input::-webkit-search-cancel-button{display:none}
.mkt-loc-in:focus-within{box-shadow:0 0 0 4px rgba(20,20,20,.12)}
.mkt-loc-x{border:0;background:#f4f4f5;border-radius:10px;width:40px;height:40px;display:grid;place-items:center;cursor:pointer;flex:none}
.mkt-loc.chosen{display:flex;align-items:center;gap:8px;height:54px;padding:0 6px 0 16px;border:2px solid #141414;border-radius:16px;background:#fff}
.mkt-loc-val{flex:1;min-width:0;display:flex;align-items:center;gap:10px;cursor:pointer;height:100%}
.mkt-loc-val b{font-size:16px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-loc-edit{flex:none;display:inline-flex;align-items:center;gap:6px;border:0;background:#141414;color:#fff;border-radius:11px;min-height:40px;padding:0 12px;font:inherit;font-size:13px;font-weight:800;cursor:pointer}
@media(max-width:480px){
  .mkt-loc{min-width:0}
  .mkt-loc.chosen{height:40px;padding:0 4px 0 0;border:0;background:transparent;border-radius:0}
  .mkt-loc-edit{display:none}
  .mkt-loc.chosen .mkt-loc-x{display:grid}
  .mkt-loc-in{height:40px;padding:0 6px 0 10px;border-radius:12px;box-shadow:none}
  .mkt-loc-val b{font-size:14px}
  .mkt-loc-x{width:32px;height:32px}
}
.mkt-ac{position:absolute;inset-inline:0;top:calc(100% + 6px);z-index:50;list-style:none;margin:0;padding:6px;background:#fff;border:1.5px solid #e4e4e7;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.16);max-height:min(60vh,420px);overflow:auto}
.mkt-ac[hidden]{display:none}
.mkt-ac-it{display:flex;align-items:center;gap:12px;min-height:50px;padding:8px 12px;border-radius:11px;cursor:pointer;color:#141414}
.mkt-ac-it svg{flex:none;color:#52525b}
.mkt-ac-it b{display:block;font-size:15px;font-weight:700}
.mkt-ac-it small{display:block;font-size:12px;color:#71717a;font-weight:600}
.mkt-ac-it.on,.mkt-ac-it:hover{background:#f4f4f5}
.mkt-ac-it.free b{font-weight:600}
.mkt-ac-flag{flex:none;width:24px;text-align:center;font-size:20px;line-height:1}
.mkt-km{margin-inline-start:auto;font-weight:800;color:#52525b}
.mkt-near{margin:28px 0 8px;padding-top:8px;border-top:1px solid #e4e4e7;max-width:100%}
.mkt-near-h{margin:0 0 6px;font-size:20px;font-weight:900;letter-spacing:-.03em;color:#141414}
.mkt-none .mkt-near .mkt-list{display:grid;gap:14px;margin-top:14px}
@media(min-width:900px){
  .mkt-page{padding:16px 32px 56px}
}
/* titles + identity */
.mkt-h{font-size:24px;line-height:1.2;font-weight:900;letter-spacing:-.02em;margin:0 0 8px}
.mkt-help{margin:0 0 14px;color:#3f3f46;font-size:15px;line-height:1.45;font-weight:500}
.mkt-ident{display:flex;align-items:center;gap:8px;background:transparent;color:#3f3f46;border:0;border-top:1px solid #e4e4e7;border-bottom:1px solid #e4e4e7;border-radius:0;padding:8px 0;margin:8px 0 16px}
.mkt-ident svg{flex:none;color:#141414}
.mkt-ident p{margin:0;font-size:13px;line-height:1.35;font-weight:500}
.mkt-ident b{font-weight:700;color:#141414}
.mkt-ident span{color:#52525b;font-weight:500}
.mkt-head{margin-bottom:4px}
/* welcome (no place chosen): no list, photos for appetite */
.mkt-welcome{display:grid;gap:18px;padding:6px 0 10px}
.mkt-welcome .mkt-h{font-size:28px}
.mkt-wart{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mkt-wart img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;display:block;background:#e4e4e7}
@media(min-width:900px){
  .mkt-welcome{grid-template-columns:1fr 1.1fr;align-items:center;gap:40px;padding:28px 0 20px}
  .mkt-welcome .mkt-h{font-size:40px}
  .mkt-help{font-size:17px}
  .mkt-wart{gap:12px}.mkt-wart img{border-radius:18px}
}
.mkt-none{padding:18px 0 8px;max-width:640px}
.mkt-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px;border:0;border-radius:14px;background:#141414;color:#fff;font:inherit;font-weight:800;font-size:15px;cursor:pointer;margin:4px 0 18px}
/* dish search + text filters (not illustrated categories) */
.mkt-q{display:flex;align-items:center;gap:10px;min-height:48px;border:1.5px solid #d4d4d8;border-radius:14px;padding:0 14px;margin-bottom:10px;background:#fff}
.mkt-q:focus-within{border-color:#141414;box-shadow:0 0 0 3px rgba(20,20,20,.28);outline:2px solid #141414;outline-offset:2px}
.mkt-q svg{flex:none;color:#52525b}
.mkt-q input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;font-weight:600;min-height:44px}
.mkt-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.mkt-cats button{border:1.5px solid #d4d4d8;background:#fff;color:#141414;border-radius:999px;min-height:36px;padding:6px 14px;font-weight:700;font-size:13px;cursor:pointer}
.mkt-cats button.on{background:#141414;color:#fff;border-color:#141414}
/* list + side media */
.mkt-main{display:grid;gap:16px;grid-template-columns:1fr}
.mkt-list{display:grid;gap:16px;grid-template-columns:1fr;align-content:start;align-items:stretch;min-width:0}
@media(min-width:720px){.mkt-list{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){
  .mkt-main.has-media{grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
  .mkt-main:not(.has-media) .mkt-list{grid-template-columns:1fr 1fr 1fr}
  .mkt-side{position:sticky;top:calc(124px + env(safe-area-inset-top,0px))}
}
/* resto card: 16:9 photo, resto logo + name dominate, « Voir l'appli » */
.mkt-card,.mkt-ad{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:#fff;border:1px solid #e4e4e7;border-radius:20px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.07);transition:transform .15s,box-shadow .15s;min-width:0;height:100%}
.mkt-card:hover,.mkt-ad:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.mkt-ph{position:relative;aspect-ratio:16/9;background:#e4e4e7;overflow:hidden}
.mkt-ph img{width:100%;height:100%;object-fit:cover;display:block}
.mkt-ph.noimg{display:grid;place-items:center;background:var(--mkt-k,#141414);color:var(--mkt-y,#fff)}
.mkt-ph.noimg b{font-size:56px;font-weight:900}
.mkt-cart-badge{position:absolute;top:10px;inset-inline-start:10px;z-index:1;font-size:11px;font-weight:800;padding:5px 9px;border-radius:99px;background:#141414;color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2);letter-spacing:.01em}
.mkt-st{position:absolute;top:10px;inset-inline-end:10px;font-size:12px;font-weight:800;padding:5px 11px;border-radius:99px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.mkt-st.ok{background:#15803d;color:#fff}
.mkt-st.ko{background:#27272a;color:#fff}
.mkt-card.closed .mkt-ph img{filter:grayscale(.55) brightness(.62)}
.mkt-card.closed .mkt-body{opacity:1}
.mkt-card.closed .mkt-cuis{color:#3f3f46}
.mkt-body{position:relative;padding:0 16px 16px;min-width:0;flex:1;display:flex;flex-direction:column}
.mkt-body header{display:flex;align-items:flex-start;gap:12px;margin-top:-28px;margin-bottom:8px}
.mkt-ph.noimg + .mkt-body header{margin-top:14px}
.mkt-logo{width:60px;height:60px;border-radius:16px;flex:none;overflow:hidden;background:#fff;border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.18);display:grid;place-items:center;position:relative;z-index:1}
.mkt-logo img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
.mkt-logo.mono{background:var(--mkt-k,#141414);color:var(--mkt-y,#fff)}
.mkt-logo.mono b{font-size:24px;font-weight:900}
.mkt-logo.sm{width:40px;height:40px;border-radius:11px;border-width:2px}
.mkt-logo.sm.mono b{font-size:17px}
.mkt-id{min-width:0;padding-top:34px}
.mkt-ph.noimg + .mkt-body .mkt-id{padding-top:0}
.mkt-nm{display:block;font-size:19px;font-weight:900;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-cuis{display:block;color:#52525b;font-size:12.5px;font-weight:700;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkt-blurb{margin:2px 0 8px;font-size:14px;line-height:1.4;color:#27272a;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(1.4em * 2)}
.mkt-meta{display:flex;gap:14px;font-size:13px;font-weight:800;color:#27272a;margin-bottom:8px}
.mkt-meta span{display:inline-flex;align-items:center;gap:4px}
.mkt-modes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.mkt-mode{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;background:#f4f4f5;color:#27272a;padding:5px 9px;border-radius:9px}
.mkt-cta{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:13px;background:#141414;color:#fff;font-weight:800;font-size:15px}
[dir=rtl] .mkt-cta svg,[dir=rtl] .mkt-media .mkt-cta svg{transform:scaleX(-1)}
/* paid directory ad (owner only, between cards) */
.mkt-ad{border-color:#d4d4d8}
.mkt-ad .mkt-ad-media{position:relative;aspect-ratio:16/9;background:#e4e4e7;overflow:hidden}
.mkt-ad .mkt-ad-media img,.mkt-ad .mkt-ad-media video{width:100%;height:100%;object-fit:cover;display:block}
.mkt-ad .mkt-body{padding-top:14px}
.mkt-ad .mkt-spons{align-self:flex-start;font-style:normal;font-size:11px;font-weight:900;letter-spacing:.05em;text-transform:uppercase;background:#f4f4f5;color:#3f3f46;border:1px solid #d4d4d8;padding:3px 8px;border-radius:6px;display:inline-block;margin-bottom:8px}
.mkt-ad b{display:block;font-size:18px;font-weight:900;line-height:1.25}
.mkt-ad small{display:block;color:#3f3f46;margin:4px 0 12px;font-size:14px}
.mkt-ad .mkt-cta{background:#fff;color:#141414;border:2px solid #141414}
/* resto side media slot (directory only) */
.mkt-media{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid #e4e4e7;border-radius:20px;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,.07);padding:14px}
.mkt-media header{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.mkt-media header small{display:block;font-size:12px;color:#52525b;font-weight:700}
.mkt-media header b{display:block;font-size:16px;font-weight:900}
.mkt-media-m{aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:#e4e4e7}
.mkt-media-m img,.mkt-media-m video{width:100%;height:100%;object-fit:cover;display:block}
.mkt-media p{margin:10px 0 12px;font-size:15px;font-weight:800;line-height:1.3}
.mkt-media .mkt-cta{min-height:44px}
.mkt-empty{color:#52525b;padding:24px;text-align:center;grid-column:1/-1}
.mkt-foot{margin-top:32px;color:#71717a;text-align:center;font-size:12px}
/* v12t/v12u — Restyo wordmark + R icon (directory header) + opening screen. Directory only. */
.mkt-brand .mkt-wm{line-height:0}
.mkt-brand .mkt-wm img{display:block;height:28px;width:auto}

/* v12u desktop / tablet: full sticky header (wordmark + R, location, search + filters) */
@media(min-width:481px){
  .mkt-top-inner{padding:0 24px}
  .mkt-top-bar{height:auto;min-height:64px;padding:10px 0;grid-template-columns:auto minmax(200px,1fr) auto;grid-template-areas:"brand loc langs";gap:16px 20px}
  .mkt-top.has-search .mkt-top-bar{grid-template-columns:auto minmax(180px,1fr) auto;grid-template-areas:"brand loc langs"}
  .mkt-brand b.mkt-wm{display:block}
  .mkt-icon-r{width:40px;height:40px;border-radius:11px}
  .mkt-search-btn{display:grid}
  .mkt-langs-desk{display:flex;grid-area:langs;align-self:center}
  .mkt-langs-mob{display:none}
  .mkt-intro{margin:8px 0 14px}
  .mkt-tag{font-size:15px}
}
@media(min-width:900px){
  .mkt-top-inner{padding:0 32px}
  .mkt-top.has-search .mkt-top-inner{
    display:grid;
    grid-template-columns:auto minmax(220px,1fr) minmax(240px,1fr) auto;
    grid-template-areas:"brand loc q langs" "cats cats cats cats";
    align-items:center;gap:10px 20px;padding-top:10px
  }
  .mkt-top.has-search .mkt-top-bar{display:contents;height:auto;min-height:0;padding:0}
  .mkt-search-btn{display:none!important}
  .mkt-top.has-search .mkt-search{display:contents}
  .mkt-top.has-search .mkt-q{grid-area:q;margin:0;min-height:48px}
  .mkt-top.has-search .mkt-cats{grid-area:cats;margin:0 0 12px;padding:0}
}
.mkt-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.mkt-splash{position:fixed;inset:0;z-index:1000;background:#141414;display:flex;align-items:center;justify-content:center;transition:opacity .4s ease}
.mkt-splash img{display:block;width:min(56vw,260px);height:auto}
.mkt-splash.out{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.mkt-splash{transition:none}}


/* v12v — Salma: mobile wordmark at the top, R-only once the header is stuck.
   Compact sticky bar: 56px + safe-area only. Solid background so cards/banner
   never show through or sit under a tall translucent header. */
@media(max-width:480px){
  .mkt-brand b.mkt-wm{display:block}
  .mkt-top.is-stuck .mkt-brand b.mkt-wm{display:none}
  .mkt-brand .mkt-wm img{height:22px}
  .mkt-top{
    background:#fff;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
    padding-top:var(--sat,env(safe-area-inset-top,0px));
  }
  .mkt-top:not(.search-open){max-height:calc(56px + var(--sat,env(safe-area-inset-top,0px)) + 1px)}
  .mkt-top-bar{height:56px;max-height:56px}
  /* tighter gap under open search / filters (~35px empty space) */
  .mkt-top.search-open{max-height:none}
  .mkt-top.search-open .mkt-search{padding-bottom:0}
  .mkt-top.search-open .mkt-cats{margin-bottom:6px}
  .mkt-top.search-open .mkt-intro{margin-top:0}
}

/* v12v — resto install CTA + Annuaire fallback, INSIDE #phone.
   Must never sit above the phone or push the header down (mobile gap / plunge). */
#restoChrome{position:absolute;inset:0;z-index:100;padding:0;margin:0;border:0;background:none;pointer-events:none;display:block}
#restoChrome[hidden]{display:none!important}
.r-annuaire,.r-install{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font:800 13px/1 system-ui,-apple-system,sans-serif;text-decoration:none;cursor:pointer}
.r-annuaire{position:absolute;top:calc(10px + var(--sat,0px));inset-inline-start:8px;z-index:31;min-height:28px;padding:0 8px;background:color-mix(in srgb,var(--surf,#fff) 92%, transparent);color:var(--k,#141414);border:1.5px solid color-mix(in srgb,var(--k,#141414) 20%, transparent);font-size:12px}
.tbar .r-annuaire{position:static;top:auto;inset-inline-start:auto;flex:none;background:transparent}
/* In-flow under the tbar — discreet, dismissible, must not overlay add/cart/nav. */
.r-install-bar{display:flex;align-items:center;gap:6px;width:calc(100% - 32px);margin:6px 16px 0;box-sizing:border-box;pointer-events:auto}
.r-install{position:static;left:auto;right:auto;bottom:auto;display:flex;flex:1;width:auto;margin:0;min-height:34px;padding:0 12px;border:0;border-radius:10px;background:color-mix(in srgb,var(--k,#141414) 88%,transparent);color:var(--on-k,#fff);font:700 12.5px/1 system-ui,-apple-system,sans-serif;box-sizing:border-box;cursor:pointer}
.r-install-x{flex:none;width:34px;height:34px;border:0;border-radius:10px;background:transparent;color:var(--k,#141414);font:700 18px/1 system-ui;cursor:pointer;opacity:.5}
.r-install-x:hover,.r-install-x:focus{opacity:1}
.tbar:has(.r-annuaire){padding-inline-start:8px}
.tbar .r-annuaire{position:static;top:auto;inset-inline-start:auto;flex:none;background:transparent}
.r-ios-sheet{position:absolute;inset:0;z-index:120;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:max(16px, calc(8px + var(--sat, env(safe-area-inset-top,0px)))) 16px max(16px, calc(8px + 84px + env(safe-area-inset-bottom,0px)));pointer-events:auto;box-sizing:border-box}
.r-ios-sheet[hidden]{display:none!important}
/* v12y — Safari onglet : la feuille reste dans le 100dvh du cadre (au-dessus de la barre d'URL).
   Ne pas plafonner à 100dvh en standalone (html.ios-sa .phone = 100vh, WebKit 254868).
   v12z2 — modale centrée (alerte) : visible et touchable en onglet et en standalone ;
   défilement interne si l'écran est petit (320×568) ; tap sur le fond ferme. */
@media (max-width:1023px){
  html:not(.ios-sa) .r-ios-sheet{height:100%;max-height:100dvh}
}
.r-ios-card{background:#fff;color:#141414;border-radius:18px;padding:0;width:min(480px,100%);max-height:100%;min-height:0;overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,.28);box-sizing:border-box;display:flex;flex-direction:column}
.r-ios-body{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:20px 20px 8px}
.r-ios-card h2{margin:0 0 12px;font-size:18px;font-weight:900}
.r-ios-card h2:focus{outline:2px solid #141414;outline-offset:3px}
.r-ios-card p{margin:0 0 12px;font-size:15px;line-height:1.45}
.r-ios-card ol{list-style:none;margin:0 0 4px;padding:0;font-size:15px;line-height:1.45}
.r-ios-card ol li{margin:0 0 10px}
.r-ios-card ol li:last-child{margin-bottom:0}
.r-ios-step{display:flex;align-items:flex-start;gap:10px}
.r-ios-icos{display:flex;align-items:center;gap:4px;flex:none;margin-top:1px}
.r-ios-ico{flex:none;width:22px;height:22px;margin-top:1px;color:currentColor;line-height:0}
.r-ios-ico svg{width:22px;height:22px;display:block;overflow:visible}
html[dir=rtl] .r-ios-ico svg{transform:none}
.r-ios-step-t{flex:1;min-width:0}
.r-ios-fade{display:none;height:22px;margin-top:-22px;position:relative;z-index:1;pointer-events:none;flex:none;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff)}
.r-ios-card.is-scrollable .r-ios-fade{display:block}
.r-ios-actions{position:relative;flex:none;background:#fff;padding:12px 20px 16px;margin:0;display:flex;flex-direction:column;gap:8px;border-radius:0 0 18px 18px}
.r-ios-card.is-scrollable .r-ios-actions{box-shadow:0 -8px 16px rgba(0,0,0,.12)}
@media (max-width:360px){
  .r-ios-card h2{font-size:16px}
  .r-ios-card p,.r-ios-card ol{font-size:14px;line-height:1.4}
  .r-ios-body{padding:14px 14px 6px}
  .r-ios-actions{padding:10px 14px 14px}
}
.r-ios-ok,.r-ios-open{width:100%;min-height:44px;border:0;border-radius:12px;font:800 15px/1 system-ui;cursor:pointer}
.r-ios-ok{background:#141414;color:#fff}
.r-ios-open{background:#fff;color:#141414;border:1.5px solid #141414}
.mkt-mode #restoChrome{display:none!important}

/* ---------- v12w — resto app extras: share link + QR, credit option, abandoned-cart reminder ---------- */
#screens .screen > .fq-credit{padding:22px 16px 8px;margin:0}
.x-share{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.x-share .bo-ex{margin:0}
.x-qr{align-self:center;width:200px;height:200px;background:#fff;border-radius:16px;padding:8px;box-shadow:0 0 0 1px var(--line)}
.x-qr svg{display:block;width:100%;height:100%}
.x-qr[aria-busy="true"]{background:var(--line)}
.x-link{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:12px;padding:0 10px;min-height:44px;background:var(--surf)}
.x-link input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:13.5px;color:inherit;padding:10px 0;direction:ltr;text-align:start}
.x-share-act{display:flex;flex-direction:column;gap:8px}
.x-share-act .big{width:100%;min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px}
.x-share-act .bo-edit{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;width:100%;text-decoration:none}
.x-cartrem{display:flex;align-items:center;gap:10px;margin:10px 16px 0;padding:10px 10px 10px 12px;background:var(--surf);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh)}
.x-cr-ic{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:12px;background:var(--y);color:var(--on-y);flex:0 0 auto}
.x-cr-t{flex:1;min-width:0}.x-cr-t b{display:block;font-size:14px}.x-cr-t small{display:block;color:var(--mut);font-size:12.5px}
.x-cr-go{flex:0 0 auto;font-weight:800;font-size:13px;color:var(--k);text-decoration:underline;padding:8px 4px;min-height:44px;display:inline-flex;align-items:center}
.x-cr-x{flex:0 0 auto;border:0;background:none;color:var(--mut);width:36px;height:44px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.ad-xcredit{gap:8px}.ad-xcredit>span{flex:1;min-width:0}
[data-xbo] .bo-row{gap:10px}[data-xbo] .bo-row>span{flex:1;min-width:0}
[data-xbo] .bo-edit{white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
[data-xbo] .x-bo-share{flex-direction:column;align-items:stretch}[data-xbo] .x-bo-share .bo-edit{justify-content:center;min-height:44px;margin-top:8px}

/* Q69 — horaires patron + bandeau sans horaires */
.hor-row{display:flex;align-items:center;gap:8px}
.hor-row>span{flex:1;min-width:0}
.hor-row .hh-del{flex:none;margin-inline-start:auto}
.q69-banner{margin:10px 16px}
.dk-body>.q69-banner{margin:0 0 14px}
.bo .q69-banner{margin-inline:16px}

/* ---------- v12x — audit responsive avant gel (320–430 px) ---------- */
/* Header « ← Annuaire » : cibles ≥ 40 px ; à ≤ 360 px, tout tient sans couper « 380 points ». */
.tbar .r-annuaire{min-height:40px;min-width:40px;padding:0 8px;box-sizing:border-box}
.r-install{min-height:40px}
.r-install-x{width:40px;height:40px}
.mkt-langs button{min-width:40px}
@media(max-width:360px){
  .tbar:has(.r-annuaire){padding-inline:6px 8px;gap:4px}
  .tbar:has(.r-annuaire) .tb-logo{padding-inline:8px;font-size:22px;min-width:0;flex:0 1 auto}
  .tbar:has(.r-annuaire) .tb-r{gap:4px;min-width:0;flex:0 1 auto;justify-content:flex-end}
  .tbar:has(.r-annuaire) .tb-qr{width:40px;height:40px;flex:none}
  .tbar:has(.r-annuaire) .tb-qr svg{width:22px;height:22px}
  .tbar:has(.r-annuaire) .tb-pts{height:40px;padding:0 8px 0 10px;font-size:12.5px;min-width:0;flex:0 1 auto;white-space:nowrap}
  .tbar:has(.r-annuaire) .tb-pts svg{width:14px;height:14px}
  /* Ville choisie : le R suffit, le mot-symbole cède la place à « Fès, Maroc » (sinon « Fè… » à 320 px). */
  .mkt-top:has(.mkt-loc.chosen) .mkt-brand b.mkt-wm{display:none}
  .mkt-brand{min-height:40px;min-width:40px}
}
@media(max-width:480px){
  .mkt-loc-x{width:40px;height:40px}
}

/* ---------- v12x-ios — safe-area, bande d’état, annuaire navigateur ---------- */
/* Appli resto installée : une seule safe-area, fond du header sous l’horloge.
   En onglet Safari, ne pas ajouter env(safe-area) (déjà géré par le navigateur)
   sinon une bande blanche apparaît au-dessus du header. */
/* Resto .tbar keeps 10px + sat in every mobile mode (see earlier rule ~1464).
   Do not zero the sat here: tests rewrite env() to 47 px, and a real PWA
   needs it. The Safari-tab white band is an annuaire issue (.mkt-top), not .tbar.
   .mhead stays at padding 0 so the inner .tbar is not shifted / doubled. */
@media (max-width:1023px){
  /* Do not paint html/body with --bg: they stay --nav so the area under the
     tab bar matches (v12e-launch). The header itself is --hdr. */
  .tbar{background:var(--hdr)}
  .mhead{padding-top:0;background:var(--hdr)}
}
/* Status band = .tbar background (--hdr). html/body stay --nav so the strip
   under the tab bar stays the nav colour (v12e-launch). */
html.ios-sa .tbar{background:var(--hdr)}

/* Annuaire : en navigateur, pas de padding safe-area (bande blanche ~100 px).
   En PWA / ios-sa, le fond blanc du header remplit la zone sous l’horloge. */
.mkt-top{padding-top:0}
@media (max-width:1023px){
  .mkt-top:not(.search-open){max-height:calc(56px + 1px)}
}
@media (display-mode:standalone){
  .mkt-top{padding-top:var(--sat, env(safe-area-inset-top, 0px));background:#fff}
  .mkt-top:not(.search-open){max-height:calc(56px + var(--sat, env(safe-area-inset-top, 0px)) + 1px)}
  html.mkt-mode,html.mkt-mode body,body.mkt-mode #mkt-root{background:#fff!important}
}
html.ios-sa.mkt-mode .mkt-top,html.mkt-mode.ios-sa .mkt-top{padding-top:var(--sat, env(safe-area-inset-top, 0px));background:#fff}
html.ios-sa.mkt-mode .mkt-top:not(.search-open),html.mkt-mode.ios-sa .mkt-top:not(.search-open){max-height:calc(56px + var(--sat, env(safe-area-inset-top, 0px)) + 1px)}

/* Lien copiable de la feuille d’installation */
.r-ios-card .r-ios-link{display:flex;align-items:center;gap:8px;border:1px solid #e4e4e7;border-radius:12px;padding:0 10px;min-height:44px;margin:0 0 14px;background:#fafafa}
.r-ios-card .r-ios-link .r-ios-url,.r-ios-card .r-ios-link input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:13px;padding:10px 0;direction:ltr;overflow-wrap:anywhere;word-break:break-all;line-height:1.35}
.r-ios-copy{flex:none;border:0;background:#141414;color:#fff;border-radius:10px;min-height:36px;padding:0 12px;font:800 13px/1 system-ui;cursor:pointer}


/* ---------- v12y — feuilles / modales au-dessus de la barre du bas (.nav z-index 30) ---------- */
.op-ov,.ptk,.role-matrix-sh{z-index:120}
.edleave,.qrsheet,.rtsheet{z-index:110}
.screen:has(.edleave:not([hidden])),
.screen:has(.qrsheet),
.stage:has(.ptk){z-index:110}
.op-ov,.ptk,.edleave,.qrsheet,.role-matrix-sh{
  /* last actions stay above the home indicator */
  padding-bottom:0;
}
.op-sh,.edleave-card,.ptk .ptk-p{
  max-height:min(92dvh, calc(100% - 8px));
  overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.v322-facture{margin:10px 0 0;padding:12px 14px;border:1px solid var(--line,#e4e4e7);border-radius:14px;background:var(--surf,#fff);display:grid;gap:6px}
.v322-facture h3{margin:0 0 4px;font-size:14px;font-weight:900}
.v322-facture div{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.v322-facture .inv-line{font-size:13px;color:var(--mut,#52525b)}
.v322-facture .inv-sub{margin-top:4px;padding-top:6px;border-top:1px solid var(--line,#e4e4e7)}
.v322-facture .inv-liv{font-weight:600}
.v322-facture .tot{font-weight:800;margin-top:4px;padding-top:6px;border-top:1px solid var(--line,#e4e4e7)}

/* v12y — RTL + case « 16 ans ou plus » */
[dir=rtl] .r-ios-url{direction:ltr;unicode-bidi:isolate;text-align:start}
.ash-check{display:flex;align-items:center;gap:12px;margin:8px 0;font-size:14px;line-height:1.4;cursor:pointer;min-height:48px;width:100%}
.ash-check input[type=checkbox]{
  appearance:none;-webkit-appearance:none;margin:0;flex-shrink:0;
  width:22px;height:22px;min-width:22px;min-height:22px;
  border:1.5px solid color-mix(in srgb,var(--k) 22%,var(--surf));
  border-radius:7px;background:var(--surf);
  display:grid;place-items:center;
  transition:background .15s,border-color .15s;cursor:pointer;
}
.ash-check input[type=checkbox]:checked{background:var(--k);border-color:var(--k)}
.ash-check input[type=checkbox]:checked::after{
  content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg) translateY(-1px);box-sizing:border-box;
}
.ash-check input[type=checkbox]:focus-visible{outline:2px solid var(--k);outline-offset:2px}
#auth-err:not([hidden]),#su-age-lab{color:inherit}
#auth-err{color:var(--danger,#b91c1c);margin:8px 0 0}
/* Q102 — indicatif + numéro local, case 16 ans ≥ 48 px, feuille calée sur le visual viewport */
.ash-tel-row{display:flex;gap:8px;align-items:stretch;width:100%;direction:ltr;unicode-bidi:isolate}
.ash-tel-row select,.ash-tel-row #auth-cc,.ash-tel-row #su-cc{flex:0 0 auto;min-height:48px;min-width:7.5rem;max-width:46%;width:auto;padding:8px 10px}
.ash-tel-row input,.ash-tel-row #auth-tel,.ash-tel-row #su-tel{flex:1 1 auto;min-height:48px;min-width:0}
#fq-signup .ash-check{margin:8px 0}
#fq-signup .wa,#fq-signup [data-sumagic]{min-height:48px}
#client-auth-sheet .app-sheet-body{gap:8px;padding:10px 16px}
#client-auth-sheet .ash-check{margin:4px 0}
#client-auth-sheet .app-sheet-act .big,
#client-auth-sheet .app-sheet-act .bo-edit{min-height:48px;min-width:48px}
.op-ov.app-sheet-ov.is-vv{right:auto;bottom:auto;box-sizing:border-box}
.op-ov.app-sheet-ov.is-vv .op-sh.app-sheet{max-height:100%}

/* v12z3 — Réglages Accueil : blocs d'offres / bannières */
.bo-accueil{padding-bottom:8px}
.acc-block{padding:10px 0;border-bottom:1px solid var(--line)}
.acc-block:last-child{border-bottom:0}
.acc-block .bb-h{display:flex;align-items:center;gap:8px}
.acc-block .bb-h span:first-child{flex:1;min-width:0}
.acc-block .bb-h b{display:block;font-size:14px;line-height:1.25}
.acc-block .bb-h small{display:block;color:var(--mut);font-size:12px;font-weight:600}
.acc-ord{display:flex;flex-direction:column;gap:2px}
.acc-ord button{width:28px;height:22px;border:1px solid var(--line);border-radius:6px;background:var(--surf);color:var(--k);font-size:11px;line-height:1;padding:0}
.acc-f{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.acc-f label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mut);font-weight:600}
.acc-f input,.acc-f textarea,.acc-f select{font:inherit;font-size:13px;font-weight:500;padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surf);color:var(--k);width:100%;box-sizing:border-box}
.acc-f label:nth-child(1),.acc-f label:nth-child(2),.acc-f label:nth-child(6){grid-column:1/-1}
@media (max-width:360px){.acc-f{grid-template-columns:1fr}}