/**
 * Antica Pizzeria — feuille de style.
 *
 * Direction « braise » : la nuit du lieu — brique noire, lumière basse —
 * et pour seul accent la couleur de sa lumière : le laiton chaud de
 * l'ampoule sur la brique, du reflet sur la vespa, de la braise vue de
 * loin.
 *
 * Les jetons portent le nom de leur RÔLE, jamais celui du pigment. Les
 * pigments de marque (--p-…) n'alimentent que les jetons : aucune règle ne
 * les emploie directement, si bien qu'une couleur peut changer sans relire
 * la feuille. C'est aussi ce qui permet à l'administration de repeindre le
 * site en écrivant trois variables.
 */

/* ── Pigments et jetons ──────────────────────────────────────────────── */

:root {
  /* Pigments de marque — seuls les jetons ci-dessous les emploient.
     Ce sont EXACTEMENT les six que l'administration sait repeindre
     (section « Thème et couleurs ») : avec moins, changer de palette ne
     toucherait qu'une partie du site. */
  --p-charbon: #12100e;      /* theme.nuit         */
  --p-suie: #201a14;         /* theme.suie         */
  --p-carte: #2a231b;        /* theme.fondCarte    */
  --p-accent: #c9a227;       /* theme.accent       */
  --p-accent-sombre: #a8811a; /* theme.accentSombre */
  --p-creme: #f7f3ec;        /* theme.creme        */
  --p-accent-texte: #14100d; /* theme.accentTexte  */
  /* La cendre se déduit de la crème : un gris chaud qui tient le contraste
     sur les fonds sombres sans être une septième couleur à régler. */
  --p-cendre: color-mix(in srgb, var(--p-creme) 82%, var(--p-charbon));

  /* Rôles */
  --fond: var(--p-charbon);
  --fond-2: var(--p-suie);
  --fond-carte: var(--p-carte);
  --texte: var(--p-creme);
  --texte-doux: var(--p-cendre);
  --accent: var(--p-accent);
  --accent-sombre: var(--p-accent-sombre);
  --accent-texte: var(--p-accent-texte);
  --lisere: color-mix(in srgb, var(--p-creme) 14%, transparent);
  --lisere-fort: color-mix(in srgb, var(--p-creme) 26%, transparent);
  --voile: color-mix(in srgb, var(--p-charbon) 72%, transparent);

  /* Alias attendus par les modules du parc (réservation, commande) et par
     l'éditeur en ligne — ils lisent ces noms-là, pas les nôtres. Sans eux,
     leurs replis en dur reprennent la main et ramènent les couleurs d'un
     autre site. */
  --couleur-primaire: var(--accent);
  --couleur-fond: var(--fond);
  --couleur-texte: var(--texte);
  --couleur-bordure: var(--lisere);
  --primary-color: var(--accent);
  --secondary-color: var(--accent);
  --accent-color: var(--accent);

  /* Rythme */
  --enveloppe: 1280px;
  --marge: clamp(1.15rem, 4vw, 3rem);
  --section-y: clamp(3.75rem, 9vw, 7.5rem);
  --rayon: 14px;
  --rayon-s: 9px;
  --haut-entete: 88px;

  --police-titre: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --police-texte: 'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --police-main: 'Fraunces', Georgia, 'Times New Roman', serif;

  --transition: 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ── Réinitialisation ────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  /* Coupe le double-tap qui zoome et les 300 ms d'attente avant le clic.
     Le pincement, lui, reste possible. */
  touch-action: manipulation;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--haut-entete) + 1.5rem);
}

body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: clamp(1.02rem, 0.98rem + 0.24vw, 1.13rem);
  line-height: 1.72;
  /* 400, pas 300 : sur fond sombre, une graisse d'affichage perd ses
     déliés et le texte paraît délavé même quand le contraste passe AA. */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p { text-wrap: pretty; }

ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Ossature ────────────────────────────────────────────────────────── */

.enveloppe {
  width: 100%;
  max-width: var(--enveloppe);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.section { padding-block: var(--section-y); background: var(--fond); }
/* L'alternance : la valeur seule ne suffit pas à se voir sur du très
   sombre — un filet en marque la rupture, et le fond prend une pointe
   chaude plutôt qu'un simple gris plus clair. */
.section--sombre {
  background: var(--fond-2);
  border-top: 1px solid color-mix(in srgb, var(--texte) 7%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--texte) 7%, transparent);
}
.section--vide { min-height: 70vh; display: grid; place-items: center; }

.saut-contenu {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -110%);
  z-index: 200;
  background: var(--accent);
  color: var(--accent-texte);
  padding: 0.6rem 1.2rem;
  border-radius: 0 0 var(--rayon-s) var(--rayon-s);
  font-weight: 500;
  transition: transform var(--transition);
}
.saut-contenu:focus { transform: translate(-50%, 0); }

/* ── Titres ──────────────────────────────────────────────────────────── */

.surtitre {
  font-family: var(--police-main);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.15rem, 1.02rem + 0.4vw, 1.45rem);
  letter-spacing: 0.02em;
  color: var(--accent);
  margin-bottom: 0.55rem;
}

.titre-section {
  /* Plafonné : un titre plus gros se casse en trois lignes dès qu'il
     partage la largeur avec un chapô. */
  font-size: clamp(1.85rem, 1.25rem + 2.1vw, 3.05rem);
  max-width: 17em;
}
.titre-section--centre { margin-inline: auto; text-align: center; max-width: 20em; }

.entete-section {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.entete-section__chapo { color: color-mix(in srgb, var(--texte) 86%, var(--texte-doux)); max-width: 42ch; }

@media (max-width: 860px) {
  .entete-section { grid-template-columns: 1fr; align-items: start; }
}

/* ── Boutons ─────────────────────────────────────────────────────────── */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* Jamais cassé en deux lignes : un bouton sur deux lignes perd sa forme
     de pilule et décentre son texte. Les libellés sont tenus courts. */
  white-space: nowrap;
  padding: 0.82rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-texte);
  font-family: var(--police-titre);
  font-weight: 500;
  font-size: 0.99rem;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}
.bouton:hover { transform: translateY(-2px); background: var(--accent-sombre); color: var(--p-creme); }
.bouton:active { transform: translateY(0); }

.bouton--fantome {
  background: transparent;
  color: var(--texte);
  border-color: var(--lisere-fort);
}
.bouton--fantome:hover { background: color-mix(in srgb, var(--texte) 9%, transparent); border-color: var(--texte); }

