/* ============================================================
   menu.css — Menu public La Cachette / Plateforme multi-sites
   Mobile-first. Variables CSS injectées depuis le thème du site.
   ============================================================ */

/* ---- Defaults (La Cachette — charte AC021) ---- */
:root {
  --primary:      #570A26;
  --primary-deep: #3A0618;
  --accent:       #D6AD7C;
  --accent-dim:   #B8956A;
  --secondary:    #963C32;
  --surface:      #F5F0E8;
  --text-dark:    #111111;
  --text-soft:    #5A4A4A;
  --text-muted:   #8A7A7A;

  /* Repli serif (Mendl Sans VF pas encore livrée) — cohérent avec le style
     livret vintage du modèle de référence (titres/noms de plats à empattements,
     descriptions en italique). Polices système, zéro CDN (cf. §2.3). */
  --font-headline: 'Mendl Sans VF', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-body:     'Futura MYA', Georgia, 'Iowan Old Style', 'Times New Roman', serif;

  --splash-duration: 1500ms;
  --radius: 9999px;
  --radius-sm: 6px;

  /* Ornements décoratifs du menu (flourishes, embleme couverts, icônes de
     section) — suivent automatiquement la charte du site puisqu'ils pointent
     sur --accent / --primary-deep déjà résolues plus haut. */
  --menu-orn-gold: var(--accent);
  /* Dérivé de --accent (jamais de --primary-deep, dont la teinte varie trop
     d'un site à l'autre pour garantir un rendu gravé lisible — cf. site avec
     primary_deep clair/chaud où l'emblème devenait illisible). */
  --menu-orn-ink:  color-mix(in srgb, var(--accent) 42%, black 58%);
}

/* ---- Fonts ----
   Polices de marque (AC021) pas encore livrées par le client — @font-face
   volontairement omis pour éviter des 404 à chaque chargement du menu public ;
   les variables --font-headline / --font-body ci-dessus retombent proprement sur
   Josefin Sans / Futura (système). Dès réception des fichiers .woff2, les déposer
   dans public/assets/fonts/ et réintroduire ici :
   @font-face { font-family:'Mendl Sans VF'; src:url('/assets/fonts/mendl-sans-vf.woff2') format('woff2'); font-weight:100 900; font-style:normal; font-display:swap; }
   @font-face { font-family:'Futura MYA';    src:url('/assets/fonts/futura-mya-book.woff2') format('woff2'); font-weight:400;     font-style:normal; font-display:swap; }
*/

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--primary);
  color: var(--text-dark);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
