/* ==========================================================================
   Les Délices de Fatna — feuille de style principale
   Méthodologie : BEM (block__element--modifier), mobile-first.
   États pilotés par JS : modificateurs BEM (--open, --scrolled, --active)
   ou attributs ARIA (aria-expanded).

   Sommaire
   0. Polices (locales)
   1. Design tokens
   2. Reset & base
   3. Utilitaires
   4. Composants partagés (btn, section)
   5. Header & navigation
   6. Hero
   7. Menu (onglets + cartes de plats) — page menu.html
   7 bis. Nos spécialités (accueil)
   8. Galerie + visionneuse plein écran (lightbox)
   9. Avis clients (cartes + bouton + QR code Google)
   10. Localisation (coordonnées + carte)
   11. Horaires (tableau + statut ouvert/fermé)
   12. À propos
   13. Footer + réseaux sociaux
   14. En-tête de page (pages secondaires)
   15. Mentions légales
   16. Animations (entrée du hero + apparition au scroll)
   17. Plat du jour (tableau à la craie)
   ========================================================================== */


/* ==========================================================================
   0. Polices (hébergées localement : aucun appel à Google Fonts, conforme RGPD)
   Fichiers « variables » : un seul fichier couvre toutes les graisses.
   Sous-ensemble latin (accents français, €, tirets…). Licence : SIL OFL 1.1.
   ========================================================================== */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("../fonts/playfair-display-latin-wght-italic.woff2") format("woff2");
}


/* Caveat : écriture « craie » du plat du jour. Pas de preload : elle n'est
   téléchargée que les jours où le tableau s'affiche (voir initDailySpecial). */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/caveat-latin-wght-normal.woff2") format("woff2");
}


/* ==========================================================================
   1. Design tokens
   ========================================================================== */
:root {
  /* Couleurs (issues du logo) */
  --color-red: #C1272D;
  --color-red-dark: #8E1B20;
  --color-red-darker: #5E1115;
  --color-logo-red: #E4111A; /* fond exact de logo.jpg (repli des photos de plats) */
  --color-gold: #FFC72C;
  --color-gold-dark: #E0A800;
  --color-cream: #FFF8EC;
  --color-sand: #F4E6CC;
  --color-text: #2B1A12;
  --color-text-muted: #6B5646;
  --color-white: #FFFFFF;

  /* Typographie */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-chalk: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-h2: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --fs-h1: clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);

  /* Espacements */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: clamp(3.5rem, 2.5rem + 4vw, 6rem);

  /* Mise en page */
  --container-max: 1200px;
  --gutter: 1rem;
  --header-height: 72px;

  /* Divers */
  --radius: 8px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgb(43 26 18 / 0.12);
  --shadow-md: 0 8px 24px rgb(43 26 18 / 0.18);
  --transition: 0.25s ease;
}

@media (min-width: 900px) {
  :root {
    --gutter: 2rem;
    --header-height: 88px;
  }
}


/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Les ancres ne passent pas sous le header fixe */
  scroll-padding-top: var(--header-height);
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--space-md);
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: lining-nums;
}

p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

img,
video,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

button {
  font: inherit;
  cursor: pointer;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ==========================================================================
   3. Utilitaires
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: var(--space-sm);
  left: var(--space-sm);
  z-index: 1000;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-gold);
  color: var(--color-red-darker);
  font-weight: 600;
  border-radius: var(--radius);
  transform: translateY(-200%);
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Bloque le scroll de la page quand le menu mobile est ouvert */
.is-scroll-locked {
  overflow: hidden;
}


/* ==========================================================================
   4. Composants partagés
   ========================================================================== */

/* ---------- Bouton ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-height: 48px;
  padding: 0.75rem 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.btn:active {
  transform: translateY(0);
}

/* Or sur fond clair ou sombre : bouton d'action principal */
.btn--primary {
  background: var(--color-gold);
  color: var(--color-red-darker);
}

.btn--primary:hover {
  background: var(--color-gold-dark);
}

/* Rouge : alternative sur fond clair */
.btn--secondary {
  background: var(--color-red);
  color: var(--color-white);
}

.btn--secondary:hover {
  background: var(--color-red-dark);
}

/* Contour blanc : sur fond sombre (hero, vidéo) */
.btn--outline {
  border-color: var(--color-white);
  color: var(--color-white);
  background: transparent;
}

.btn--outline:hover {
  background: var(--color-white);
  color: var(--color-red-dark);
}

.btn--block {
  width: 100%;
}

/* ---------- Section ---------- */
.section {
  padding-block: var(--space-2xl);
  /* Pas de content-visibility ici : les hauteurs estimées des sections
     faussent la position d'arrivée des liens d'ancre (#contact…) */
}

.section--alt {
  background: var(--color-sand);
}

.section--dark {
  background: var(--color-red-dark);
  color: var(--color-white);
}

.section__header {
  max-width: 42rem;
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.section__eyebrow {
  margin-bottom: var(--space-xs);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-red);
}

.section__title {
  font-size: var(--fs-h2);
  color: var(--color-red);
}

/* Petit ornement doré sous le titre */
.section__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: var(--space-sm);
  background: var(--color-gold);
  border-radius: 2px;
}

.section__header .section__title::after {
  margin-inline: auto;
}

.section--dark .section__title,
.section--dark .section__eyebrow {
  color: var(--color-gold);
}

.section__intro {
  font-size: var(--fs-lg);
  color: var(--color-text-muted);
}


/* ==========================================================================
   5. Header & navigation
   ========================================================================== */

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-height);
  background: var(--color-red);
  color: var(--color-white);
  transition: box-shadow var(--transition), background-color var(--transition);
}

.site-header--scrolled {
  background: var(--color-red-dark);
  box-shadow: var(--shadow-md);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.site-header__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
}

.site-header__logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--color-gold);
  object-fit: cover;
}