.bouton--petit { padding: 0.6rem 1.15rem; font-size: 0.93rem; }

@media (max-width: 420px) {
  /* Plutôt pleine largeur que tronqué. */
  .bouton { width: 100%; }
}

.lien-icone {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--texte);
  border-bottom: 1px solid var(--lisere);
  padding-bottom: 2px;
  transition: color var(--transition), border-color var(--transition);
}
.lien-icone svg { flex: none; }
.lien-icone:hover { color: var(--accent); border-color: var(--accent); }

/* ── En-tête ─────────────────────────────────────────────────────────── */

.entete {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background var(--transition), border-color var(--transition), backdrop-filter var(--transition);
  border-bottom: 1px solid transparent;
}
.entete.est-collee {
  background: color-mix(in srgb, var(--fond) 94%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--lisere);
}

.entete__barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: var(--haut-entete);
  transition: min-height var(--transition);
}
.entete.est-collee .entete__barre { min-height: 68px; }

.marque { flex: none; display: block; }
.marque img {
  width: auto;
  /* Le logotype est un MOT, pas un carré : le logo complet (avec le grand
     « a » de fond) réduisait « antica » à vingt pixels, illisible. On
     n'affiche donc que le lettrage — et assez grand pour qu'il porte. */
  height: clamp(36px, 3.4vw, 48px);
  transition: height var(--transition);
}
.entete.est-collee .marque img { height: 32px; }

.nav__liste { display: flex; gap: clamp(1rem, 2.4vw, 2.1rem); }
.nav__lien {
  font-family: var(--police-titre);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.01em;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color var(--transition), border-color var(--transition);
}
.nav__lien:hover { color: var(--accent); }
.nav__lien[aria-current='page'] { border-bottom-color: var(--accent); }

.entete__actions { display: flex; align-items: center; gap: 0.75rem; }

/* Sélecteur de langue */
.langues { position: relative; }
.langues__bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: 1px solid var(--lisere);
  border-radius: 999px;
  padding: 0.42rem 0.7rem;
  font-size: 0.86rem;
  font-weight: 400;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.langues__bouton:hover { border-color: var(--lisere-fort); color: var(--accent); }
.langues__bouton svg { flex: none; }

.langues__liste {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 11.5rem;
  background: var(--fond-carte);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon-s);
  padding: 0.35rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 10;
}
.langues.est-ouvert .langues__liste { opacity: 1; visibility: visible; transform: none; }
.langues__liste a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  font-size: 0.93rem;
}
.langues__liste a:hover { background: color-mix(in srgb, var(--texte) 8%, transparent); }
.langues__liste a span { color: var(--texte-doux); font-size: 0.78rem; letter-spacing: 0.06em; }
.langues__liste a[aria-current='true'] { color: var(--accent); }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--lisere);
  border-radius: 999px;
  cursor: pointer;
}
.burger span {
  display: block;
  width: 17px;
  height: 1.5px;
  margin-inline: auto;
  background: var(--texte);
  transition: transform var(--transition), opacity var(--transition);
}
.burger[aria-expanded='true'] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded='true'] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav { display: none; }
  .burger { display: flex; }
  .bouton--entete { display: none; }
}

/* Tiroir mobile */
.tiroir {
  position: fixed;
  inset: var(--haut-entete) 0 0;
  z-index: 95;
  background: var(--fond);
  padding: clamp(1.5rem, 6vw, 3rem) var(--marge) 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  overflow-y: auto;
}
.tiroir[hidden] { display: none; }
.tiroir__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--lisere);
  font-family: var(--police-titre);
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 400;
  opacity: 0;
  transform: translateY(10px);
  animation: tiroir-entre 0.4s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 60ms + 60ms);
}
.tiroir__lien svg { flex: none; color: var(--accent); }
@keyframes tiroir-entre { to { opacity: 1; transform: none; } }
.tiroir__pied { display: grid; gap: 1rem; }
.tiroir__contact { color: var(--texte-doux); font-size: 0.95rem; }
.tiroir__contact a { border-bottom: 1px solid var(--lisere); }

body.tiroir-ouvert { overflow: hidden; }

/* ── Haut de page — parti pris « classique » ──────────────────────────
   Le charbon domine, la photo occupe SA place plutôt que de servir de
   texture derrière le texte. Le texte est donc net, la photo entière, et
   les deux cessent de se disputer le même rectangle.

   SEULES les règles en collision avec la mosaïque portent le
   modificateur : `.hero`, le titre, le surtitre et les actions. Les
   autres classes (`__grille`, `__visuel`, `__photo`, `__filigrane`)
   n'existent que dans ce parti pris, les préfixer ne servirait à rien —
   et une réécriture automatique des sélecteurs a déjà cassé toute la
   page une fois. */

.hero--classique {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  /* Plein écran, bandeau des heures compris : `svh` et non `vh`, sinon la
     barre d'adresse du téléphone rogne le bas. */
  min-height: 100svh;
  overflow: hidden;
  background: var(--fond);
}

/* Le « a » du logo, très grand et à peine visible : la seule chose de
   cette page qui n'appartienne qu'à Antica. Il déborde volontairement à
   gauche — un filigrane entier ressemblerait à un logo posé de travers. */
.hero__filigrane {
  position: absolute;
  z-index: -1;
  bottom: clamp(-16rem, -18vw, -6rem);
  left: clamp(-16rem, -12vw, -5rem);
  width: clamp(24rem, 46vw, 46rem);
  aspect-ratio: 1;
  color: color-mix(in srgb, var(--texte) 5%, transparent);
  pointer-events: none;
}
.hero__filigrane svg { width: 100%; height: 100%; }
/* La barre verticale du « a » formait un rectangle gris nettement visible
   derrière le titre. On ne garde que le cercle. */
.hero__filigrane path { display: none; }

.hero__grille {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  /* Le contenu est ANCRÉ EN HAUT par un padding constant : le titre tombe
     à la même hauteur d'une page à l'autre, quel que soit le nombre de
     lignes du chapô. */
  padding-top: calc(var(--haut-entete) + clamp(2.5rem, 7vh, 5rem));
  padding-bottom: clamp(3rem, 7vh, 5.5rem);
}

