/* ============================================================
   Kedai Sarwo Echo — feuille principale
   Desktop reproduit au plus pres des maquettes (mesures a 1440/1520).
   Mobile et tablette CONCUS separement, pas reduits.
   ============================================================ */

/* ---------- socle ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-body);
  font-family: var(--f-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;            /* aucun defilement horizontal parasite */
}
img, svg, picture { display: block; max-width: 100%; }
/* toute regle `display` d'auteur bat le `display:none` que le navigateur applique
   a [hidden] : sans ce garde-fou, masquer un element en flex ou grid ne marche pas. */
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
img { height: auto; }
h1, h2, h3 { margin: 0; font-family: var(--f-display); font-weight: 800;
             line-height: var(--lh-tight); }
h2, h3 { text-wrap: balance; }
/* le H1 casse ses lignes naturellement (greedy) : c'est ce que fait la maquette.
   'balance' repartissait les mots et changeait la coupure. */
.hero__title { text-wrap: nowrap; text-wrap: initial; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a  { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -120%);
  z-index: 99; background: var(--btn-bg); color: var(--btn-fg);
  padding: .7rem 1.2rem; border-radius: 0 0 var(--r-sm) var(--r-sm);
  font-weight: 700; transition: transform var(--dur-1) var(--ease-out);
}
.skip:focus-visible { transform: translate(-50%, 0); }

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px;
}

/* ---------- pleine largeur ----------
   Le fond taupe des maquettes etait la couleur d'artboard du fichier de design,
   pas un cadre voulu : le creme occupe donc tout l'ecran. Les proportions
   internes mesurees sur les maquettes sont conservees, simplement mises a
   l'echelle de la fenetre entiere.                                           */
.page  { padding: 0; }
.panel {
  --pad-x: clamp(20px, 5vw, 96px);   /* gouttiere laterale, portee par les sections */
  max-width: var(--panel-max);
  margin-inline: auto;
  background: var(--bg-panel);
  padding: 0;                        /* aucune marge exterieure : chaque section
                                        gere son propre espace interne */
  position: relative;
  overflow: clip;
}

/* Colonne de contenu commune : meme bord gauche et droit dans toutes les
   sections, quelle que soit la largeur de l'ecran.                          */
.nav, .hero, .why, .menu {
  max-width: calc(var(--content-max) + 2 * var(--pad-x));
  margin-inline: auto;
}

/* ══════════════ NAVIGATION ══════════════ */
.nav {
  display: flex; align-items: center;
  gap: clamp(12px, 2vw, 28px);
  min-height: 62px;
  padding: clamp(10px, 1.3vw, 20px) var(--pad-x) clamp(6px, .8vw, 12px);
  position: sticky; top: 0; z-index: 40;
}
/* la bande de fond deborde jusqu'aux bords de l'ecran : sans ca, le contenu
   defilerait a nu de chaque cote de la colonne pendant que la nav reste collee. */
.nav::before {
  content: ""; position: absolute; inset: 0 50% 0 50%;
  width: 100vw; transform: translateX(-50%); z-index: -1;
  background: var(--bg-panel);
  box-shadow: var(--sh-nav-off);
  transition: box-shadow var(--dur-2) var(--ease-out);
}
/* condensation par transform : anime sur le GPU, sans recalcul de mise en page */
.nav__logo img { transition: transform var(--dur-2) var(--ease-out); transform-origin: left center; }
.nav.is-stuck .nav__logo img { transform: scale(.84); }
.nav.is-stuck::before {
  box-shadow: var(--sh-nav);
}
.nav__logo { flex: none; display: block; }
.nav__logo img { width: clamp(48px, 4.6vw, 66px); height: auto; }

