/* =========================================================================
   Les Petits Pois — feuille de styles unique (pas de build, pas de framework).
   Organisée par composant, dans l'ordre où il apparaît sur la page : reset ->
   tokens -> layout -> header -> nav (points) -> hero -> carte (sections /
   plats / filtre / popup) -> réservation+footer -> mentions légales -> décor
   -> révélation au scroll.
   ========================================================================= */

/* --- Polices ------------------------------------------------------------ */
@font-face {
  font-family: "Fraunces";
  src: local("Fraunces");
  font-display: swap;
}

/* --- Reset léger ---------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
img, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

/* --- Design tokens --------------------------------------------------------
   Palette verte historique du restaurant (conservée telle quelle) + un
   accent chaud "gold" pour les CTA/highlights et un accent "warm" (déjà
   présent dans les décors) réservé aux messages d'attention (grossesse). */
:root {
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Work Sans", "Helvetica Neue", Arial, sans-serif;

  --pea-950: #0e1f14; --pea-950-rgb: 14, 31, 20;
  --pea-900: #14301f; --pea-900-rgb: 20, 48, 31;
  --pea-800: #1c4128; --pea-800-rgb: 28, 65, 40;
  --pea-700: #2b5934; --pea-700-rgb: 43, 89, 52;
  --pea-600: #3c7241; --pea-600-rgb: 60, 114, 65;
  --pea-500: #538d54; --pea-500-rgb: 83, 141, 84;
  --pea-400: #7dab72; --pea-400-rgb: 125, 171, 114;
  --pea-300: #abcb9c; --pea-300-rgb: 171, 203, 156;
  --pea-200: #d2e6c4; --pea-200-rgb: 210, 230, 196;
  --pea-100: #e9f2e0; --pea-100-rgb: 233, 242, 224;
  --cream: #f7f2e7; --cream-rgb: 247, 242, 231;
  --ink: #16201a;

  --gold: #c9a24b; --gold-rgb: 201, 162, 75;
  --gold-light: #e6cd8f;
  --warm: #c2703f; --warm-rgb: 194, 112, 63;
}

html {
  scroll-behavior: auto;
  font-family: var(--font-body);
  /* Une section = un écran plein ; molette/trackpad/swipe fait défiler
     directement à la suivante ("mandatory" = jamais s'arrêter entre deux). */
  scroll-snap-type: y mandatory;
}

body {
  background-color: var(--cream);
  color: var(--ink);
}

.font-display { font-family: var(--font-display); }

button, a[role="button"] { touch-action: manipulation; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--pea-900);
  color: white;
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 0.5rem 0;
}
.skip-link:focus { left: 0; }

@media print {
  .no-print { display: none !important; }
}

/* --- Sections plein écran ------------------------------------------------
   `svh` (small viewport height) plutôt que `dvh` : sur mobile, la barre
   d'adresse qui se rétracte pendant le scroll fait varier `dvh` EN TEMPS
   RÉEL, ce qui déplace les points de snap pendant le geste et rend le snap
   peu fiable (surtout en remontant, quand la barre réapparaît). `svh` fige
   la hauteur sur la plus petite valeur possible : les sections ne bougent
   plus pendant le scroll. Fallback `vh` pour les anciens navigateurs. */
.full-screen-section {
  height: 100vh;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-snap-type: none; }
  .full-screen-section { scroll-snap-align: none; scroll-snap-stop: normal; }
}

/* =========================================================================
   Header fixe : logo + points de navigation directe + sélecteur de langue.
   Superposé en transparence dégradée pour ne jamais grignoter la hauteur
   d'une section.
   ========================================================================= */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  display: flex;
  height: 3.5rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-inline: 1rem;
  color: var(--cream);
  background: linear-gradient(
    to bottom,
    rgb(var(--pea-950-rgb) / 0.92),
    rgb(var(--pea-950-rgb) / 0.55),
    transparent
  );
}
@media (min-width: 640px) {
  .site-header { height: 4rem; padding-inline: 2rem; }
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.site-header__logo {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 9999px;
  object-fit: cover;
  border: 1px solid rgb(var(--gold-rgb) / 0.5);
}
.site-header__name {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
}
@media (min-width: 640px) {
  .site-header__name { font-size: 1.25rem; }
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 640px) { .site-header__right { gap: 0.75rem; } }

.lang-toggle {
  display: flex;
  min-height: 40px;
  align-items: center;
  border-radius: 9999px;
  border: 1px solid var(--pea-500);
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--cream);
}
@media (min-width: 640px) { .lang-toggle { min-height: 44px; padding: 0.5rem 1rem; font-size: 0.875rem; } }
.lang-toggle:hover { border-color: var(--gold); color: var(--gold-light); }