.hero__contenu {
  position: relative;
  /* 34 rem bridaient le titre bien avant sa propre largeur : l'anglais y
     tombait sur trois lignes pour cinq mots. La colonne respire, le chapô
     reste borné à 42 ch de son côté. */
  max-width: 40rem;
}

/* Le surtitre porte un filet : il ancre le bloc et donne un point de
   départ au regard. */
.hero--classique .surtitre {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  font-size: clamp(1.2rem, 1.05rem + 0.45vw, 1.55rem);
}
.hero--classique .surtitre::before {
  content: '';
  width: clamp(1.75rem, 4vw, 3rem);
  height: 1px;
  background: var(--accent);
  flex: none;
}

.hero--classique .hero__titre {
  /* Plafonné à 4,5 rem : la colonne du titre fait 580 px sur grand écran
     (l'enveloppe est bornée à 1280), et à 5 rem « Handmade pizza, » ne
     tenait plus sur sa ligne — le titre anglais tombait sur trois lignes
     pour cinq mots, avec « in the » seul au milieu. */
  font-size: clamp(2.5rem, 1.1rem + 4.9vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  /* La largeur se pose sur le TITRE, en em : elle suit alors sa taille
     réelle, au lieu de dépendre du bloc qui le contient.
     13 em et non 11 : l'anglais a des mots plus courts, et « Handmade
     pizza, in the village » tombait sur trois lignes pour cinq mots. */
  max-width: 13em;
  margin-bottom: 1.2rem;
}
.hero__chapo {
  font-size: clamp(1.05rem, 1rem + 0.42vw, 1.22rem);
  line-height: 1.65;
  color: color-mix(in srgb, var(--texte) 88%, var(--texte-doux));
  max-width: 42ch;
}
.hero--classique .hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.1rem; }

/* Le visuel : une photo qui a ses bords, et une seconde décalée qui la
   recouvre d'un coin — c'est ce décalage qui fait la page. */
.hero__visuel { position: relative; }
.hero__photo {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--lisere);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / .8);
}
.hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 5;
  /* Bornée : en 4/5 dans une colonne large, la photo imposait sa hauteur
     et le haut de page dépassait l'écran de trente-huit pixels — le
     bandeau des heures passait sous la ligne de flottaison. */
  max-height: calc(100svh - var(--haut-entete) - 15rem);
  /* Une très lente montée d'échelle : assez pour que l'image ne soit
     jamais tout à fait immobile, trop lente pour qu'on la voie bouger. */
  animation: hero-respire 24s ease-out forwards;
}
@keyframes hero-respire { from { transform: scale(1.06); } to { transform: scale(1); } }

.hero__photo--seconde {
  position: absolute;
  /* Elle déborde de moitié sur la gauche : posée trop au centre, elle
     recouvrait la grande sans qu'on comprenne pourquoi. */
  left: clamp(-8rem, -9.5vw, -4rem);
  bottom: clamp(-3rem, -4.5vw, -1.5rem);
  width: clamp(9rem, 18vw, 14.5rem);
  border-radius: 14px;
  border-width: 2px;
  border-color: var(--fond);
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / .95);
}
.hero__photo--seconde img { aspect-ratio: 1; animation: none; }

/* L'entrée en cascade. Elle ne se pose QUE si le script a démarré
   (`html.js`) : sinon un échec du JavaScript laisserait un héros vide. */