.nav__links { display: flex; align-items: center; gap: clamp(18px, 3.4vw, 48px); }
.nav__links a {
  font-size: var(--t-nav); color: var(--nav-fg);
  padding: 10px 2px; position: relative;
  transition: color var(--dur-1) var(--ease-out);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px;
  background: currentColor; border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.nav__links a:hover, .nav__links a.is-active { color: var(--nav-fg-active); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }

.nav__end { display: flex; align-items: center; gap: clamp(8px, 1.2vw, 16px); }

/* Bascule de langue : deux drapeaux, pas de texte — lisible sans savoir lire
   la langue en face. C'est elle qui pousse le reste de la barre a droite. */
.langsw { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.langsw__b {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center; border-radius: var(--r-sm);
  transition: background var(--dur-1) var(--ease-out);
}
.langsw__b svg {
  width: 26px; height: 18px; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--line);
  opacity: .42; filter: saturate(.35);
  transition: opacity var(--dur-1) var(--ease-out), filter var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out);
}
.langsw__b:hover svg { opacity: .78; filter: none; }
.langsw__b[aria-pressed="true"] svg {
  opacity: 1; filter: none; transform: scale(1.06);
  box-shadow: 0 0 0 2px var(--fg-title);
}


/* WhatsApp compact — reste visible a toutes les largeurs */
.wa-mini {
  display: none; align-items: center; gap: 7px;
  min-height: var(--tap); padding: 0 16px;
  background: var(--btn-bg); color: var(--btn-fg);
  border-radius: var(--r-pill); font-weight: 700; font-size: var(--t-body-sm);
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.wa-mini:hover { background: var(--btn-bg-hover); }
.wa-mini:active { transform: scale(.97); }
.wa-mini svg { width: 19px; height: 19px; flex: none; }


.burger { display: none; width: var(--tap); height: var(--tap); place-items: center; }
.burger__box { display: block; width: 22px; height: 15px; position: relative; }
.burger__box i {
  position: absolute; left: 0; right: 0; height: 2.2px; border-radius: 2px;
  background: var(--fg-title);
  transition: transform var(--dur-2) var(--ease-out), opacity var(--dur-1) linear;
}
.burger__box i:nth-child(1) { top: 0; }
.burger__box i:nth-child(2) { top: 6.4px; }
.burger__box i:nth-child(3) { top: 12.8px; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6.4px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6.4px) rotate(-45deg); }

/* Revenir en haut : invisible tant qu'on ne fait rien, apparait au defilement.
   pointer-events est coupe a l'etat masque, sinon il intercepte les taps. */
.totop {
  position: fixed; right: clamp(14px, 2.4vw, 28px); bottom: clamp(14px, 2.4vw, 28px);
  z-index: 45; width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  background: var(--btn-bg); color: var(--btn-fg);
  border-radius: 50%; box-shadow: var(--sh-float);
  opacity: 0; visibility: hidden; transform: translateY(10px) scale(.9);
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out),
              transform var(--dur-2) var(--ease-out),
              visibility 0s linear var(--dur-2);
}
.totop.is-on {
  opacity: 1; visibility: visible; transform: none;
  pointer-events: auto; transition-delay: 0s;
}
.totop:hover { background: var(--btn-bg-hover); }
.totop:active { transform: scale(.94); }
.totop svg { width: 22px; height: 22px; }

/* ══════════════ BOUTONS ══════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  min-height: var(--btn-h); padding-inline: var(--btn-px);
  background: var(--btn-bg); color: var(--btn-fg);
  border-radius: var(--r-pill);
  font-size: var(--t-btn); font-weight: 400; letter-spacing: .005em;
  box-shadow: var(--sh-btn);
  transition: background var(--dur-1) var(--ease-out),
              transform var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.btn:hover { background: var(--btn-bg-hover); transform: translateY(-2px); }
.btn:active { transform: translateY(1px); box-shadow: var(--sh-btn-active); }
.btn__ico {
  width: clamp(30px,2.5vw,36px); height: clamp(30px,2.5vw,36px); flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1.8px solid currentColor;
}
.btn__ico svg { width: 17px; height: 17px; }
.btn--wa { padding-inline: clamp(18px,2.9vw,42px) clamp(20px,2.7vw,39px); }

/* ══════════════ SECTION 1 — HERO ══════════════ */
.hero { display: flex; flex-direction: column; padding: 6px var(--pad-x) 0; }
.hero__text { position: relative; z-index: 2; }

.hero__title {
  font-size: var(--t-h1);
  line-height: 1.03;
  color: var(--fg-title);
  letter-spacing: var(--tr-tight);
}
/* chaque mot du titre monte derriere un masque (anime par motion.js) */
.hero__title .mot { display: inline-block; overflow: hidden; vertical-align: bottom;
                    padding-bottom: .14em; margin-bottom: -.14em; }