ul[role="list"] { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
a { color: inherit; text-decoration: none; }

/* ---- Screen system ----
   Chaque écran occupe le plein viewport (position fixed) et défile en interne
   — nécessaire pour que l'écran sortant et l'écran entrant puissent se
   superposer pendant la transition de type « page qui tourne » ci-dessous. */
body { perspective: 1100px; perspective-origin: center; }
.screen {
  display: none;
  min-height: 100dvh;
}
.screen.is-active,
.screen.is-flipping-out,
.screen.is-flipping-in,
.screen.is-flipping-out-back,
.screen.is-flipping-in-back {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 1;
}

/* Transition « page qui tourne » entre écrans (couverture ↔ sections, ou
   section ↔ section via les onglets). Purement CSS/transform, aucune lib JS.
   Le retour (bouton précédent) rejoue l'animation en miroir — la page se
   referme dans l'autre sens plutôt que de rejouer l'ouverture à l'identique. */
.screen.is-flipping-out,
.screen.is-flipping-in,
.screen.is-flipping-out-back,
.screen.is-flipping-in-back {
  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, filter;
}
.screen.is-flipping-out {
  z-index: 3;
  transform-origin: left center;
  animation: bookFlipOut 440ms cubic-bezier(.42,0,.25,1) both;
}
.screen.is-flipping-in {
  z-index: 2;
  transform-origin: right center;
  animation: bookFlipIn 440ms cubic-bezier(.42,0,.25,1) both;
}
.screen.is-flipping-out-back {
  z-index: 3;
  transform-origin: right center;
  animation: bookFlipOutBack 440ms cubic-bezier(.42,0,.25,1) both;
}
.screen.is-flipping-in-back {
  z-index: 2;
  transform-origin: left center;
  animation: bookFlipInBack 440ms cubic-bezier(.42,0,.25,1) both;
}
/* On assombrit la page qui se soulève (elle s'incline hors de la lumière) au
   lieu de la faire fondre : lecture « feuille qui tourne » beaucoup plus nette
   qu'un simple fondu. */
@keyframes bookFlipOut {
  from { transform: rotateY(0deg);     filter: brightness(1);   }
  to   { transform: rotateY(-118deg);  filter: brightness(.45); }
}
@keyframes bookFlipIn {
  from { transform: rotateY(118deg);   filter: brightness(.45); }
  to   { transform: rotateY(0deg);     filter: brightness(1);   }
}
@keyframes bookFlipOutBack {
  from { transform: rotateY(0deg);     filter: brightness(1);   }
  to   { transform: rotateY(118deg);   filter: brightness(.45); }
}
@keyframes bookFlipInBack {
  from { transform: rotateY(-118deg);  filter: brightness(.45); }
  to   { transform: rotateY(0deg);     filter: brightness(1);   }
}
@media (prefers-reduced-motion: reduce) {
  .screen.is-flipping-out,
  .screen.is-flipping-in,
  .screen.is-flipping-out-back,
  .screen.is-flipping-in-back { animation: none !important; }
}

/* Desktop/tablette large : le menu flotte comme un livret refermable plutôt
   que de s'étaler plein écran (charte §6.2 — préserver l'esprit menu). */
@media (min-width: 1024px) {
  .screen.is-active,
  .screen.is-flipping-out,
  .screen.is-flipping-in,
  .screen.is-flipping-out-back,
  .screen.is-flipping-in-back {
    inset: 4vh calc(50% - 360px);
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(0,0,0,.5);
  }
  /* sur desktop la couverture est une carte flottante : on annule le 100dvh */
  .screen--home.is-active,
  .screen--home.is-flipping-out,
  .screen--home.is-flipping-in,
  .screen--home.is-flipping-out-back,
  .screen--home.is-flipping-in-back {
    height: auto;
  }
}

/* ================================================================
   SPLASH
   ================================================================ */
/* Fond habillé (dégradés doux + texture pointillée) — mêmes couleurs de
   marque du site, juste une texture en plus au lieu d'un aplat uni.
   Motif en retenue, cf. charte §8.1 : ne domine jamais le contenu. */
.screen--splash,
.screen--home {
  background-color: var(--primary);
  background-image:
    radial-gradient(ellipse 55% 40% at 10% -10%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    radial-gradient(ellipse 42% 46% at 108% 20%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 58%),
    radial-gradient(ellipse 46% 40% at 12% 112%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 62%),
    radial-gradient(color-mix(in srgb, var(--accent) 13%, transparent) 1px, transparent 1.4px);
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  background-size: 100% 100%, 100% 100%, 100% 100%, 16px 16px;
  background-attachment: fixed, fixed, fixed, local;
}

/* Vue Section — fond « carte peinte » fidèle au modèle imprimé de référence
   (1215767_205) : aplat de la couleur du site + fine toile granuleuse, large
   coup de pinceau vertical qui éclaircit le centre, et vignette qui assombrit
   les bords. Couleurs 100 % dérivées du thème du site (--primary / --accent) :
   identique pour les sections Boissons ET Restauration. Motif en retenue
   (charte §8.1). Aucune requête réseau : une seule micro-texture SVG en ligne. */
.screen--section {
  background-color: var(--primary);
  background-image:
    radial-gradient(ellipse 120% 82% at 50% 34%, transparent 52%, rgba(0,0,0,.28) 100%),
    url("../img/menu/section-texture.webp");
  background-repeat: no-repeat, no-repeat;
  background-size: 100% 100%, 100% 100%;
  background-position: center, center;
  background-attachment: fixed, fixed;
  /* la texture est en niveaux de gris : soft-light la reteinte automatiquement
     à la couleur --primary du site (bleu pour sucre, bordeaux pour La Cachette). */
  background-blend-mode: multiply, soft-light;
}
.screen--splash {
  align-items: center;
  justify-content: center;
  animation: splashIn 800ms ease-out both;
}
@keyframes splashIn {
  from { opacity: 0; transform: scale(.94); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .screen--splash { animation: none; }
}

.splash__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.splash__logo {
  width: 180px;
  max-width: 60vw;
  height: auto;
}
.splash__brand {
  font-family: var(--font-headline);
  font-size: clamp(2rem, 8vw, 3.5rem);
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.splash__sub {
  font-family: var(--font-headline);
  font-size: 0.9rem;
  letter-spacing: .4em;
  color: var(--accent);
  text-transform: uppercase;
  opacity: .8;
}

/* ================================================================
   HOME
   ================================================================ */
.screen--home {
  min-height: 100dvh;
  flex-direction: column;
}
/* La couverture (accueil) est TOUJOURS centrée dans le viewport visible, sans
   ascenseur, sur n'importe quel appareil :
   - `height:100dvh` cale l'écran sur la zone réellement visible (barres Safari
     comprises, `inset:0` seul remplirait le grand viewport → contenu remonté) ;
   - `overflow:hidden` : jamais de scroll ;
   - le contenu (`.home__inner`) est à sa taille naturelle, centré par flex ;
     s'il dépasse, `fitHomeCover()` (menu.js) le réduit via `transform:scale`. */
.screen--home.is-active,
.screen--home.is-flipping-out,
.screen--home.is-flipping-in,
.screen--home.is-flipping-out-back,
.screen--home.is-flipping-in-back {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  align-items: center;
  justify-content: center;
}
.home__inner {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 1.1vh, 14px);
  padding: clamp(8px, 2.4vh, 32px) 20px;
  max-width: 480px;
  width: 100%;
  transform-origin: center center;
}
/* Ornements du cover (§ style « livret » — flourish doré, emblème couverts,
   filet+point). En retenue : jamais plus large que le contenu, opacité réduite
   pour ne pas dominer (charte §8.1, motifs en arrière-plan uniquement). */
.home__ornament {
  height: clamp(22px, 6vh, 48px);
  max-width: min(260px, 62vw);
  margin: 0 auto;
  opacity: .92;
}
.home__ornament svg { display: block; height: 100%; width: auto; max-width: 100%; margin: 0 auto; }
.home__ornament--top { margin-bottom: clamp(2px, .6vh, 6px); }
.home__ornament--bottom { margin-top: clamp(4px, 1.4vh, 20px); }

/* Largeur calée sur le ratio du modèle source (emblème ≈ 90 % de la largeur
   des flourishes, cf. SVG d'origine : 99.86 / 110.18) — dans la maquette
   papier, les couverts croisés sont presque aussi larges que les flourishes,
   pas une petite icône. */
.home__emblem {
  height: clamp(84px, 20vh, 190px);
  max-width: min(236px, 60vw);
  margin: clamp(6px, 1.6vh, 18px) auto;
  opacity: .95;
}
.home__emblem svg { display: block; height: 100%; width: auto; max-width: 100%; margin: 0 auto; }

/* Le mot « MENU », filets et points compris — vecteur fidèle extrait du
   modèle papier (typo, points et filets d'origine), pas une reconstitution
   HTML/police système. Remplace la liste de boutons de section (désormais
   sur les onglets latéraux, cf. .book-tabs, pour éviter la redondance). */
.home__menu-word {
  display: block;
  height: clamp(38px, 9.5vh, 84px);
  max-width: min(280px, 68vw);
  margin: 0 auto;
  padding: clamp(4px, 1.4vh, 14px) 0;
  background: none;
  box-sizing: content-box;
}
.home__menu-word svg { display: block; height: 100%; width: auto; max-width: 100%; margin: 0 auto; }
button.home__menu-word {
  transition: opacity 160ms;
}
button.home__menu-word:hover,
button.home__menu-word:focus-visible {
  opacity: .8;
  outline: none;
}

.home__logo-wrap { margin-bottom: clamp(4px, 1.4vh, 14px); max-width: 100%; }
.home__logo {
  width: auto;
  max-width: min(200px, 55vw);
  max-height: clamp(52px, 13vh, 120px);
  height: auto;
}
.home__brand {
  font-family: var(--font-headline);
  /* borné aussi par la hauteur ; max-width:100% + wrap obligatoires car, dans
     un flex column "align-items:center", le bloc prend sinon la largeur du
     texte non coupé et déborde ("BOULEVARD 30 JUIN"). */
  font-size: clamp(1.25rem, min(6vw, 4.2vh), 2.5rem);
  font-weight: 700;
  line-height: 1.06;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
  text-wrap: balance;
  max-width: min(92vw, 440px);
  overflow-wrap: break-word;
}
/* Filet séparant le nom du site de son sous-titre, comme sous « LOREM IPSUM »
   dans le modèle papier. */
.home__brand-rule {
  width: clamp(90px, 30vw, 130px);
  height: 1px;
  margin: clamp(4px, 1.2vh, 10px) auto;
  background: var(--accent-dim);
  opacity: .6;
}
.home__tagline {
  font-family: var(--font-headline);
  font-size: clamp(.62rem, 2vh, .78rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: .75;
  text-align: center;
  max-width: 100%;
}
/* Module §15.5 — sélecteur de langue FR/EN (menu bilingue, activable par site) */
.lang-switch {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 0 18px;
}
.lang-switch--section {
  flex-shrink: 0;
  gap: 4px;
  margin: 0;
}
.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 26px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent-dim);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  transition: background 160ms, color 160ms;
}
.lang-switch--section .lang-switch__btn {
  min-width: 26px;
  min-height: 24px;
  padding: 0 7px;
}
.lang-switch__btn:hover,
.lang-switch__btn:focus-visible {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  outline: none;
}
.lang-switch__btn.is-active {
  background: var(--accent);
  color: var(--primary-deep);
  border-color: var(--accent);
}

/* Accueil : liens texte discrets (style « Facebook »), pas des pastilles */
.lang-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  margin-top: clamp(6px, 2vh, 24px);
}
.lang-links__link {
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--accent-dim);
  text-decoration: none;
  opacity: .75;
  transition: opacity 160ms, color 160ms;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
}
.lang-links__link:hover,
.lang-links__link:focus-visible {
  opacity: 1;
  text-decoration: underline;
  outline: none;
}
.lang-links__link.is-active {
  opacity: 1;
  color: var(--accent);
  font-weight: 700;
}
.lang-links__sep {
  color: var(--accent-dim);
  opacity: .4;
  font-size: 12px;
}