.js .hero__contenu > *,
.js .hero__visuel > * {
  opacity: 0;
  transform: translateY(20px);
  animation: hero-entre 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.js .hero__contenu > :nth-child(1) { animation-delay: 0.08s; }
.js .hero__contenu > :nth-child(2) { animation-delay: 0.16s; }
.js .hero__contenu > :nth-child(3) { animation-delay: 0.26s; }
.js .hero__contenu > :nth-child(4) { animation-delay: 0.36s; }
.js .hero__visuel > :nth-child(1) { animation-delay: 0.14s; }
.js .hero__visuel > :nth-child(2) { animation-delay: 0.42s; }
@keyframes hero-entre { to { opacity: 1; transform: none; } }

/* Écran bas : le plein écran cède, sinon le bandeau des heures passe sous
   la ligne de flottaison — mesuré à 775 px pour 768 d'écran. */
@media (max-height: 820px) and (min-width: 901px) {
  .hero--classique { min-height: auto; }
  .hero__grille { padding-top: calc(var(--haut-entete) + 2.5rem); padding-bottom: 2.5rem; }
}

@media (max-width: 900px) {
  .hero__filigrane { bottom: auto; top: -8rem; left: -35%; width: 120%; opacity: .6; }
  .hero--classique {
    /* Sur téléphone, deux colonnes n'ont plus de sens : la photo passe
       au-dessus du texte, et le plein écran cède — sinon le titre et les
       boutons tombent sous la ligne de flottaison. */
    min-height: auto;
  }
  .hero__grille {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 6vw, 2.75rem);
    padding-top: calc(var(--haut-entete) + 1.75rem);
  }
  .hero__visuel { order: -1; }
  .hero__photo img { aspect-ratio: 16 / 11; }
  .hero__photo--seconde { width: clamp(6.5rem, 26vw, 9rem); left: auto; right: -0.75rem; bottom: -1.25rem; }
  .hero__contenu { max-width: none; }
}
@media (max-width: 420px) {
  .hero__photo--seconde { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .js .hero__contenu > *, .js .hero__visuel > * { opacity: 1; transform: none; animation: none; }
  .hero__photo img { animation: none; }
}

/* ── Haut de page — parti pris « mosaïque » ───────────────────────────
   Le premier écran est une GRILLE : une grande image porte le titre, trois
   vignettes cliquables mènent ailleurs. Titre en SERIF — c'est ce qu'ont
   en commun les modèles qui tiennent debout ; le sans-serif géométrique
   seul rendait la page froide. */

.hero--mosaique {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: clamp(0.5rem, 1vw, 0.9rem);
  padding: calc(var(--haut-entete) + clamp(0.5rem, 1vw, 0.9rem)) clamp(0.5rem, 1vw, 0.9rem) 0;
  background: var(--fond);
}
/* Le bandeau des heures ferme le haut de page, sur toute la largeur. */
.hero--mosaique .bandeau {
  grid-column: 1 / -1;
  margin: clamp(0.5rem, 1vw, 0.9rem) calc(-1 * clamp(0.5rem, 1vw, 0.9rem)) 0;
}

.hero--mosaique .hero__scene {
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  min-height: clamp(20rem, 50vh, 40rem);
}
.hero--mosaique .hero__scene img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
  animation: hero-respire 26s ease-out forwards;
}
.hero--mosaique .hero__scene::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  /* Le voile monte haut : plus bas, le surtitre tombait sur la brique
     éclairée — orange sur orange, illisible. */
  background: linear-gradient(to top,
    color-mix(in srgb, #000 88%, transparent) 2%,
    color-mix(in srgb, #000 72%, transparent) 30%,
    color-mix(in srgb, #000 24%, transparent) 62%,
    transparent 88%);
}
.hero--mosaique .hero__dedans { padding: clamp(1.5rem, 3.5vw, 3.25rem); width: 100%; }
.hero--mosaique .hero__surtitre {
  font-family: var(--police-titre);
  font-size: clamp(0.84rem, 0.78rem + 0.22vw, 0.98rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.85rem;
}
.hero--mosaique .hero__titre {
  font-family: var(--police-main);
  font-weight: 300;
  font-size: clamp(2.1rem, 0.9rem + 4.2vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  max-width: 14em;
  text-shadow: 0 3px 30px color-mix(in srgb, #000 60%, transparent);
}
.hero--mosaique .hero__sous {
  margin-top: 1rem;
  font-size: clamp(0.8rem, 0.75rem + 0.25vw, 0.94rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--texte) 86%, transparent);
}
.hero--mosaique .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.25rem, 2.5vw, 2rem); }

.hero--mosaique .hero__colonne { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: clamp(0.5rem, 1vw, 0.9rem); }
.hero--mosaique .hero__case {
  position: relative;
  display: flex;
  align-items: flex-end;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  min-height: 8rem;
}
.hero--mosaique .hero__case img {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.hero--mosaique .hero__case::after {
  content: '';
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, color-mix(in srgb, #000 80%, transparent), color-mix(in srgb, #000 18%, transparent) 70%);
}
.hero--mosaique .hero__case:hover img { transform: scale(1.06); }
.hero--mosaique .hero__case--chiffre {
  background: var(--fond-carte);
  border: 1px solid var(--lisere);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.hero--mosaique .hero__caseDedans {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; width: 100%; padding: 1.1rem 1.25rem;
}
.hero--mosaique .hero__caseNom { font-family: var(--police-titre); font-weight: 500; font-size: clamp(0.98rem, 0.9rem + 0.3vw, 1.15rem); }
.hero--mosaique .hero__caseFleche {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border: 1px solid color-mix(in srgb, var(--texte) 35%, transparent);
  border-radius: 50%;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.hero--mosaique .hero__case:hover .hero__caseFleche { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); }
.hero--mosaique .hero__chiffre { display: grid; gap: 0.25rem; padding: 1rem; }
.hero--mosaique .hero__chiffreNombre {
  font-family: var(--police-main);
  font-size: clamp(2rem, 1.4rem + 1.8vw, 3.1rem);
  font-weight: 500; line-height: 1; color: var(--accent);
}
.hero--mosaique .hero__chiffreQuoi { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texte-doux); }

@media (max-width: 1000px) {
  .hero--mosaique { grid-template-columns: 1fr; min-height: auto; }
  .hero--mosaique .hero__colonne { grid-template-rows: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero--mosaique .hero__case { min-height: 7rem; }
  .hero--mosaique .hero__caseDedans { flex-direction: column; align-items: flex-start; gap: 0.6rem; }
}

@media (max-width: 760px) {
  /* Le texte QUITTE la photo. En portrait, l'image se recadre et sa zone
     éclairée remonte pile là où tombe le titre : il devenait illisible, et
     aucun dégradé n'y peut rien sur une zone aussi claire. */
  .hero--mosaique .hero__scene { display: block; min-height: 0; background: var(--fond-carte); }
  .hero--mosaique .hero__scene img {
    position: relative; inset: auto;
    height: clamp(13rem, 38vw, 18rem);
    object-position: center 62%;
    animation: none;
  }
  .hero--mosaique .hero__scene::after { content: none; }
  .hero--mosaique .hero__dedans { padding: 1.4rem 1.25rem 1.6rem; }
  .hero--mosaique .hero__titre { text-shadow: none; max-width: none; }
  .hero--mosaique .hero__sous { color: var(--texte-doux); }

  /* En téléphone, les vignettes disparaissent — sur TOUTES les pages.
     Empilées sous le texte, elles n'étaient plus des portes d'entrée
     posées à côté du titre mais trois bandeaux de plus à faire défiler,
     et elles repoussaient le contenu réel d'autant. Sur la carte, la
     barre de filtres fait déjà ce travail, et mieux : elle suit le
     défilement. */
  .hero--mosaique .hero__colonne { display: none; }
  .hero--mosaique { grid-template-rows: auto auto; }
}

@media (max-width: 620px) {
  .hero--mosaique .hero__colonne { grid-template-columns: 1fr; }
  .hero--mosaique .hero__case { min-height: 5.5rem; }
  .hero--mosaique .hero__caseDedans { flex-direction: row; align-items: center; }
}

@media (prefers-reduced-motion: reduce) { .hero--mosaique .hero__scene img { animation: none; } }


@keyframes defile { 0%, 100% { transform: scaleY(.35); opacity: .5; }50% { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {.hero--classique__defiler i { animation: none; transform: none; } }
@media (max-width: 1100px), (max-height: 700px) {.hero--classique__defiler { display: none; } }

/* ── Bandeau des heures ──────────────────────────────────────────────── */

.bandeau {
  /* Il ferme le haut de page : ensemble, ils font une pleine hauteur
     d'écran. Posé après le hero, il était coupé par la ligne de
     flottaison — le client l'a vu. */
  flex: none;
  position: relative;
  z-index: 1;
  background: var(--accent);
  color: var(--accent-texte);
}
.bandeau__grille {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.75rem;
  padding-block: 0.95rem;
}
.bandeau p { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.bandeau svg { flex: none; }
.bandeau__libelle { opacity: 0.72; }
.bandeau__tel a {
  font-family: var(--police-titre);
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1.5px solid color-mix(in srgb, var(--accent-texte) 40%, transparent);
}

/* ── Deux colonnes ───────────────────────────────────────────────────── */

.deux-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4.5vw, 4.5rem);
  /* Texte + image : le centrage est le bon choix. Pour deux colonnes de
     TEXTE, ce serait `start` — sans quoi les titres se décalent. */
  align-items: center;
}
.deux-colonnes--inverse .deux-colonnes__image { order: -1; }
.deux-colonnes__texte > p {
  /* Une lecture longue mérite l'encre pleine. La cendre reste pour les
     mentions, les libellés et les chapôs. */
  color: color-mix(in srgb, var(--texte) 94%, var(--texte-doux));
  margin-top: 1.05rem;
  max-width: 58ch;
}
.deux-colonnes__texte > .titre-section { margin-bottom: 0.25rem; }

.deux-colonnes__image {
  border-radius: var(--rayon);
  overflow: hidden;
  border: 1px solid var(--lisere);
}
.deux-colonnes__image img {
  width: 100%;
  /* Remplit la hauteur : sinon un grand vide se forme sous la photo
     quand le texte est long. */
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
}

@media (max-width: 860px) {
  .deux-colonnes { grid-template-columns: 1fr; }
  .deux-colonnes--inverse .deux-colonnes__image { order: 0; }
}

.note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 1.4rem !important;
  padding: 0.85rem 1.05rem;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 9%, transparent);
  border-radius: 0 var(--rayon-s) var(--rayon-s) 0;
  color: var(--texte) !important;
  font-size: 0.97rem;
}
.note svg { flex: none; color: var(--accent); margin-top: 3px; }

/* ── Piliers ─────────────────────────────────────────────────────────── */

.piliers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15.5rem, 100%), 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.pilier {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  background: var(--fond-carte);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon);
}
.pilier__icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.pilier__titre { font-size: 1.22rem; }
.pilier p { color: color-mix(in srgb, var(--texte) 88%, var(--texte-doux)); font-size: 1rem; }

/* ── Ruban en parallaxe ──────────────────────────────────────────────── */

.ruban { height: clamp(180px, 26vw, 340px); overflow: hidden; position: relative; }
.ruban__image { position: absolute; inset: -14% 0; will-change: transform; }
.ruban__image img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: 0.55; }
.ruban::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, var(--fond-2), transparent 30%, transparent 70%, var(--fond));
}