.hero__title .mot__i { display: inline-block; will-change: transform; }
.hero__title .script {
  font-family: var(--f-script); font-style: normal; font-weight: 400;
  color: var(--fg-accent);
  font-size: .96em; line-height: 1;
}
.hero__lede {
  margin-top: clamp(10px, 0.7vw, 10px);
  max-width: clamp(320px, 39.6vw, 697px);  /* 570px a 1440, suit l'echelle ensuite */
  color: var(--fg-body);
  line-height: 1.42;
}
.hero .btn--wa { margin-top: clamp(20px, 2.4vw, 34px); }

/* --- Pilihan Kami --- */
.pick { margin-top: clamp(32px, 6.67vw, 96px); }
.pick__head {
  display: flex; align-items: center; gap: 18px;
  font-family: var(--f-display); font-weight: 700; font-size: var(--t-eyebrow);
  color: var(--fg-title); line-height: 1.2;
}
.pick__rule { flex: 1; max-width: 175px; height: 2px; background: var(--fg-title); border-radius: 2px; opacity: .9; }
.pick__list { margin-top: clamp(16px, 2.36vw, 34px); display: grid; gap: clamp(14px, 2.85vw, 41px); }

.pick__item { display: flex; align-items: center; gap: clamp(12px, 1.3vw, 20px); }
.pick__thumb {
  flex: none; width: clamp(88px, 10.4vw, 183px); aspect-ratio: 150 / 88;
  display: grid; place-items: center;
  background: var(--bg-raised); border-radius: var(--r-md);
  box-shadow: var(--sh-card);
  overflow: hidden;
}
.pick__thumb img { width: 88%; height: 88%; object-fit: contain; }
.pick__body { min-width: 0; }
.pick__name {
  font-family: var(--f-body); font-weight: 400; font-size: var(--t-dish);
  color: var(--fg-body); line-height: 1.25;
}
.pick__price {
  display: flex; align-items: center; gap: 9px;
  margin-top: 6px; font-weight: 700; font-size: var(--t-price); color: var(--price-fg);
}
.pick__price svg { width: 19px; height: 19px; flex: none; color: var(--price-fg); }
.pick__prov { font-size: var(--t-micro); font-weight: 400; color: var(--fg-muted); letter-spacing: .01em; }
.pick__desc {
  margin-top: 5px; font-size: var(--t-body-sm); color: var(--fg-muted); line-height: 1.4;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* --- compo hero: 7 calques places au % de la compo d'origine ---
   Telephone (base) : la compo est un bloc du flux, place avant le titre.  */
.comp {
  order: -1; z-index: 1; pointer-events: none;
  width: calc(100% + 2 * var(--pad-x));
  margin-inline: calc(-1 * var(--pad-x));
  margin-bottom: clamp(-26px, -3vw, -10px);
}
.comp__box {
  position: relative; aspect-ratio: 1751 / 1548;
  max-width: min(600px, 92%); margin-inline: auto;
}
.comp__l { position: absolute; }
.comp__l img { width: 100%; height: auto; }
.comp__l--plate       { left:   2.741%; top:   0.969%; width:  95.945%; }
.comp__l--stamp       { left:  67.961%; top:   1.034%; width:  30.668%; }
.comp__l--lemon-top   { left:  48.943%; top:   6.654%; width:  10.223%; }
.comp__l--splash      { left:  18.218%; top:  12.468%; width:   7.710%; }
.comp__l--lemon-right { left:  84.466%; top:  37.274%; width:   8.281%; }
.comp__l--lemon-left  { left:   0.971%; top:  39.147%; width:   8.110%; }
.comp__l--shell       { left:  18.218%; top:  75.452%; width:  10.394%; }

/* ══════════════ SECTION 2 — KENAPA MEMILIH KAMI ══════════════ */
.why {
  position: relative;
  margin-top: var(--s-sec-y);
  padding: clamp(30px, 4.2vw, 60px) var(--pad-x) clamp(24px, 3vw, 44px);
  text-align: center;
}
.why__title { font-size: var(--t-h2); color: var(--fg-title); }

/* mesure maquette: bloc de 1157px sur 1520 (76%), cartes 354 et gouttiere 47 */
.why__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 3.1vw, 45px);
  margin-top: clamp(26px, 5.9vw, 85px);
  position: relative; z-index: 2;
}
.wcard {
  background: var(--card-bg);
  border-radius: clamp(6px,.8vw,12px) clamp(16px,2.2vw,32px) clamp(9px,1.2vw,18px) clamp(19px,2.6vw,38px);
  box-shadow: var(--sh-card);
  padding: clamp(20px, 2.4vw, 34px) var(--s-card-p) clamp(24px, 2.8vw, 38px);
  display: flex; flex-direction: column; align-items: center;
  min-height: clamp(240px, 23.7vw, 417px);
}
.wcard__ico { color: var(--card-icon); width: clamp(96px, 10.4vw, 183px); margin-top: clamp(2px,.7vw,10px); }
.wcard__ico svg { width: 100%; height: auto; }
.wcard__t {
  font-family: var(--f-script); font-weight: 400; font-size: var(--t-h3);
  color: var(--card-title); line-height: 1.2;
  margin-top: auto; padding-top: clamp(14px, 1.8vw, 26px);
}
.wcard__p {
  margin-top: clamp(8px, 1vw, 14px);
  color: var(--card-body); font-size: var(--t-body); line-height: 1.34;
  max-width: 22ch;
}
.why__cta { margin-top: clamp(26px, 5vw, 72px); padding-inline: clamp(30px,3.6vw,52px);
            position: relative; z-index: 2; }

