/* L'Inattendu — la feuille du site.
 *
 * Un dessin tiré du logo du restaurant : le BLEU NUIT et l'OR du cartouche,
 * le CADRE OVALE baroque qui devient le cadre des photos (un plat, un
 * portrait, la salle), son FLEURON au-dessus des titres, et la CLOCHE de
 * service comme signe. Bodoni Moda pour les titres — le contraste fort et
 * les capitales étroites du lettrage du logo — et Jost pour le texte.
 *
 * Les couleurs : des PIGMENTS (--p-*, réglés par le thème de
 * l'administration) qui n'alimentent que des JETONS DE RÔLE (--fond,
 * --texte, --accent…). Une section .nuit redéfinit les mêmes jetons :
 * un composant s'écrit une fois et vaut des deux côtés.
 */

/* ── Polices (servies par le site, licence OFL dans assets/fonts) ─────── */

@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('assets/fonts/bodoni-moda-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bodoni Moda'; font-style: normal; font-weight: 400 900; font-display: swap; src: url('assets/fonts/bodoni-moda-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bodoni Moda'; font-style: italic; font-weight: 400 900; font-display: swap; src: url('assets/fonts/bodoni-moda-latin-wght-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('assets/fonts/jost-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('assets/fonts/jost-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── Pigments (le thème) et jetons de rôle ───────────────────────────── */

:root {
  --p-fond: #ffffff;
  --p-fond-doux: #f7f2e7;
  --p-encre: #011937;
  --p-doux: #46536b;
  --p-accent: #c6a551;
  --p-accent-profond: #7d6120;
  --p-accent-sur-sombre: #d6b867;
  --p-sombre: #011937;
  --p-sur-sombre: #f4ecda;
  --accent-texte: #011937;

  /* Les rôles, côté clair. L'or du logo est trop pâle pour un texte sur
     blanc : les liens et petits titres prennent l'or PROFOND. */
  --fond: var(--p-fond);
  --fond-doux: var(--p-fond-doux);
  --carte: var(--p-fond);
  --texte: var(--p-encre);
  --texte-doux: var(--p-doux);
  --accent: var(--p-accent);
  --accent-lien: var(--p-accent-profond);
  --accent-appuye: color-mix(in srgb, var(--p-accent) 82%, var(--p-encre));
  --or: var(--p-accent);
  --lisere: color-mix(in srgb, var(--p-encre) 13%, transparent);
  --lisere-fort: color-mix(in srgb, var(--p-encre) 30%, transparent);
  --lisere-or: color-mix(in srgb, var(--p-accent) 55%, transparent);
  --voile: color-mix(in srgb, var(--p-accent) 10%, var(--fond));
  --ombre: 0 1px 2px rgb(1 25 55 / .06), 0 14px 40px -18px rgb(1 25 55 / .28);

  /* Le logo. */
  --logo-marque: var(--p-logo-marque, var(--p-accent));
  --logo-nom: var(--p-logo-nom, var(--p-encre));

  /* Les alias que lit le widget de réservation (js/booking-widget.css, le
     contrat du module) : son panneau est sombre (--ink-2), ses boutons
     choisis portent --beige avec --ink dessus — l'or et le bleu nuit, 7:1. */
  --ink: var(--p-sombre);
  --ink-2: var(--p-sombre);
  --ink-3: color-mix(in srgb, var(--p-sombre) 80%, #ffffff);
  --beige: var(--p-accent);
  --beige-deep: color-mix(in srgb, var(--p-accent) 82%, #ffffff);
  --cream: var(--p-sur-sombre);
  --display: var(--serif);
  --body: var(--sans);
  --fast: .2s;
  --ease: var(--ressort);

  --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', 'Georgia', serif;
  --sans: 'Jost', 'Futura', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --rayon: 3px;
  --rayon-grand: 10px;
  /* La largeur du site suit l'écran : jamais une colonne étroite dans le vide. */
  --large: max(1200px, min(88vw, 1600px));
  --gouttiere: clamp(16px, 4vw, 44px);
  --entete: 80px;
  --duree: .22s;
  --ressort: cubic-bezier(.22, 1, .36, 1);
  --barre-appel: 0px;
}

/* Le ton sombre (palette « Salle du soir ») : le fond lui-même est sombre. */
:root[data-ton="sombre"] {
  --carte: color-mix(in srgb, var(--p-fond) 90%, #ffffff 10%);
  --accent-lien: var(--p-accent-sur-sombre);
  --lisere: color-mix(in srgb, var(--p-encre) 16%, transparent);
  --lisere-fort: color-mix(in srgb, var(--p-encre) 34%, transparent);
  --voile: color-mix(in srgb, var(--p-accent) 16%, var(--p-fond));
  --ombre: 0 1px 2px rgb(0 0 0 / .3), 0 14px 40px -16px rgb(0 0 0 / .6);
  color-scheme: dark;
}

/* Une section sombre : les MÊMES jetons, redéfinis. */
.nuit {
  --fond: var(--p-sombre);
  --fond-doux: color-mix(in srgb, var(--p-sombre) 88%, #ffffff 12%);
  --carte: color-mix(in srgb, var(--p-sombre) 92%, #ffffff 8%);
  --texte: var(--p-sur-sombre);
  --texte-doux: color-mix(in srgb, var(--p-sur-sombre) 76%, var(--p-sombre));
  --accent-lien: var(--p-accent-sur-sombre);
  --lisere: color-mix(in srgb, var(--p-sur-sombre) 16%, transparent);
  --lisere-fort: color-mix(in srgb, var(--p-sur-sombre) 36%, transparent);
  --voile: color-mix(in srgb, var(--p-accent) 18%, var(--p-sombre));
  --logo-nom: var(--p-sur-sombre);
  background: var(--fond);
  color: var(--texte);
}

/* ── Base ─────────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--entete) + 96px); touch-action: manipulation; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--fond); color: var(--texte);
  font: 400 1.0625rem/1.7 var(--sans);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--accent-lien); text-underline-offset: .18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--accent-lien); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 500; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 .5em; font-optical-sizing: auto; text-wrap: balance; }
p { margin: 0 0 1em; text-wrap: pretty; overflow-wrap: break-word; }
/* Les mots composés allemands et néerlandais (« Reservierungsanfrage ») ne
   tiennent pas dans 320 px à la taille d'un titre : la césure, selon la
   langue de la page, sur petit écran seulement. */
@media (max-width: 480px) { h1, h2, h3, .surtitre { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; } }
ul, ol { padding-left: 1.2em; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
[hidden] { display: none !important; }
.ic { flex: none; vertical-align: middle; }
.visuellement-cache { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saut-contenu { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--accent); color: var(--accent-texte); border-radius: var(--rayon); }
.saut-contenu:focus { top: 12px; }
.centre { text-align: center; }

.conteneur { width: 100%; max-width: var(--large); margin: 0 auto; padding: 0 var(--gouttiere); }
.conteneur--etroit { max-width: 820px; }
.section { padding: clamp(64px, 9vw, 128px) 0; }
.section--douce { background: var(--fond-doux); }
.section + .section:not(.nuit):not(.section--douce) { padding-top: 0; }
.section.nuit + .section:not(.nuit):not(.section--douce), .section--douce + .section:not(.nuit):not(.section--douce) { padding-top: clamp(64px, 9vw, 128px); }

/* ── Les ornements de la marque ──────────────────────────────────────────
   Le cadre ovale et le fleuron sont des MASQUES : leur couleur est un
   jeton (--logo-marque), réglé par le thème. */

.cadre-ovale { display: block; aspect-ratio: 664 / 903; background: var(--logo-marque); -webkit-mask: url('assets/marque/cadre-ovale.png') center / contain no-repeat; mask: url('assets/marque/cadre-ovale.png') center / contain no-repeat; pointer-events: none; }
.fleuron { display: block; width: 46px; aspect-ratio: 128 / 96; background: var(--logo-marque); -webkit-mask: url('assets/marque/fleuron.png') center / contain no-repeat; mask: url('assets/marque/fleuron.png') center / contain no-repeat; }

/* Une photo dans le cadre du cartouche : la photo est découpée à l'ovale
   intérieur, le cadre doré se pose par-dessus. */
.ovale { position: relative; margin: 0; aspect-ratio: 664 / 903; width: 100%; }
/* La photo occupe l'ovale INTÉRIEUR du cadre (mesuré sur le cartouche :
   x 99→563, y 163→738 sur 664 × 903), pas tout le cartouche : posée sur le
   cartouche entier, l'ovale n'en montrait que le milieu et coupait les têtes. */
.ovale__photo { position: absolute; left: 14.6%; right: 14.8%; top: 17.8%; bottom: 18%; clip-path: ellipse(50% 50% at 50% 50%); background: var(--fond-doux); }
.ovale__photo img, .ovale__photo .photo-vide { width: 100%; height: 100%; object-fit: cover; }
.ovale__cadre { position: absolute; inset: 0; width: 100%; }

/* ── Typographie des sections ──────────────────────────────────────────
   Fleuron → surtitre → titre : les mêmes deux écarts dans TOUTES les
   sections, dans un seul bloc, dans le flux. */

.surtitre { margin: 0 0 14px; font: 500 .8rem/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent-lien); }
.surtitre--petit { margin-bottom: 6px; font-size: .72rem; }
.entete-section { margin-bottom: clamp(32px, 4.5vw, 60px); max-width: 920px; }
.entete-section__fleuron { margin: 0 0 12px; }
.entete-section--centre { margin-inline: auto; text-align: center; }
.entete-section--centre .fleuron { margin-inline: auto; }
.entete-section--centre .chapo { margin-inline: auto; }
.titre-section { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.4rem); margin-bottom: .32em; }
.chapo { font-size: clamp(1.08rem, 1rem + .35vw, 1.24rem); color: var(--texte-doux); max-width: 60ch; margin-bottom: 0; }
.sous-titre { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); margin: 0 0 .45em; }

/* ── Boutons et liens ─────────────────────────────────────────────────── */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px;
  padding: 10px 24px; border: 1px solid transparent; border-radius: var(--rayon);
  font: 500 .92rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; text-align: center; white-space: nowrap;
  transition: background var(--duree), color var(--duree), border-color var(--duree), transform .1s;
}
.bouton:active { transform: scale(.97); }
.bouton--grand { min-height: 56px; padding: 14px 30px; font-size: .95rem; }
.bouton--accent { background: var(--accent); color: var(--accent-texte); }
.bouton--contour { border-color: var(--lisere-fort); color: var(--texte); background: transparent; }
.bouton--clair { background: var(--p-fond); color: var(--p-encre); border-color: var(--lisere); box-shadow: var(--ombre); }
.bouton[disabled] { opacity: .45; cursor: not-allowed; }
@media (hover: hover) {
  .bouton--accent:hover { background: var(--accent-appuye); color: var(--accent-texte); }
  .nuit .bouton--accent:hover, [data-ton="sombre"] .bouton--accent:hover { background: color-mix(in srgb, var(--accent) 84%, #ffffff); }
  .bouton--contour:hover { border-color: var(--accent); color: var(--texte); background: var(--voile); }
  .bouton--clair:hover { border-color: var(--p-accent); }
  .lien-fleche:hover .ic { transform: translateX(4px); }
  a:hover { text-decoration-thickness: 2px; }
}
@media (max-width: 420px) {
  .appel__actions .bouton, .erreur__actions .bouton { width: 100%; }
  .bouton { letter-spacing: .05em; padding-inline: 14px; }
}
.lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; letter-spacing: .04em; text-decoration: none; color: var(--accent-lien); padding-block: 10px; margin-block: -10px; }
.lien-fleche .ic { transition: transform var(--duree); }
.lien-plus { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 2px; border: 0; background: none; color: var(--accent-lien); font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: .2em; }

/* ── L'annonce du restaurant (congés, fermeture) : posée par le middleware ── */

.annonce { position: relative; padding: 10px 56px; background: var(--p-accent); color: var(--accent-texte); text-align: center; font-size: .95rem; line-height: 1.45; }
.annonce__texte { margin: 0; }
.annonce__lien { color: inherit; font-weight: 600; white-space: nowrap; }
.annonce__fermer { position: absolute; right: 8px; top: 50%; translate: 0 -50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.annonce__fermer:active { transform: scale(.94); }
@media (hover: hover) { .annonce__fermer:hover { background: color-mix(in srgb, var(--accent-texte) 12%, transparent); } }
@media (max-width: 560px) { .annonce { padding: 10px 52px 10px 16px; text-align: left; font-size: .9rem; } }

/* ── L'en-tête ────────────────────────────────────────────────────────── */

.entete {
  position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--p-fond) 92%, transparent);
  backdrop-filter: saturate(1.3) blur(12px); -webkit-backdrop-filter: saturate(1.3) blur(12px);
  border-bottom: 1px solid var(--lisere);
}
@media (prefers-reduced-transparency: reduce) { .entete { background: var(--p-fond); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-contrast: more) { .entete { background: var(--p-fond); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 2px solid var(--p-encre); } }
.entete__dedans { max-width: calc(var(--large) + 120px); margin: 0 auto; padding: 0 var(--gouttiere); height: var(--entete); display: flex; align-items: center; gap: 24px; }
.marque { display: flex; text-decoration: none; flex: none; color: inherit; }
.logo { display: inline-flex; align-items: center; gap: 12px; }
.cloche { display: block; }
.logo__cloche { width: 40px; height: auto; color: var(--logo-marque); }
.logo__texte { display: flex; flex-direction: column; align-items: center; line-height: 1; }
.logo__nom { font: 500 1.5rem/1 var(--serif); letter-spacing: .06em; text-transform: uppercase; color: var(--logo-nom); }
.logo__sous { font: 500 .6rem/1 var(--sans); letter-spacing: .5em; margin-right: -.5em; text-transform: uppercase; color: var(--logo-marque); margin-top: 6px; }
.logo--sur-sombre .logo__nom { color: var(--p-sur-sombre); }

.menu { margin-left: auto; }
.menu ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu a { display: block; padding: 10px 14px; color: var(--texte); text-decoration: none; font: 500 .9rem/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; position: relative; }
.menu a::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 1px; background: var(--accent); transform: scaleX(0); transition: transform .3s var(--ressort); }
.menu a[aria-current="page"]::after { transform: none; }
@media (hover: hover) { .menu a:hover::after { transform: none; } .menu a:hover { color: var(--accent-lien); } }
.entete__actions { display: flex; align-items: center; gap: 12px; }
.entete__tel { display: inline-flex; align-items: center; gap: 8px; color: var(--texte); text-decoration: none; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; padding-block: 10px; margin-block: -10px; }
@media (hover: hover) { .entete__tel:hover { color: var(--accent-lien); } }
.entete__cta { min-height: 44px; padding: 8px 20px; }
.tiroir-bascule { display: none; width: 46px; height: 46px; border: 1px solid var(--lisere-fort); border-radius: var(--rayon); background: var(--carte); cursor: pointer; align-items: center; justify-content: center; color: var(--texte); }
.tiroir-bascule:active { transform: scale(.95); }
.tiroir-bascule__croix { display: none; }
.tiroir-bascule[aria-expanded="true"] .tiroir-bascule__menu { display: none; }
.tiroir-bascule[aria-expanded="true"] .tiroir-bascule__croix { display: flex; }

.choix-langue { position: relative; }
.choix-langue__bouton { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--lisere); border-radius: var(--rayon); background: transparent; color: var(--texte); cursor: pointer; font-weight: 500; letter-spacing: .08em; }
@media (hover: hover) { .choix-langue__bouton:hover { border-color: var(--accent); } }
.choix-langue__liste { position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; padding: 6px; background: var(--p-fond); border: 1px solid var(--lisere); border-radius: var(--rayon-grand); box-shadow: var(--ombre); display: none; z-index: 60; }
.choix-langue.est-ouvert .choix-langue__liste { display: grid; animation: nait .18s var(--ressort); transform-origin: top right; }
.choix-langue__liste a, .choix-langue__liste span { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--rayon); color: var(--p-encre); text-decoration: none; }
.choix-langue__liste b { font: 600 .75rem/1 var(--sans); letter-spacing: .1em; width: 22px; color: var(--accent-lien); }
.choix-langue__liste [aria-current] { background: var(--voile); }
@media (hover: hover) { .choix-langue__liste a:hover { background: var(--voile); } }
@keyframes nait { from { opacity: 0; transform: scale(.96) translateY(-4px); } to { opacity: 1; transform: none; } }

.tiroir {
  position: fixed; inset: var(--entete) 0 0 0; z-index: 49; background: var(--p-fond); overflow-y: auto; overscroll-behavior: contain;
  padding: 18px var(--gouttiere) calc(32px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 26px;
}
.tiroir__nav ul { list-style: none; margin: 0; padding: 0; }
.tiroir__nav a { display: flex; align-items: center; min-height: 62px; border-bottom: 1px solid var(--lisere); color: var(--texte); text-decoration: none; font: 500 1.7rem/1.2 var(--serif); }
.tiroir__nav a[aria-current="page"] { color: var(--accent-lien); }
.tiroir__pied { display: flex; flex-direction: column; gap: 18px; }
.tiroir__langues { display: flex; flex-wrap: wrap; gap: 8px; }
.tiroir__langues a, .tiroir__langues span { padding: 10px 14px; border: 1px solid var(--lisere); border-radius: var(--rayon); color: var(--texte); text-decoration: none; }
.tiroir__langues [aria-current] { border-color: var(--accent); background: var(--voile); }
.tiroir__reseaux, .pied__reseaux { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.pastille-reseau { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--lisere-fort); border-radius: 50%; color: var(--texte); }
@media (hover: hover) { .pastille-reseau:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-texte); } }

@media (max-width: 1180px) { .entete__tel span { display: none; } .entete__tel { width: 44px; height: 44px; justify-content: center; border: 1px solid var(--lisere); border-radius: var(--rayon); margin-block: 0; } }
@media (max-width: 960px) {
  .menu, .entete__cta, .entete__actions > .choix-langue { display: none; }
  .entete__actions { margin-left: auto; }
  .tiroir-bascule { display: inline-flex; }
}
@media (min-width: 961px) { .tiroir { display: none !important; } }
@media (max-width: 480px) { :root { --entete: 68px; } .logo__cloche { width: 32px; } .logo__nom { font-size: 1.2rem; } .logo__sous { font-size: .52rem; letter-spacing: .42em; margin-right: -.42em; } }
@media (max-width: 360px) {
  .entete__dedans { gap: 10px; }
  .entete__actions { gap: 8px; }
  .logo { gap: 8px; }
  .logo__cloche { width: 26px; }
  .logo__nom { font-size: 1.02rem; letter-spacing: .04em; }
  .logo__sous { font-size: .48rem; letter-spacing: .32em; margin-right: -.32em; }
  .entete__tel, .tiroir-bascule { width: 42px; height: 42px; }
}


/* ── Les hauts de page de l'accueil ──────────────────────────────────────
   100 svh, et PLEIN : les repères (jours, lunch, menus, cave) vont DANS
   le haut de page, en pied d'écran. Le contenu s'ancre en haut. */

.hero { position: relative; min-height: calc(100svh - var(--entete) - var(--annonce-h, 0px) - 1px); display: grid; overflow: clip; }
.hero__dedans { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); grid-template-rows: 1fr auto; column-gap: clamp(28px, 5vw, 80px); padding-top: clamp(36px, 6vh, 84px); }
.hero__texte { align-self: center; max-width: 780px; position: relative; }
.hero__titre { font-size: clamp(2.5rem, 1.2rem + 4vw, 5.4rem); line-height: 1.02; margin-bottom: .32em; }
.hero__chapo { font-size: clamp(1.1rem, 1rem + .45vw, 1.32rem); color: var(--texte-doux); max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero__pied { grid-column: 1 / -1; align-self: end; }
.reperes { --taille-rep: clamp(1.25rem, 1rem + .8vw, 1.7rem); --ic-rep: 20px; list-style: none; margin: clamp(28px, 4vh, 48px) 0 0; padding: 22px 0 clamp(22px, 3vh, 34px); border-top: 1px solid var(--lisere-or); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.reperes li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 0 clamp(12px, 2vw, 28px); }
.reperes li + li { border-left: 1px solid var(--lisere); }
.reperes li:first-child { padding-left: 0; }
/* L'icône sur la PREMIÈRE ligne de la valeur, même quand celle-ci en prend deux. */
.reperes .ic { grid-row: 1; width: var(--ic-rep); height: var(--ic-rep); margin-top: calc((var(--taille-rep) * 1.1 - var(--ic-rep)) / 2); color: var(--accent-lien); }
.reperes span { grid-column: 2; }
.reperes strong { font: 500 var(--taille-rep)/1.1 var(--serif); white-space: nowrap; }
.reperes span { font-size: .9rem; color: var(--texte-doux); line-height: 1.35; }

/* La cloche : le bleu nuit du logo, une assiette dans le cadre ovale. */
.hero--cloche .ovale--hero { align-self: center; justify-self: center; width: min(100%, 470px, calc((100svh - var(--entete) - 260px) * .735)); min-width: 260px; }
.hero--cloche::before { content: ''; position: absolute; inset: auto -10% -40% 40%; height: 90%; background: radial-gradient(closest-side, color-mix(in srgb, var(--p-accent) 16%, transparent), transparent); pointer-events: none; }
.mvt .hero--cloche .ovale__photo { animation: ovale-revele 1.4s var(--ressort) .1s both; }
.mvt .hero--cloche .ovale__cadre { animation: cadre-pose 1.2s var(--ressort) both; }
@keyframes ovale-revele { from { clip-path: ellipse(0% 0% at 50% 50%); } to { clip-path: ellipse(50% 50% at 50% 50%); } }
@keyframes cadre-pose { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

/* Les assiettes : fond clair, trois assiettes en menu (I, II, III). */
.hero--assiette { background: var(--fond); }
.hero--assiette .hero__dedans { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.hero--assiette::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--p-sombre); }
.hero__assiettes { align-self: center; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); align-items: start; max-height: calc(100svh - var(--entete) - 220px); }
.hero__assiette { position: relative; margin: 0; }
.hero__assiette img { width: 100%; aspect-ratio: 3 / 4.6; max-height: calc(100svh - var(--entete) - 280px); object-fit: cover; border-radius: 999px 999px var(--rayon) var(--rayon); }
.hero__assiette--2 { margin-top: clamp(30px, 6vh, 70px); }
.hero__assiette--3 { margin-top: clamp(60px, 12vh, 140px); }
.hero__assiette-rang { position: absolute; left: 50%; bottom: -16px; translate: -50% 0; z-index: 1; min-width: 44px; height: 44px; padding: 0 10px; display: flex; align-items: center; justify-content: center; background: var(--p-sombre); color: var(--p-accent-sur-sombre); font: italic 500 1.05rem/1 var(--serif); border-radius: 22px; }
.mvt .hero__assiette { animation: monte .9s var(--ressort) both; }
.mvt .hero__assiette--2 { animation-delay: .12s; }
.mvt .hero__assiette--3 { animation-delay: .24s; }
@keyframes monte { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* La salle : la photo en plein écran, le cartouche en filigrane. */
.hero--salle { background: var(--p-sombre); }
.hero__fond { position: absolute; inset: 0; margin: 0; }
.hero__fond img { width: 100%; height: 100%; object-fit: cover; }
.hero__fond::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--p-sombre) 55%, transparent) 0%, color-mix(in srgb, var(--p-sombre) 72%, transparent) 55%, color-mix(in srgb, var(--p-sombre) 92%, transparent) 100%); }
.hero--salle .hero__dedans { position: relative; grid-template-columns: minmax(0, 1fr); }
.hero--salle .hero__texte { justify-self: center; text-align: center; max-width: 820px; padding: clamp(20px, 4vh, 48px) 0; }
.hero--salle .hero__chapo { margin-inline: auto; }
.hero--salle .hero__actions { justify-content: center; }
.hero__filigrane { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: 128%; width: auto; opacity: .2; z-index: -1; }
.hero--salle .reperes { border-top-color: color-mix(in srgb, var(--p-accent) 60%, transparent); }