/* --- Points de navigation directe (une par section) ---------------------- */
.section-dots {
  position: fixed;
  right: 0.85rem;
  top: 50%;
  z-index: 45;
  display: none;
  flex-direction: column;
  gap: 0.65rem;
  transform: translateY(-50%);
}
@media (min-width: 900px) { .section-dots { display: flex; } }

.section-dot {
  position: relative;
  height: 0.55rem;
  width: 0.55rem;
  border-radius: 9999px;
  background: rgb(var(--cream-rgb) / 0.35);
  transition: background 0.3s, transform 0.3s;
}
.section-dot:hover { background: rgb(var(--cream-rgb) / 0.7); }
.section-dot.is-active {
  background: var(--gold);
  transform: scale(1.35);
}
.section-dot__label {
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--cream);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
  text-shadow: 0 1px 6px rgb(0 0 0 / 0.6);
}
.section-dot:hover .section-dot__label { opacity: 1; }

/* =========================================================================
   Hero (section 1/5) : photo animée (Ken Burns) ou vidéo de fond + accroche.
   ========================================================================= */
#hero {
  justify-content: flex-end;
  background-color: var(--pea-950);
  padding-top: 3.5rem;
  color: var(--cream);
}
@media (min-width: 640px) { #hero { padding-top: 4rem; } }

.hero__media {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.hero__media img,
.hero__media video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* Effet Ken Burns : lent zoom/pan en boucle, en attendant une vraie vidéo
   d'ambiance (voir settings.json -> heroVideo). Désactivé en reduced-motion. */
.hero__media img.is-animated {
  animation: ken-burns 24s ease-in-out infinite alternate;
  transform-origin: 60% 40%;
}
@keyframes ken-burns {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__media img.is-animated { animation: none; }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    var(--pea-950) 5%,
    rgb(var(--pea-950-rgb) / 0.65) 45%,
    rgb(var(--pea-950-rgb) / 0.25) 75%
  );
}

.hero__content {
  position: relative;
  padding: 0 1.5rem clamp(1.5rem, 6vh, 3.5rem);
  animation: fade-in 1s ease-out;
}
@media (min-width: 640px) { .hero__content { padding-inline: 3rem; } }

.hero__tagline {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(0.7rem, 1.6vw, 0.9rem);
  text-transform: uppercase;
  letter-spacing: 0.32em;
  color: var(--gold-light);
}
.hero__tagline::before {
  content: "";
  display: block;
  height: 1px;
  width: 1.75rem;
  background: var(--gold);
}
.hero__title {
  font-family: var(--font-display);
  margin-top: 0.6rem;
  font-size: clamp(2.25rem, 8vw, 4.75rem);
  line-height: 1.02;
}
.hero__about {
  margin-top: clamp(0.75rem, 2.5vh, 1.5rem);
  max-width: 30rem;
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  line-height: 1.6;
  color: rgb(var(--pea-100-rgb) / 0.9);
}
.hero__actions {
  margin-top: clamp(1rem, 3vh, 2rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --- Boutons partagés ---------------------------------------------------*/
.btn {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0.75rem 1.6rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.2s, filter 0.2s;
}
@media (min-width: 640px) { .btn { font-size: 1rem; } }
.btn-solid { background: var(--gold); color: var(--pea-950); }
.btn-outline { border: 1px solid var(--cream); color: var(--cream); }
.btn-solid:hover, .btn-outline:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* =========================================================================
   Carte : sections catégorie (entrées/plats/desserts), plats "flottants".
   ========================================================================= */
.menu-section {
  align-items: center;
  justify-content: center;
  padding: 0 1rem;
  padding-top: 3.5rem;
  color: var(--cream);
}
@media (min-width: 640px) { .menu-section { padding-inline: 2.5rem; padding-top: 4rem; } }

/* Nuance de fond + halo coloré différents par catégorie, pour qu'on sente le
   changement de section même sans lire le titre : vert profond alterné avec
   un halo doré (entrées/plats) ou chaud (desserts) dans un coin. */
.menu-section--entree, .menu-section--dessert { background-color: var(--pea-900); }
.menu-section--plat { background-color: var(--pea-950); }

.menu-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
}
.menu-section--entree::before,
.menu-section--plat::before {
  background: radial-gradient(circle at 88% 8%, rgb(var(--gold-rgb) / 0.16), transparent 45%);
}
.menu-section--dessert::before {
  background: radial-gradient(circle at 6% 92%, rgb(var(--warm-rgb) / 0.2), transparent 45%);
}

.menu-section__eyebrow {
  position: relative;
  flex-shrink: 0;
  font-size: clamp(0.65rem, 1.4vw, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--gold-light);
  opacity: 0;
  transition: opacity 0.9s ease-out;
}
.menu-section.is-active .menu-section__eyebrow { opacity: 1; }

.menu-section__title {
  position: relative;
  font-family: var(--font-display);
  flex-shrink: 0;
  font-size: clamp(1.75rem, 5vw, 3rem);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
.menu-section.is-active .menu-section__title {
  opacity: 1;
  transform: none;
}

.menu-section__empty {
  margin-top: 1.5rem;
  text-align: center;
  color: rgb(var(--pea-200-rgb) / 0.7);
}

/* Grille de plats : jamais codée en dur sur un nombre de colonnes fixe pour
   un nombre de plats donné — voir data-cols posé en JS (1 colonne par plat
   à partir du bureau, jusqu'à 4 max, entre 3 et 4 plats par catégorie). */
.dish-grid {
  position: relative;
  margin-top: clamp(0.75rem, 3vh, 2rem);
  display: grid;
  width: 100%;
  max-width: 100rem;
  flex: 1;
  grid-template-columns: repeat(2, 1fr);
  place-items: center;
  align-content: center;
  column-gap: 1rem;
  row-gap: clamp(0.5rem, 2.5vh, 1.5rem);
}
@media (min-width: 640px) {
  .dish-grid { grid-template-columns: repeat(3, 1fr); column-gap: 2rem; }
}
@media (min-width: 1024px) {
  .dish-grid { column-gap: 3rem; }
  .dish-grid[data-cols="1"] { grid-template-columns: repeat(1, 1fr); }
  .dish-grid[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
  .dish-grid[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }
  .dish-grid[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
}

/* --- Tuile plat : ni carte, ni bordure, ni fond — juste la photo (recadrée
   en disque), le nom, une courte description et le prix en dessous. ------ */
.dish-tile {
  display: flex;
  min-height: 44px;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  text-align: center;
  color: var(--cream);
  opacity: 0;
  transform: translateY(18px) rotate(var(--dish-rot, 0deg));
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.dish-tile:nth-child(odd) { --dish-rot: -5deg; }
.dish-tile:nth-child(even) { --dish-rot: 5deg; }
.menu-section.is-active .dish-tile {
  opacity: 1;
  transform: none;
}
@media (min-width: 1024px) { .dish-tile { gap: 0.5rem; } }

/* Largeur ET hauteur fixées explicitement (pas seulement aspect-ratio) :
   garantit un cercle parfait même si aspect-ratio est mal pris en charge.
   .circle-clip corrige un bug Safari iOS où border-radius ne découpe plus
   correctement un élément dont un parent est transformé (ici, la tuile
   tournée à l'apparition). */
.dish-tile__photo-wrap {
  position: relative;
  display: block;
  height: clamp(8rem, 22vw, 12.5rem);
  width: clamp(8rem, 22vw, 12.5rem);
  flex-shrink: 0;
  overflow: hidden;
  border-radius: 9999px;
  background: rgb(var(--pea-900-rgb) / 0.4);
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  box-shadow: 0 0 0 1px rgb(var(--gold-rgb) / 0.35);
}
@media (min-width: 1024px) {
  .dish-tile__photo-wrap {
    height: clamp(14rem, min(32vw, 46vh), 34rem);
    width: clamp(14rem, min(32vw, 46vh), 34rem);
  }
}
.dish-tile__photo {
  height: 100%;
  width: 100%;
  object-fit: cover;
  filter: drop-shadow(0 14px 18px rgb(0 0 0 / 0.5));
  transition: transform 0.3s;
}
.dish-tile:hover .dish-tile__photo { transform: scale(1.05); }

.dish-tile__name {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  line-height: 1.2;
}
@media (min-width: 1024px) { .dish-tile__name { font-size: clamp(1.3rem, 2vw, 1.7rem); } }

.dish-tile__description {
  max-width: 18rem;
  font-size: clamp(0.65rem, 1.7vw, 0.8rem);
  color: rgb(var(--pea-200-rgb) / 0.7);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 640px) { .dish-tile__description { -webkit-line-clamp: 2; } }
@media (min-width: 1024px) {
  .dish-tile__description { max-width: 24rem; font-size: clamp(0.85rem, 1.2vw, 1rem); }
}

.dish-tile__price {
  font-size: clamp(0.9rem, 2.2vw, 1.05rem);
  font-weight: 600;
  color: var(--gold-light);
}
@media (min-width: 1024px) { .dish-tile__price { font-size: clamp(1.1rem, 1.4vw, 1.3rem); } }

.dish-tile__supplement {
  font-size: 0.65rem;
  color: rgb(var(--pea-300-rgb) / 0.8);
}
@media (min-width: 1024px) { .dish-tile__supplement { font-size: 0.875rem; } }

.dish-tile__pregnancy-flag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--warm);
}

/* =========================================================================
   Filtre allergènes (+ grossesse) : bouton flottant + panneau (jamais une
   barre en ligne, qui grignoterait la hauteur disponible dans les sections
   plein écran).
   ========================================================================= */
.allergen-filter-btn {
  position: fixed;
  bottom: 1.25rem;
  right: 1rem;
  z-index: 40;
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: rgb(var(--pea-800-rgb) / 0.95);
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cream);
  box-shadow: 0 10px 25px rgb(0 0 0 / 0.3);
  backdrop-filter: blur(4px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  opacity: 0;
  transform: translateY(0.75rem);
  pointer-events: none;
}
.allergen-filter-btn.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
@media (min-width: 640px) { .allergen-filter-btn { bottom: 2rem; right: 2rem; } }

.allergen-filter-btn__count {
  border-radius: 9999px;
  background: var(--gold);
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pea-950);
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgb(var(--pea-950-rgb) / 0.8);
  backdrop-filter: blur(4px);
}
@media (min-width: 640px) { .overlay { align-items: center; padding: 1.5rem; } }

.allergen-panel {
  width: 100%;
  max-width: 28rem;
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 1.5rem 1.5rem 0 0;
  background: var(--pea-900);
  padding: 1.5rem;
  color: var(--cream);
  box-shadow: 0 25px 60px rgb(0 0 0 / 0.4);
}
@media (min-width: 640px) { .allergen-panel { border-radius: 1.5rem; } }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.panel-header h3 { font-family: var(--font-display); font-size: 1.125rem; }

.icon-btn {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgb(var(--pea-800-rgb) / 0.9);
  color: var(--cream);
}

.hidden-count {
  margin-top: 0.25rem;
  font-size: 0.75rem;
  color: rgb(var(--pea-200-rgb) / 0.8);
}

.allergen-chips {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.allergen-chip {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  border: 1px solid var(--pea-700);
  background: var(--pea-950);
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  color: rgb(var(--pea-100-rgb) / 0.8);
}
.allergen-chip.is-active {
  border-color: var(--gold);
  background: var(--pea-600);
  color: var(--cream);
}
/* Puce "Femme enceinte" : même langage visuel que les allergènes, mais
   distinguée par l'accent chaud pour signaler une nature différente (une
   précaution, pas un allergène réglementaire). */
.allergen-chip--pregnancy { border-color: rgb(var(--warm-rgb) / 0.6); }
.allergen-chip--pregnancy.is-active { border-color: var(--warm); background: var(--warm); color: var(--cream); }
.allergen-chip--pregnancy .allergen-icon { background: var(--warm); }

.btn-reset {
  margin-top: 1rem;
  min-height: 44px;
  border-radius: 9999px;
  border: 1px solid var(--gold);
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold-light);
  text-underline-offset: 2px;
}
.btn-reset:hover { text-decoration: underline; }

/* Pastille monogramme (allergène), cohérente y compris pour les codes
   personnalisés non répertoriés (voir js/allergens.js). */
.allergen-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--pea-600);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  color: var(--cream);
  height: 1.25rem;
  width: 1.25rem;
  font-size: 0.6rem;
}

/* Bandeau "formule déjeuner en cours" (flottant, sous le header). */
.lunch-banner {
  position: fixed;
  inset-inline: 0;
  top: 4rem;
  z-index: 30;
  margin-inline: auto;
  width: fit-content;
  max-width: calc(100vw - 2rem);
  text-align: center;
  border-radius: 9999px;
  background: var(--gold);
  padding: 0.375rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--pea-950);
  box-shadow: 0 6px 16px rgb(0 0 0 / 0.25);
}
@media (min-width: 640px) { .lunch-banner { top: 5rem; font-size: 0.875rem; } }