/* Sélecteur de langue à drapeaux (accueil + en-tête de section) */
.lang-flag-link {
  display: inline-flex;
  padding: 6px;
  border-radius: 6px;
  line-height: 0;
  opacity: .4;
  transition: opacity .18s, transform .18s;
}
.lang-flag-link:hover,
.lang-flag-link:focus-visible { opacity: .85; outline: none; }
.lang-flag-link.is-active { opacity: 1; }
.lang-flag {
  width: 30px;
  height: 20px;
  border-radius: 3px;
  display: block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18), 0 2px 5px rgba(0,0,0,.28);
}
.lang-flag-link.is-active .lang-flag {
  box-shadow: 0 0 0 1.5px var(--accent), 0 2px 6px rgba(0,0,0,.3);
}
.lang-switch--section .lang-flag { width: 24px; height: 16px; }
.lang-switch--section .lang-flag-link { padding: 4px; }

@media (min-width: 768px) {
  .home__inner { max-width: 560px; }
}
@media (min-width: 1024px) {
  .home__inner { max-width: 640px; }
}

/* ================================================================
   SECTION VIEW — fidèle au modèle de carte imprimée : fond sombre,
   composition centrée, séparateurs "* * *" entre plats.
   ================================================================ */
.screen--section {
  flex-direction: column;
  min-height: 100dvh;
}

