/* Online ordering — phone first, photos first. The restaurant's colour comes from the register (--brand). */
@font-face { font-family: 'Poppins'; font-weight: 500; font-display: swap; src: url('/fonts/poppins-500.woff') format('woff'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url('/fonts/poppins-700.woff') format('woff'); }

:root {
    --brand: #e4572e;
    --on-brand: #fff;
    --brand-soft: rgba(228, 87, 46, 0.1);
    --ink: #17171a;
    --ink-2: #3a3a40;
    --muted: #5f5f67;
    --line: #ececf1;
    --bg: #fff;
    --soft: #f5f5f7;
    --ok: #12804a;
    --ok-soft: #e7f6ee;
    --warn: #9a5800;
    --warn-soft: #fff3df;
    --bad: #c3302c;
    --bad-soft: #fdeceb;
    --radius: 18px;
    --shadow: 0 1px 2px rgba(20, 20, 30, 0.05), 0 6px 22px rgba(20, 20, 30, 0.07);
    --top: 58px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--top); }
body {
    margin: 0; background: var(--bg); color: var(--ink);
    font: 500 15px/1.45 Poppins, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
body.locked { overflow: hidden; }
h1, h2, h3, b, strong { font-weight: 700; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
/* no zoom on a phone: not with a double tap, not with two fingers (/js/ordering-runtime.js), not when a field is touched (16 px) */
html, body { touch-action: pan-x pan-y; }
input, select, textarea { font-size: max(16px, 1em); }
button { cursor: pointer; }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
img { display: block; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.pad { padding: 16px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ===== top bar ===== */
.topbar {
    position: sticky; top: 0; z-index: 30; height: var(--top); display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 0 14px; background: #fff; border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.brand b { font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-logo { height: 36px; width: auto; max-width: 120px; object-fit: contain; }
.top-actions { display: flex; align-items: center; gap: 6px; }
.top-btn {
    position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0;
    background: transparent; text-decoration: none;
}
.top-btn:active { background: var(--soft); }
.top-btn.lang { width: auto; padding: 0 10px; border-radius: 20px; font-size: 13px; font-weight: 700; border: 1px solid var(--line); height: 34px; }
.top-btn .dot { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--bad); color: #fff; font: 700 11px/18px Poppins, sans-serif; font-style: normal; text-align: center; }
.avatar {
    display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--brand-soft); color: var(--brand);
    text-decoration: none; flex: none; position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.top { width: 36px; height: 36px; margin-left: 2px; }
.avatar.small { width: 32px; height: 32px; font-size: 13px; }
.avatar.big { width: 76px; height: 76px; font-size: 30px; border: 0; }
.avatar.big i { position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: #fff; }
.avatar.big i svg { width: 15px; height: 15px; }

.view { max-width: 680px; margin: 0 auto; min-height: calc(100vh - var(--top)); padding-bottom: 120px; }
body.has-cartbar .view { padding-bottom: calc(150px + var(--safe-b)); }
.splash { display: grid; place-items: center; min-height: 60vh; }
.spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ===== buttons ===== */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px; border-radius: 999px;
    border: 1.5px solid transparent; background: var(--soft); font-weight: 700; text-decoration: none; transition: transform 0.12s, filter 0.15s, background 0.15s;
    -webkit-user-select: none; user-select: none; text-align: center;
}
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary { background: var(--brand); color: var(--on-brand); }
.btn.primary:hover:not(:disabled) { filter: brightness(1.05); }
.btn.ghost { background: #fff; border-color: var(--line); }
.btn.danger { background: var(--bad); color: #fff; }
.btn.danger-ghost { background: #fff; border-color: var(--bad-soft); color: var(--bad); }
.btn.small { min-height: 38px; padding: 0 14px; font-size: 13.5px; }
.btn.small svg { width: 18px; height: 18px; }
.btn.big { min-height: 56px; width: 100%; font-size: 16.5px; }
.btn.grow { flex: 1; }
.btn.round { width: 46px; padding: 0; flex: none; }
.btn.waiting { background: var(--ink-2); color: #fff; }
.btn.off { background: #e9e9ee; color: var(--ink-2); }
.link { background: none; border: 0; padding: 6px 2px; color: var(--brand); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.icon-btn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--soft); text-decoration: none; flex: none; }
.row-buttons { display: flex; gap: 10px; margin-top: 14px; }
.row-buttons > * { flex: 1; }
.row-buttons.wrap { flex-wrap: wrap; padding: 0 16px; }
.row-buttons.wrap > * { flex: 1 1 160px; }

/* ===== pages ===== */
.page-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.page-title { font-size: 24px; letter-spacing: -0.02em; margin: 0; line-height: 1.2; }
.page-head { display: grid; gap: 2px; min-width: 0; }
.page-sub { margin: 0; color: var(--muted); font-size: 13.5px; }
.empty-state { display: grid; justify-items: center; gap: 14px; text-align: center; padding: 70px 26px; color: var(--muted); }
.empty-state svg { width: 46px; height: 46px; color: var(--brand); stroke-width: 1.6; }
.empty-state p { margin: 0; max-width: 340px; font-size: 16px; }
.skeleton { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 16px; }
.skeleton span { height: 210px; border-radius: var(--radius); background: linear-gradient(90deg, var(--soft) 0%, #fafafb 50%, var(--soft) 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
@keyframes shimmer { to { background-position: -200% 0; } }
.warn-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--warn-soft); color: var(--warn); margin: 12px 0; }
.info-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1.5px solid var(--line); color: var(--ink-2); margin: 10px 0 0; font-size: 14px; }
.info-box svg { width: 19px; height: 19px; color: var(--brand); margin-top: 1px; }
.warn-text { color: var(--bad); font-size: 13px; }

/* ===== stores ===== */
#locate { margin-top: 12px; }
.store-list { display: grid; gap: 12px; margin-top: 14px; }
.store-card {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 16px; text-align: left;
    background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.store-card.on { border-color: var(--brand); }
.store-main { display: grid; gap: 2px; min-width: 0; }
.store-main b { font-size: 17px; }
.store-main .muted { font-size: 13px; }
.store-state { font-size: 13px; font-weight: 700; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.store-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.store-state.ok, .status-line.ok { color: var(--ok); }
.store-state.warn, .status-line.warn { color: var(--warn); }
.store-state.off, .status-line.off { color: var(--muted); }
.store-side { display: flex; align-items: center; gap: 6px; color: var(--muted); text-align: right; }
.km { font-size: 12.5px; line-height: 1.3; }
.km.near { color: var(--brand); font-weight: 700; }
.store-head { padding: 14px 16px 6px; }
/* the store and its state in one soft box: the name opens the list of stores, the state opens the hours */
.store-box { position: relative; display: grid; gap: 2px; padding: 11px 44px 11px 14px; border-radius: 16px; background: var(--soft); }
.store-chip { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; font-size: 15.5px; }
.store-chip svg { position: absolute; top: 50%; right: 14px; width: 20px; height: 20px; transform: translateY(-50%); }
.status-line { display: flex; align-items: center; gap: 8px; margin: 10px 2px 0; font-size: 13.5px; font-weight: 700; }
.status-line svg { width: 18px; height: 18px; }
button.status-line { width: 100%; margin: 0; padding: 0; border: 0; background: none; text-align: left; font-size: 13px; font-weight: 600; }
button.status-line span { flex: 1; min-width: 0; }
.status-line .dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.hours { list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 2px; }
.hours li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; }
.hours li span { text-transform: capitalize; }
.hours li b { text-align: right; font-weight: 500; }
.hours li.today { background: var(--brand-soft); }
.hours li.today span, .hours li.today b { font-weight: 700; }

/* ===== hero, last order ===== */
.hero { position: relative; margin: 10px 16px 4px; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 8; background: var(--soft); }
.hero-pic, .hero-pic img { width: 100%; height: 100%; object-fit: cover; }
.hero-text { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 40px 18px 16px; color: #fff; font-weight: 700; font-size: 19px; line-height: 1.25; background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)); }
.welcome { margin: 10px 16px 0; font-size: 18px; font-weight: 700; }
.again {
    display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; margin: 10px 16px 4px; padding: 12px; border-radius: 20px;
    background: var(--brand-soft); border: 1.5px solid rgba(0, 0, 0, 0.02);
}
.again-pic { width: 64px; height: 64px; border-radius: 14px; overflow: hidden; }
.again-text { display: grid; min-width: 0; }
.again-text small { color: var(--brand); font-weight: 700; }
.again-text b { font-size: 15px; }
.again-text .muted { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ===== categories: a bar under the top bar on a phone (a column on the left on a tablet, at the end) =====
   --stick (/js/menu-browser.js): the height of what stays on top, so a section starts right under it */
.menu-body { display: flex; flex-direction: column; }
.menu-main { display: contents; }
.cats {
    order: 1; position: sticky; top: var(--top); z-index: 20; display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden; padding: 10px 16px; background: #fff;
    scrollbar-width: none; border-bottom: 1px solid var(--line); overscroll-behavior-x: contain;
}
.cats::-webkit-scrollbar { display: none; }
/* the category names are kept as typed in the menu: in capitals here */
.cat { flex: none; padding: 8px 15px; border-radius: 999px; background: var(--soft); text-decoration: none; font-size: 14px; font-weight: 700; color: var(--ink-2); white-space: nowrap; transition: background 0.2s, color 0.2s; text-transform: uppercase; }
.cat.on { background: var(--ink); color: #fff; }
.menu-section, .menu-main > .empty-state { order: 2; }
.menu-section { padding: 2px 16px 10px; scroll-margin-top: calc(var(--stick, calc(var(--top) + 57px)) - var(--top)); }
.menu-section h2 { font-size: 21px; letter-spacing: -0.015em; margin: 14px 2px 12px; outline: none; text-transform: uppercase; }
.menu-section h2:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; border-radius: 6px; }

/* ===== product cards ===== */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 600px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
    position: relative; display: flex; flex-direction: column; padding: 0; text-align: left; background: #fff; border: 1px solid var(--line);
    border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); transition: transform 0.15s;
}
.card:active { transform: scale(0.98); }
.pic { position: relative; display: block; overflow: hidden; background: var(--soft); }
.pic img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s; }
.pic img.in { opacity: 1; }
.noimg { display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); }
.noimg b { font-size: 28px; }
.noimg svg { width: 34%; max-width: 64px; height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.8; }
.noimg img { display: none; }
.card-pic { aspect-ratio: 4 / 3; }
.card-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; flex: 1; }
.card-name { font-size: 14.5px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-desc { font-size: 12px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
.price { font-weight: 700; font-size: 15px; }
.card-add { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: var(--on-brand); }
.card-add svg { width: 18px; height: 18px; stroke-width: 2.6; }
.card-n { position: absolute; top: 8px; left: 8px; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 13px; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); }
.card.out .card-pic, .card.out .card-body { filter: grayscale(1); opacity: 0.55; }
.card-out { position: absolute; top: 10px; right: 10px; padding: 4px 10px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 700; }
.card.out .card-add { background: var(--muted); }
/* a phone: one item per row, the text on the left, the photo on the right with « + » on its corner */
@media (max-width: 599px) {
    .grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .card {
        display: grid; grid-template-columns: minmax(0, 1fr) 108px; column-gap: 14px; align-items: start; padding: 16px 0; border: 0; border-bottom: 1px solid var(--line);
        border-radius: 0; box-shadow: none; background: none; overflow: visible;
    }
    .card-pic { grid-column: 2; grid-row: 1; width: 108px; height: 96px; aspect-ratio: auto; border-radius: 14px; }
    .card-body { grid-column: 1; grid-row: 1; gap: 4px; padding: 0; }
    .card-name { font-size: 16px; }
    .card-desc { font-size: 13px; line-height: 1.4; }
    .card-foot { padding-top: 4px; }
    .price { font-size: 15.5px; }
    .card-add { position: absolute; top: 78px; right: -6px; width: 40px; height: 40px; border: 3px solid #fff; }
    .card-add svg { width: 19px; height: 19px; }
    .card-n { top: 22px; left: auto; right: 72px; }
    .card-out { top: 22px; right: 6px; }
}
.no { animation: nope 0.35s; }
@keyframes nope { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* ===== cart bar ===== */
.cartside { display: none; }
.cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; padding: 10px 14px calc(12px + var(--safe-b)); pointer-events: none; }
.cartbar-btn {
    pointer-events: auto; display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 0 auto; padding: 0 20px 0 10px; height: 60px; border-radius: 30px;
    background: var(--brand); color: var(--on-brand); text-decoration: none; font-weight: 700; font-size: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.cartbar-btn span:nth-child(2) { flex: 1; }
.cartbar-n { display: grid; place-items: center; min-width: 40px; height: 40px; border-radius: 20px; background: rgba(255, 255, 255, 0.22); }
.cartbar-btn.bump { animation: bump 0.4s; }
@keyframes bump { 40% { transform: scale(1.04); } }

/* ===== sheets ===== */
.sheet-back { position: fixed; inset: 0; z-index: 50; background: rgba(15, 15, 20, 0); transition: background 0.25s; }
.sheet-back.open { background: rgba(15, 15, 20, 0.45); }
.sheet {
    position: absolute; left: 0; right: 0; bottom: 0; max-width: 640px; margin: 0 auto; max-height: 92vh; display: flex; flex-direction: column;
    background: #fff; border-radius: 24px 24px 0 0; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); outline: none;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15);
}
.sheet-back.open .sheet { transform: translateY(0); }
.sheet-body { overflow-y: auto; overscroll-behavior: contain; padding: 22px 18px calc(18px + var(--safe-b)); }
.sheet.small .sheet-body { padding-top: 26px; }
.sheet-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.92); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); display: grid; place-items: center; }
.sheet-title { font-size: 21px; margin: 4px 40px 8px 0; letter-spacing: -0.015em; }
@media (min-width: 700px) {
    .sheet { bottom: 50%; transform: translateY(calc(50% + 40px)); opacity: 0; border-radius: 24px; transition: transform 0.3s, opacity 0.25s; }
    .sheet-back.open .sheet { transform: translateY(50%); opacity: 1; }
}

/* ===== item sheet ===== */
.item-sheet { max-height: 96vh; }
.item-sheet .sheet-body { padding: 0 0 0; }
.item-pic { aspect-ratio: 16 / 10; max-height: 300px; width: 100%; }
.item-head { padding: 16px 18px 6px; }
.item-head h2 { font-size: 23px; margin: 0 0 4px; letter-spacing: -0.02em; }
.item-head .muted { margin: 0; font-size: 14px; }
.tag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 700; font-style: normal; vertical-align: middle; }
.tag svg { width: 14px; height: 14px; }
.tag.gift { background: var(--ok-soft); color: var(--ok); }
.seg { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; margin: 10px 18px 6px; }
.seg button { position: relative; display: grid; gap: 1px; padding: 12px; text-align: left; border-radius: 16px; border: 2px solid var(--line); background: #fff; }
.seg button.on { border-color: var(--brand); background: var(--brand-soft); }
.seg b { font-size: 16px; }
.seg span { font-weight: 700; color: var(--ink-2); }
.seg small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.seg i { position: absolute; top: -9px; right: 10px; padding: 1px 8px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 10.5px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.seg.mini { grid-template-columns: 1fr 1fr; margin: 6px 0 12px; }
.seg.mini button { text-align: center; padding: 9px; font-weight: 700; }
.groups { padding: 6px 12px 10px; display: grid; gap: 8px; }
.groups-in { display: contents; }
.grp { border-radius: 16px; border: 1.5px solid var(--line); background: #fff; transition: border-color 0.2s; }
.grp.need { border-color: #f1d9b5; }
.grp.done { border-color: #cfe9da; }
.grp.flash { animation: flash 0.7s; }
@keyframes flash { 30% { box-shadow: 0 0 0 4px rgba(214, 135, 25, 0.35); } }
.grp-head { display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px; background: none; border: 0; text-align: left; }
.grp-title { display: grid; flex: 1; min-width: 0; }
.grp-title b { font-size: 15.5px; display: flex; align-items: center; gap: 6px; }
.grp-title b svg { width: 18px; height: 18px; color: var(--bad); }
.grp-title small { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grp-chev { color: var(--muted); transition: transform 0.25s; }
.grp.open .grp-chev { transform: rotate(180deg); }
.grp-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.28s ease; }
.grp.open .grp-body { grid-template-rows: 1fr; }
.grp-clip { overflow: hidden; }
.grp-pad { padding: 0 12px 14px; }
.rule { margin: 0 2px 10px; color: var(--muted); font-size: 13px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: var(--soft); color: var(--muted); font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.badge svg { width: 13px; height: 13px; stroke-width: 3; }
.badge.need { background: var(--warn-soft); color: var(--warn); }
.badge.done { background: var(--ok-soft); color: var(--ok); }
.opts { display: grid; gap: 8px; }
.opt { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 12px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; text-align: left; transition: border-color 0.15s, background 0.15s; }
.opt.on { border-color: var(--brand); background: var(--brand-soft); }
.opt.sold { opacity: 0.45; }
.opt-pic { width: 44px; height: 44px; border-radius: 10px; flex: none; }
.opt-text { display: grid; flex: 1; min-width: 0; }
.opt-text small { color: var(--muted); font-size: 12.5px; }
.tick { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line); color: transparent; flex: none; }
.tick svg { width: 15px; height: 15px; stroke-width: 3.2; }
.opt.on .tick { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.stepper { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: var(--soft); }
.stepper b { min-width: 28px; text-align: center; font-size: 16px; }
.step { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.step:disabled, .step.off { opacity: 0.35; }
.stepper.small .step { width: 32px; height: 32px; }
.stepper.small svg { width: 17px; height: 17px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chip { padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 700; }
.chip.on { border-color: var(--brand); background: var(--brand); color: var(--on-brand); }
.grp.allergy .chip.on { background: var(--bad); border-color: var(--bad); color: #fff; }
.grp.allergy.set { border-color: #f3c9c7; }
textarea, input[type="text"], input[type="tel"], input[type="email"], input:not([type]), select {
    width: 100%; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: #fff; font-size: 16px; outline: none; transition: border-color 0.15s;
}
textarea:focus, input:focus, select:focus { border-color: var(--brand); }
textarea { resize: none; min-height: 52px; }
.item-foot {
    position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 12px 16px calc(12px + var(--safe-b)); background: #fff;
    border-top: 1px solid var(--line);
}
.item-foot .btn { min-height: 54px; }

/* ===== cart ===== */
.lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.line { display: grid; grid-template-columns: 58px 1fr auto; gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lines.readonly .line { grid-template-columns: 1fr auto; padding: 10px 0; }
.line.out { background: var(--bad-soft); border-radius: 14px; padding: 12px 8px; }
.line-pic { width: 58px; height: 58px; border-radius: 14px; }
.line-main { display: grid; gap: 3px; min-width: 0; }
.line-main > b { font-size: 15px; }
.line-main small { color: var(--muted); font-size: 12.5px; }
.line-main .allergy { color: var(--bad); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.line-main .allergy svg { width: 15px; height: 15px; }
.line-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.line-price { font-weight: 700; }
.add-more { display: flex; align-items: center; gap: 8px; padding: 14px 2px; color: var(--brand); font-weight: 700; text-decoration: none; }
.block { margin-top: 14px; padding: 16px; border-radius: 20px; background: var(--soft); }
.block h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 15.5px; }
.block h3 svg { width: 20px; height: 20px; color: var(--brand); }
.block .chips .chip { background: #fff; }
.block .chips .chip.on { background: var(--brand); }
.inline-form { display: flex; gap: 8px; }
.inline-form input { text-transform: uppercase; letter-spacing: 0.08em; }
.coupon-on { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1.5px dashed var(--ok); }
.coupon-on b { letter-spacing: 0.08em; color: var(--ok); }
.coupon-on .link { margin-left: auto; color: var(--muted); font-size: 13px; }
.trio-offer { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 14px; border-radius: 16px; border: 1.5px solid var(--brand); background: #fff; text-align: left; margin-bottom: 10px; }
.trio-offer span { display: grid; }
.trio-offer small { color: var(--muted); font-size: 12.5px; }
.addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.addon { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; text-align: left; }
.addon.on { border-color: var(--ok); }
.addon span { display: grid; min-width: 0; }
.addon b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.addon small { font-size: 12.5px; color: var(--brand); font-weight: 700; display: flex; align-items: center; gap: 4px; }
.addon small svg { width: 14px; height: 14px; }
.addon s { color: var(--muted); font-weight: 500; }
.addon-pic { width: 44px; height: 44px; border-radius: 12px; }
.when { margin-top: 18px; }
.lbl { margin: 0 2px 10px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.when-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.when-pick.one { grid-template-columns: minmax(0, 1fr); }
/* the radio covers its whole box (one tap anywhere), unseen: the box shows the choice */
.choice { position: relative; display: grid; align-content: start; gap: 4px; padding: 13px 14px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; }
.choice.on { border-color: var(--brand); background: var(--brand-soft); }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.choice:has(input:focus-visible) { outline: 3px solid var(--brand); outline-offset: 2px; }
.choice b { font-size: 15px; }
.choice small { color: var(--muted); font-size: 13px; }
.when-at { display: grid; gap: 6px; margin-top: 10px; }
.when-at .soon { color: var(--ok); font-weight: 700; font-size: 13px; padding: 0 2px; }
.when .info-box, .when .warn-box, .when .call-box { margin-top: 10px; }
.more-row { border-bottom: 1px solid var(--line); }
.more-row summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 2px; font-weight: 700; font-size: 15px; cursor: pointer; list-style: none; }
.more-row summary::-webkit-details-marker { display: none; }
.more-row summary svg { width: 20px; height: 20px; color: var(--brand); stroke-width: 2.6; transition: transform 0.2s; }
.more-row[open] summary svg { transform: rotate(45deg); }
.more-row[open] { padding-bottom: 14px; }
.more-row .chips + textarea { margin-top: 10px; }
.more-row > .btn { margin-top: 10px; }
.when + .more-row { margin-top: 8px; }
.confirm-when { display: flex; align-items: center; gap: 12px; margin: 14px 0 16px; padding: 14px; border-radius: 16px; background: var(--soft); text-align: left; }
.confirm-when svg { color: var(--brand); }
.confirm-when span { display: grid; }
.confirm-when small { color: var(--muted); }
.sheet .btn.big + .btn.big { margin-top: 10px; }
/* a big button on two lines: what it does, and a small line under it */
.btn.two { flex-direction: column; gap: 0; line-height: 1.2; padding-top: 8px; padding-bottom: 8px; }
.btn.two small { font-size: 12.5px; font-weight: 500; opacity: 0.92; }
.totals > div { display: flex; justify-content: space-between; padding: 4px 0; }
.totals .good { color: var(--ok); font-weight: 700; }
.totals .grand { font-size: 18px; font-weight: 700; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
.block.totals { background: #fff; border: 1.5px solid var(--line); margin-top: 18px; }
.checkout-bar { position: sticky; bottom: 0; margin: 16px -16px 0; padding: 12px 16px calc(14px + var(--safe-b)); background: #fff; border-top: 1px solid var(--line); }
.checkout-bar .muted { margin: 0 0 8px; text-align: center; }
.checkout-bar .warn-text { font-weight: 700; }
.checkout-bar .anyway-text { color: var(--warn); font-weight: 700; }
.pick-list { display: grid; gap: 8px; }
.pick { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; text-align: left; }

/* ===== sign in ===== */
.auth { display: grid; gap: 12px; justify-items: stretch; text-align: center; padding-top: 4px; }
.auth .sheet-title { margin: 0; }
.auth > .muted { margin: 0; }
.auth-icon { justify-self: center; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); }
.auth-icon svg { width: 30px; height: 30px; }
.auth-icon.bad { background: var(--bad-soft); color: var(--bad); }
/* registered customers only: the number first */
.gate { display: grid; justify-items: center; gap: 14px; text-align: center; max-width: 420px; margin: 0 auto; padding: 64px 24px 40px; }
.gate .page-title { font-size: 26px; }
.gate .muted { margin: 0; font-size: 16px; line-height: 1.45; }
.gate .btn.big { width: 100%; margin-top: 6px; }
.gate-logo { width: 84px; height: 84px; object-fit: contain; border-radius: 22px; }
.back-link { justify-self: start; color: var(--muted); }
.big-input { font-size: 22px; text-align: center; padding: 14px; letter-spacing: 0.03em; }
.big-input.code { letter-spacing: 0.3em; text-transform: uppercase; }
.form-error { min-height: 20px; margin: 0; color: var(--bad); font-weight: 700; font-size: 14px; }
.or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.or::before, .or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.phone-chip { justify-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--soft); font-weight: 700; }
.phone-chip svg { width: 16px; height: 16px; }
.dots { display: flex; justify-content: center; gap: 14px; margin: 8px 0 2px; }
.dots i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--ink-2); transition: background 0.12s, transform 0.12s; }
.dots i.on { background: var(--ink); transform: scale(1.1); }
.dots.shake { animation: nope 0.4s; }
.keypad { display: grid; grid-template-columns: repeat(3, 76px); justify-content: center; gap: 12px 22px; margin: 4px 0 6px; }
.keypad button { width: 76px; height: 76px; border-radius: 50%; border: 0; background: var(--soft); font-size: 26px; font-weight: 700; display: grid; place-items: center; transition: background 0.1s; }
.keypad button:active { background: var(--line); }

/* ===== order page ===== */
.status-card { margin: 0 0 14px; padding: 22px 20px; border-radius: 24px; text-align: center; background: var(--soft); }
.status-card h2 { margin: 0 0 6px; font-size: 23px; letter-spacing: -0.015em; }
.status-card p { margin: 0; color: var(--ink-2); }
.status-card.wait { background: var(--warn-soft); }
.status-card.cook { background: var(--brand-soft); }
.status-card.ready { background: #c2570c; color: #fff; animation: glow 2s ease-in-out infinite; }
.status-card.ready p, .status-card.ready .big-number small { color: rgba(255, 255, 255, 0.92); }
.ready-timer { display: inline-flex !important; align-items: center; gap: 6px; margin: 12px 0 0 !important; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.18); color: #fff !important; font-weight: 700; font-variant-numeric: tabular-nums; }
.ready-timer svg { width: 18px; height: 18px; }
.status-card.done { background: var(--ok-soft); }
.status-card.bad { background: var(--bad-soft); }
@keyframes glow { 50% { box-shadow: 0 0 0 10px rgba(194, 87, 12, 0.2); } }
.big-number { margin: 0 0 6px !important; font-size: 54px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: inherit !important; }
.big-number small { display: block; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 20px 0 0; padding: 0; }
.steps li { display: grid; justify-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); position: relative; }
.steps li::before { content: ''; position: absolute; top: 13px; left: -50%; right: 50%; height: 3px; background: var(--line); z-index: 0; }
.steps li:first-child::before { display: none; }
.steps li.done::before, .steps li.now::before { background: var(--ok); }
.steps i { position: relative; z-index: 1; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid var(--line); color: #fff; }
.steps i svg { width: 15px; height: 15px; stroke-width: 3.2; }
.steps li.done i { background: var(--ok); border-color: var(--ok); }
.steps li.now i { border-color: var(--ok); box-shadow: 0 0 0 5px rgba(18, 128, 74, 0.15); }
.steps li.now { color: var(--ink); }
.status-card.ready .steps li { color: rgba(255, 255, 255, 0.85); }
.status-card.ready .steps li.done i, .status-card.ready .steps li.now i { background: #fff; border-color: #fff; color: #c2570c; }
.status-card.ready .steps li.done::before { background: #fff; }
/* « Récupérée »: still to come (paid at the counter) */
.status-card.ready .steps li.next::before { background: rgba(255, 255, 255, 0.35); }
.status-card.ready .steps li.next i { background: transparent; border: 3px dashed rgba(255, 255, 255, 0.75); animation: nextPulse 1.6s ease-in-out infinite; }
.status-card.ready .steps li.next { color: rgba(255, 255, 255, 0.7); }
@keyframes nextPulse { 50% { box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.2); } }
.notify-row { display: flex; justify-content: center; margin: -4px 0 6px; }
.call-box { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; padding: 16px; border-radius: 20px; background: var(--warn-soft); color: var(--warn); }
.call-box > svg { width: 26px; height: 26px; margin-top: 2px; }
.call-box b { color: var(--ink); font-size: 16px; }
.call-box p { margin: 4px 0 12px; color: var(--ink-2); }
.notify-row p { display: flex; align-items: center; gap: 6px; }
.notify-row svg { width: 16px; height: 16px; }
.store-mini { display: grid; gap: 2px; margin-top: 10px; }
.store-mini .row-buttons { margin-top: 10px; }
#order-page .block p { margin: 0; }

/* ===== account ===== */
.me-card { display: flex; align-items: center; gap: 16px; padding: 4px 0 8px; }
.me-card > div { display: grid; }
.me-name { font-size: 21px; }
.field { display: grid; gap: 6px; margin-bottom: 14px; }
.field > span { font-weight: 700; font-size: 14px; }
.field small { font-weight: 500; }
.pair { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.setting span { display: grid; }
.setting small { font-size: 12.5px; }
.block > .btn { margin-top: 12px; width: 100%; }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.history li { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 16px; background: #fff; }
.h-main { display: grid; gap: 2px; flex: 1; min-width: 0; text-decoration: none; }
.h-main small { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-head { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.badge.st-need { background: var(--warn-soft); color: var(--warn); }
.badge.st-cook { background: var(--brand-soft); color: var(--brand); }
.badge.st-ready { background: var(--ok); color: #fff; }
.badge.st-done { background: var(--ok-soft); color: var(--ok); }
.badge.st-bad { background: var(--bad-soft); color: var(--bad); }

/* ===== messages ===== */
.chat-page { display: flex; flex-direction: column; height: calc(100vh - var(--top)); height: calc(100dvh - var(--top)); }
.chat-page .page-top { margin: 0; padding-bottom: 8px; }
.chat-side { display: none; }
.chat-list { flex: 1; overflow-y: auto; padding: 8px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.chat-empty { margin: auto; display: grid; justify-items: center; gap: 12px; text-align: center; color: var(--muted); max-width: 300px; }
.chat-empty svg { width: 40px; height: 40px; color: var(--brand); }
.bubble { display: flex; gap: 8px; max-width: 86%; }
.bubble p { margin: 0; white-space: pre-wrap; word-wrap: break-word; }
.bubble small { color: var(--muted); font-size: 11px; }
.bubble.me { align-self: flex-end; flex-direction: column; align-items: flex-end; }
.bubble.me p { padding: 10px 14px; border-radius: 20px 20px 6px 20px; background: var(--brand); color: var(--on-brand); }
.bubble.them { align-self: flex-start; }
.bubble.them > div { display: grid; gap: 3px; }
.bubble.them p { padding: 10px 14px; border-radius: 20px 20px 20px 6px; background: var(--soft); }
.bubble .who { font-weight: 700; color: var(--ink-2); }
.bubble .who span { font-weight: 500; }
.code-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 14px; border: 1.5px dashed var(--ok); background: #fff; color: var(--ok); font-weight: 700; }
.code-chip b { letter-spacing: 0.08em; }
.code-chip span { color: var(--ink); font-size: 13px; }
.composer { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(10px + var(--safe-b)); border-top: 1px solid var(--line); background: #fff; }
.composer textarea { min-height: 46px; max-height: 140px; border-radius: 23px; padding: 11px 16px; }

/* ===== small messages ===== */
/* at the bottom, above the cart bar or the order button; on top while a sheet is open (its buttons stay clear) */
#toasts { position: fixed; bottom: calc(16px + var(--safe-b)); left: 0; right: 0; z-index: 90; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { max-width: 520px; padding: 12px 18px; border-radius: 16px; background: var(--ink); color: #fff; font-weight: 700; font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); transform: translateY(12px); opacity: 0; transition: transform 0.25s, opacity 0.25s; }
.toast.show { transform: none; opacity: 1; }
body.has-cartbar #toasts { bottom: calc(86px + var(--safe-b)); }
body[data-screen="cartPage"] #toasts { bottom: calc(150px + var(--safe-b)); }
body:has(.sheet-back.open) #toasts { top: calc(var(--top) + 8px); bottom: auto; }
.toast.ok { background: var(--ok); }
.toast.error { background: var(--bad); }
.toast.warn { background: #8a5000; }

/* ===== privacy ===== */
.prose h3 { margin: 20px 0 6px; font-size: 16px; }
.prose p { margin: 0; color: var(--ink-2); }
.noscript { padding: 30px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
@media (min-width: 760px) {
    body { background: #fafafb; }
    .view { background: #fff; box-shadow: 0 0 0 1px var(--line); min-height: calc(100vh - var(--top)); }
}
/* a choice just picked: a short pop before its group closes */
.opt.just { animation: optPick 0.4s ease; }
.opt.just .tick { animation: tickPop 0.35s ease; }
@keyframes optPick { 0% { transform: scale(1); } 35% { transform: scale(0.97); } 100% { transform: scale(1); } }
@keyframes tickPop { 0% { transform: scale(0.4); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
/* a blocked account: on the menu, the cart and after signing in */
.blocked-card { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: center; margin: 12px 16px; padding: 16px; border-radius: 18px; background: var(--bad-soft); border: 1.5px solid var(--bad); }
.blocked-card .auth-icon { width: 48px; height: 48px; background: #fff; }
.blocked-card b { color: var(--bad); font-size: 16px; }
.blocked-card p { margin: 4px 0 0; font-size: 14px; }
.owed-total, .owed-list, .owed-calls { grid-column: 1 / -1; }
.owed-total { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 14px; border-radius: 12px; background: #fff; }
.owed-total span { font-weight: 700; color: var(--bad); }
.owed-total strong { font-size: 24px; color: var(--bad); }
.owed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.owed-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.6); }
.owed-calls { display: grid; gap: 8px; }
.owed-calls .btn { width: 100%; justify-content: center; }
.sheet .blocked-card { margin: 8px 0 0; }

/* the plain copy of the stores and the menu for search engines and browsers without JavaScript (server/seo.js) */
.js .seo-page { display: none; }
.seo-page { padding: 20px 16px 40px; max-width: 720px; margin: 0 auto; line-height: 1.5; }
.seo-page h1 { font-size: 1.5rem; margin: 0 0 8px; }
.seo-page h2 { font-size: 1.15rem; margin: 22px 0 8px; }
.seo-page h3 { font-size: 1rem; margin: 16px 0 6px; }
.seo-page ul { padding-left: 18px; }
.seo-page .seo-hours th { text-align: left; padding-right: 14px; font-weight: 500; }
html:not(.js) .seo-page + .splash { display: none; }

/* ===== tablet (768 px and more): categories in a column on the left, more photos per row, pages in the middle ===== */
@media (min-width: 768px) {
    .view { max-width: 760px; }
    .view > .pad { padding: 24px 28px; }
    .view > .pad .checkout-bar { margin: 16px -28px 0; padding-left: 28px; padding-right: 28px; }
    body[data-screen="menuPage"] .view { max-width: 1180px; }
    .menu-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); align-items: start; }
    .menu-main { display: block; grid-column: 2; grid-row: 1; min-width: 0; min-height: calc(100vh - var(--top)); padding-bottom: 8px; border-left: 1px solid var(--line); }
    .cats {
        grid-column: 1; grid-row: 1; flex-direction: column; gap: 4px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
        max-height: calc(100vh - var(--top)); max-height: calc(100dvh - var(--top)); padding: 18px 12px 28px 14px;
        border-bottom: 0;
    }
    .cat { padding: 10px 14px; border-radius: 12px; background: transparent; white-space: normal; line-height: 1.3; }
    .cat:hover { background: var(--soft); }
    .cat.on { background: var(--ink); color: #fff; }
    .store-head { padding: 18px 22px 6px; }
    .hero { margin: 10px 22px 4px; aspect-ratio: 16 / 6; }
    .welcome, .again { margin-left: 22px; margin-right: 22px; }
    .menu-section { padding: 2px 22px 12px; }
    .grid { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
    /* the cart bar over the menu's column */
    body[data-screen="menuPage"] .cartbar { padding-left: calc(210px + 14px); }
    .cartbar-btn { max-width: 560px; }
}
/* wide screen (1024 px and more): the cart stays on the right */
@media (min-width: 1024px) {
    :root { --side: 340px; }
    .cartside:not([hidden]) {
        position: fixed; top: var(--top); right: 0; bottom: 0; z-index: 15; width: var(--side); display: flex; flex-direction: column;
        background: #fff; border-left: 1px solid var(--line);
    }
    body.has-cartside .cartbar { display: none; }
    body.has-cartside .view { max-width: none; margin: 0 var(--side) 0 0; padding-bottom: 40px; }
    .side-title { display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px 20px 14px; font-size: 19px; letter-spacing: -0.015em; border-bottom: 1px solid var(--line); }
    .side-title .cartbar-n { min-width: 28px; height: 28px; border-radius: 14px; padding: 0 8px; background: var(--brand); color: var(--on-brand); font-size: 13.5px; }
    .side-lines { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 18px; align-content: start; }
    .side-lines .line { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; }
    .side-lines .line-pic { width: 46px; height: 46px; border-radius: 12px; }
    .side-lines .line-main > b { font-size: 14px; }
    .side-lines .line-actions { gap: 8px; flex-wrap: wrap; }
    .side-foot { display: grid; gap: 12px; padding: 14px 18px calc(18px + var(--safe-b)); border-top: 1px solid var(--line); }
    .side-when { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 700; color: var(--ok); }
    .side-when.warn { color: var(--warn); }
    .side-when svg { width: 18px; height: 18px; flex: none; }
    .side-foot .totals { padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line); font-size: 14px; }
    .side-foot .totals > div { padding: 2px 0; }
    .side-foot .totals .grand { font-size: 17px; }
    .side-empty { flex: 1; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; color: var(--muted); }
    .side-empty svg { width: 40px; height: 40px; color: var(--brand); stroke-width: 1.6; }
    .side-empty p { margin: 0; }
}

/* ===== wide screens: the whole width is used. The bar on top across, the categories on the left edge, the cart on
   the right edge, the menu in between with as many columns as fit (cards never stretched big) ===== */
@media (min-width: 1280px) {
    :root { --side: 360px; }
    .menu-body { grid-template-columns: 240px minmax(0, 1fr); }
    .cats { padding-left: 16px; padding-right: 14px; }
    .menu-section { padding: 2px 22px 14px; }
    .grid { grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 16px; }
}
@media (min-width: 1600px) {
    .store-head { padding: 20px 28px 6px; }
    .hero { margin: 12px 28px 4px; }
    .welcome, .again { margin-left: 28px; margin-right: 28px; }
    .menu-section { padding: 2px 28px 14px; }
    .grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

/* ===== taps: no wait for a double-tap zoom, a small press so one sees the tap was taken, thin scroll bars ===== */
button, a, label, .opt, .choice { touch-action: manipulation; }
.opt, .seg button, .btn, .step, .choice, .addon, .trio-offer, .chip, .icon-btn, .sheet-x { transition: transform 0.08s ease, border-color 0.15s, background 0.15s; }
.opt:active, .seg button:active, .btn:active, .step:active, .choice:active, .addon:active, .trio-offer:active, .chip:active, .icon-btn:active, .sheet-x:active { transform: scale(0.97); }
.step:disabled:active, .btn:disabled:active { transform: none; }
.thin-scroll { scrollbar-width: thin; scrollbar-color: #cfd2d8 transparent; }
.thin-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.thin-scroll::-webkit-scrollbar-thumb { background: #cfd2d8; border-radius: 6px; }
.thin-scroll::-webkit-scrollbar-track { background: transparent; }

/* ===== the item on a tablet or a computer: the whole screen. A band on top (photo, name, Seul / Trio), the choices
   in columns side by side (2 on a tablet held upright, 3 wider) so nothing or little scrolls, big tiles for a finger,
   the bar to add across the bottom. Phones keep the sheet from the bottom ===== */
@media (min-width: 768px) {
    .sheet.item-sheet, .sheet-back.open .sheet.item-sheet { position: fixed; inset: 0; width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; border-radius: 0; transform: none; opacity: 1; transition: opacity 0.2s; }
    .sheet-back .sheet.item-sheet { opacity: 0; }
    .sheet-back.open .sheet.item-sheet { opacity: 1; }
    .item-sheet .sheet-body { flex: 1; min-height: 0; overflow: hidden; padding: 0; }
    .item-sheet #item { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
    .item-side {
        grid-row: 1; display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 12px 22px;
        padding: 16px 92px 16px 24px; border-bottom: 1px solid var(--line); background: #fcfcfd;
    }
    .item-side .item-pic { width: 130px; height: 100px; aspect-ratio: auto; max-height: none; margin: 0; border-radius: 16px; }
    .item-side .item-head { padding: 0; min-width: 0; }
    .item-side .item-head h2 { font-size: 27px; }
    .item-side .item-head .muted { font-size: 14.5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .item-side .seg { margin: 0; grid-template-columns: 200px 250px; gap: 12px; }
    .item-sheet .seg button { padding: 14px 16px; min-height: 76px; border-width: 2.5px; }
    .item-sheet .seg b { font-size: 18px; }
    .item-sheet .seg span { font-size: 16px; }
    .item-sheet .groups { grid-row: 2; display: block; overflow-y: auto; overscroll-behavior: contain; padding: 18px 24px 2px; }
    /* the columns on an inner box: columns on the box that scrolls would add more columns sideways instead of scrolling */
    .item-sheet .groups-in { display: block; columns: 3; column-gap: 16px; }
    .item-sheet .groups-in > .grp { break-inside: avoid; margin-bottom: 16px; }
    .item-sheet .grp-head { padding: 14px 16px 4px; }
    .item-sheet .grp-title b { font-size: 19px; }
    .item-sheet .grp-title small { font-size: 13.5px; }
    .item-sheet .grp-pad { padding: 4px 14px 14px; }
    .item-sheet .grp:not(.allergy):not(#grp-notes) .grp-body { grid-template-rows: 1fr; }
    .item-sheet .grp:not(.allergy):not(#grp-notes) .grp-chev { display: none; }
    .item-sheet .opts { grid-template-columns: 1fr 1fr; gap: 8px; }
    .item-sheet .opt { min-height: 64px; padding: 8px 12px; font-size: 16px; border-width: 2px; }
    .item-sheet .opt-text small { font-size: 13.5px; }
    .item-sheet .tick { width: 28px; height: 28px; }
    .item-sheet .chip { padding: 11px 16px; font-size: 15px; }
    .item-sheet .item-foot { grid-row: 3; position: static; gap: 18px; padding: 14px 24px calc(14px + var(--safe-b)); }
    .item-sheet .item-foot .stepper { padding: 6px; }
    .item-sheet .item-foot .step { width: 54px; height: 54px; }
    .item-sheet .item-foot .stepper b { font-size: 21px; min-width: 40px; }
    .item-sheet .item-foot .btn.grow { min-height: 66px; font-size: 20px; }
    .item-sheet .sheet-x { position: fixed; top: 24px; right: 22px; width: 52px; height: 52px; }
}
/* a tablet held upright: 2 columns of choices, Seul / Trio under the name */
@media (min-width: 768px) and (max-width: 1099px) {
    .item-sheet .groups-in { columns: 2; }
    .item-side { grid-template-columns: 110px minmax(0, 1fr); }
    .item-side .item-pic { width: 110px; height: 86px; }
    .item-side .seg { grid-column: 1 / -1; grid-template-columns: 1fr 1.25fr; }
}

/* ===== account, order, messages on a computer or a tablet held sideways: the whole width ===== */
@media (min-width: 1024px) {
    body[data-screen="accountPage"] .view, body[data-screen="orderPage"] .view, body[data-screen="messagesPage"] .view { max-width: none; box-shadow: none; }
    body[data-screen="accountPage"] .view > .pad, body[data-screen="orderPage"] .view > .pad { padding: 28px 36px 40px; }

    /* Mon compte: the orders across (a grid of them, each with « Commander à nouveau »), then profile | security | privacy */
    .account { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: 'top top' 'me me' 'warn warn' 'orders orders' 'profile security' 'profile privacy' 'profile .'; grid-template-rows: repeat(6, auto) 1fr; gap: 0 20px; align-items: start; }
    .account > .page-top { grid-area: top; }
    .account > .me-card { grid-area: me; }
    .account > .warn-box, .account > .blocked-card { grid-area: warn; }
    .account > .acc-orders { grid-area: orders; }
    .account > .acc-profile { grid-area: profile; }
    .account > .acc-security { grid-area: security; }
    .account > .acc-privacy { grid-area: privacy; }
    .account .history { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
    .account .history li { flex-direction: column; align-items: stretch; gap: 10px; height: 100%; border: 1px solid var(--line); }
    .account .history li .h-main small { white-space: normal; }
    .account .history li > .btn { align-self: flex-start; }
    .account .acc-privacy { display: grid; gap: 4px; justify-items: start; }

    /* Votre commande: where it is on the left (status, when, the store, what to do), what was ordered on the right */
    #order-page { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, 1fr); grid-template-rows: auto repeat(5, auto) 1fr; column-gap: 28px; align-items: start; }
    #order-page > * { grid-column: 1; }
    #order-page > .page-top { grid-column: 1 / -1; }
    #order-page > .order-basket { grid-column: 2; grid-row: 2 / -1; margin-top: 0; position: sticky; top: calc(var(--top) + 16px); }
    #order-page > .status-card { padding: 30px 28px; }
    #order-page > .order-actions { padding: 0; margin-top: 16px; justify-content: flex-start; }
    #order-page > .order-actions > * { flex: 0 1 auto; }

    /* Messages: the customer's orders on the left (what one writes about), the conversation on the rest of the width,
       lines kept short enough to read, the box to write pinned at the bottom */
    .chat-page { display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
    .chat-page > .page-top { grid-column: 2; }
    .chat-page > .chat-list, .chat-page > .composer { grid-column: 2; }
    .chat-side { display: block; grid-column: 1; grid-row: 1 / -1; overflow-y: auto; padding: 24px 20px; border-right: 1px solid var(--line); background: #fafafb; }
    .chat-side h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 16px; }
    .chat-side h2 svg { width: 20px; height: 20px; color: var(--brand); }
    .chat-side .history li { border: 1px solid var(--line); }
    body[data-screen="messagesPage"] .chat-page .page-top { padding: 22px 36px 8px; }
    .chat-list { padding: 12px 36px 20px; gap: 12px; }
    .bubble { max-width: min(70%, 760px); }
    .composer { padding: 14px 36px calc(14px + var(--safe-b)); }
    .composer textarea { font-size: 16px; }
}
@media (min-width: 1440px) {
    .account { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: 'top top top' 'me me me' 'warn warn warn' 'orders orders orders' 'profile security privacy'; grid-template-rows: none; }
}

/* ===== Panier on a tablet or a computer: the whole width in columns. What is ordered | when, coupon, note | the total
   and « Commander », each column scrolling on its own (thin bar) so the button never moves. 2 columns on a tablet held
   upright (the 2nd: when... above, the total and the button pinned at its bottom). On a phone: one list as before ===== */
.cart-col { display: contents; }
@media (min-width: 768px) {
    body[data-screen="cartPage"] .view { max-width: none; box-shadow: none; padding-bottom: 0; min-height: 0; }
    .view > .pad.cart-page { display: grid; grid-template-rows: auto minmax(0, 1fr); height: calc(100vh - var(--top)); height: calc(100dvh - var(--top)); padding: 20px 28px 0; }
    .cart-page .page-top .icon-btn { width: 52px; height: 52px; }
    .cart-page .page-title { font-size: 30px; }
    #cart { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 0 26px; min-height: 0; }
    #cart > .empty-state { grid-column: 1 / -1; }
    .cart-col { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 18px; }
    .cart-items { grid-column: 1; grid-row: 1 / -1; }
    .cart-more { grid-column: 2; grid-row: 1; }
    .cart-pay { grid-column: 2; grid-row: 2; overflow: visible; padding-bottom: 0; }
    .cart-col > .block:first-child { margin-top: 0; }
    .cart-more { gap: 0; }
    .cart-more > * { flex: none; }
    .cart-more > .when { margin-top: 0; }
    .cart-pay .block.totals { margin-top: 0; }
    .view > .pad .cart-pay .checkout-bar { position: static; margin: 0; padding: 12px 0 calc(18px + var(--safe-b)); border-top: 0; }
    /* bigger to touch */
    .cart-page .line { grid-template-columns: 76px minmax(0, 1fr) auto; padding: 16px 0; }
    .cart-page .line-pic { width: 76px; height: 76px; }
    .cart-page .line-main > b { font-size: 18px; }
    .cart-page .line-main small { font-size: 14.5px; }
    .cart-page .line-price { font-size: 18px; }
    .cart-page .line-actions .step { width: 46px; height: 46px; }
    .cart-page .line-actions .stepper b { font-size: 18px; min-width: 34px; }
    .cart-page .line-actions .link { font-size: 16px; padding: 10px 6px; }
    .cart-page .add-more { font-size: 17px; padding: 18px 2px; }
    .cart-page .block { padding: 18px; }
    .cart-page .block h3 { font-size: 17px; }
    .cart-page .trio-offer { padding: 18px; min-height: 72px; }
    .cart-page .inline-form input, .cart-page .inline-form .btn { min-height: 54px; font-size: 17px; }
    .cart-page .inline-form .btn { padding: 0 22px; }
    .cart-page .choice { padding: 16px 18px; min-height: 70px; }
    .cart-page .choice b { font-size: 17px; }
    .cart-page .more-row summary { font-size: 17px; padding: 18px 2px; }
    .cart-page .page-sub { font-size: 15px; }
    .cart-page .choice small { font-size: 14px; }
    .cart-page .chip { padding: 11px 16px; font-size: 15px; }
    .cart-page .totals .grand { font-size: 22px; }
    .cart-page .checkout-bar .btn.big { min-height: 68px; font-size: 21px; }
}
/* tablet held upright: the total in a compact strip above the button */
@media (min-width: 768px) and (max-width: 1099px) {
    .cart-pay { border-top: 1px solid var(--line); }
    .cart-pay .block.totals { padding: 10px 2px 0; border: 0; background: none; }
    .cart-pay .totals > div { padding: 2px 0; }
    .cart-pay .totals p.muted { display: none; }
}
/* wide: 3 columns, the total and the button in the last one */
@media (min-width: 1100px) {
    .view > .pad.cart-page { padding: 22px 32px 0; }
    #cart { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(340px, 1fr); grid-template-rows: minmax(0, 1fr); gap: 0 28px; }
    .cart-items { grid-row: 1; }
    .cart-more { grid-column: 2; grid-row: 1; }
    .cart-pay { grid-column: 3; grid-row: 1; overflow-y: auto; }
    .cart-pay .checkout-bar { margin-top: auto !important; }
    .cart-pay .block.totals { font-size: 17px; padding: 22px; }
    .cart-pay .totals > div { padding: 6px 0; }
    .cart-pay .totals .grand { font-size: 26px; }
}

/* messages blocked from the register: the reason instead of the field */
.composer[hidden] { display: none; }
.chat-muted { margin: 0; border-radius: 0; padding: 14px 16px calc(14px + var(--safe-b)); }
@media (min-width: 1024px) { .chat-page > .chat-muted { grid-column: 2; } }