.site-header__name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-gold);
}

/* Variante transparente : au-dessus du hero tant qu'on n'a pas scrollé
   (redevient rouge dès que --scrolled ou --menu-open est présent) */
.site-header--transparent:not(.site-header--scrolled):not(.site-header--menu-open) {
  background: transparent;
}

.site-header--transparent:not(.site-header--scrolled):not(.site-header--menu-open) .nav__link,
.site-header--transparent:not(.site-header--scrolled):not(.site-header--menu-open) .site-header__name {
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.5);
}

.site-header--menu-open {
  background: var(--color-red-dark);
}

/* Contenu principal : compense le header fixe.
   --flush : la première section (hero) passe sous le header. */
.site-main {
  padding-top: var(--header-height);
  /* #contenu (« Retour en haut », lien d'évitement) mène au haut de la page,
     bandeau d'annonces compris, au lieu de le laisser sous le header fixe
     (même principe que .hero pour #accueil). Le lien d'évitement mène toujours
     au contenu : la touche Tab suivante y arrive. */
  scroll-margin-top: 100vh;
}

.site-main--flush {
  padding-top: 0;
}

/* ---------- Bandeau d'annonces (sous le header, toutes les pages) ----------
   Le header étant fixe, le bandeau réserve lui-même sa hauteur ; le contenu
   qui suit n'a donc plus à le faire. Sur l'accueil, le fond sombre du
   bandeau passe sous le header transparent (texte blanc lisible). */
.annonces {
  padding-top: var(--header-height);
  background: var(--color-red-darker);
}

.annonces + .site-main {
  padding-top: 0;
}

/* Information : brun foncé, distinct du rouge du header et des en-têtes de page */
.annonce {
  color: var(--color-white);
  background: var(--color-text);
}

.annonce + .annonce {
  border-top: 1px solid rgb(255 255 255 / 0.15);
}

.annonce--fermeture {
  background: var(--color-red-darker);
}

.annonce--promotion {
  color: var(--color-text);
  background: var(--color-gold);
}

.annonce__inner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
}

.annonce__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text);
  background: var(--color-white);
}

.annonce--fermeture .annonce__icone {
  color: var(--color-red-darker);
}

.annonce--promotion .annonce__icone {
  color: var(--color-gold-dark);
}

.annonce__texte {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.annonce__titre {
  font-weight: 700;
}

/* ---------- Bouton burger (mobile) ---------- */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 48px;
  height: 48px;
  padding: 12px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
}

.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-gold);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* ---------- Navigation : mobile (panneau déroulant) ---------- */
.nav {
  position: fixed;
  inset: var(--header-height) 0 0;
  overflow-y: auto;
  background: var(--color-red-dark);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity var(--transition), transform var(--transition),
    visibility 0s linear 0.25s;
}

.nav--open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--transition), transform var(--transition),
    visibility 0s;
}

.nav__list {
  display: flex;
  flex-direction: column;
  padding: var(--space-lg) var(--gutter);
  list-style: none;
}

.nav__item + .nav__item {
  border-top: 1px solid rgb(255 199 44 / 0.2);
}

.nav__link {
  position: relative;
  display: block;
  padding: var(--space-md) 0;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--transition);
}

.nav__link:hover,
.nav__link--active,
.nav__link[aria-current="page"] {
  color: var(--color-gold);
}

/* ---------- Navigation : desktop ---------- */
@media (min-width: 900px) {
  .site-header__logo {
    width: 64px;
    height: 64px;
  }

  .nav-toggle {
    display: none;
  }

  .nav {
    position: static;
    overflow: visible;
    background: none;
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .nav__list {
    flex-direction: row;
    gap: var(--space-xl);
    padding: 0;
  }

  .nav__item + .nav__item {
    border-top: 0;
  }

  .nav__link {
    padding: var(--space-xs) 0;
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: 500;
    letter-spacing: 0.03em;
  }

  /* Soulignement doré animé */
  .nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--color-gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--transition);
  }

  .nav__link:hover::after,
  .nav__link--active::after,
  .nav__link[aria-current="page"]::after {
    transform: scaleX(1);
  }
}


/* ==========================================================================
   6. Hero
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh; /* évite le saut dû à la barre d'adresse mobile */
  padding-block: calc(var(--header-height) + var(--space-xl)) var(--space-2xl);
  overflow: hidden;
  color: var(--color-white);
  /* Repli si la vidéo est absente ou ne charge pas */
  background:
    radial-gradient(ellipse at 70% 30%, rgb(255 199 44 / 0.18), transparent 60%),
    linear-gradient(160deg, var(--color-red) 0%, var(--color-red-dark) 55%, var(--color-red-darker) 100%);
}

/* Fond du hero : vidéo, photo ou image de repli, même cadrage plein écran */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay : bandeau sombre en haut (lisibilité du header, quelle que soit
   la vidéo) + voile léger au centre + bas assombri pour le texte */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      to bottom,
      rgb(0 0 0 / 0.65) 0,
      rgb(0 0 0 / 0.35) calc(var(--header-height) * 1.5),
      rgb(0 0 0 / 0) calc(var(--header-height) * 3)
    ),
    linear-gradient(
      to bottom,
      rgb(20 6 6 / 0.35) 0%,
      rgb(20 6 6 / 0.45) 60%,
      rgb(20 6 6 / 0.7) 100%
    );
}

.hero__content {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}

/* Accueil : le bandeau est en haut du hero (pages/index.html). Bandeau + hero
   tiennent dans un écran : le contenu du hero se centre dans la place restante,
   ses boutons ne passent jamais sous la ligne de flottaison. Le bandeau (fond
   opaque) passe au-dessus de la vidéo et du voile, sous le header transparent. */
.hero--avec-annonces {
  flex-direction: column;
  align-items: stretch;
  padding-top: 0;
}