/* En-tête transparent, posé directement sur le fond peint — exactement comme
   le modèle imprimé (1215767_205) : aucun bandeau, aucune ombre. Sur une seule
   ligne : retour — filet — verre — filet — recherche, le verre débordant vers
   le haut au-dessus du filet, comme dans le SVG source. */
.section-header {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 22px 16px 6px;
  background: transparent;
}
.section-header__icon-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 320px;
}
.section-header__back,
.section-header__search-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--accent);
  transition: background 180ms;
  min-width: 44px;
  min-height: 44px;
}
.section-header__back:hover,
.section-header__back:focus-visible,
.section-header__search-toggle:hover,
.section-header__search-toggle:focus-visible {
  background: rgba(214, 173, 124, .15);
  outline: none;
}
.section-header__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 320px;
  margin-top: 10px;
}
.section-header__hr {
  flex: 1;
  height: 1px;
  background: var(--accent);
  opacity: .7;
}
/* Verre : mêmes proportions que le SVG source (goblet ~16×28), débordant
   vers le haut au-dessus du filet. */
.section-header__icon {
  flex-shrink: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 20px;
  height: 30px;
  margin: -12px 2px 0;
  color: var(--accent);
}
.section-header__icon svg { display: block; width: 100%; height: 100%; }
.section-header__dot {
  flex-shrink: 0;
  color: var(--accent-dim);
  font-size: .8rem;
}
.section-header__title {
  font-family: var(--font-headline);
  /* Fluide : les libellés longs ("Cocktails & Apéritifs") tiennent sur petit
     écran sans être coupés — au besoin sur 2 lignes plutôt qu'en "…". */
  font-size: clamp(1.02rem, 4.6vw, 1.4rem);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.16;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  max-width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Search bar */
.search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-deep);
  padding: 8px 16px;
  border-bottom: 1px solid rgba(214,173,124,.2);
}
.search-bar[hidden] { display: none; }
.search-bar__close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-left: -6px;
  border-radius: 50%;
  color: var(--accent);
}
.search-bar__close:hover,
.search-bar__close:focus-visible {
  background: rgba(214, 173, 124, .15);
  outline: none;
}