/* line-art de fond, en repetition — allege sur petit ecran */
.why__deco {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    url("../img/hero/hero-shell-182.png"),      /* haut gauche  */
    url("../img/hero/hero-splash-135.png"),     /* haut centre  */
    url("../img/hero/hero-lemon-top-179.png"),  /* haut droite  */
    url("../img/hero/hero-lemon-left-142.png"), /* milieu gauche*/
    url("../img/hero/hero-shell-182.png"),      /* bas centre-g */
    url("../img/hero/hero-lemon-right-145.png"),/* bas centre   */
    url("../img/hero/hero-shell-182.png"),      /* bas droite   */
    url("../img/hero/hero-splash-135.png");
  background-image:
    image-set(url("../img/hero/hero-shell-182.avif") type("image/avif"),
                    url("../img/hero/hero-shell-182.webp") type("image/webp"),
                    image-set(url("../img/hero/hero-shell-182.avif") type("image/avif"),
                    url("../img/hero/hero-shell-182.webp") type("image/webp"),
                    image-set(url("../img/hero/hero-shell-182.avif") type("image/avif"),
                    url("../img/hero/hero-shell-182.webp") type("image/webp"),
                    url("../img/hero/hero-shell-182.png") type("image/png")) type("image/png")) type("image/png")),      /* haut gauche  */
    image-set(url("../img/hero/hero-splash-135.avif") type("image/avif"),
                    url("../img/hero/hero-splash-135.webp") type("image/webp"),
                    image-set(url("../img/hero/hero-splash-135.avif") type("image/avif"),
                    url("../img/hero/hero-splash-135.webp") type("image/webp"),
                    url("../img/hero/hero-splash-135.png") type("image/png")) type("image/png")),     /* haut centre  */
    image-set(url("../img/hero/hero-lemon-top-179.avif") type("image/avif"),
                    url("../img/hero/hero-lemon-top-179.webp") type("image/webp"),
                    url("../img/hero/hero-lemon-top-179.png") type("image/png")),  /* haut droite  */
    image-set(url("../img/hero/hero-lemon-left-142.avif") type("image/avif"),
                    url("../img/hero/hero-lemon-left-142.webp") type("image/webp"),
                    url("../img/hero/hero-lemon-left-142.png") type("image/png")), /* milieu gauche*/
    url("../img/hero/hero-shell-182.png"),      /* bas centre-g */
    image-set(url("../img/hero/hero-lemon-right-145.avif") type("image/avif"),
                    url("../img/hero/hero-lemon-right-145.webp") type("image/webp"),
                    url("../img/hero/hero-lemon-right-145.png") type("image/png")),/* bas centre   */
    url("../img/hero/hero-shell-182.png"),      /* bas droite   */
    url("../img/hero/hero-splash-135.png");     /* bas gauche   */
  background-position: 26% 22%, 62% 23%, 84% 17%, 8% 60%, 38% 76%, 66% 70%, 90% 74%, 13% 90%;
  background-size: 7.5%, 5.4%, 6.2%, 6.6%, 7.5%, 5.6%, 7%, 6.4%;
}