.hero--avec-annonces .hero__content {
  margin-block: auto;
  padding-top: var(--space-xl);
}

/* Écrans peu hauts (petits téléphones) : espacements resserrés pour que les
   boutons restent visibles même avec deux annonces */
@media (max-height: 700px) {
  .hero--avec-annonces {
    padding-bottom: var(--space-md);
  }

  .hero--avec-annonces .hero__content {
    padding-top: var(--space-sm);
  }

  .hero--avec-annonces .hero__title {
    margin-bottom: var(--space-xs);
  }

  .hero--avec-annonces .hero__subtitle {
    margin-bottom: var(--space-md);
  }
}

.hero__eyebrow {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.hero__title {
  margin-bottom: var(--space-md);
  font-size: var(--fs-h1);
  color: var(--color-white);
  text-shadow: 0 2px 12px rgb(0 0 0 / 0.4);
}

.hero__subtitle {
  max-width: 34rem;
  margin: 0 auto var(--space-xl);
  font-size: var(--fs-lg);
  color: rgb(255 255 255 / 0.9);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 20rem;
  margin-inline: auto;
}

@media (min-width: 600px) {
  .hero__actions {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }
}

/* ---------- Bouton pause / lecture de la vidéo ---------- */
.hero__video-toggle {
  position: absolute;
  right: var(--gutter);
  bottom: var(--space-lg);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.35);
  color: var(--color-white);
  transition: background-color var(--transition);
}

.hero__video-toggle:hover {
  background: rgb(0 0 0 / 0.6);
}

/* Icône pause (deux barres) */
.hero__video-toggle-icon {
  width: 12px;
  height: 14px;
  border-inline: 4px solid currentColor;
}

/* Icône lecture (triangle) quand la vidéo est en pause */
.hero__video-toggle[aria-pressed="true"] .hero__video-toggle-icon {
  width: 0;
  height: 0;
  margin-left: 4px;
  border-inline: 0;
  border-block: 8px solid transparent;
  border-left: 13px solid currentColor;
}

/* Pas de vidéo chargée : on masque le bouton */
.hero--no-video .hero__video,
.hero--no-video .hero__video-toggle {
  display: none;
}


/* ==========================================================================
   7. Menu (onglets + cartes de plats)
   Blocs : .menu (section) et .menu-card (carte d'un plat, réutilisable seule)
   ========================================================================== */

/* ---------- Onglets de catégories ---------- */
.menu__tabs {
  display: flex;
  gap: var(--space-xs);
  margin: 0 calc(var(--gutter) * -1) var(--space-xl);
  padding: var(--space-xs) var(--gutter);
  overflow-x: auto; /* défilement horizontal sur petit écran */
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.menu__tabs::-webkit-scrollbar {
  display: none;
}

@media (min-width: 600px) {
  .menu__tabs {
    justify-content: center;
    flex-wrap: wrap;
    margin-inline: 0;
    padding-inline: 0;
    overflow: visible;
  }
}

.menu__tab {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.6rem 1.4rem;
  border: 2px solid var(--color-red);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-red);
  font-weight: 600;
  scroll-snap-align: center;
  transition: background-color var(--transition), color var(--transition);
}

.menu__tab:hover {
  background: rgb(193 39 45 / 0.08);
}

.menu__tab--active,
.menu__tab--active:hover {
  background: var(--color-red);
  color: var(--color-white);
}

/* ---------- Panneaux ---------- */
.menu__panel[hidden] {
  display: none;
}

.menu__panel {
  animation: menu-fade-in 0.35s ease;
}

@keyframes menu-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.menu__note {
  margin-bottom: var(--space-lg);
  font-style: italic;
  text-align: center;
  color: var(--color-text-muted);
}

.menu__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  padding: 0;
  list-style: none;
}

@media (min-width: 600px) {
  .menu__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .menu__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.menu__item {
  display: flex; /* cartes de même hauteur sur une ligne */
}

.menu__status {
  padding: var(--space-xl) 0;
  text-align: center;
  color: var(--color-text-muted);
}

.menu__status--error {
  color: var(--color-red-dark);
}

/* ---------- Carte de plat ---------- */
.menu-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition);
}

.menu-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

/* Le logo sert de fond permanent : visible pendant le chargement de la photo,
   puis recouvert par celle-ci (ou seul si la photo est absente) */
.menu-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-logo-red) url("../images/logo.jpg") center / auto 75% no-repeat;
}

.menu-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.menu-card:hover .menu-card__image {
  transform: scale(1.05);
}

/* Photo absente ou introuvable : on masque l'image (icône cassée) → logo seul */
.menu-card__media--placeholder .menu-card__image {
  display: none;
}

.menu-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-lg);
}

/* Catégorie du plat (affichée sur les spécialités, vide sur la carte complète) */
.menu-card__category {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-red);
}

.menu-card__category:empty {
  display: none;
}

.menu-card__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}

.menu-card__name {
  margin: 0;
  font-size: var(--fs-h3);
  color: var(--color-text);
}

.menu-card__price {
  flex-shrink: 0;
  font-variant-numeric: lining-nums tabular-nums;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-red);
  white-space: nowrap;
}

.menu-card__description {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.menu-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: auto; /* étiquettes en bas de carte */
  padding: var(--space-xs) 0 0;
  list-style: none;
}

.menu-card__tags:empty {
  display: none;
}

.menu-card__tag {
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: var(--color-sand);
  color: var(--color-text);
}

.menu-card__tag--specialite {
  background: var(--color-gold);
  color: var(--color-red-darker);
}

.menu-card__tag--vegetarien {
  background: #E3F1DF;
  color: #2E5E27;
}

.menu-card__tag--epice {
  background: #FBE1D8;
  color: #9A2A12;
}

/* --compact : sur mobile, vignette carrée à gauche (liste rapide à parcourir).
   Utilisé sur la carte complète (menu.html) ; les spécialités gardent la grande photo. */
