/* Menu page. Structure: Eat Happy « Produkte » (category sidebar + filters,
   dishes cut out and floating on cream, 3 per row). Popup: Yelp two-column
   dish modal (via Refero). Skin: page.css / brand.css tokens. Bar: .design/bar.md */

html { scroll-padding-top: calc(var(--hd-h, 112px) + var(--side-h, 0px) + 20px); }

/* ---- Hero ------------------------------------------------------------------- */
.m-hero { padding: 40px 0 24px; }
.m-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
.m-hero__txt { background: var(--p-wasabi); border-radius: 16px; padding: 40px 44px 44px; }
.m-hero h1 { font-size: clamp(44px, 5.2vw, 76px); max-width: 12ch; }
.m-hero__lead { font-size: 18px; max-width: 520px; margin: 16px 0 20px; text-wrap: pretty; }
.m-hero__chips { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.m-hero__chips li { background: var(--riz); border-radius: 50px; padding: 6px 14px; font-size: 15px; }
.m-hero__photo { border-radius: 16px; overflow: hidden; min-height: 100%; }
.m-hero__photo img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Layout: sidebar + list (Eat Happy) -------------------------------------- */
.m-layout > * { min-width: 0; }
.m-layout { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; padding-top: 40px; padding-bottom: 72px; }
.m-side { position: sticky; top: calc(var(--hd-h, 112px) + 24px); }
.m-side__t {
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--p-gingembre);
  font: 700 13px/1.2 var(--sp-body); letter-spacing: .06em; text-transform: uppercase;
}
.m-cats { list-style: none; margin: 0 0 26px; padding: 0; }
.m-cats a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 8px 0; color: var(--nori); text-decoration: none; font-size: 16px;
}
.m-cats a span { font-size: 14px; opacity: .7; }
.m-cats a:hover, .m-cats a[aria-current="true"] { color: var(--nori); font-weight: 700; text-decoration: underline; text-decoration-color: var(--saumon); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.m-cats li[hidden] { display: none; }
/* filters: Eat Happy rows, a pastel icon disc + label + check box. Categories stay text. */
.m-ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.m-filters { display: grid; gap: 4px; }
.m-fil {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 4px 0;
  border: 0; background: none; color: var(--nori); font: 500 16px var(--sp-body); text-align: left; cursor: pointer;
}
.m-fil__ico { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.m-fil__ico .m-ico { width: 22px; height: 22px; }
.m-fil__ico--gf { background: var(--p-wasabi); } .m-fil__ico--veg { background: var(--p-tamago); }
.m-fil__box { margin-left: auto; width: 22px; height: 22px; border: 2px solid var(--nori); border-radius: 50%; flex: none; display: grid; place-items: center; }
.m-fil[aria-pressed="true"] { font-weight: 700; }
.m-fil[aria-pressed="true"] .m-fil__box { background: var(--nori); }
.m-fil[aria-pressed="true"] .m-fil__box::after { content: ""; width: 5px; height: 10px; margin-top: -2px; border: solid var(--riz); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
@media (hover: hover) { .m-fil:hover .m-fil__ico { outline: 2px solid var(--nori); } }
.m-fil:focus-visible, .m-cats a:focus-visible, .m-fbtn:focus-visible { outline: 3px solid var(--saumon); outline-offset: 3px; }
.m-fbtn { display: none; }
.m-fsheet {
  width: min(420px, calc(100% - 32px)); padding: 28px 24px 24px; border: 0; border-radius: 22px;
  background: var(--riz); color: var(--nori); box-shadow: 0 30px 80px rgba(18, 51, 43, .45);
}
.m-fsheet::backdrop { background: rgba(18, 51, 43, .72); }
.m-fsheet h2 { font-size: 32px; margin: 0 52px 14px 0; }
.m-fsheet__go { width: 100%; margin-top: 18px; }
.m-count { min-height: 1.4em; margin: 10px 0 0; font-size: 14px; }
.m-side__sms { margin-top: 22px; background: var(--p-tamago); border-radius: 16px; padding: 18px; }
.m-side__sms b { display: block; font-size: 24px; margin-bottom: 6px; }
.m-side__sms p { margin: 0 0 14px; font-size: 15px; line-height: 1.45; }
.m-side__sms .sp-pill { width: 100%; min-height: 44px; padding: 10px 16px; font-size: 15px; }

/* ---- Sections + floating dishes ---------------------------------------------- */
.m-sec + .m-sec { margin-top: 64px; }
.m-sec[hidden] { display: none; }
.m-sec__head { max-width: 640px; margin-bottom: 26px; }
.m-sec__head h2 { font-size: clamp(36px, 3.8vw, 52px); }
.m-sec__head p { margin: 10px 0 0; font-size: 17px; text-wrap: pretty; }
.m-sec__head .m-sec__note { display: inline-block; margin-top: 12px; background: var(--p-tamago); border-radius: 50px; padding: 6px 14px; font-weight: 700; font-size: 15px; }
.m-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 22px; }
.m-dish {
  position: relative; text-align: center; border-radius: 16px; padding: 14px 10px 20px;
  transition: background-color .2s ease, transform .2s ease;
}
.m-dish[hidden] { display: none; }
@media (hover: hover) { .m-dish:hover { background: #fff; transform: translateY(-4px); } }
.m-dish:has(.m-dish__open:focus-visible) { background: #fff; }
.m-dish__img { height: 190px; display: grid; place-items: end center; margin-bottom: 12px; } /* image sits on its title; spare height goes above */
.m-dish__img img { max-height: 190px; width: auto; max-width: 100%; object-fit: contain; }
.m-dish__name { margin: 0; font: 700 19px/1.25 var(--sp-body); text-wrap: balance; }
.m-dish__open {
  all: unset; cursor: pointer; color: var(--nori);
}
.m-dish__open::after { content: ""; position: absolute; inset: 0; border-radius: 16px; }
.m-dish__open:focus-visible::after { outline: 3px solid var(--saumon); outline-offset: 2px; }
.m-dish__price { margin: 6px 0 0; font-weight: 700; font-size: 17px; }
.m-dish__hint { margin-left: 6px; font-size: 14px; text-decoration: underline; text-decoration-color: var(--saumon); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.m-dish__tags { margin: 8px 0 0; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.m-tag { display: inline-flex; align-items: center; gap: 4px; border-radius: 50px; padding: 2px 10px 2px 7px; font-size: 14px; font-weight: 700; }
.m-tag .m-ico { width: 16px; height: 16px; }
.m-tag--gf { background: var(--p-wasabi); } .m-tag--veg { background: var(--p-tamago); }
.m-dish__more { margin-top: 10px; font-size: 16px; line-height: 1.5; }
.m-dish__more p { margin: 0 0 4px; }
html.js .m-dish:not(.m-dish--big) .m-dish__more { display: none; }

/* platters: bigger, composition always visible */
.m-grid--big { grid-template-columns: repeat(2, 1fr); gap: 18px 28px; margin: 0 -18px; }
.m-dish--big { text-align: left; padding: 18px 18px 22px; }
.m-dish--big .m-dish__img { height: 260px; }
.m-dish--big .m-dish__img img { max-height: 260px; }
.m-dish--big .m-dish__tags { justify-content: flex-start; }
.m-dish--big .m-dish__name { font-size: 21px; }

/* ---- Allergen band ------------------------------------------------------------ */
.m-allerg { background: var(--brume); }
.m-allerg__in { max-width: 760px; text-align: center; }
.m-allerg h2 { font-size: clamp(36px, 4vw, 52px); margin-bottom: 14px; }
.m-allerg p { margin: 0; font-size: 18px; text-wrap: pretty; }

/* ---- Dish popup (Yelp layout, our skin) ----------------------------------- */
.m-pop {
  width: min(900px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0;
  border-radius: 22px; background: var(--riz); color: var(--nori);
  box-shadow: 0 30px 80px rgba(18, 51, 43, .45); overflow: auto;
}
.m-pop::backdrop { background: rgba(18, 51, 43, .72); }
.m-pop__in { display: grid; grid-template-columns: 1fr 1fr; min-height: 440px; }
.m-pop__vis { display: grid; place-items: center; padding: 34px; background: var(--p-saumon); }
.m-pop[data-pastel="wasabi"] .m-pop__vis { background: var(--p-wasabi); }
.m-pop[data-pastel="tamago"] .m-pop__vis { background: var(--p-tamago); }
.m-pop[data-pastel="gingembre"] .m-pop__vis { background: var(--p-gingembre); }
.m-pop__vis img { width: 100%; height: auto; max-height: 340px; object-fit: contain; }
.m-pop__det { position: relative; padding: 32px 32px 28px; display: flex; flex-direction: column; }
.m-pop__x {
  position: absolute; right: 14px; top: 14px; width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--nori); background: var(--riz); color: var(--nori);
  font: 700 24px/1 var(--sp-body); cursor: pointer; display: grid; place-items: center;
}
.m-pop__x:focus-visible, .m-pop .sp-pill:focus-visible { outline: 3px solid var(--saumon); outline-offset: 3px; }
.m-pop__cat { margin: 0 52px 4px 0; font-size: 14px; }
.m-pop h2 { font-size: clamp(30px, 3.4vw, 40px); margin: 0 52px 12px 0; }
.m-pop__price { align-self: flex-start; margin: 0 0 16px; background: var(--nori); color: var(--riz); border-radius: 50px; padding: 4px 14px; font-weight: 700; }
.m-pop h3 { margin: 10px 0 6px; font: 700 13px/1.2 var(--sp-body); letter-spacing: .06em; text-transform: uppercase; }
.m-pop__list { margin: 0; padding-left: 20px; }
.m-pop__list li { margin: 2px 0; }
.m-pop__allerg { margin: 0; }
.m-pop__tags { display: flex; gap: 6px; margin: 12px 0 0; }
.m-pop__tags:empty { display: none; }
.m-pop__note { margin: 12px 0 0; font-weight: 700; }
.m-pop__note[hidden] { display: none; }
.m-disc { margin: 16px 0 0; font-size: 14px; line-height: 1.45; max-width: 460px; text-wrap: pretty; }  /* « photos non contractuelles » */
.m-pop__cta { margin-top: auto; padding-top: 22px; display: grid; gap: 10px; }
.m-pop__cta .sp-pill { width: 100%; }

/* ---- SMS basket: add buttons, steppers, bottom bar, basket sheet ------------------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.m-dish { display: flex; flex-direction: column; } /* add buttons line up across a row */
.m-add { position: relative; z-index: 1; margin-top: auto; padding-top: 12px; display: flex; justify-content: center; } /* above the card-wide details button */
.m-add[hidden] { display: none; }
.m-add__btn {
  white-space: nowrap; min-height: 44px; padding: 0 18px; border: 2px solid var(--nori); border-radius: 50px; background: transparent;
  color: var(--nori); font: 700 15px var(--sp-body); cursor: pointer;
}
@media (hover: hover) { .m-add__btn:hover { background: var(--nori); color: var(--riz); } }
.m-step { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; padding: 0 4px; border-radius: 50px; background: var(--nori); color: var(--riz); font-weight: 700; }
.m-step > span { min-width: 26px; text-align: center; }
.m-step button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--riz); font: 700 22px/1 var(--sp-body); cursor: pointer; }
.m-add__btn:focus-visible, .m-step button:focus-visible, .m-bar :focus-visible, .m-cart :focus-visible { outline: 3px solid var(--saumon); outline-offset: 2px; }
.m-add--pop { margin-top: 0; padding-top: 0; flex-direction: column; align-items: center; gap: 6px; }
.m-add__label { margin: 0; font-size: 14px; font-weight: 700; }
.m-add--pop .m-add__btn { width: 100%; min-height: 48px; background: var(--nori); color: var(--riz); font-size: 16px; }
.m-pop__send[hidden] { display: none; }
.m-pop__send, .m-cart__send { white-space: normal; text-align: center; } /* never widen the sheet */

body.has-bar { padding-bottom: 92px; }
body:has(.m-cart[open]) .m-bar { display: none; } /* one send button at a time */
.m-bar {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 900; max-width: 560px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 22px; border-radius: 50px;
  background: var(--nori); color: var(--riz); box-shadow: 0 16px 50px rgba(18, 51, 43, .28);
}
.m-bar[hidden] { display: none; }
.m-bar__open { all: unset; flex: 1; white-space: nowrap; min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; font: 700 16px var(--sp-body); color: var(--riz); }
.m-bar__see { font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
.m-bar .sp-pill { background: var(--riz); color: var(--nori); white-space: nowrap; }

.m-cart {
  width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 30px 28px 26px; border: 0;
  border-radius: 22px; background: var(--riz); color: var(--nori); box-shadow: 0 30px 80px rgba(18, 51, 43, .45);
}
.m-cart::backdrop { background: rgba(18, 51, 43, .72); }
.m-cart h2 { font-size: clamp(30px, 3.4vw, 40px); margin: 0 52px 18px 0; }
.m-cart__list { list-style: none; margin: 0; padding: 0; }
.m-cart__list li { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--brume); }
.m-cart__name { font-weight: 700; }
.m-cart__line { grid-column: 1; font-size: 15px; }
.m-cart__list .m-step { grid-column: 2; grid-row: 1 / span 2; }
.m-cart__total { margin: 18px 0 8px; font: 900 24px/1.1 var(--sp-display); }
.m-cart__note { display: inline-block; margin: 0 0 4px; padding: 6px 14px; border-radius: 50px; background: var(--p-tamago); font-size: 15px; font-weight: 500; }
.m-cart__note[hidden] { display: none; }
.m-cart__send { width: 100%; margin-top: 14px; }
.m-cart__how { margin: 10px 0 0; font-size: 15px; text-wrap: pretty; }
.m-cart__clear { display: block; margin: 18px auto 0; min-height: 44px; padding: 0 12px; border: 0; background: none; color: var(--nori); font: 500 15px var(--sp-body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* ---- Responsive ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  .m-layout { grid-template-columns: 1fr; gap: 0; padding-top: 0; }
  .m-side { position: sticky; top: var(--hd-h, 112px); z-index: 5; margin: 0 -20px; padding: 10px 20px 8px; background: var(--riz); box-shadow: 0 1px 0 rgba(18, 51, 43, .12); }
  /* phones: one row. Text tabs (scroll) + one « Filtres » button that opens a sheet (Eat Happy) */
  .m-side { display: flex; align-items: center; gap: 10px; padding: 4px 20px; }
  .m-side__t, .m-side__sms, .m-count, .m-side > .m-filters { display: none; }
  .m-cats { flex: 1; min-width: 0; display: flex; gap: 20px; margin: 0; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, var(--nori) 85%, transparent); mask-image: linear-gradient(90deg, var(--nori) 85%, transparent); }
  .m-cats::-webkit-scrollbar { display: none; }
  .m-cats a { white-space: nowrap; min-height: 44px; align-items: center; padding: 0; gap: 5px; }
  .m-cats a span { font-size: 13px; }
  .m-cats li:last-child { padding-right: 28px; }
  .m-fbtn {
    display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 40px; padding: 0 12px;
    border: 2px solid var(--nori); border-radius: 50px; background: var(--riz); color: var(--nori);
    font: 700 14px var(--sp-body); cursor: pointer;
  }
  .m-fbtn__n { min-width: 20px; height: 20px; border-radius: 50%; background: var(--saumon); color: #fff; font-size: 12px; display: grid; place-items: center; }
  .m-fbtn__n[hidden] { display: none; }
  .m-fsheet { width: 100%; max-width: 100%; margin: auto auto 0; border-radius: 22px 22px 0 0; padding: 26px 20px 24px; }
  .m-list { padding-top: 32px; }
  .m-grid { grid-template-columns: repeat(2, 1fr); gap: 6px 12px; }
}
@media (max-width: 899.98px) {
  .m-hero { padding-top: 20px; }
  .m-hero__grid { grid-template-columns: 1fr; }
  .m-hero__txt { margin: 0; padding: 28px 22px 30px; }
  .m-hero__photo { aspect-ratio: 4 / 3; }
  .m-grid--big { grid-template-columns: 1fr; }
  .m-pop { width: 100%; max-width: 100%; max-height: 92%; margin: auto auto 0; border-radius: 22px 22px 0 0; }
  .m-pop__in { grid-template-columns: 1fr; min-height: 0; }
  .m-pop__vis { padding: 20px 20px 14px; }
  .m-pop__vis img { max-height: 210px; }
  .m-pop__det { padding: 22px 20px 24px; }
  .m-cart { width: 100%; max-width: 100%; max-height: 92%; margin: auto auto 0; border-radius: 22px 22px 0 0; padding: 26px 20px 24px; }
}
@media (max-width: 520px) {
  .m-dish { padding: 10px 4px 16px; }
  .m-dish__img { height: 130px; }
  .m-dish__img img { max-height: 130px; }
  .m-dish__name { font-size: 16px; }
  .m-dish__price { font-size: 15px; }
  .m-tag { font-size: 13px; padding: 2px 8px; }
  .m-dish__hint { display: block; margin: 2px 0 0; font-size: 13px; }
  .m-add__btn { padding: 0 16px; font-size: 14px; }
  .m-dish .m-add__long { display: none; } /* cards are narrow on phones; the popup keeps the full label */
  .m-bar { left: 12px; right: 12px; bottom: 12px; padding-left: 18px; }
  .m-bar__open { font-size: 15px; }
  .m-bar__see { display: none; } /* the whole left half is the button */
  .m-grid--big { margin: 0 -4px; }
  .m-dish--big .m-dish__img { height: 200px; }
  .m-dish--big .m-dish__img img { max-height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .m-dish, .m-dish:hover { transition: none; transform: none; }
}