/* ══════════════ SECTION 3 — LA ROUE DU MENU ══════════════
   Structure reprise de l'exemple fourni, rhabillee aux couleurs des maquettes :
   creme et sauge, pas le fond noir de l'exemple.
   Telephone (base) : arc balayable au doigt, fiche du plat en dessous.
   Desktop : vraie roue, fiche a droite.                                     */
.menu { margin-top: var(--s-sec-y); position: relative;
        padding: 0 var(--pad-x) clamp(30px, 4vw, 70px); }
.menu__head { text-align: center; display: flex; flex-direction: column;
              align-items: center; gap: clamp(8px, 1vw, 14px); }
.menu__title { font-size: var(--t-h2); color: var(--fg-title); }
.menu__sub { font-size: var(--t-body-sm); color: var(--fg-muted); }
.menu__sub b { color: var(--fg-accent); font-weight: 700; }
.menu__dot { margin-inline: 8px; color: var(--c-taupe-400); }

/* --- filtres par categorie --- */
.chips { display: flex; flex-wrap: wrap; justify-content: center;
         gap: 8px; margin-top: clamp(6px, .8vw, 12px); }
.chip {
  min-height: var(--tap); padding: 0 clamp(14px, 1.4vw, 20px);
  display: inline-flex; align-items: center;
  background: var(--bg-card); color: var(--fg-body);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-size: var(--t-body-sm); font-weight: 700; white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              border-color var(--dur-1) var(--ease-out);
}
.chip:hover { border-color: var(--c-taupe-400); }
.chip[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); }

.menu__stage { margin-top: clamp(22px, 3.2vw, 46px); display: flex;
               flex-direction: column; gap: clamp(18px, 2.4vw, 34px); }

/* --- la roue --- */
.wheel { display: flex; flex-direction: column; align-items: center;
         gap: clamp(12px, 1.6vw, 20px); }

/* telephone : l'anneau devient un arc balayable */
.wheel__ring {
  --sat: clamp(62px, 16vw, 78px);   /* reste >= 44px meme reduite par le galbe */
  order: 2; width: 100%;
  display: flex; align-items: flex-end; gap: clamp(8px, 2vw, 14px);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  padding: 8px calc(50% - var(--sat) / 2) 46px;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.wheel__ring::-webkit-scrollbar { display: none; }
.wheel__ring:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; border-radius: 14px; }

.sat {
  flex: none; width: var(--sat); height: var(--sat);
  scroll-snap-align: center;
  display: grid; place-items: center; padding: 6px;
  background: var(--bg-card); border: 2px solid transparent;
  border-radius: 22% 34% 22% 34%;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out),
              background var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out);
}
.sat img { width: 100%; height: 100%; object-fit: contain; }
.sat:hover { background: var(--c-cream-100); }
.sat[aria-selected="true"] {
  background: var(--c-cream-100); border-color: var(--btn-bg);
  box-shadow: var(--sh-card);
}

/* le plat en grand */
.wheel__hub {
  order: 1; width: clamp(190px, 52vw, 300px); aspect-ratio: 1;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 52%,
              var(--c-cream-100) 0 58%, var(--halo-hub) 72%, transparent 73%);
  border-radius: 50%;
}
.wheel__hub img { width: 92%; height: 92%; object-fit: contain;
                  filter: var(--glow-hub); }