@media (max-width: 599px) {
  .menu__grid {
    gap: var(--space-sm);
  }

  .menu-card--compact {
    flex-direction: row;
  }

  .menu-card--compact:hover {
    transform: none;
  }

  .menu-card--compact .menu-card__media {
    flex: 0 0 96px;
    aspect-ratio: auto;
    min-height: 96px;
  }

  .menu-card--compact .menu-card__body {
    gap: 0.25rem;
    padding: var(--space-sm) var(--space-md);
  }

  .menu-card--compact .menu-card__name,
  .menu-card--compact .menu-card__price {
    font-size: 1.0625rem;
  }

  .menu-card--compact .menu-card__tags {
    padding-top: 0.25rem;
  }
}


/* ---------- Bas de la carte complète (menu.html) ---------- */
/* Allergènes sous chaque plat (cartes et liste compacte) */
.allergenes {
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--color-text);
}

.allergenes__libelle {
  font-weight: 600;
  color: var(--color-red-dark);
}

.allergenes--aucun {
  color: var(--color-text-muted);
}

.menu__legal {
  max-width: 40rem;
  margin: var(--space-xl) auto 0;
  font-size: var(--fs-sm);
  font-style: italic;
  text-align: center;
  color: var(--color-text-muted);
}

.menu__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}


/* ---------- Sous-groupes : liste compacte (ex. boissons) ----------
   Bloc .menu-groups : « nom …… prix » sur une ligne, sans cartes ni images,
   1 colonne sur mobile, jusqu'à 3 sur desktop (esprit du menu imprimé). */
.menu-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-lg);
}

/* Si la catégorie a aussi des cartes, on les sépare de la liste */
.menu__grid + .menu-groups {
  margin-top: var(--space-xl);
}

.menu-groups__group {
  padding: var(--space-lg);
  border-radius: var(--radius);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.menu-groups__title {
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-gold);
  font-size: var(--fs-h3);
  color: var(--color-red);
}

.menu-groups__list {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Alignement en bas : si le nom passe sur 2 lignes, pointillés et prix
   restent sur la dernière ligne */
.menu-groups__line {
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs);
}

.menu-groups__name {
  flex: 0 1 auto;
  font-weight: 500;
}

.menu-groups__leader {
  flex: 1 1 1rem;
  min-width: 1rem;
  margin-bottom: 0.35em;
  border-bottom: 2px dotted rgb(43 26 18 / 0.25);
}

.menu-groups__price {
  flex-shrink: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
  color: var(--color-red);
}

.menu-groups__description {
  margin-top: 0.15rem;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}


/* ==========================================================================
   7 bis. Nos spécialités (accueil)
   Bloc .specialties : sélection de cartes .menu-card + lien vers menu.html
   ========================================================================== */

/* Mobile : carrousel horizontal (grandes photos) ; desktop : grille 3 colonnes */
.specialties__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 80%;
  gap: var(--space-md);
  margin: 0 calc(var(--gutter) * -1);
  padding: var(--space-xs) var(--gutter) var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--color-red) transparent;
}

.specialties__grid[hidden] {
  display: none;
}

@media (min-width: 600px) {
  .specialties__grid {
    grid-auto-columns: 45%;
  }
}

@media (min-width: 1000px) {
  .specialties__grid {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

.specialties__item {
  display: flex; /* cartes de même hauteur */
  scroll-snap-align: start;
}

.specialties__status {
  grid-column: 1 / -1;
  padding: var(--space-xl) 0;
  text-align: center;
  color: var(--color-text-muted);
}

.specialties__actions {
  margin-top: var(--space-xl);
  text-align: center;
}


/* ==========================================================================
   8. Galerie + visionneuse plein écran (lightbox)
   Blocs : .gallery (grille de vignettes) et .lightbox (visionneuse <dialog>)
   ========================================================================== */

/* ---------- Grille ---------- */
.gallery__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  padding: 0;
  list-style: none;
}

@media (min-width: 900px) {
  .gallery__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
  }

  /* Grande vignette 2×2 */
  .gallery__item--featured {
    grid-column: span 2;
    grid-row: span 2;
  }
}

.gallery__item {
  aspect-ratio: 1 / 1;
}

.gallery__link {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  cursor: zoom-in;
}

.gallery__figure {
  height: 100%;
}

.gallery__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery__link:hover .gallery__image,
.gallery__link:focus-visible .gallery__image {
  transform: scale(1.06);
}