/* =========================================================================
   Fiche plat (popup) : vidéo/photo + détails, dimensionnée en unités fluides
   pour tenir sur un écran de téléphone sans scroll interne dans la majorité
   des cas (overflow-y:auto reste en filet de sécurité).
   ========================================================================= */
.dish-modal {
  position: relative;
  display: flex;
  max-height: 95svh;
  width: 100%;
  max-width: 32rem;
  flex-direction: column;
  overflow-y: auto;
  border-radius: 1.5rem 1.5rem 0 0;
  background: var(--pea-950);
  color: var(--cream);
  box-shadow: 0 25px 60px rgb(0 0 0 / 0.4);
}
@media (min-width: 640px) { .dish-modal { border-radius: 1.5rem; } }

.dish-modal__close {
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  z-index: 10;
  background: rgb(var(--pea-900-rgb) / 0.9);
}

/* Vidéos sources en 9:16 (portrait). Hauteur fluide (vh) plutôt qu'un ratio
   fixe : reste généreuse pour bien voir le plat, tout en se réduisant sur
   les petits écrans pour laisser la place au texte sans forcer de scroll. */
.dish-modal__media {
  position: relative;
  height: clamp(9rem, 34svh, 17rem);
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--pea-900);
}
.dish-modal__media img, .dish-modal__media video {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.dish-modal__body {
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.8svh, 1rem);
  padding: clamp(1rem, 4vw, 1.5rem);
}