/* ── Aperçus de la carte ─────────────────────────────────────────────── */

.apercus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
}
.apercu {
  display: flex;
  flex-direction: column;
  background: var(--fond-carte);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition);
}
.apercu:hover { transform: translateY(-4px); border-color: var(--lisere-fort); }
.apercu__photo { display: block; overflow: hidden; }
.apercu__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.apercu:hover .apercu__photo img { transform: scale(1.04); }

.apercu__corps {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.9rem;
  padding: 1.35rem;
}
.apercu__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.apercu__titre { font-size: 1.3rem; }
.apercu__depuis { color: var(--accent); font-size: 0.92rem; white-space: nowrap; }

.apercu__liste { display: grid; gap: 0.4rem; font-size: 0.95rem; color: var(--texte-doux); }
.apercu__liste li { display: flex; justify-content: space-between; gap: 1rem; }
.apercu__prix { white-space: nowrap; }

.apercu__lien {
  /* Le dernier bloc pousse au bas de la carte : les liens des trois
     cartes se rejoignent, quelle que soit la hauteur du texte. */
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--accent);
  font-weight: 500;
  font-size: 0.95rem;
}
.apercu__lien svg { flex: none; transition: transform var(--transition); }
.apercu:hover .apercu__lien svg { transform: translateX(4px); }

/* ── Mosaïque ────────────────────────────────────────────────────────── */

/* Pavage de période 10, qui remplit exactement quatre rangées de quatre :
 *
 *   ┌───────┬───┬───┐   1     : 2×2
 *   │   1   │ 2 │ 3 │   6,9,10: 2×1
 *   │       ├───┼───┤   le reste : 1×1
 *   │       │ 4 │ 5 │
 *   ├───────┼───┼───┤   Le motif se répète tous les dix : ajouter ou
 *   │   6   │ 7 │ 8 │   retirer une photo ne laisse pas de case orpheline
 *   ├───────┼───┴───┤   au milieu du pavage.
 *   │   9   │  10   │
 *   └───────┴───────┘
 */
.mosaique {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.4rem, 1vw, 0.75rem);
}
.mosaique__case {
  position: relative;
  padding: 0;
  border: 0;
  background: var(--fond-carte);
  border-radius: var(--rayon-s);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 1;
}
.mosaique__case img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), opacity var(--transition); }
.mosaique__case:hover img { transform: scale(1.05); opacity: 0.88; }

.mosaique__case:nth-child(10n + 1) { grid-column: span 2; grid-row: span 2; aspect-ratio: 1; }
.mosaique__case:nth-child(10n + 6),
.mosaique__case:nth-child(10n + 9),
.mosaique__case:nth-child(10n + 10) { grid-column: span 2; aspect-ratio: 2 / 1; }

@media (max-width: 760px) {
  .mosaique { grid-template-columns: repeat(2, 1fr); }
  .mosaique__case:nth-child(10n + 1) { grid-column: span 2; grid-row: auto; aspect-ratio: 4 / 3; }
  .mosaique__case:nth-child(10n + 6),
  .mosaique__case:nth-child(10n + 9),
  .mosaique__case:nth-child(10n + 10) { grid-column: span 2; aspect-ratio: 2 / 1; }
}

/* Masquage hors-page : une classe à part, jamais `hidden` — cet attribut
   appartient au contenu, il dit ce que le client a choisi de cacher. */
.hors-page { display: none !important; }

.pagination { display: flex; justify-content: center; gap: 0.4rem; margin-top: 1.75rem; }
.pagination[hidden] { display: none; }
.pagination button {
  min-width: 2.4rem;
  padding: 0.45rem 0.7rem;
  background: none;
  border: 1px solid var(--lisere);
  border-radius: 999px;
  cursor: pointer;
  font-size: 0.92rem;
  transition: border-color var(--transition), color var(--transition), background var(--transition);
}
.pagination button:hover { border-color: var(--lisere-fort); }
.pagination button[aria-current='true'] { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }

/* ── Filtres collants (page carte) ───────────────────────────────────── */

.filtres {
  position: sticky;
  top: var(--haut-entete);
  z-index: 60;
  transition: background var(--transition), border-color var(--transition), backdrop-filter var(--transition);
  border-bottom: 1px solid transparent;
}
/* Le fond ne se pose qu'une fois collée : posé d'emblée, il formerait une
   pastille flottant sur rien. Et il est quasi opaque (97 %) — des photos
   défilent dessous, à 88 % les libellés deviennent illisibles. */