.gallery__caption {
  position: absolute;
  inset: auto 0 0;
  padding: var(--space-xl) var(--space-md) var(--space-sm);
  background: linear-gradient(to top, rgb(0 0 0 / 0.7), transparent);
  color: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* Sur écran avec souris : légende révélée au survol */
@media (hover: hover) {
  .gallery__caption {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--transition), transform var(--transition);
  }

  .gallery__link:hover .gallery__caption,
  .gallery__link:focus-visible .gallery__caption {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Visionneuse plein écran ---------- */
.lightbox {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 4rem var(--gutter) 5.5rem;
  border: 0;
  background: rgb(15 6 6 / 0.96);
  color: var(--color-white);
  touch-action: pan-y; /* le glissement horizontal est géré en JS */
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  animation: lightbox-fade-in 0.25s ease;
}

.lightbox::backdrop {
  background: rgb(0 0 0 / 0.6);
}

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

@media (min-width: 900px) {
  .lightbox {
    padding: 4rem 6rem;
  }
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
  max-height: 100%;
}

.lightbox__image {
  width: auto;
  max-width: 100%;
  max-height: calc(100svh - 11rem);
  object-fit: contain;
  border-radius: var(--radius);
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity 0.2s ease;
}

.lightbox__image--loading {
  opacity: 0;
}

.lightbox__caption {
  margin-top: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  text-align: center;
}

.lightbox__counter {
  position: absolute;
  top: var(--space-md);
  left: var(--gutter);
  font-size: var(--fs-sm);
  letter-spacing: 0.1em;
  color: rgb(255 255 255 / 0.75);
}

.lightbox__button {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.12);
  color: var(--color-white);
  font-size: 2rem;
  line-height: 1;
  transition: background-color var(--transition), color var(--transition);
}

.lightbox__button:hover {
  background: var(--color-gold);
  color: var(--color-red-darker);
}

.lightbox__button--close {
  top: var(--space-sm);
  right: var(--gutter);
}

/* Mobile : flèches en bas, à portée de pouce */
.lightbox__button--prev,
.lightbox__button--next {
  bottom: var(--space-lg);
}

.lightbox__button--prev {
  left: var(--gutter);
}

.lightbox__button--next {
  right: var(--gutter);
}

/* Desktop : flèches centrées verticalement sur les côtés */
@media (min-width: 900px) {
  .lightbox__button--prev,
  .lightbox__button--next {
    top: 50%;
    bottom: auto;
    width: 56px;
    height: 56px;
    transform: translateY(-50%);
  }

  .lightbox__button--prev {
    left: var(--space-lg);
  }

  .lightbox__button--next {
    right: var(--space-lg);
  }
}

/* Une seule photo : pas de navigation */
.lightbox--single .lightbox__button--prev,
.lightbox--single .lightbox__button--next,
.lightbox--single .lightbox__counter {
  display: none;
}


/* ==========================================================================
   9. Avis clients (cartes + bouton + QR code Google)
   Blocs : .reviews (section) et .review-card (carte d'avis, réutilisable seule)
   ========================================================================== */

/* Sans avis dans CONFIG.reviews : note et liste masquées (attribut hidden),
   malgré leur display inline-flex / grid. Section entière masquée si ni
   avis ni lien Google. */
.reviews[hidden],
.reviews__summary[hidden],
.reviews__list[hidden] {
  display: none;
}

/* ---------- Note moyenne ---------- */
.reviews__summary {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs) var(--space-sm);
  font-size: var(--fs-lg);
  color: rgb(255 255 255 / 0.9);
}

.reviews__summary-stars {
  font-size: 1.25rem;
  letter-spacing: 0.1em;
  color: var(--color-gold);
}

/* ---------- Liste d'avis : carrousel horizontal sur mobile, grille sur desktop ---------- */
/* Mention légale sous les avis (origine, sélection, classement, contrôle) */
.reviews__mention {
  max-width: 44rem;
  margin: var(--space-lg) auto 0;
  font-size: var(--fs-sm);
  text-align: center;
  color: rgb(255 255 255 / 0.75);
}

.reviews__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 85%;
  gap: var(--space-md);
  margin: 0 calc(var(--gutter) * -1);
  padding: var(--space-xs) var(--gutter) var(--space-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  list-style: none;
  scrollbar-width: thin;
  scrollbar-color: var(--color-gold) transparent;
}

@media (min-width: 600px) {
  .reviews__list {
    grid-auto-columns: 60%;
  }
}

@media (min-width: 900px) {
  .reviews__list {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin: 0;
    padding: 0;
    overflow: visible;
  }
}

.reviews__item {
  display: flex;
  scroll-snap-align: start;
}

/* ---------- Carte d'avis ---------- */
.review-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  width: 100%;
  padding: var(--space-lg);
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-text);
  box-shadow: var(--shadow-md);
}

/* Grand guillemet décoratif */
.review-card::before {
  content: "\201C";
  position: absolute;
  top: 0.25rem;
  right: 1rem;
  font-family: var(--font-heading);
  font-size: 5rem;
  line-height: 1;
  color: rgb(193 39 45 / 0.12);
  pointer-events: none;
}

.review-card__rating {
  font-size: 1.125rem;
  letter-spacing: 0.1em;
  color: var(--color-gold-dark);
}

.review-card__star--empty {
  color: #DDD3C4;
}

.review-card__text {
  flex: 1;
  font-style: italic;
  line-height: 1.7;
}

.review-card__footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-sand);
}

.review-card__author {
  font-weight: 600;
}

.review-card__source {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* ---------- Appel à laisser un avis ---------- */
.reviews__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  max-width: 48rem;
  margin: var(--space-xl) auto 0;
  padding: var(--space-xl) var(--space-lg);
  border: 1px solid rgb(255 199 44 / 0.35);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 0.06);
  text-align: center;
}

.reviews__cta[hidden] {
  display: none;
}

.reviews__cta-title {
  margin-bottom: var(--space-xs);
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--color-gold);
}

.reviews__cta-desc {
  margin-bottom: var(--space-lg);
  color: rgb(255 255 255 / 0.85);
}

/* QR code : inutile de scanner l'écran du téléphone qu'on tient → desktop seulement */
.reviews__qr {
  display: none;
}

@media (min-width: 900px) {
  .reviews__cta {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-xl);
    padding: var(--space-xl) var(--space-2xl);
    text-align: left;
  }

  .reviews__qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    gap: var(--space-xs);
  }
}

.reviews__qr-code {
  width: 160px;
  height: 160px;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-white);
  color: var(--color-red-darker); /* couleur des modules (assez sombre pour la lecture) */
}

.reviews__qr-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.reviews__qr-caption {
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 0.75);
}


/* ==========================================================================
   10. Localisation (coordonnées + carte)
   ========================================================================== */
.location__inner {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 900px) {
  .location__inner {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    align-items: stretch;
  }
}

.location__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.location__block[hidden] {
  display: none;
}

.location__label {
  margin-bottom: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-red);
}

.location__address {
  font-size: var(--fs-lg);
  font-style: normal;
  line-height: 1.5;
}

.location__phone {
  font-variant-numeric: lining-nums;
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: 700;
  text-decoration: none;
  color: var(--color-text);
}