.dish-modal__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.dish-modal__heading h3 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 4.5vw, 1.5rem);
}
.dish-modal__price {
  white-space: nowrap;
  font-size: clamp(1rem, 3.5vw, 1.25rem);
  font-weight: 600;
  color: var(--gold-light);
}

.dish-modal__description {
  font-size: clamp(0.82rem, 2.6vw, 0.95rem);
  color: rgb(var(--pea-100-rgb) / 0.9);
}
.dish-modal__supplement {
  font-size: clamp(0.7rem, 2.2vw, 0.8rem);
  color: rgb(var(--pea-200-rgb) / 0.8);
}

.dish-modal__pregnancy {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgb(var(--warm-rgb) / 0.5);
  background: rgb(var(--warm-rgb) / 0.12);
  padding: 0.5rem 0.75rem;
  font-size: clamp(0.72rem, 2.2vw, 0.82rem);
  color: var(--pea-100);
}
.dish-modal__pregnancy strong { color: var(--warm); font-weight: 700; }

.dish-modal__block-title {
  margin-bottom: 0.375rem;
  font-size: clamp(0.65rem, 2vw, 0.75rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gold-light);
}

.dish-modal__wine {
  border-radius: 1rem;
  border: 1px solid rgb(var(--pea-700-rgb) / 0.6);
  background: rgb(var(--pea-900-rgb) / 0.5);
  padding: clamp(0.6rem, 2.5vw, 1rem);
}
.dish-modal__wine-lines {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: clamp(0.78rem, 2.4vw, 0.9rem);
  color: rgb(var(--pea-100-rgb) / 0.9);
}
.dish-modal__wine-lines strong { color: var(--pea-200); font-weight: 600; }