/* Mode recherche : on est en train de filtrer → l'en-tête décoratif s'efface
   et la barre de recherche se fige en haut (elle reste visible pendant qu'on
   fait défiler les résultats). Hors recherche, l'en-tête défile normalement
   avec le contenu (cf. modèle imprimé). */
.screen--section.is-searching .section-header { display: none; }
.screen--section.is-searching .search-bar {
  position: sticky;
  top: 0;
  z-index: 10;
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.search-bar__input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-body);
  /* 16px minimum : en dessous, Safari iOS zoome automatiquement le champ au
     focus et ne redézoome pas toujours après — casse la mise en page. */
  font-size: 16px;
  padding: 4px 2px;
  outline: none;
  caret-color: var(--accent);
}
.search-bar__input::placeholder { color: var(--accent-dim); opacity: .6; }
.search-bar__count {
  font-size: .78rem;
  color: var(--accent-dim);
  white-space: nowrap;
}
.search-bar__clear {
  color: var(--accent-dim);
  font-size: 1.2rem;
  line-height: 1;
  padding: 4px;
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-bar__clear[hidden] { display: none; }

/* Section body */
.section-body {
  flex: 1;
  padding: 8px 38px 60px 0;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

/* Category */
.category {
  margin-bottom: 8px;
}
.category[hidden] { display: none; }
.category__label {
  font-family: var(--font-headline);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
  padding: 22px 16px 0;
}
.category__label::after {
  content: "";
  display: block;
  width: 36px;
  height: 1px;
  margin: 9px auto 0;
  background: var(--accent-dim);
  opacity: .5;
}
.category__note {
  font-size: .78rem;
  color: rgba(255,255,255,.7);
  text-align: center;
  padding: 8px 16px 2px;
  font-style: italic;
}

/* Item list — composition centrée, plats séparés par "* * *" */
.item-list { }
.item[hidden] { display: none; }
.item-sep {
  text-align: center;
  color: var(--accent-dim);
  opacity: .6;
  letter-spacing: .3em;
  font-size: .75rem;
  padding: 2px 0;
}
.item-sep[hidden] { display: none; }
.item__promo-img-wrap {
  padding: 12px 16px 0;
}
.item__promo-img {
  width: 100%;
  border-radius: var(--radius-sm);
  aspect-ratio: 16/9;
  object-fit: cover;
}
.item__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 16px 20px;
}
.item__img-wrap {
  flex-shrink: 0;
  position: relative;
  width: 112px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  margin-bottom: 8px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  cursor: zoom-in;
  transition: transform .18s;
}
.item__img-wrap:hover,
.item__img-wrap:focus-visible { transform: scale(1.03); outline: none; }
.item__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.item__img-zoom {
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  color: #fff;
  opacity: .85;
  pointer-events: none;
}
.item__img-zoom svg { width: 13px; height: 13px; display: block; }
.item__content {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.item__name {
  font-family: var(--font-headline);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.3;
}
.item__desc {
  font-size: .82rem;
  font-style: italic;
  color: rgba(255,255,255,.8);
  line-height: 1.45;
  max-width: 46ch;
}
.item__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 2px;
}
.item__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  line-height: 1;
}
.item__allergens {
  font-size: .68rem;
  color: rgba(255,255,255,.55);
  font-style: italic;
  max-width: 40ch;
  line-height: 1.4;
}
.item__featured {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--primary-deep);
  background: var(--accent);
  border-radius: 3px;
  padding: 1px 7px;
  margin-top: 2px;
}
.item__promo-badge {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 3px;
  padding: 1px 7px;
  margin-top: 2px;
}
.item__price-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}
.item__price {
  font-family: var(--font-body);
  font-size: .92rem;
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.item__price--base {
  text-decoration: line-through;
  color: rgba(255,255,255,.5);
  font-size: .8rem;
}
.item__price--promo {
  color: var(--accent);
  font-weight: 700;
}

/* Bouteille + verre — clin d'œil au modèle papier, réservé aux sections
   identifiées comme "boissons" (cf. menu_section_icon_name()). En arrière-plan
   sous le dernier plat (comme sur la carte imprimée, où le texte se superpose
   à l'illustration), à la même taille relative que dans le SVG d'origine
   (≈ 18 % de la largeur de la carte). */
.section-body { position: relative; z-index: 1; }
.category:last-of-type { position: relative; z-index: 1; }
/* Emblème de section en filigrane fixe en bas à gauche (comme sur le modèle
   imprimé, où l'illustration reste calée dans le coin et le texte passe
   dessus). Suite logique : boissons → bouteille + verre ; restauration →
   fourchette + cuillère (icône de l'artboard 3). z-index négatif → derrière
   le contenu, devant le fond peint. */
.section-footer-ornament {
  position: fixed;
  left: max(6px, env(safe-area-inset-left));
  bottom: max(0px, env(safe-area-inset-bottom));
  z-index: -1;
  margin: 0;
  opacity: .72;
  pointer-events: none;
}
.section-footer-ornament svg { display: block; }
/* Taille pilotée par le viewport (et non un % constant) : l'emblème reste un
   filigrane de coin discret aussi bien sur un petit téléphone que sur desktop.
   Bouteille = illustration verticale → on borne sa HAUTEUR (sinon, étroite mais
   très haute, elle mangeait un tiers de l'écran sur mobile). */
.section-footer-ornament--drink {
  height: clamp(88px, 20vh, 168px);
  width: auto;
}
.section-footer-ornament--drink svg { height: 100%; width: auto; }
/* Couverts croisés = image quasi carrée → on borne sa LARGEUR. */
.section-footer-ornament--food {
  width: clamp(84px, 24vw, 140px);
  height: auto;
  left: max(4px, env(safe-area-inset-left));
  bottom: max(4px, env(safe-area-inset-bottom));
}
.section-footer-ornament--food svg { width: 100%; height: auto; }

@media (min-width: 768px) {
  .section-header { padding: 20px 64px 12px; }
  .section-header__hero { max-width: 380px; }
  .section-header__title { font-size: 1.5rem; }
  .section-body { padding-bottom: 80px; }
  .item__row { padding: 20px 24px; }
  .item__img-wrap { width: 136px; }
  .category__label { padding: 28px 24px 0; }
  .category__note { padding: 8px 24px 4px; }
  .item__promo-img-wrap { padding: 14px 24px 0; }
  .search-bar { padding: 10px 24px; }
}
@media (min-width: 1024px) {
  .section-body { padding-bottom: 100px; }
}

/* ================================================================
   BOOK TABS — onglets façon classeur (fidèle au modèle de menu imprimé) :
   navigation directe vers une section depuis n'importe quel écran, visibles
   sur la couverture comme sur chaque page section.
   ================================================================ */
.book-tabs {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 88vh;
}
.book-tabs[hidden] { display: none; }
.book-tabs__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 12px 6px;
  min-height: 58px;
  max-height: 128px;
  background: color-mix(in srgb, var(--accent) 55%, var(--primary-deep) 45%);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  font-family: var(--font-headline);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 7px 0 0 7px;
  box-shadow: -2px 2px 6px rgba(0,0,0,.3);
  transform: translateX(7px);
  transition: transform 180ms, background 180ms, padding-right 180ms;
  min-width: 30px;
}
.book-tabs__tab:hover,
.book-tabs__tab:focus-visible {
  transform: translateX(0);
  outline: none;
}
.book-tabs__tab.is-current {
  background: var(--accent);
  color: var(--primary-deep);
  text-shadow: none;
  transform: translateX(0);
  padding-right: 9px;
}
@media (min-width: 768px) {
  .book-tabs__tab { font-size: .72rem; min-height: 68px; max-height: 148px; padding: 14px 7px; }
}
@media (min-width: 1024px) {
  .book-tabs { right: calc(50% - 360px - 3px); }
}