.location__phone:hover {
  color: var(--color-red);
}

.location__access {
  color: var(--color-text-muted);
}

.location__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: auto;
}

.location__actions .btn {
  flex: 1 1 10rem;
}

.location__map {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-sand);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
}

@media (min-width: 900px) {
  .location__map {
    aspect-ratio: auto;
    min-height: 400px;
  }
}

.location__iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Aperçu avant chargement de la carte (RGPD) ---------- */
.map-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  height: 100%;
  min-height: 280px;
  padding: var(--space-lg);
  text-align: center;
  /* Plan stylisé : rues en diagonale + quadrillage, dessinés en CSS */
  background:
    radial-gradient(circle at 50% 45%, rgb(255 248 236 / 0.95) 0 6rem, transparent 12rem),
    repeating-linear-gradient(35deg, transparent 0 46px, rgb(255 255 255 / 0.9) 46px 54px),
    repeating-linear-gradient(-55deg, transparent 0 70px, rgb(255 255 255 / 0.7) 70px 76px),
    repeating-linear-gradient(0deg, transparent 0 23px, rgb(43 26 18 / 0.05) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgb(43 26 18 / 0.05) 23px 24px),
    #EADBC0;
}

/* Épingle rouge avec point doré */
.map-consent__pin {
  position: relative;
  width: 44px;
  height: 44px;
  margin-bottom: var(--space-xs);
  border-radius: 50% 50% 50% 0;
  background: var(--color-red);
  box-shadow: var(--shadow-md);
  transform: rotate(-45deg);
}

.map-consent__pin::after {
  content: "";
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: var(--color-gold);
}

.map-consent__address {
  font-variant-numeric: lining-nums;
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
}

.map-consent__note {
  max-width: 22rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.map-consent__link {
  color: var(--color-red);
}


/* ==========================================================================
   11. Horaires (tableau + statut ouvert/fermé)
   ========================================================================== */

/* ---------- Statut en temps réel ---------- */
.hours__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.4rem 1rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
}

.hours__status[hidden] {
  display: none;
}

/* Pastille de couleur */
.hours__status::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: currentColor;
}

.hours__status--open {
  background: #E3F1DF;
  color: #2E5E27;
}

.hours__status--closing-soon {
  background: #FFF0CC;
  color: #8A5A00;
}

.hours__status--closed {
  background: #FBE1D8;
  color: var(--color-red-dark);
}

/* ---------- Tableau ---------- */
.hours__table {
  width: 100%;
  max-width: 36rem;
  margin-inline: auto;
  border-collapse: collapse;
}

.hours__row {
  border-bottom: 1px solid rgb(43 26 18 / 0.1);
}

.hours__row:last-child {
  border-bottom: 0;
}

.hours__day,
.hours__time {
  padding: var(--space-sm) var(--space-md);
  vertical-align: top;
}

.hours__day {
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.hours__time {
  text-align: right;
}

.hours__time--closed {
  font-style: italic;
  color: var(--color-text-muted);
}

/* Jour en cours mis en avant */
.hours__row--today {
  background: var(--color-white);
  box-shadow: inset 4px 0 0 var(--color-gold);
}

.hours__row--today .hours__day {
  color: var(--color-red);
}

.hours__today {
  display: inline-block;
  margin-left: var(--space-xs);
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-gold);
  color: var(--color-red-darker);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Petits écrans : jour et créneaux empilés */
@media (max-width: 479px) {
  .hours__row {
    display: block;
    padding-block: var(--space-xs);
  }

  .hours__day,
  .hours__time {
    display: block;
    padding-block: 0.15rem;
    text-align: left;
  }
}

.hours__note {
  max-width: 36rem;
  margin: var(--space-lg) auto 0;
  font-style: italic;
  text-align: center;
  color: var(--color-text-muted);
}

.hours__note[hidden] {
  display: none;
}


/* ==========================================================================
   12. À propos
   ========================================================================== */
.about__inner {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 900px) {
  .about__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Sans photo : le texte seul, centré, plutôt qu'une colonne vide */
  .about__inner--texte-seul {
    grid-template-columns: minmax(0, 48rem);
    justify-content: center;
  }
}

.about__lead {
  margin-bottom: var(--space-md);
  font-size: var(--fs-lg);
  font-weight: 500;
}

.about__desc {
  color: var(--color-text-muted);
}

.about__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding: 0;
  list-style: none;
}

.about__feature {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 0.5rem 1rem;
  border: 1px solid rgb(193 39 45 / 0.2);
  border-radius: var(--radius-pill);
  background: var(--color-white);
  font-size: var(--fs-sm);
}

.about__feature-icon {
  color: var(--color-red);
}

.about__feature-text strong {
  color: var(--color-red);
}

/* Photo avec cadre doré décalé */
.about__media {
  position: relative;
  isolation: isolate;
  margin: 0 var(--space-md) var(--space-md) 0;
}

.about__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 3px solid var(--color-gold);
  border-radius: var(--radius);
  transform: translate(var(--space-md), var(--space-md));
}

.about__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}


/* ==========================================================================
   13. Footer + réseaux sociaux
   Blocs : .site-footer et .social (liste d'icônes, réutilisable seule)
   ========================================================================== */
.site-footer {
  padding-top: var(--space-2xl);
  background: var(--color-red-darker);
  color: rgb(255 255 255 / 0.85);
  font-size: var(--fs-sm);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 600px) {
  .site-footer__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .site-footer__inner {
    grid-template-columns: 1.3fr 1fr 1.2fr 0.8fr;
  }
}

.site-footer__col[hidden] {
  display: none;
}

.site-footer__logo {
  width: 96px;
  height: 96px;
  border: 2px solid var(--color-gold);
  border-radius: 50%;
  object-fit: cover;
}