.dish-modal__ingredients {
  font-size: clamp(0.78rem, 2.4vw, 0.9rem);
  color: rgb(var(--pea-100-rgb) / 0.8);
}

.dish-modal__allergens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.dish-modal__allergens li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  background: var(--pea-800);
  padding: 0.25rem 0.625rem;
  font-size: 0.7rem;
  color: var(--cream);
}

/* =========================================================================
   Réservation + footer (section 5/5) : titre+CTA centrés, infos (adresse /
   horaires / contact / instagram / mentions légales) ancrées en bas.
   ========================================================================= */
#reserver {
  background-color: var(--pea-800);
  padding: 0 1.5rem clamp(0.85rem, 2.5vh, 1.5rem);
  padding-top: 3.5rem;
  text-align: center;
  color: var(--cream);
}
@media (min-width: 640px) { #reserver { padding-inline: 3rem; padding-top: 4rem; } }

#reserver::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgb(var(--gold-rgb) / 0.14), transparent 55%);
}

.reservation__main {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.reservation__main h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 4.2vw, 2.4rem); }
.reservation__subtitle {
  margin: 0.5rem auto 0;
  max-width: 28rem;
  font-size: clamp(0.78rem, 1.9vw, 1rem);
  color: rgb(var(--pea-100-rgb) / 0.85);
}
.reservation__cta {
  margin-top: clamp(0.65rem, 2vh, 1.25rem);
}
.reservation__review {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--pea-200);
}