.wheel__count { order: 3; font-size: var(--t-micro); color: var(--fg-muted);
                letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.wheel__count b { color: var(--fg-title); font-weight: 700; }

/* --- fiche du plat --- */
.dish { display: flex; flex-direction: column; align-items: flex-start;
        gap: clamp(6px, .8vw, 10px); text-align: left; }
.dish__cat {
  font-family: var(--f-body); font-size: var(--t-micro); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--fg-muted);
}
.dish__name { font-size: var(--t-h3); color: var(--fg-title); font-weight: 800; }
.dish__price { font-family: var(--f-display); font-weight: 800;
               font-size: var(--t-eyebrow); color: var(--price-fg);
               display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.dish__prov { font-family: var(--f-body); font-weight: 400;
              font-size: var(--t-micro); color: var(--fg-muted); }
.dish__desc { color: var(--fg-body); max-width: 42ch; line-height: 1.45; }
.dish__cta { margin-top: clamp(8px, 1.2vw, 16px); }
.dish__nav { display: flex; gap: 10px; margin-top: 4px; }
.dnav {
  width: var(--tap); height: var(--tap); display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; color: var(--fg-title);
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.dnav:hover { background: var(--btn-bg); color: var(--btn-fg); border-color: var(--btn-bg); }
.dnav svg { width: 21px; height: 21px; }

.menu__vers-carte { margin-top: clamp(20px, 2.6vw, 34px); text-align: center; }
.menu__vers-carte a {
  min-height: var(--tap); display: inline-flex; align-items: center; gap: 8px;
  padding: 0 clamp(18px, 2vw, 26px);
  border: 1.5px solid var(--c-taupe-400); border-radius: var(--r-pill);
  font-weight: 700; font-size: var(--t-body-sm); color: var(--fg-title);
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.menu__vers-carte a:hover { background: var(--bg-card); border-color: var(--btn-bg); }

.menu__fallback { margin-top: 24px; text-align: center; color: var(--fg-muted); }
.menu__fallback a { font-weight: 700; }

/* ══════════════ DESKTOP — cote a cote ══════════════
   La compo est une cellule de la grille : sa hauteur compte dans le flux, donc
   elle ne peut plus chevaucher la section suivante quand l'ecran s'elargit.
   Les debords reproduisent le placement mesure sur halo.jpeg.              */
@media (min-width: 861px) {
  .hero {
    display: grid; align-items: start;
    grid-template-columns: minmax(0, 43fr) minmax(0, 57fr);
    padding: clamp(22px, 6.94vw, 122px) var(--pad-x) 0;
  }
  .hero__text {
    grid-column: 1; grid-row: 1;
    max-width: 157%;         /* le titre deborde sur la colonne image, comme la maquette */
  }
  .comp {
    grid-column: 2; grid-row: 1; order: 0;
    /* le debord gauche reproduit la maquette ; le bord droit s'arrete pile sur
       la gouttiere, pour que l'illustration ne soit jamais rognee par l'ecran. */
    width: 115.8%; margin-left: -15.8%;
    margin-right: 0; margin-bottom: 0;
  }
  .comp__box { max-width: none; }

  /* la roue redevient un cercle, la fiche passe a droite */
  .menu__stage {
    display: grid; align-items: center; justify-content: center;
    grid-template-columns: minmax(0, 620px) minmax(280px, 440px);
    gap: clamp(24px, 4vw, 72px);
  }
  .wheel {
    position: relative; display: block;
    width: min(100%, 620px); margin-inline: auto; aspect-ratio: 1;
    --r: 44%; --sat: 12%;
  }
  .wheel::before {                     /* le cercle guide */
    content: ""; position: absolute; inset: 6%;
    border: 1px dashed var(--c-taupe-400); border-radius: 50%; opacity: .55;
  }
  .wheel__ring {
    position: absolute; inset: 0; display: block; overflow: visible;
    padding: 0; scroll-snap-type: none; touch-action: none; cursor: grab;
  }
  .wheel__ring.is-drag { cursor: grabbing; }
  .sat {
    position: absolute; left: 50%; top: 50%;
    width: var(--sat); height: var(--sat); scroll-snap-align: none;
    margin: calc(var(--sat) / -2);
    will-change: transform;
  }
  .wheel__hub {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 46%; margin: 0;
  }
  .wheel__count {
    position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
    margin: 0;
  }
  .dish { align-self: center; }
}

@media (max-width: 1080px) and (min-width: 861px) {
  .pick__rule { max-width: 90px; }
}

/* ══════════════ TELEPHONE — mise en page CONCUE, pas reduite ══════════════ */
@media (max-width: 860px) {
  .nav { min-height: var(--tap); gap: 10px; }
  .langsw { margin-left: 0; gap: 0; }   /* colle au logo : le tiroir est en absolu */
  .nav__end { margin-left: auto; }

  /* Fiche du plat : tout est centre sous la roue, et les fleches passent
     juste sous le compteur — avant elles tombaient contre le bouton de
     commande, deux cibles tactiles cote a cote au meme endroit. */
  .dish { align-items: center; text-align: center; }
  .dish__nav { order: -1; margin-top: 0; margin-bottom: 2px; }
  .dish__desc { margin-inline: auto; }
  .dish__price { justify-content: center; }
  .dish__cta { align-self: center; }
  .wa-mini { display: inline-flex; }         /* WhatsApp toujours visible */
  .burger  { display: grid; }

  /* les liens passent en tiroir deroulant */
  .nav__links {
    position: absolute; left: var(--pad-x); right: var(--pad-x); top: calc(100% + 4px);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg-raised);
    border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: var(--sh-float);
    padding: 6px;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity var(--dur-2) var(--ease-out),
                transform var(--dur-2) var(--ease-out),
                visibility 0s linear var(--dur-2);
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .nav__links a {
    min-height: var(--tap); display: flex; align-items: center;
    padding: 0 14px; border-radius: var(--r-sm); font-size: 1.0625rem;
  }
  .nav__links a::after { display: none; }
  .nav__links a.is-active { background: var(--bg-panel); }

  /* le homard reste au-dessus du titre : c'est deja le comportement de base */
  .hero__title { max-width: 18ch; }
  .hero__lede  { max-width: 46ch; }
  .hero .btn--wa { width: 100%; max-width: 320px; }

  .pick__head { justify-content: flex-start; }
  .pick__rule { max-width: none; }

  .why { text-align: center; }
  .why__grid { grid-template-columns: 1fr; gap: 16px; }
  .wcard {
    min-height: 0; text-align: left; padding: 20px 22px;
    display: grid; grid-template-columns: auto 1fr;
    grid-template-areas: "ico titre" "ico texte";
    column-gap: 18px; row-gap: 2px; align-content: center;
  }
  .wcard__ico { grid-area: ico; width: 84px; margin: 0; align-self: center; }
  .wcard__t   { grid-area: titre; margin-top: 0; padding-top: 0; align-self: end; }
  .wcard__p   { grid-area: texte; max-width: none; margin-top: 2px; align-self: start; }
  .why__cta { width: 100%; max-width: 320px; }

  /* line-art allege: 3 elements au lieu de 6, plus discrets */
  .why__deco {
    opacity: .4;
    background-image:
      url("../img/hero/hero-shell-182.png"),
      url("../img/hero/hero-lemon-top-179.png"),
      url("../img/hero/hero-lemon-left-142.png");
  background-image:
      image-set(url("../img/hero/hero-shell-182.avif") type("image/avif"),
                    url("../img/hero/hero-shell-182.webp") type("image/webp"),
                    url("../img/hero/hero-shell-182.png") type("image/png")),
      image-set(url("../img/hero/hero-lemon-top-179.avif") type("image/avif"),
                    url("../img/hero/hero-lemon-top-179.webp") type("image/webp"),
                    url("../img/hero/hero-lemon-top-179.png") type("image/png")),
      image-set(url("../img/hero/hero-lemon-left-142.avif") type("image/avif"),
                    url("../img/hero/hero-lemon-left-142.webp") type("image/webp"),
                    url("../img/hero/hero-lemon-left-142.png") type("image/png"));
    background-position: 92% 3%, 6% 40%, 90% 84%;
    background-size: 13%, 15%, 12%;
  }
}

@media (max-width: 420px) {
  /* place gagnee pour garder des cibles de 44px partout */
  /* le bouton garde ses 44px de cible tactile : seul le drapeau retrecit */
  .langsw__b svg { width: 23px; height: 16px; }
  .wa-mini { padding: 0 12px; min-width: var(--tap); justify-content: center; }
  .wa-mini span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .wcard { grid-template-columns: 1fr; grid-template-areas: "ico" "titre" "texte"; row-gap: 6px; }
  .wcard__ico { width: 72px; }
  .pick__thumb { width: 84px; }
}

/* ══════════════ MOUVEMENT REDUIT ══════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}