.filtres.est-collee {
  background: color-mix(in srgb, var(--fond) 97%, transparent);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--lisere);
}
.filtres__piste {
  display: flex;
  gap: 0.5rem;
  padding-block: 0.7rem;
  /* Sur petit écran, les filtres défilent horizontalement plutôt que
     d'empiler des rangées collantes qui mangeraient l'écran. */
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: none;
  /* Le défilement automatique vers la catégorie active s'arrête à cette
     distance du bord : la voisine reste entamée, et on continue de voir
     qu'il y a une suite. */
  scroll-padding-inline: 2.75rem;
  scroll-behavior: smooth;
}
/* La marge de l'enveloppe, à droite, suffisait à repousser la dernière
   pastille de trois pixels hors champ : le fondu voilait alors du vide, et
   rien ne disait qu'il restait une catégorie. Le défilement la ramène. */
.filtres__piste::after {
  content: '';
  flex: none;
  inline-size: 0.25rem;
}
.filtres__piste::-webkit-scrollbar { display: none; }

/* Deux fondus disent de quel côté il reste des catégories. Sans eux, la
   dernière est simplement hors champ et rien ne le laisse deviner : le
   visiteur croit avoir vu toute la carte.
   Ils sont portés par la barre, pas par la piste — un pseudo-élément posé
   sur un conteneur qui défile part avec lui et ne reste pas au bord. */
.filtres::before,
.filtres::after {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.75rem;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition);
  /* Le chevron dit ce que le dégradé seul ne dit pas : un dégradé se lit
     comme une ombre, pas comme « il y a une suite ». */
  display: flex;
  align-items: center;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--texte-doux);
}
.filtres::before {
  content: '‹';
  left: 0;
  justify-content: flex-start;
  padding-inline-start: 0.5rem;
  background: linear-gradient(to right, var(--fond) 55%, color-mix(in srgb, var(--fond) 0%, transparent));
}
.filtres::after {
  content: '›';
  right: 0;
  justify-content: flex-end;
  padding-inline-end: 0.5rem;
  background: linear-gradient(to left, var(--fond) 55%, color-mix(in srgb, var(--fond) 0%, transparent));
}
.filtres[data-debord~='gauche']::before,
.filtres[data-debord~='droite']::after { opacity: 1; }

/* Quelqu'un qui a demandé moins d'animation ne veut pas non plus d'un
   défilement latéral qui glisse. */
@media (prefers-reduced-motion: reduce) {
  .filtres__piste { scroll-behavior: auto; }
}
.filtres__lien {
  flex: none;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--lisere);
  border-radius: 999px;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.filtres__lien:hover { border-color: var(--lisere-fort); color: var(--accent); }
.filtres__lien[aria-current='true'] { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }

/* ── Les plats ───────────────────────────────────────────────────────── */

.plats {
  display: grid;
  /* `min(…, 100%)` : sans lui, la colonne de 20 rem est plus large que
     l'écran d'un petit téléphone et toute la page déborde. */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: clamp(1rem, 2.2vw, 1.9rem) clamp(1.75rem, 4vw, 4rem);
}
.plat { padding-bottom: 0.9rem; border-bottom: 1px solid var(--lisere); }
.plat__tete { display: flex; align-items: baseline; gap: 0.5rem; }
.plat__nom { font-size: 1.1rem; font-weight: 500; }
.plat__points {
  flex: 1;
  height: 1px;
  min-width: 1.5rem;
  border-bottom: 1px dotted color-mix(in srgb, var(--texte) 28%, transparent);
  transform: translateY(-3px);
}
.plat__prix { font-family: var(--police-titre); font-weight: 600; color: var(--accent); white-space: nowrap; }
.plat__desc { margin-top: 0.35rem; color: color-mix(in srgb, var(--texte) 84%, var(--texte-doux)); font-size: 0.96rem; max-width: 48ch; }
.plat__desc[hidden] { display: none; }

.plats--supplements { margin-bottom: clamp(2rem, 4vw, 3rem); }

.note-bloc {
  padding: clamp(1.25rem, 2.6vw, 1.9rem);
  background: var(--fond-carte);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon);
}
.note-bloc p { color: var(--texte-doux); font-size: 0.97rem; }
.note-bloc p + p { margin-top: 0.5rem; }

.section--appel { text-align: center; }
.appel { display: grid; justify-items: center; gap: 0.9rem; }
.appel p { color: var(--texte-doux); max-width: 46ch; }
.appel .hero__actions { justify-content: center; margin-top: 0.7rem; }

/* ── Contact ─────────────────────────────────────────────────────────── */

.contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}
.contact__colonne { display: grid; gap: 0.75rem; justify-items: start; }
.contact__titre {
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--texte-doux);
}
.contact__colonne .contact__titre:not(:first-child) { margin-top: 1.25rem; }
.contact__adresse { font-style: normal; line-height: 1.75; }

.horaires { display: grid; gap: 0.35rem; width: 100%; max-width: 22rem; }
.horaires__ligne {
  /* Une vraie grille à deux colonnes : un simple min-width sur la clé
     laisserait chaque valeur démarrer où finit sa clé. */
  display: grid;
  grid-template-columns: minmax(9rem, 1fr) auto;
  gap: 1rem;
  padding-block: 0.28rem;
  border-bottom: 1px solid var(--lisere);
}
.horaires__ligne dd { font-variant-numeric: tabular-nums; color: var(--texte); }
.horaires__ligne--ferme { color: var(--texte-doux); }
.horaires__ligne--ferme dd { color: var(--texte-doux); }

.contact__reseaux { display: grid; gap: 0.55rem; justify-items: start; }
.contact__reseaux a {
  /* Icône + texte : `inline-flex` est indispensable — la réinitialisation
     met les svg en `display: block`, l'icône se retrouverait seule sur sa
     ligne, au-dessus du texte. */
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--texte-doux);
  transition: color var(--transition);
}
.contact__reseaux a svg { flex: none; }
.contact__reseaux a:hover { color: var(--accent); }