/* ── L'histoire ───────────────────────────────────────────────────────── */

.histoire__dedans { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.histoire__dedans--seul { grid-template-columns: minmax(0, 1fr); max-width: 860px; text-align: center; }
.histoire__photo { margin: 0; position: relative; }
.histoire__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50% 50% var(--rayon) var(--rayon) / 38% 38% var(--rayon) var(--rayon); }
.histoire__photo::after { content: ''; position: absolute; inset: -14px; pointer-events: none; border: 1px solid var(--lisere-or); border-radius: 50% 50% 6px 6px / 38% 38% 6px 6px; pointer-events: none; }
.histoire__texte > p:not(.histoire__signature) { font-size: 1.1rem; color: var(--texte-doux); }
.histoire__signature { font: italic 500 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.2 var(--serif); color: var(--accent-lien); margin: 24px 0 28px; }

/* ── Les menus ────────────────────────────────────────────────────────── */

.menus { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.menu-carte {
  position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: clamp(30px, 3vw, 44px) clamp(18px, 2vw, 28px) clamp(26px, 2.6vw, 36px); background: var(--carte); border: 1px solid var(--lisere-or);
  outline: 1px solid var(--lisere-or); outline-offset: -8px; border-radius: var(--rayon);
}
.menu-carte__services { margin: 0; display: flex; flex-direction: column; align-items: center; }
.menu-carte__nombre { font: 400 clamp(3.4rem, 2.6rem + 2vw, 4.6rem)/.9 var(--serif); color: var(--accent-lien); }
.menu-carte__libelle { font: 500 .72rem/1.3 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--texte-doux); margin-top: 4px; }
.menu-carte__nom { font: italic 500 clamp(1.4rem, 1.15rem + .8vw, 1.9rem)/1.15 var(--serif); margin: 10px 0 4px; }
.menu-carte__composition { font-size: .92rem; color: var(--texte-doux); margin: 0 0 auto; padding-bottom: 18px; }
.menu-carte__prix { margin: 0; padding-top: 16px; border-top: 1px solid var(--lisere-or); width: 70%; font: 500 2rem/1 var(--serif); }
.menu-carte__vins { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 12px 0 0; font-size: .86rem; color: var(--texte-doux); }
.menu-carte__vins .ic { color: var(--accent-lien); }
.menu-carte__vins-prix { color: var(--texte); font-weight: 500; white-space: nowrap; }
.menus-apercu__lunch { margin: clamp(28px, 4vw, 48px) 0 clamp(28px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); align-items: center; padding: clamp(22px, 3vw, 36px) clamp(20px, 3vw, 40px); background: var(--carte); border-left: 3px solid var(--accent); }
.menus-apercu__lunch-texte p { color: var(--texte-doux); margin: 0; }
.menus-apercu__lunch .sous-titre { margin-bottom: .25em; }