.site-footer__tagline {
  max-width: 18rem;
  margin-top: var(--space-md);
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-style: italic;
  color: rgb(255 255 255 / 0.75);
}

.site-footer__title {
  margin-bottom: var(--space-md);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.site-footer__address {
  font-style: normal;
  line-height: 1.9;
}

.site-footer__link {
  color: var(--color-white);
  text-decoration: none;
  transition: color var(--transition);
}

.site-footer__link:hover {
  color: var(--color-gold);
  text-decoration: underline;
}

/* Lien au milieu d'un texte : souligné en permanence (accessibilité) */
.site-footer__link--underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Horaires résumés ---------- */
.site-footer__hours {
  display: grid;
  gap: var(--space-xs);
  padding: 0;
  list-style: none;
}

.site-footer__hours-item {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
}

.site-footer__hours-days {
  flex-shrink: 0;
  font-weight: 600;
  color: var(--color-white);
}

.site-footer__hours-time {
  text-align: right;
}

.site-footer__hours-time--closed {
  font-style: italic;
  color: rgb(255 255 255 / 0.55);
}

/* ---------- Réseaux sociaux ---------- */
.social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: 0;
  list-style: none;
}

.social__link {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 199 44 / 0.5);
  border-radius: 50%;
  color: var(--color-white);
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition), transform var(--transition);
}

.social__link:hover {
  border-color: var(--color-gold);
  background: var(--color-gold);
  color: var(--color-red-darker);
  transform: translateY(-2px);
}

.social__icon {
  width: 20px;
  height: 20px;
}

/* ---------- Barre du bas ---------- */
.site-footer__bottom {
  margin-top: var(--space-2xl);
  padding-block: var(--space-md);
  border-top: 1px solid rgb(255 199 44 / 0.2);
}

.site-footer__bottom-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.site-footer__legal {
  color: rgb(255 255 255 / 0.6);
}

.site-footer__top {
  color: var(--color-gold);
  font-weight: 500;
  text-decoration: none;
}

.site-footer__top:hover {
  text-decoration: underline;
}


/* ==========================================================================
   14. En-tête de page (pages secondaires : mentions légales, etc.)
   ========================================================================== */
.page-header {
  padding-block: var(--space-2xl) var(--space-xl);
  background:
    radial-gradient(ellipse at 80% 0%, rgb(255 199 44 / 0.15), transparent 60%),
    linear-gradient(160deg, var(--color-red) 0%, var(--color-red-dark) 100%);
  color: var(--color-white);
  text-align: center;
}

.page-header__eyebrow {
  margin-bottom: var(--space-xs);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.page-header__title {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-h2);
}

.page-header__meta {
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 0.75);
}


/* ==========================================================================
   15. Mentions légales
   ========================================================================== */
.legal__inner {
  max-width: 48rem;
}

.legal p + p {
  margin-top: var(--space-sm);
}

/* ---------- Sommaire ---------- */
.legal__toc {
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius);
  background: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.legal__toc-title {
  margin-bottom: var(--space-xs);
  font-weight: 600;
  color: var(--color-red);
}

.legal__toc-list {
  padding-left: 1.25rem;
  columns: 1;
}

@media (min-width: 600px) {
  .legal__toc-list {
    columns: 2;
    column-gap: var(--space-xl);
  }
}

.legal__toc-link {
  display: inline-block;
  padding-block: 0.15rem;
  text-decoration: none;
}

.legal__toc-link:hover {
  color: var(--color-red);
  text-decoration: underline;
}

/* ---------- Sections ---------- */
.legal__section {
  padding-block: var(--space-lg);
  border-bottom: 1px solid rgb(43 26 18 / 0.1);
}

.legal__title {
  margin-bottom: var(--space-md);
  font-size: var(--fs-h3);
  color: var(--color-red);
}

.legal__link {
  color: var(--color-red);
  text-underline-offset: 2px;
}

.legal__link:hover {
  color: var(--color-red-dark);
}

.legal__bullets {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  padding-left: 1.25rem;
}

/* ---------- Liste de coordonnées (dt / dd) ---------- */
.legal__list {
  display: grid;
  margin: var(--space-md) 0 0;
}

.legal__row {
  display: grid;
  gap: 0.15rem;
  padding-block: var(--space-sm);
  border-bottom: 1px dashed rgb(43 26 18 / 0.12);
}

.legal__row:last-child {
  border-bottom: 0;
}

@media (min-width: 600px) {
  .legal__row {
    grid-template-columns: 14rem 1fr;
    gap: var(--space-md);
  }
}

.legal__term {
  font-weight: 600;
}

.legal__value {
  margin: 0;
  overflow-wrap: anywhere;
}

.legal__back {
  margin-top: var(--space-xl);
  text-align: center;
}


/* ==========================================================================
   16. Animations (entrée du hero + apparition au scroll)
   Désactivées automatiquement avec prefers-reduced-motion (voir section 2).
   ========================================================================== */

/* ---------- Entrée du hero, élément par élément ---------- */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* Le titre reste visible dès le premier affichage (simple glissement) :
   un élément invisible retarderait la mesure LCP de Google */
@keyframes slide-up {
  from { transform: translateY(16px); }
  to   { transform: none; }
}