/* ================================================================
   POPUP (§15.2 Premium)
   ================================================================ */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: popupFadeIn 250ms ease-out both;
}
.popup-overlay[hidden] { display: none; }
@keyframes popupFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .popup-overlay { animation: none; }
  .popup { animation: none; }
}
.popup {
  position: relative;
  background: var(--surface);
  border-radius: 10px;
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  animation: popupScale 250ms ease-out both;
}
@keyframes popupScale {
  from { transform: scale(.95); }
  to   { transform: scale(1); }
}
.popup__close {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 1.3rem;
  color: #fff;
  line-height: 1;
  z-index: 1;
  min-width: 40px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
}
.popup__close:hover { background: rgba(0,0,0,.7); }
.popup__img {
  width: 100%;
  display: block;
  max-height: 240px;
  object-fit: cover;
}
.popup__title {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
  padding: 20px 20px 8px;
}
.popup__message {
  padding: 0 20px 16px;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.popup__cta {
  display: block;
  margin: 0 20px 20px;
  padding: 12px 20px;
  background: var(--accent);
  color: var(--primary-deep);
  font-family: var(--font-headline);
  font-weight: 700;
  letter-spacing: .06em;
  text-align: center;
  border-radius: var(--radius);
  font-size: .9rem;
  text-transform: uppercase;
}

/* ================================================================
   LIGHTBOX — agrandissement d'une photo de plat au tap (image
   pleine résolution chargée seulement à l'ouverture).
   ================================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: lbFade .2s ease-out;
}
.lightbox[hidden] { display: none; }
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  animation: lbPop .24s cubic-bezier(.2,.8,.3,1);
}
.lightbox__close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover,
.lightbox__close:focus-visible { background: rgba(255,255,255,.24); outline: none; }
@keyframes lbFade { from { opacity: 0; } }
@keyframes lbPop  { from { opacity: 0; transform: scale(.94); } }
@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox__img { animation: none; }
}

/* ================================================================
   BANNER (§15.3 Premium)
   ================================================================ */
.banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: var(--primary-deep);
  font-size: .85rem;
  font-weight: 600;
  min-height: 40px;
  position: relative;
}
.banner[hidden] { display: none; }
.banner--bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 20;
  box-shadow: 0 -2px 8px rgba(0,0,0,.2);
}
.banner__text {
  flex: 1;
  padding: 8px 44px 8px 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.banner__img {
  width: 100%;
  display: block;
  max-height: 80px;
  object-fit: cover;
}
.banner__close {
  flex-shrink: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 2px;
  right: 4px;
  width: 40px;
  height: 36px;
  z-index: 2;
  opacity: 1;
  transition: background 150ms;
  background: radial-gradient(circle, rgba(0,0,0,.5) 15px, transparent 16px);
}
.banner__close:hover { background: radial-gradient(circle, rgba(0,0,0,.7) 15px, transparent 16px); }

/* ================================================================
   UTILITIES
   ================================================================ */
.hidden { display: none !important; }