/* Le lunch, et les lignes à points de conduite (lunch, carte, vins). */
.lunch__formules { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lunch__formules li, .plat { display: grid; grid-template-columns: auto minmax(24px, 1fr) auto; align-items: baseline; gap: 10px; }
.lunch__formule { font-weight: 500; }
.lunch__points, .plat__points { border-bottom: 1px dotted var(--lisere-fort); transform: translateY(-5px); }
.prix { font: 500 1.2rem/1 var(--serif); white-space: nowrap; font-variant-numeric: lining-nums; }
.lunch__semaine { margin-top: clamp(28px, 3vw, 40px); padding-top: clamp(22px, 3vw, 32px); border-top: 1px solid var(--lisere-or); }
.lunch__titre { font: italic 500 clamp(1.6rem, 1.2rem + 1vw, 2.2rem)/1.15 var(--serif); }
.lunch__plats { margin: 18px 0 0; display: grid; gap: 14px; }
.lunch__plats div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.lunch__plats dt { font: 500 .75rem/1.4 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-lien); }
.lunch__plats dd { margin: 0; }

/* ── La page de la carte ──────────────────────────────────────────────── */

.page-tete { padding: clamp(40px, 6vw, 80px) 0 clamp(48px, 6vw, 84px); position: relative; overflow: clip; }
.page-tete__dedans { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.page-tete__titre { font-size: clamp(2.6rem, 1.3rem + 4vw, 5.2rem); line-height: 1.03; margin-bottom: .3em; }
.page-tete__chapo { font-size: clamp(1.08rem, 1rem + .4vw, 1.28rem); color: var(--texte-doux); max-width: 52ch; margin: 0; }
.ovale--tete { width: min(100%, 340px); justify-self: center; }

.sommaire { position: sticky; top: var(--entete); z-index: 30; padding: 14px 0; transition: background var(--duree), box-shadow var(--duree); }
.sommaire + .section { padding-top: clamp(40px, 5vw, 72px); }
.sommaire.est-collee { background: color-mix(in srgb, var(--p-fond) 97%, transparent); box-shadow: 0 1px 0 var(--lisere); }
.sommaire__bande { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.sommaire__bande::-webkit-scrollbar { display: none; }
.pastille { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 20px; border: 1px solid var(--lisere-or); border-radius: 99px; color: var(--texte); text-decoration: none; white-space: nowrap; font-weight: 500; letter-spacing: .04em; background: var(--fond); transition: background var(--duree), color var(--duree), border-color var(--duree), transform .1s; }
.pastille:active { transform: scale(.97); }
.pastille.est-active, .pastille[aria-current="true"] { background: var(--p-sombre); color: var(--p-sur-sombre); border-color: var(--p-sombre); }
@media (hover: hover) { .pastille:not(.est-active):hover { border-color: var(--accent); background: var(--voile); } }
@media (max-width: 700px) { .sommaire__bande { justify-content: flex-start; } }

.lunch-page__dedans { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.ovale--lunch { width: min(100%, 360px); justify-self: center; }

.a-la-carte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); }
.rubrique__titre { font: italic 500 clamp(1.7rem, 1.3rem + 1vw, 2.3rem)/1.1 var(--serif); padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--lisere-or); }
.rubrique__plats { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.plat__nom { line-height: 1.5; }

.vins__dedans { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(28px, 6vw, 96px); align-items: center; }
.vins__attente { font-size: 1.1rem; color: var(--texte-doux); max-width: 60ch; padding-left: 18px; border-left: 2px solid var(--accent); }
.vins__photo { margin: 0; }
.vins__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 999px 999px var(--rayon) var(--rayon); }
.vins__liste { display: grid; gap: 34px; }
.vins__entete { display: grid; grid-template-columns: minmax(0, 1fr) 70px 80px; gap: 12px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-doux); text-align: right; margin-bottom: 8px; }
.vin { display: grid; grid-template-columns: minmax(0, 1fr) 70px 80px; gap: 12px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px dotted var(--lisere-fort); }
.vin__prix { text-align: right; }
.vin__appellation, .vin__millesime { color: var(--texte-doux); }
.vin__note { display: block; font-size: .9rem; color: var(--texte-doux); }
.vin__tiret { color: var(--texte-doux); }