@media (max-width: 960px) {
  .contact { grid-template-columns: 1fr 1fr; }
  .contact__plan { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .contact { grid-template-columns: 1fr; }
}

/* Façade de carte : rien ne part chez Google avant le clic. */
.contact__plan { position: relative; border-radius: var(--rayon); overflow: hidden; border: 1px solid var(--lisere); }
.contact__plan iframe { display: block; width: 100%; height: 100%; min-height: 420px; border: 0; }
.plan { position: relative; min-height: 420px; }
.plan > img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.plan__epingle {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -100%);
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-texte);
  box-shadow: 0 3px 12px rgb(0 0 0 / 0.45);
}
.plan__voile {
  position: absolute;
  inset: auto 0 0 0;
  display: grid;
  gap: 0.45rem;
  justify-items: start;
  padding: 1.1rem;
  /* Un dégradé ne suffit pas : sur les zones claires du plan — un champ,
     une place — le texte disparaissait. Fond quasi opaque, comme pour la
     barre de filtres. */
  background: color-mix(in srgb, var(--fond) 93%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--lisere);
}
.plan__titre { font-family: var(--police-titre); font-weight: 500; font-size: 1.05rem; }
.plan__texte { font-size: 0.87rem; color: var(--texte-doux); max-width: 40ch; }
.plan__credit {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  font-size: 0.7rem;
  color: var(--texte-doux);
  background: var(--voile);
  padding: 0.1rem 0.4rem;
  border-radius: 4px;
}

/* ── Pied ────────────────────────────────────────────────────────────── */

.pied {
  background: var(--fond-2);
  border-top: 1px solid var(--lisere);
  padding-block: clamp(2.75rem, 6vw, 4.5rem) 1.5rem;
}
.pied__haut {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--lisere);
}
.pied__marque img { width: auto; height: 38px; }
.pied__baseline { margin-top: 0.85rem; color: var(--texte-doux); font-size: 0.96rem; max-width: 26ch; }
.pied__reseaux { display: flex; gap: 0.6rem; margin-top: 1.1rem; }
.pied__reseaux a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--lisere);
  border-radius: 999px;
  color: var(--texte-doux);
  transition: color var(--transition), border-color var(--transition);
}
.pied__reseaux a:hover { color: var(--accent); border-color: var(--accent); }

.pied__titre {
  font-size: 0.86rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 500;
  color: var(--texte-doux);
  margin-bottom: 0.9rem;
}
.pied address { font-style: normal; line-height: 1.8; font-size: 0.96rem; }
.pied address a { border-bottom: 1px solid var(--lisere); }
.pied address a:hover { color: var(--accent); }

.pied__liste { display: grid; gap: 0.45rem; font-size: 0.96rem; }
.pied__liste a { color: var(--texte-doux); transition: color var(--transition); }
.pied__liste a:hover { color: var(--accent); }

.pied__horaires { display: grid; gap: 0.4rem; font-size: 0.93rem; }
.pied__horaires li { display: flex; justify-content: space-between; gap: 0.75rem; }
.pied__jours { color: var(--texte-doux); }
.pied__heures { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pied__ferme { color: var(--texte-doux); }

.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem 1.5rem;
  padding-top: 1.5rem;
  font-size: 0.87rem;
  color: var(--texte-doux);
}
.pied__signature { display: inline-flex; align-items: center; gap: 0.32rem; }
.pied__coeur { color: var(--accent); flex: none; }
.pied__signature a { color: var(--texte); border-bottom: 1px solid var(--lisere); }
.pied__signature a:hover { color: var(--accent); }

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

/* ── Barre d'action mobile ───────────────────────────────────────────── */

.barre-appel {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  /* Fond OPAQUE sur la barre, séparateurs en border-left : avec un `gap`
     sur un conteneur translucide, la page défile dans les interstices. */
  background: var(--fond-carte);
  border-top: 1px solid var(--lisere);
  padding-bottom: env(safe-area-inset-bottom);
}
.barre-appel a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 60px;
  padding: 0.5rem 0.4rem;
  font-size: 0.79rem;
  /* Libellés d'un seul mot : les trois entrées s'alignent quelle que soit
     la longueur. */
  white-space: nowrap;
  border-left: 1px solid var(--lisere);
}
.barre-appel a:first-child { border-left: 0; }
.barre-appel a svg { flex: none; color: var(--texte-doux); }
.barre-appel .principal { background: var(--accent); color: var(--accent-texte); }
.barre-appel .principal svg { color: inherit; }