.site-footer {
  position: relative;
  flex-shrink: 0;
  padding-top: clamp(0.75rem, 2.5vh, 1.5rem);
  font-size: 0.8rem;
  color: rgb(var(--pea-200-rgb) / 0.85);
  border-top: 1px solid rgb(var(--cream-rgb) / 0.15);
}

.site-footer__grid {
  position: relative;
  margin-inline: auto;
  display: grid;
  max-width: 56rem;
  grid-template-columns: 1fr;
  gap: 0.85rem;
  text-align: left;
}
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; text-align: center; } }
.site-footer__grid strong { display: block; font-family: var(--font-display); font-size: 1rem; color: var(--cream); }
.site-footer__grid p { margin-top: 0.35rem; }
.site-footer__grid a { margin-top: 0.25rem; display: inline-block; text-underline-offset: 2px; }
.site-footer__grid a:hover { color: var(--gold-light); }

.site-footer__bottom {
  margin: clamp(0.75rem, 2vh, 1.25rem) auto 0;
  display: flex;
  max-width: 56rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 1rem;
  font-size: 0.7rem;
  color: rgb(var(--pea-300-rgb) / 0.7);
}
.site-footer__bottom a { text-underline-offset: 2px; }
.site-footer__bottom a:hover { color: var(--gold-light); }
.site-footer__sep { opacity: 0.5; }

/* =========================================================================
   Mentions légales (page à part, flux normal, pas de scroll-snap).
   ========================================================================= */
.legal-page {
  min-height: 100vh;
  background: var(--pea-950);
  color: rgb(var(--pea-100-rgb) / 0.92);
  padding: 5.5rem 1.25rem 4rem;
}
@media (min-width: 640px) { .legal-page { padding-inline: 2rem; } }
.legal-page__inner {
  margin-inline: auto;
  max-width: 42rem;
}
.legal-page h1 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 5vw, 2.25rem);
  color: var(--cream);
}
.legal-page h2 {
  font-family: var(--font-display);
  margin-top: 2rem;
  font-size: 1.1rem;
  color: var(--gold-light);
}
.legal-page p, .legal-page li { line-height: 1.7; font-size: 0.92rem; margin-top: 0.5rem; }
.legal-page a { text-decoration: underline; text-underline-offset: 2px; }
.legal-page a:hover { color: var(--gold-light); }
.legal-page__back {
  display: inline-flex;
  margin-bottom: 2rem;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--pea-300);
}

/* =========================================================================
   Éléments décoratifs flottants (herbes, ail, citron...) : léger mouvement
   organique en boucle, indépendant du scroll. Purement décoratif.
   ========================================================================= */
.ornament {
  position: absolute;
  pointer-events: none;
  animation: ornament-float 7s ease-in-out infinite;
  animation-delay: var(--ornament-delay, 0s);
  animation-duration: var(--ornament-duration, 7s);
  will-change: transform;
}
@keyframes ornament-float {
  0%, 100% { transform: translateY(0) rotate(var(--ornament-rot, 0deg)); }
  50% { transform: translateY(-10px) rotate(calc(var(--ornament-rot, 0deg) + 4deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .ornament { animation: none; }
}

.ornament--hero-1 { right: 1.5rem; top: 18%; opacity: 0.6; }
.ornament--hero-2 { right: 22%; top: 8%; opacity: 0.5; }
@media (min-width: 640px) {
  .ornament--hero-1 { right: 3.5rem; }
  .ornament--hero-2 { right: 10rem; }
}

.ornament--reserve-1 { left: 1rem; top: 8%; opacity: 0.45; }
.ornament--reserve-2 { top: 6%; right: 1.5rem; opacity: 0.4; }
@media (min-width: 640px) {
  .ornament--reserve-1 { left: 3rem; }
  .ornament--reserve-2 { right: 4rem; }
}

/* =========================================================================
   Révélation au scroll (à propos, réservation...) : fondu + léger décalage.
   Seuls les éléments hors écran au chargement sont masqués avant révélation
   (classe posée en JS) : le contenu déjà visible ne clignote jamais.
   ========================================================================= */
[data-reveal].reveal-pending {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1.1s ease-out, transform 1.1s ease-out;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal].reveal-pending { opacity: 1; transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .menu-section__title, .menu-section__eyebrow, .dish-tile { opacity: 1; transform: none; transition: none; }
}