/* ── La mosaïque des assiettes ──────────────────────────────────────────
   ┌───────┬───┬───┐   1 : 2×2   2 : 1×1   3 : 1×2   5 : 1×1
   │   1   │ 2 │ 3 │   4 : 1×2   6 : 1×2   7 : 2×2
   │       ├───┤   │   4 colonnes × 4 rangées = 16 cases, toutes pleines.
   ├───┬───┤ 5 │   │
   │ 4 │ 6 ├───┴───┤
   │   │   │   7   │
   └───┴───┴───────┘ */

.mosaique { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 15vw, 250px); gap: clamp(8px, 1vw, 14px); }
.mosaique__case--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.mosaique__case--2 { grid-column: 3; grid-row: 1; }
.mosaique__case--3 { grid-column: 4; grid-row: 1 / 3; }
.mosaique__case--5 { grid-column: 3; grid-row: 2; }
.mosaique__case--4 { grid-column: 1; grid-row: 3 / 5; }
.mosaique__case--6 { grid-column: 2; grid-row: 3 / 5; }
.mosaique__case--7 { grid-column: 3 / 5; grid-row: 3 / 5; }
/* Moins de sept photos (une masquée, une retirée) : chaque nombre a son
   pavage, toujours plein.
     6 : trois colonnes — 1 (2×2), puis cinq cases (3 × 3 = 9)
     5 : quatre colonnes — 1 (2×2), 2-5 (1×1) (4 × 2 = 8)
     4, 3, 2, 1 : des colonnes égales, sur deux rangées de haut. */
.mosaique:not([data-nombre="7"]) .mosaique__case { grid-column: auto; grid-row: auto; }
.mosaique[data-nombre="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mosaique[data-nombre="6"] .mosaique__case--1, .mosaique[data-nombre="5"] .mosaique__case--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.mosaique[data-nombre="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mosaique[data-nombre="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mosaique[data-nombre="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mosaique[data-nombre="1"] { grid-template-columns: minmax(0, 1fr); }
.mosaique[data-nombre="4"] .mosaique__case, .mosaique[data-nombre="3"] .mosaique__case, .mosaique[data-nombre="2"] .mosaique__case, .mosaique[data-nombre="1"] .mosaique__case { grid-row: span 2; }
.mosaique[data-nombre="0"] { display: none; }
.mosaique__bouton { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--fond-doux); cursor: zoom-in; overflow: hidden; border-radius: var(--rayon); }
.mosaique__bouton img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ressort); }
.mosaique__bouton:active img { transform: scale(.985); }
@media (hover: hover) { .mosaique__bouton:hover img { transform: scale(1.04); } .mosaique__bouton:hover .mosaique__legende { opacity: 1; transform: none; } }
.mosaique__legende {
  position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 8px 12px; text-align: left;
  background: var(--p-sombre); color: var(--p-sur-sombre); border-radius: var(--rayon);
  font-size: .86rem; line-height: 1.35;
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ressort);
}
@media (hover: none) { .mosaique__legende { opacity: 1; transform: none; } }

/* ── La maison (salle et cuisine) ─────────────────────────────────────── */

.lieu__duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 80px); }
.lieu__bloc--decale { margin-top: clamp(40px, 8vw, 120px); }
.lieu__photo { margin: 0 0 26px; display: block; width: 100%; padding: 0; border: 0; background: none; }
.lieu__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rayon); }
.lieu__photo--bouton { cursor: zoom-in; }
.lieu__bloc p { color: var(--texte-doux); max-width: 52ch; }

/* ── L'équipe ─────────────────────────────────────────────────────────── */

.equipe__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.personne { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ovale--portrait { width: min(100%, 240px); margin-bottom: 14px; }
.personne__role { margin: 0 0 4px; font: 500 .74rem/1.3 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--accent-lien); }
.personne__nom { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); margin-bottom: .15em; }
/* Plusieurs cartes côte à côte : un nom sur deux lignes ne décale pas la
   fonction de sa voisine — la place de deux lignes, le nom en bas. */
@media (min-width: 641px) { .personne__nom { min-height: 2.16em; display: flex; align-items: flex-end; justify-content: center; } }
.personne__fonction { font-style: italic; color: var(--texte-doux); margin-bottom: 14px; }
.personne__texte { color: var(--texte-doux); max-width: 46ch; }
.photo-vide { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 6px; background: var(--p-sombre); color: var(--p-accent-sur-sombre); font: 500 2rem/1 var(--serif); letter-spacing: .06em; }
.photo-vide::after { content: attr(data-initiales); }
.photo-vide__cloche { width: 30%; }

/* ── Horaires et accès ────────────────────────────────────────────────── */

.pratique__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.pratique__infos { display: grid; gap: 30px; }
.pratique__titre { display: flex; align-items: flex-start; gap: 10px; font: 500 .8rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--accent-lien); margin-bottom: 14px; }
.pratique__adresse { font: 500 1.35rem/1.35 var(--serif); margin-bottom: 8px; }
.pratique__liens { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0; }
.pratique__liens a { display: inline-flex; align-items: center; gap: 8px; color: var(--texte); font-weight: 500; text-decoration: none; padding-block: 10px; margin-block: -10px; }
.pratique__bloc > p { color: var(--texte-doux); margin-bottom: 10px; }