@media (max-width: 760px) {
  .barre-appel { display: flex; }
  body { padding-bottom: 60px; }
  /* Tant que le haut de page est à l'écran, ses propres boutons suffisent :
     la barre ferait doublon juste en dessous d'eux. Elle monte dès qu'on a
     défilé — c'est le script qui pose la classe. */
  .js .barre-appel {
    transform: translateY(105%);
    transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
  .js body.a-defile .barre-appel { transform: none; }
}

/* ── Visionneuse ─────────────────────────────────────────────────────── */

/* Un <dialog> fermé est masqué par la feuille du navigateur. Toute règle
   `display` posée sans condition l'écrase — et laisse un panneau noir vide
   par-dessus la page, que rien ne peut fermer. D'où les deux règles. */
.visionneuse:not([open]) { display: none; }
.visionneuse[open] { display: flex; }

.visionneuse {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, #000 92%, transparent);
  align-items: center;
  justify-content: center;
}
.visionneuse::backdrop { background: rgb(0 0 0 / 0.86); }

.visionneuse__scene {
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  height: 100%;
  padding: clamp(0.75rem, 2.5vw, 1.75rem);
  gap: 0.75rem;
}

.visionneuse__fermer {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: none;
  background: color-mix(in srgb, #fff 12%, transparent);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
}
.visionneuse__fermer:hover { background: color-mix(in srgb, #fff 22%, transparent); }

/* Une zone d'affichage identique pour tous les clichés : l'image sort du
   flux (absolue), garde son format, et l'arrondi porte sur ses vrais
   bords. Sans cela, un portrait chasse la légende et une petite photo
   flotte au milieu du noir. */
.visionneuse__cadre { position: relative; flex: 1 1 auto; min-height: 0; }
.visionneuse__image {
  position: absolute;
  inset: 0;
  margin: auto;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--rayon);
}

.visionneuse__bouton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  background: color-mix(in srgb, #fff 12%, transparent);
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
}
.visionneuse__bouton:hover { background: color-mix(in srgb, #fff 22%, transparent); }
.visionneuse__bouton--prec { left: 0; }
.visionneuse__bouton--suiv { right: 0; }
.pivot-gauche { transform: rotate(90deg); }
.pivot-droite { transform: rotate(-90deg); }

/* Hauteur FIXE, pas un min-height : une légende de trois lignes raboterait
   sinon la zone du cliché. */
/* Hauteur FIXE, pas un min-height : une légende de trois lignes raboterait
   sinon la zone du cliché. La légende est CENTRÉE sous l'image, le
   compteur posé à côté sans la décaler — d'où les trois colonnes dont la
   première est vide et de même largeur que la troisième. */
.visionneuse__pied {
  flex: none;
  height: 56px;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 5.5rem;
  align-items: center;
  gap: 1rem;
  color: #fff;
  font-size: 0.93rem;
}
.visionneuse__texte { grid-column: 2; text-align: center; }
.visionneuse__legende {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  opacity: 0.9;
}
.visionneuse__compteur {
  grid-column: 3;
  justify-self: end;
  font-variant-numeric: tabular-nums;
  opacity: 0.66;
}
@media (max-width: 560px) {
  .visionneuse__pied { grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem; font-size: 0.85rem; }
}

@media (max-width: 620px) {
  .visionneuse__bouton { width: 40px; height: 40px; }
}

/* ── Apparitions ─────────────────────────────────────────────────────── */

/* L'opacité de départ ne se pose QUE si le script a démarré : sinon un
   échec du JavaScript rendrait la page vide. */
.js [data-apparait] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.js [data-apparait].est-visible { opacity: 1; transform: none; }

/* ── Listes déroulantes ───────────────────────────────────────────────
   Le <select> natif reste dans la page — la valeur part avec le
   formulaire — mais hors de vue : c'est cet habillage qu'on voit. */
.choix { position: relative; display: block; }
.choix__natif {
  /* Les dimensions sont forcées : les règles du formulaire posent un
     `width: 100%` sur ses champs, qui l'emporterait ici et laisserait le
     select occuper sa place — invisible, mais bien présent sous le doigt. */
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important; border: 0 !important; margin: -1px !important;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
  pointer-events: none;
}
.choix__bouton {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--lisere);
  border-radius: var(--rayon-s);
  background: var(--fond-carte);
  color: var(--texte);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.choix__bouton:hover { border-color: var(--accent); }
.choix__bouton:focus-visible,
.choix[data-ouvert="oui"] .choix__bouton {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.choix__bouton svg { flex: none; color: var(--texte-doux); transition: transform var(--transition); }
.choix[data-ouvert="oui"] .choix__bouton svg { transform: rotate(180deg); }
.choix__valeur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.choix__liste {
  position: absolute;
  z-index: 60;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  max-height: 46vh;
  overflow-y: auto;
  padding: 7px;
  border-radius: 14px;
  background: var(--fond-carte);
  border: 1px solid var(--lisere);
  box-shadow: 0 22px 50px -18px rgb(0 0 0 / .55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.985);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.choix[data-ouvert="oui"] .choix__liste {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
}
.choix__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 13px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-size: .95rem;
  text-align: left;
  cursor: pointer;
}
.choix__option:hover { background: color-mix(in srgb, var(--texte) 9%, transparent); color: var(--texte); }
.choix__option:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.choix__option.est-choisi {
  background: var(--accent);
  color: var(--accent-texte);
  font-weight: 600;
}

/* Le bandeau d'édition est collé au bas de l'écran : sa liste doit monter,
   sinon elle sort de la fenêtre et devient inatteignable. */
.choix--haut .choix__liste {
  top: auto;
  bottom: calc(100% + 7px);
  transform: translateY(6px) scale(.985);
}
.choix--haut[data-ouvert="oui"] .choix__liste { transform: translateY(0) scale(1); }

/* Le thème sombre du bandeau et sa largeur courte sont posés par
   `js/edit-mode.css`, qui est chargé APRÈS celle-ci : les redire ici ne
   ferait que deux endroits à corriger le jour où l'un change. */

/* ── Les avis ─────────────────────────────────────────────────────────
   La note est RÉELLE, relevée sur leur page Facebook. Aucun texte d'avis
   n'est affiché : nous n'en avons aucun de première main, et en inventer
   serait la pire chose à faire sur un site de restaurant. */

.avis {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.avis__texte > p { color: color-mix(in srgb, var(--texte) 88%, var(--texte-doux)); margin-top: 1rem; max-width: 46ch; }
.avis__texte > .lien-icone { margin-top: 1.5rem; }
.avis__chiffres {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--fond-carte);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon);
}
.avis__bloc { display: grid; gap: 0.3rem; align-content: start; text-align: center; }
.avis__nombre {
  font-family: var(--police-titre);
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.4rem);
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.avis__quoi { font-size: 0.83rem; color: var(--texte-doux); line-height: 1.3; }

@media (max-width: 860px) { .avis { grid-template-columns: 1fr; } }

/* ── Les actualités ───────────────────────────────────────────────── */

.actus {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1rem, 2.4vw, 1.75rem);
}
.actu {
  display: flex;
  flex-direction: column;
  background: var(--fond-carte);
  border: 1px solid var(--lisere);
  border-radius: var(--rayon);
  overflow: hidden;
}
.actu__photo { overflow: hidden; }
.actu__photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.actu:hover .actu__photo img { transform: scale(1.04); }
.actu__corps { display: flex; flex-direction: column; flex: 1; gap: 0.7rem; padding: 1.35rem; }
.actu__titre { font-size: 1.22rem; }
.actu__corps p { color: color-mix(in srgb, var(--texte) 86%, var(--texte-doux)); font-size: 0.98rem; }
.actu__lien {
  /* Le dernier bloc pousse au bas de la carte : les liens se rejoignent,
     quelle que soit la hauteur du texte. */
  margin-top: auto;
  align-self: start;
  color: var(--accent);
  font-weight: 500;
  font-size: 0.95rem;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  padding-bottom: 2px;
}
.actu__lien:hover { border-bottom-color: var(--accent); }
.hero[hidden] { display: none !important; }  /* un display sans condition écraserait le masquage — le piège des <dialog> */

/* Un haut de page en mosaïque SANS vignette : la scène prend toute la
   largeur. Sur la page carte, les trois vignettes répétaient la barre de
   filtres juste en dessous et les sections numérotées plus bas — trois
   fois la même information. */
.hero--mosaique-seule { grid-template-columns: 1fr; }
.hero--mosaique-seule .hero__scene { min-height: clamp(22rem, 62vh, 46rem); }