.hero__eyebrow,
.hero__subtitle,
.hero__actions {
  animation: fade-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero__title {
  animation: slide-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.hero__subtitle { animation-delay: 0.24s; }
.hero__actions  { animation-delay: 0.36s; }

/* ---------- Apparition au scroll (classes ajoutées par script.js) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.7s ease var(--reveal-delay, 0ms),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms);
}

.reveal--visible {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   17. Plat du jour (tableau à la craie)
   Structure : .daily-special__board (apparition au scroll)
               > __frame (cadre en bois, légère rotation)
                 > __slate (ardoise)
   Tout est dessiné en CSS : aucune image.
   ========================================================================== */
.daily-special {
  --chalk: #F3F0E8;
  --chalk-soft: rgb(243 240 232 / 0.82);  /* contraste ≈ 10:1 sur l'ardoise */
  --chalk-faint: rgb(243 240 232 / 0.72); /* contraste ≈ 8:1 */
  --chalk-gold: #FFD970;
  --slate: #25292A;
}

/* Tous les éléments facultatifs du tableau respectent l'attribut hidden */
.daily-special[hidden],
.daily-special [hidden] {
  display: none !important;
}

.daily-special__board {
  max-width: 42rem;
  margin-inline: auto;
}

/* ---------- Cadre en bois ---------- */
.daily-special__frame {
  position: relative;
  padding: clamp(10px, 2.5vw, 18px);
  border-radius: 10px;
  background:
    /* veinage du bois */
    repeating-linear-gradient(90deg,
      rgb(0 0 0 / 0.07) 0 2px, transparent 2px 9px,
      rgb(255 255 255 / 0.05) 9px 10px, transparent 10px 17px),
    linear-gradient(135deg, #8A5A34 0%, #6B4226 40%, #7C4F2D 70%, #5A361E 100%);
  box-shadow:
    0 18px 30px -10px rgb(43 26 18 / 0.45),
    0 4px 8px rgb(43 26 18 / 0.25),
    inset 0 1px 0 rgb(255 255 255 / 0.18),
    inset 0 -2px 0 rgb(0 0 0 / 0.25);
  transform: rotate(-1.5deg);
}

/* Morceau de craie posé sur le rebord du cadre */
.daily-special__frame::after {
  content: "";
  position: absolute;
  right: 18%;
  bottom: calc(clamp(10px, 2.5vw, 18px) / 2 - 3px);
  width: 38px;
  height: 7px;
  border-radius: 3px;
  background: linear-gradient(to bottom, #FFFFFF, #E4E0D6);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.4);
}

/* Pas de rotation si « réduire les animations » est activé */
@media (prefers-reduced-motion: reduce) {
  .daily-special__frame {
    transform: none;
  }
}

/* ---------- Ardoise ---------- */
.daily-special__slate {
  padding: clamp(1.5rem, 1rem + 3vw, 3rem) clamp(1.25rem, 0.75rem + 3vw, 3rem);
  border-radius: 4px;
  background:
    /* traces d'effacement (coups d'éponge) */
    radial-gradient(ellipse 45% 30% at 22% 28%, rgb(255 255 255 / 0.055), transparent 70%),
    radial-gradient(ellipse 35% 22% at 78% 64%, rgb(255 255 255 / 0.045), transparent 70%),
    radial-gradient(ellipse 60% 16% at 50% 90%, rgb(255 255 255 / 0.035), transparent 70%),
    /* grain de l'ardoise */
    repeating-linear-gradient(115deg, rgb(255 255 255 / 0.018) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-20deg, rgb(0 0 0 / 0.07) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at center, #2E3334 0%, #202425 100%);
  background-color: var(--slate);
  box-shadow:
    inset 0 0 0 2px rgb(0 0 0 / 0.35),
    inset 0 0 40px rgb(0 0 0 / 0.5);
  color: var(--chalk);
  font-family: var(--font-chalk);
  /* Léger halo poudreux de la craie */
  text-shadow: 0 0 1px rgb(255 255 255 / 0.25), 0 0 8px rgb(255 255 255 / 0.06);
}

/* ---------- Date et titre ---------- */
.daily-special__date {
  font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.6rem);
  text-align: center;
  color: var(--chalk-soft);
}

.daily-special__title {
  margin: 0 0 clamp(1.25rem, 1rem + 1vw, 2rem);
  font-family: var(--font-chalk);
  font-size: clamp(3rem, 2.2rem + 4vw, 4.5rem);
  font-weight: 700;
  line-height: 1.05;
  text-align: center;
  color: var(--chalk);
  /* Trait ondulé à la craie sous le titre */
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--chalk-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: none;
}

/* ---------- Plats ---------- */
.daily-special__list {
  display: grid;
  gap: 1.1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Alignement en bas : si le nom passe sur 2 lignes, pointillés et prix
   s'alignent sur la dernière ligne (comme sur une vraie ardoise) */
.daily-special__item-header {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

.daily-special__name,
.daily-special__price {
  margin: 0;
  font-family: var(--font-chalk);
  font-size: clamp(1.6rem, 1.35rem + 1vw, 2.1rem); /* jamais sous ≈ 26 px */
  line-height: 1.15;
}

.daily-special__name {
  flex: 0 1 auto;
  font-weight: 600;
  color: var(--chalk);
}

/* Pointillés entre le nom et le prix */
.daily-special__leader {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  margin-bottom: 0.4em;
  border-bottom: 2px dotted rgb(243 240 232 / 0.45);
}

.daily-special__price {
  flex-shrink: 0;
  font-weight: 700;
  white-space: nowrap;
  color: var(--chalk-gold);
  font-variant-numeric: lining-nums;
}

.daily-special__description {
  margin-top: 0.15rem;
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.4rem); /* jamais sous 20 px */
  line-height: 1.3;
  color: var(--chalk-soft);
}

/* ---------- Formule (encadré tracé à main levée) et note ---------- */
.daily-special__formula {
  width: fit-content;
  max-width: 100%;
  margin: clamp(1.5rem, 1.2rem + 1vw, 2rem) auto 0;
  padding: 0.4rem 1.25rem;
  border: 2px solid var(--chalk-gold);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--chalk);
}

.daily-special__note {
  margin-top: 1.25rem;
  font-size: clamp(1.25rem, 1.15rem + 0.4vw, 1.4rem);
  text-align: center;
  color: var(--chalk-faint);
}

/* ---------- Bouton sous le tableau ---------- */
.daily-special__actions {
  margin-top: var(--space-xl);
  text-align: center;
}