.horaires { margin: 0; display: grid; }
.horaire { display: grid; grid-template-columns: minmax(9.5rem, 13rem) minmax(0, 1fr); gap: 4px 18px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--lisere); }
.horaire dt { font-weight: 500; }
.horaire dd { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.service { white-space: nowrap; font-variant-numeric: tabular-nums; }
.service__nom { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--texte-doux); margin-right: 4px; }
.ferme { font-style: normal; color: var(--texte-doux); }
.horaire--ferme dt { color: var(--texte-doux); font-weight: 400; }

.carte-lieu { position: relative; }
@media (min-width: 901px) { .carte-lieu { position: sticky; top: calc(var(--entete) + 24px); } }
.carte-lieu__facade { position: relative; border-radius: var(--rayon-grand); overflow: hidden; border: 1px solid var(--lisere-or); background: var(--fond-doux); }
.carte-lieu__plan { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.carte-lieu__epingle { position: absolute; left: 50%; top: 50%; translate: -50% -100%; color: var(--p-sombre); filter: drop-shadow(0 4px 6px rgb(0 0 0 / .3)); }
.carte-lieu__epingle .ic { fill: var(--p-accent); }
.carte-lieu__charger { position: absolute; left: 50%; bottom: 18px; translate: -50% 0; }
.carte-lieu__attribution { position: absolute; right: 6px; top: 6px; padding: 2px 6px; background: rgb(255 255 255 / .85); color: #222; font-size: .7rem; border-radius: 3px; }
.carte-lieu__note { font-size: .85rem; color: var(--texte-doux); margin: 10px 0 0; }
.carte-lieu iframe { width: 100%; aspect-ratio: 3 / 2; border: 0; border-radius: var(--rayon-grand); display: block; }

/* ── L'appel final ────────────────────────────────────────────────────── */

.appel { position: relative; overflow: clip; text-align: center; }
.appel__cadre { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: 150%; width: auto; opacity: .14; }
.appel__dedans { position: relative; display: flex; flex-direction: column; align-items: center; }
.appel__fleuron { margin-bottom: 18px; width: 54px; }
.appel__titre { font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.4rem); }
.appel__texte { color: var(--texte-doux); font-size: 1.12rem; max-width: 52ch; }
.appel__actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px 26px; margin-top: 18px; }
.appel__tel { color: var(--texte); text-decoration: none; font-size: 1.05rem; padding-block: 10px; }
.appel__tel strong { font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--p-accent-sur-sombre); font-weight: 500; }

/* ── Réserver ─────────────────────────────────────────────────────────── */

.reserver__dedans { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.reserver__moyens { display: grid; gap: 18px; position: sticky; top: calc(var(--entete) + 24px); }
.moyen { padding: 22px 24px; border: 1px solid var(--lisere-or); border-radius: var(--rayon); background: var(--carte); }
.moyen--note { background: var(--fond-doux); border-color: transparent; }
.moyen__titre { display: flex; align-items: flex-start; gap: 10px; font: 500 .8rem/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--accent-lien); margin-bottom: 10px; }
.moyen p { color: var(--texte-doux); margin-bottom: 10px; }
/* L'icône d'un intitulé sur sa PREMIÈRE ligne, quand il en prend deux. */
.moyen__titre .ic, .pratique__titre .ic { margin-top: calc((1lh - 20px) / 2); }
.moyen__valeur { font: 500 1.7rem/1.2 var(--serif); color: var(--texte); text-decoration: none; font-variant-numeric: lining-nums; display: inline-block; padding-block: 6px; }
.moyen__valeur--courriel { font-size: clamp(1.05rem, .9rem + .5vw, 1.3rem); overflow-wrap: anywhere; }
.reserver__formulaire { background: var(--carte); border: 1px solid var(--lisere-or); outline: 1px solid var(--lisere-or); outline-offset: -8px; border-radius: var(--rayon); padding: clamp(24px, 3.4vw, 48px); }
.formulaire__titre { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.6rem); margin-bottom: .3em; }
/* La réservation en ligne (module ouvert : html[data-reservation-en-ligne],
   posé par le middleware) remplace la demande par courriel. */
.reservation-en-ligne { display: none; }
html[data-reservation-en-ligne] .reservation-en-ligne { display: block; }
html[data-reservation-en-ligne] #demande { display: none; }
.formulaire__intro { color: var(--texte-doux); }
@media (max-width: 420px) { .reserver__formulaire { padding: 22px 16px; outline-offset: -6px; } }

/* ── Formulaires ──────────────────────────────────────────────────────── */

.formulaire__form { display: grid; gap: 22px; }
.formulaire__obligatoires, .formulaire__vie { font-size: .85rem; color: var(--texte-doux); margin: 0; }
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ--large { grid-column: 1 / -1; }
.champ label, .choix-groupe legend, .couverts__libelle { font-weight: 500; font-size: .95rem; }
.champ__requis { color: var(--accent-lien); }
.champ input, .champ textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border: 1px solid var(--lisere-fort); border-radius: var(--rayon);
  background: var(--fond); color: var(--texte); font: 400 1rem/1.4 var(--sans); -webkit-appearance: none; appearance: none;
}
.champ textarea { resize: vertical; min-height: 100px; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); }
.champ.est-invalide input, .champ.est-invalide textarea { border-color: #b3261e; }
[data-ton="sombre"] .champ.est-invalide input, .nuit .champ.est-invalide input { border-color: #ff8a80; }
.champ__aide { font-size: .85rem; color: var(--texte-doux); margin: 0; }
.champ__erreur { font-size: .88rem; color: #a3221a; margin: 0; font-weight: 500; }
[data-ton="sombre"] .champ__erreur, .nuit .champ__erreur { color: #ff8a80; }
.choix-groupe { border: 0; margin: 0; padding: 0; min-width: 0; }
.choix-groupe legend { margin-bottom: 8px; padding: 0; }
.choix-groupe > .champ__aide { margin: -4px 0 10px; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilles__vide { margin: 0; color: var(--texte-doux); font-size: .92rem; font-style: italic; }
.pastille-choix {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; min-height: 48px; padding: 8px 14px;
  border: 1px solid var(--lisere-fort); border-radius: var(--rayon); background: var(--fond); color: var(--texte); cursor: pointer; line-height: 1.15;
  font-variant-numeric: tabular-nums; transition: background var(--duree), border-color var(--duree), color var(--duree), transform .1s;
}
.pastille-choix:active { transform: scale(.97); }
.pastille-choix small { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-doux); }
.pastille-choix strong { font: 500 1.15rem/1.1 var(--serif); }
.pastille-choix[aria-checked="true"] { background: var(--p-sombre); border-color: var(--p-sombre); color: var(--p-sur-sombre); }
.pastille-choix[aria-checked="true"] small { color: var(--p-accent-sur-sombre); }
@media (hover: hover) { .pastille-choix:not([aria-checked="true"]):hover { border-color: var(--accent); background: var(--voile); } }
.pastilles--jours { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.pastille-choix strong, .pastille-choix small { white-space: nowrap; }
.choix-groupe.est-invalide .pastille-choix { border-color: #b3261e; }
.couverts { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 16px; background: var(--fond-doux); border-radius: var(--rayon); }
.couverts__compteur { display: inline-flex; align-items: center; gap: 4px; }
.couverts__bouton { width: 48px; height: 48px; border: 1px solid var(--lisere-fort); border-radius: 50%; background: var(--fond); color: var(--texte); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.couverts__bouton:active { transform: scale(.94); }
.couverts__bouton[disabled] { opacity: .35; cursor: not-allowed; }
.couverts__valeur { min-width: 56px; text-align: center; font: 500 1.8rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.formulaire__recap { margin: 0; padding: 12px 16px; border-left: 3px solid var(--accent); background: var(--voile); font-weight: 500; }
.piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.turnstile { min-height: 65px; }
.formulaire__alerte { margin: 0; padding: 12px 14px; border-radius: var(--rayon); background: #fdecea; color: #8a1c14; font-weight: 500; }
.formulaire__envoyer { justify-self: start; }
.formulaire__envoyer.est-occupe { opacity: .7; pointer-events: none; }
.formulaire__merci { text-align: center; padding: 28px 12px; }
.formulaire__merci-picto { display: inline-flex; width: 76px; height: 76px; align-items: center; justify-content: center; background: var(--p-sombre); color: var(--p-accent-sur-sombre); border-radius: 50%; margin-bottom: 14px; }
.formulaire__merci h3 { font-size: 2rem; }
.formulaire__sans-script { padding: 16px; border: 1px solid var(--lisere-or); }
@media (max-width: 560px) { .champs { grid-template-columns: 1fr; } .formulaire__envoyer { justify-self: stretch; } }

/* ── Mentions légales, page introuvable ───────────────────────────────── */

.legal .sous-titre { font-size: 1.6rem; margin-top: 1.6em; }
.legal p { color: var(--texte-doux); }
.legal__tva { font-weight: 500; }
.erreur { position: relative; overflow: clip; min-height: calc(100svh - var(--entete)); display: grid; align-items: center; }
.erreur__cadre { position: absolute; left: 50%; top: 50%; translate: -50% -50%; height: 120%; width: auto; opacity: .16; }
.erreur__dedans { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
.erreur__fleuron { margin-bottom: 16px; }
.erreur__titre { font-size: clamp(2.4rem, 1.3rem + 3.6vw, 4.6rem); }
.erreur__dedans > p { color: var(--texte-doux); max-width: 52ch; }
.erreur__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* ── Pied de page et barre mobile ─────────────────────────────────────── */

.pied { padding-top: clamp(56px, 7vw, 96px); border-top: 3px solid var(--p-accent); }
.pied__dedans { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.3fr) minmax(0, 1.25fr) minmax(0, .8fr); gap: clamp(28px, 4vw, 56px); padding-bottom: 40px; }
.pied h2 { font: 500 .78rem/1.2 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--accent-lien); margin-bottom: 16px; }
.pied__apropos { color: var(--texte-doux); margin: 18px 0 18px; max-width: 36ch; font-size: .95rem; }
.marque--pied .logo__cloche { width: 46px; }
.marque--pied .logo__nom { font-size: 1.7rem; }
.horaires--pied .horaire { grid-template-columns: minmax(7.5rem, 9.5rem) minmax(0, 1fr); padding: 7px 0; font-size: .92rem; }
.horaires--pied .horaire dd { flex-direction: column; gap: 0; }
/* Au téléphone étroit, le jour au-dessus de ses heures : côte à côte, elles sortaient de l'écran (320 px). */
@media (max-width: 420px) { .horaires--pied .horaire { grid-template-columns: minmax(0, 1fr); } }
.pied__adresse { display: grid; gap: 12px; }
.pied__adresse a { display: inline-flex; align-items: flex-start; gap: 10px; color: var(--texte); text-decoration: none; overflow-wrap: anywhere; padding-block: 4px; margin-block: -4px; }
.pied__adresse .ic { margin-top: calc((1lh - 17px) / 2); color: var(--accent-lien); }
.pied__liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied__liens a { color: var(--texte); text-decoration: none; padding-block: 4px; display: inline-block; }
@media (hover: hover) { .pied__liens a:hover, .pied__adresse a:hover { color: var(--accent-lien); text-decoration: underline; } }
.pied__bas { border-top: 1px solid var(--lisere); padding-top: 18px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: .85rem; color: var(--texte-doux); }
.pied__bas p { margin: 0; }
.pied__bas a { color: var(--texte-doux); }
.pied__signature { margin-left: auto !important; }

.barre-appel { display: none; }
@media (max-width: 760px) {
  .barre-appel {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--p-fond); border-top: 1px solid var(--lisere); padding-bottom: env(safe-area-inset-bottom);
    transition: transform .35s var(--ressort), visibility .35s;
  }
  html.js .barre-appel.est-cachee { transform: translateY(100%); visibility: hidden; }
  .barre-appel a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 62px; min-width: 0; padding: 6px 4px; color: var(--p-encre); text-decoration: none; font-size: .8rem; font-weight: 500; letter-spacing: .04em; text-align: center; text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
  .barre-appel a:active { background: var(--voile); }
  .barre-appel a + a { border-left: 1px solid var(--lisere); }
  .barre-appel a:last-child { background: var(--p-sombre); color: var(--p-sur-sombre); }
  .pied__bas { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* ── La visionneuse ──────────────────────────────────────────────────────
   Une zone identique pour tous les clichés : l'image est HORS du flux,
   centrée, à son format ; l'arrondi porte sur ses vrais bords. Le pied a
   une hauteur fixe. Elle entre et sort par le même chemin. */

.visionneuse { padding: 0; border: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgb(1 12 26 / .96); color: #fff; overscroll-behavior: contain; }
.visionneuse[open] { display: grid; grid-template-columns: 72px minmax(0, 1fr) 72px; grid-template-rows: minmax(0, 1fr) 84px; }
.visionneuse:not([open]) { display: none; }
.visionneuse::backdrop { background: rgb(0 0 0 / .7); }
.visionneuse.est-ouverte { animation: vis-entre .28s var(--ressort); }
.visionneuse.est-sortante { animation: vis-sort .2s ease-in forwards; }
@keyframes vis-entre { from { opacity: 0; } to { opacity: 1; } }
@keyframes vis-sort { to { opacity: 0; } }
.visionneuse__cadre { grid-column: 2; grid-row: 1; position: relative; min-height: 0; margin: 24px 0 8px; touch-action: pan-y; }
.visionneuse__cadre img { position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 10px; will-change: transform; user-select: none; -webkit-user-drag: none; }
.visionneuse__fermer { position: absolute; top: 14px; right: 14px; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgb(255 255 255 / .3); background: rgb(0 0 0 / .45); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.visionneuse__nav { width: 50px; height: 50px; align-self: center; justify-self: center; border-radius: 50%; border: 1px solid rgb(255 255 255 / .3); background: rgb(0 0 0 / .45); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.visionneuse__fermer:active, .visionneuse__nav:active { transform: scale(.94); }
.visionneuse__nav--avant { grid-column: 1; grid-row: 1; }
.visionneuse__nav--avant .ic { transform: rotate(180deg); }
.visionneuse__nav--apres { grid-column: 3; grid-row: 1; }
.visionneuse__pied { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: 90px minmax(0, 1fr) 90px; align-items: center; gap: 12px; padding: 0 20px env(safe-area-inset-bottom); font-size: .95rem; }
.visionneuse__legende { margin: 0; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.visionneuse__compteur { text-align: right; font-variant-numeric: tabular-nums; color: rgb(255 255 255 / .75); }
.visionneuse.un-seul .visionneuse__nav, .visionneuse.un-seul .visionneuse__compteur { visibility: hidden; }
@media (max-width: 640px) {
  .visionneuse[open] { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto 76px; }
  .visionneuse__cadre { grid-column: 1; margin: 64px 8px 8px; }
  .visionneuse__pied { grid-row: 2; grid-template-columns: minmax(0, 1fr); padding: 6px 16px 0; }
  .visionneuse__pied .visionneuse__vide { display: none; }
  .visionneuse__compteur { grid-row: 2; text-align: center; padding-bottom: calc(10px + env(safe-area-inset-bottom)); align-self: center; }
  .visionneuse__nav { grid-row: 3; grid-column: 1; width: 48px; height: 48px; align-self: center; }
  .visionneuse__nav--avant { justify-self: start; margin-left: 16px; }
  .visionneuse__nav--apres { justify-self: end; margin-right: 16px; }
}

/* ── Le panneau de relecture (?choix=1) ───────────────────────────────── */

.choix-relecture { position: fixed; z-index: 300; right: 16px; bottom: 16px; width: min(340px, calc(100vw - 32px)); background: #0b1a2e; color: #f4ecda; border-radius: 12px; box-shadow: 0 20px 60px -10px rgb(0 0 0 / .55); font: 400 .92rem/1.4 var(--sans); }
.choix-relecture__tete { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgb(255 255 255 / .12); }
.choix-relecture__tete strong { font: 500 1rem/1 var(--sans); display: flex; align-items: center; gap: 8px; }
.choix-relecture__tete strong::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #c6a551; }
.choix-relecture__corps { padding: 12px 14px 14px; display: grid; gap: 12px; }
.choix-relecture__groupe p { margin: 0 0 6px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: #b9b2a2; }
.choix-relecture__options { display: grid; gap: 6px; }
.choix-relecture button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 9px 11px; border-radius: 8px; border: 1px solid rgb(255 255 255 / .16); background: transparent; color: #f4ecda; cursor: pointer; text-align: left; font: inherit; }
.choix-relecture button[aria-pressed="true"] { background: #f4ecda; color: #0b1a2e; border-color: #f4ecda; }
@media (hover: hover) { .choix-relecture button:hover { border-color: rgb(255 255 255 / .42); } }
.choix-relecture__pastilles { display: inline-flex; gap: 3px; }
.choix-relecture__pastilles i { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgb(0 0 0 / .2); }
.choix-relecture__plier { width: 34px !important; height: 34px; min-height: 34px !important; padding: 0 !important; justify-content: center; border-radius: 50% !important; }
.choix-relecture.est-plie .choix-relecture__corps { display: none; }

/* ── Apparitions au défilement ──────────────────────────────────────────
   L'opacité de départ ne se pose QUE si le script a démarré (html.js). */

.mvt.js .apparait { opacity: 0; transform: translateY(18px); transition: opacity .8s, transform .8s var(--ressort); }
.mvt.js .apparait.est-vu { opacity: 1; transform: none; }

/* ── Grilles : tablette et téléphone ──────────────────────────────────── */

@media (max-width: 1180px) {
  .menus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pied__dedans { grid-template-columns: 1fr 1fr; }
  .a-la-carte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .a-la-carte .rubrique:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hero__dedans, .hero--assiette .hero__dedans { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 28px; }
  .hero--cloche .ovale--hero { width: min(60vw, 300px, calc((100svh - var(--entete) - 600px) * .735)); min-width: 0; order: -1; }
  .hero--cloche .hero__texte { text-align: center; justify-self: center; }
  .hero--cloche .hero__chapo { margin-inline: auto; }
  .hero--cloche .hero__actions { justify-content: center; }
  .hero__assiettes { max-height: none; max-width: min(440px, calc((100svh - var(--entete) - 600px) * 1.6)); width: 100%; justify-self: center; }
  .hero__assiette--2 { margin-top: 20px; }
  .hero__assiette--3 { margin-top: 40px; }
  .hero__assiette img { max-height: none; }
  .hero__titre { font-size: clamp(2rem, 1rem + 3.6vw, 3.4rem); }
  .reperes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .reperes li:nth-child(3) { border-left: 0; padding-left: 0; }
  .histoire__dedans, .lunch-page__dedans, .vins__dedans, .pratique__grille, .reserver__dedans, .page-tete__dedans { grid-template-columns: minmax(0, 1fr); }
  .histoire__photo { max-width: 520px; }
  .page-tete__dedans .ovale--tete { order: -1; width: min(56vw, 260px); }
  .page-tete__texte { text-align: center; }
  .page-tete__chapo { margin-inline: auto; }
  .vins__photo { max-width: 420px; }
  .reserver__moyens { position: static; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
  .reserver__formulaire { order: -1; }
  .equipe__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Deux colonnes × six rangées, toutes pleines :
     1 1 / 1 1 / 2 3 / 4 3 / 4 5 / 6 7 */
  .mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 40vw, 300px); }
  .mosaique__case--1 { grid-column: 1 / 3; grid-row: 1 / 3; }
  .mosaique__case--2 { grid-column: 1; grid-row: 3; }
  .mosaique__case--3 { grid-column: 2; grid-row: 3 / 5; }
  .mosaique__case--4 { grid-column: 1; grid-row: 4 / 6; }
  .mosaique__case--5 { grid-column: 2; grid-row: 5; }
  .mosaique__case--6 { grid-column: 1; grid-row: 6; }
  .mosaique__case--7 { grid-column: 2; grid-row: 6; }
  /* Au téléphone, hors sept : la première en grand, les autres par deux ;
     un nombre pair laisse la dernière seule — elle prend la rangée. */
  .mosaique:not([data-nombre="7"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaique:not([data-nombre="7"]) .mosaique__case { grid-column: auto; grid-row: auto; }
  .mosaique:not([data-nombre="7"]) .mosaique__case--1 { grid-column: 1 / -1; grid-row: span 2; }
  .mosaique[data-nombre="6"] .mosaique__case:last-child, .mosaique[data-nombre="4"] .mosaique__case:last-child, .mosaique[data-nombre="2"] .mosaique__case:last-child { grid-column: 1 / -1; }
  .menus-apercu__lunch { grid-template-columns: minmax(0, 1fr); }
}
/* Tablette : les quatre repères sur une rangée, le haut de page tient. */
@media (min-width: 641px) and (max-width: 900px) {
  .reperes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .reperes li:nth-child(3) { border-left: 1px solid var(--lisere); padding-left: clamp(12px, 2vw, 28px); }
  .reperes li { column-gap: 8px; }
  .reperes { --taille-rep: 1.15rem; }
  .reperes strong { white-space: normal; }
}
@media (max-width: 640px) {
  /* Le haut de page au téléphone : tout tient dans le premier écran —
     l'ovale réduit, le titre et le chapô resserrés, les repères en 2 × 2. */
  .hero__dedans { padding-top: 18px; row-gap: 14px; }
  .hero--cloche .ovale--hero { width: min(38vw, 30svh * .735, 170px); }
  .hero__titre { font-size: clamp(2rem, 1.2rem + 3.6vw, 2.5rem); margin-bottom: .25em; }
  .hero__chapo { font-size: 1rem; line-height: 1.55; }
  .hero .surtitre { margin-bottom: 8px; font-size: .7rem; }
  /* Les deux boutons côte à côte, à parts égales : le premier écran garde
     la place des repères. */
  .hero__actions { margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .hero__actions .bouton { min-width: 0; padding: 10px; gap: 6px; letter-spacing: .06em; font-size: .84rem; min-height: 50px; }
  .reperes { margin-top: 16px; padding: 14px 0 16px; row-gap: 12px; }
  .reperes { --taille-rep: 1.12rem; --ic-rep: 16px; }
  .reperes span { font-size: .8rem; }
  .hero__assiettes { max-width: 300px; gap: 8px; }
  .hero__assiette img { aspect-ratio: 3 / 4; }
  .hero__assiette--2 { margin-top: 16px; }
  .hero__assiette--3 { margin-top: 32px; }
  .hero__assiette-rang { min-width: 34px; height: 34px; bottom: -12px; font-size: .9rem; }
  .menus { grid-template-columns: minmax(0, 1fr); }
  .a-la-carte { grid-template-columns: minmax(0, 1fr); }
  .lieu__duo { grid-template-columns: minmax(0, 1fr); }
  .lieu__bloc--decale { margin-top: 0; }
  .equipe__liste { grid-template-columns: minmax(0, 1fr); }
  .pied__dedans { grid-template-columns: minmax(0, 1fr); }
  .pied__signature { margin-left: 0 !important; }
  .reperes li { padding: 0 10px; }
  .reperes strong { white-space: normal; }
  .horaire { grid-template-columns: minmax(0, 1fr); }
  .lunch__plats div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .vin, .vins__entete { grid-template-columns: minmax(0, 1fr) 56px 64px; gap: 8px; }
  .mosaique { grid-auto-rows: clamp(140px, 44vw, 240px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; }
}
@media print {
  .entete, .pied, .barre-appel, .tiroir, .appel, .sommaire, .carte-lieu { display: none !important; }
}

/* ── Les actualités : la section « À l'affiche », l'encart, la fiche ──────
   functions/_gabarits/actualites.mjs. L'encart : bas à gauche de l'écran (le
   bouton de réservation en ligne tient le bas à droite) ; au téléphone, une
   bande au-dessus de la barre d'action. */

.actus__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.actus__liste[data-nombre="1"] { grid-template-columns: minmax(0, 880px); justify-content: center; }
@media (min-width: 1280px) { .actus__liste[data-nombre="3"], .actus__liste[data-nombre="5"], .actus__liste[data-nombre="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.actu { position: relative; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: clamp(18px, 2vw, 28px); align-items: start; padding: clamp(14px, 1.6vw, 20px); background: var(--carte); border: 1px solid var(--lisere-or); border-radius: var(--rayon-grand); box-shadow: var(--ombre); }
.actu__affiche { display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: var(--p-sombre); cursor: zoom-in; box-shadow: 0 10px 28px -14px rgb(1 25 55 / .55); }
.actu__affiche img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ressort); }
.actu__texte { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding-block: 4px; }
.actu__quand { display: flex; align-items: flex-start; gap: 8px; margin: 0; font: 500 .78rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-lien); }
.actu__quand .ic { flex: none; margin-top: 1px; }
.actu__titre { margin: 0; font-size: clamp(1.35rem, 1.1rem + .7vw, 1.8rem); line-height: 1.15; }
.actu__accroche { margin: 0; color: var(--texte-doux); }
.actu__prix { margin: 2px 0 0; font: italic 500 1.3rem/1.2 var(--serif); color: var(--texte); }
.actu__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
@media (hover: hover) { .actu__affiche:hover img { transform: scale(1.04); } }
@media (max-width: 1000px) { .actus__liste { grid-template-columns: minmax(0, 1fr); } .actus__liste[data-nombre="1"] { grid-template-columns: minmax(0, 1fr); } .actu { grid-template-columns: minmax(0, 220px) minmax(0, 1fr); } }
@media (max-width: 560px) {
  .actu { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
  .actu__actions { grid-column: 1 / -1; margin-top: 0; }
  .actu__actions .bouton { flex: 1 1 100%; min-width: 0; white-space: normal; }
  .actu__titre { font-size: 1.25rem; }
}

/* La pastille prend la place du petit titre (« Restaurant · Verviers ») le
   temps de l'actualité, SANS rien ajouter à la hauteur : sa marge négative
   annule sa hauteur, et le petit titre, devenu invisible, garde la sienne.
   Le haut de page reste au millimètre celui de la référence (le premier
   écran est réglé serré : heros-actu.cjs le mesure sur 99 combinaisons). */
.hero__actu { --h: 30px; display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; height: var(--h); margin: -6px 0 calc(6px - var(--h)); padding: 0 12px 0 3px; border: 1px solid var(--lisere-or); border-radius: 999px; background: color-mix(in srgb, var(--p-accent) 10%, transparent); color: var(--texte); font: 500 .86rem/1 var(--sans); text-align: left; cursor: pointer; position: relative; z-index: 1; transition: background var(--duree), border-color var(--duree); }
.hero__actu ~ .surtitre { visibility: hidden; }
.hero--salle .hero__actu { margin-inline: auto; }
.hero__actu-badge { flex: none; display: inline-flex; align-items: center; gap: 6px; height: calc(var(--h) - 8px); padding: 0 10px; border-radius: 999px; background: var(--p-accent); color: var(--accent-texte); font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; }
.hero__actu-titre { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hero__actu > .ic { flex: none; color: var(--accent-lien); transition: transform var(--duree); }
html.mvt .hero__actu-badge .ic { animation: encart-scintille 2.8s 1.4s ease-in-out infinite; }
.hero__actu:focus-visible { outline: 2px solid var(--accent-lien); outline-offset: 3px; }
@media (hover: hover) { .hero__actu:hover { background: color-mix(in srgb, var(--p-accent) 20%, transparent); border-color: var(--p-accent); } .hero__actu:hover > .ic { transform: translateX(4px); } }
/* Sous 900 px, l'étincelle seule : le titre de l'actualité garde la place. */
@media (max-width: 900px) {
  .hero__actu { --h: 26px; font-size: .82rem; }
  .hero--cloche .hero__actu { margin-inline: auto; }
  .hero__actu-badge { width: 20px; padding: 0; justify-content: center; }
  .hero__actu-badge > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* L'encart */
.encart {
  --encart-bas: clamp(16px, 2vw, 28px);
  position: fixed; z-index: 45; left: clamp(16px, 2vw, 28px); bottom: var(--encart-bas); width: 380px; max-width: calc(100vw - 32px);
  color: var(--p-sur-sombre); background: var(--p-sombre); border: 1px solid color-mix(in srgb, var(--p-accent) 60%, transparent); border-radius: 14px;
  box-shadow: 0 2px 4px rgb(0 0 0 / .18), 0 24px 60px -18px rgb(1 12 26 / .65), 0 0 0 6px color-mix(in srgb, var(--p-accent) 12%, transparent);
  transition: transform .5s var(--ressort), opacity .35s ease, visibility .35s;
}
.encart[hidden] { display: none; }
html.js .encart:not(.est-visible), .encart.est-ecarte { opacity: 0; transform: translateY(24px) scale(.97); visibility: hidden; pointer-events: none; }
.encart.est-visible::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: linear-gradient(115deg, transparent 35%, color-mix(in srgb, var(--p-accent) 55%, transparent) 50%, transparent 65%) no-repeat; background-size: 250% 100%; background-position: 120% 0; mix-blend-mode: screen; }
html.mvt .encart.est-visible::after { animation: encart-reflet 1.6s .45s ease-out 2 both; }
@keyframes encart-reflet { from { background-position: 120% 0; } to { background-position: -40% 0; } }
.encart__carte[hidden] { display: none; }
.encart__ouvrir { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: center; width: 100%; padding: 16px 18px 16px 16px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; border-radius: inherit; font: inherit; }
.encart__affiche { display: block; aspect-ratio: 3 / 4; border-radius: 5px; overflow: hidden; rotate: -3deg; box-shadow: 0 8px 18px -6px rgb(0 0 0 / .6), 0 0 0 1px color-mix(in srgb, var(--p-accent) 50%, transparent); transition: rotate .4s var(--ressort), scale .4s var(--ressort); }
.encart__affiche img { width: 100%; height: 100%; object-fit: cover; }
.encart__corps { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-right: 30px; }
.encart__surtitre { display: inline-flex; align-items: center; gap: 6px; font: 500 .72rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--p-accent-sur-sombre); }
html.mvt .encart.est-visible .encart__surtitre .ic { animation: encart-scintille 2.8s 1s ease-in-out infinite; }
@keyframes encart-scintille { 0%, 70%, 100% { transform: scale(1) rotate(0); opacity: 1; } 80% { transform: scale(1.35) rotate(18deg); opacity: .75; } 90% { transform: scale(.9) rotate(0); opacity: 1; } }
.encart__titre { font: 500 1.22rem/1.2 var(--serif); color: var(--p-sur-sombre); text-wrap: balance; }
.encart__quand { font-size: .86rem; line-height: 1.35; color: color-mix(in srgb, var(--p-sur-sombre) 78%, transparent); }
.encart__lien { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-weight: 500; font-size: .9rem; letter-spacing: .04em; color: var(--p-accent-sur-sombre); }
.encart__lien .ic { transition: transform var(--duree); }
.encart__outils { position: absolute; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 2px; }
.encart__compteur { min-width: 34px; text-align: center; font-size: .8rem; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--p-sur-sombre) 70%, transparent); }
.encart__nav, .encart__masquer { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: var(--p-sur-sombre); cursor: pointer; }
.encart__nav--avant .ic { transform: rotate(180deg); }
.encart__masquer { position: absolute; top: 6px; right: 6px; }
.encart__nav:active, .encart__masquer:active { transform: scale(.92); }
.encart__nav:focus-visible, .encart__masquer:focus-visible, .encart__ouvrir:focus-visible { outline: 2px solid var(--p-accent-sur-sombre); outline-offset: 2px; }
@media (hover: hover) {
  .encart__ouvrir:hover .encart__affiche { rotate: 0deg; scale: 1.04; }
  .encart__ouvrir:hover .encart__lien .ic { transform: translateX(4px); }
  .encart__nav:hover, .encart__masquer:hover { background: color-mix(in srgb, var(--p-sur-sombre) 14%, transparent); }
}
@media (max-width: 760px) {
  .encart { --encart-bas: calc(var(--barre-h, 0px) + 10px + env(safe-area-inset-bottom) * var(--sans-barre, 1)); left: 10px; right: 10px; width: auto; max-width: none; border-radius: 12px; }
  .encart__ouvrir { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 10px 12px 10px 10px; }
  .encart__corps { gap: 2px; padding-right: 26px; }
  .encart__surtitre { font-size: .66rem; }
  .encart__titre { font-size: 1.04rem; }
  .encart__quand { font-size: .8rem; }
  .encart__lien { font-size: .84rem; margin-top: 2px; }
  .encart__outils { right: 6px; bottom: 4px; }
}

/* La fiche */
html.fiche-ouverte { overflow: hidden; }
.fiche-actu { width: min(1000px, calc(100vw - 48px)); max-width: none; max-height: calc(100dvh - 48px); padding: 0; border: 0; border-radius: 14px; background: var(--p-fond); color: var(--p-encre); overflow: auto; overscroll-behavior: contain; box-shadow: 0 30px 90px -20px rgb(0 0 0 / .6); }
.fiche-actu:not([open]) { display: none; }
.fiche-actu::backdrop { background: rgb(1 12 26 / .72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
html.mvt .fiche-actu[open] { animation: fiche-entre .42s var(--ressort); }
html.mvt .fiche-actu[open]::backdrop { animation: vis-entre .3s ease; }
@keyframes fiche-entre { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.fiche-actu__tete { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 28px; background: var(--p-sombre); color: var(--p-sur-sombre); }
.fiche-actu__surtitre { display: inline-flex; align-items: center; gap: 8px; margin: 0; font: 500 .76rem/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--p-accent-sur-sombre); }
.fiche-actu__fermer { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--p-sur-sombre) 30%, transparent); border-radius: 50%; background: transparent; color: var(--p-sur-sombre); cursor: pointer; }
.fiche-actu__fermer:active { transform: scale(.94); }
.fiche-actu__fermer:focus-visible { outline: 2px solid var(--p-accent-sur-sombre); outline-offset: 2px; }
@media (hover: hover) { .fiche-actu__fermer:hover { background: color-mix(in srgb, var(--p-sur-sombre) 14%, transparent); } }
.fiche-actu__dedans { display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr); gap: clamp(24px, 3.4vw, 48px); padding: clamp(20px, 3vw, 40px); align-items: start; }
.fiche-actu__affiche { margin: 0; position: sticky; top: 84px; }
.fiche-actu__affiche img { width: 100%; height: auto; border-radius: 8px; box-shadow: 0 18px 44px -18px rgb(1 25 55 / .6); }
.fiche-actu__texte { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fiche-actu__quand { display: flex; align-items: flex-start; gap: 8px; margin: 0; font: 500 .82rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-lien); }
.fiche-actu__quand .ic { flex: none; margin-top: 1px; }
.fiche-actu__titre { margin: 0; font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.1; }
.fiche-actu__accroche { margin: 0; font-size: 1.08rem; color: var(--texte-doux); }
.fiche-actu__fleuron { margin: 6px 0; }
.fiche-actu__menu { margin: 0; white-space: pre-line; font: 400 1.08rem/1.85 var(--serif); }
.fiche-actu__prix { margin: 6px 0 0; font: italic 500 1.6rem/1.2 var(--serif); }
.fiche-actu__note { margin: 0; padding: 12px 16px; border-left: 2px solid var(--p-accent); background: var(--fond-doux); color: var(--texte-doux); font-size: .95rem; }
.fiche-actu__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
@media (max-width: 760px) {
  .fiche-actu { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .fiche-actu[open] { display: flex; flex-direction: column; }
  .fiche-actu__tete { padding: 8px 8px 8px 16px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .fiche-actu__dedans { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 0; gap: 22px; flex: 1; }
  .fiche-actu__affiche { position: static; max-width: 340px; width: 78%; justify-self: center; }
  .fiche-actu__actions { position: sticky; bottom: 0; margin: 4px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--p-fond); border-top: 1px solid var(--lisere); }
  .fiche-actu__actions .bouton { flex: 1 1 100%; min-width: 0; white-space: normal; min-height: 50px; padding-block: 10px; }
}

@media print { .encart, .fiche-actu { display: none !important; } }