/* =====================================================================
   Sections du site — mise en page épurée : crème, rouge du logo, encre.
   Le lieu (une phrase, une photo) · La carte (le trait qui change de forme) · Infos.
   ===================================================================== */

.section--lieu, .section--carte, .section--infos { background: var(--creme); }
.section--carte { padding-top: clamp(40px, 6vw, 80px); }
.section--infos { border-top: 1px solid rgba(43, 29, 20, .12); }

/* ---------- Le lieu : un titre court, trois atouts, une photo ---------- */
.lieu { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(40px, 7vw, 112px); align-items: center; }
.lieu__titre {
  font-family: var(--font-title); font-weight: 400; letter-spacing: -.015em;
  font-size: clamp(34px, 4vw, 56px); line-height: 1.08; margin: 16px 0 0; max-width: 14ch; text-wrap: balance;
}
.lieu__atouts { list-style: none; margin: clamp(32px, 4vw, 52px) 0 0; padding: 0; }
.lieu__atouts li {
  display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; row-gap: 2px;
  padding: 18px 0; border-top: 1px solid rgba(43, 29, 20, .12);
}
.lieu__atouts li:last-child { border-bottom: 1px solid rgba(43, 29, 20, .12); }
.lieu__num { grid-row: span 2; font: 500 13px/1.9 var(--font-body); letter-spacing: .1em; color: var(--rouge); }
.lieu__atouts strong { font-family: var(--font-title); font-weight: 400; font-size: clamp(21px, 1.8vw, 25px); line-height: 1.25; }
.lieu__atouts li > span:last-child { font-size: 15.5px; color: var(--encre-doux); }
/* la photo prend moins de place : une colonne étroite, centrée avec le texte */
.lieu { max-width: 1080px; grid-template-columns: minmax(0, 1fr) minmax(0, 430px); justify-content: center; }
.lieu__photo { margin: 0; border-radius: 6px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--sable); }
.lieu__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; display: block;
  /* elle glisse doucement vers la souris (--sx, --sy de -0,5 à 0,5, posés sur le cadre par main.js) */
  transform: scale(1.06) translate(calc(var(--sx) * -2.4%), calc(var(--sy) * -2.4%));
  transition: transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
.lieu__photo.is-survol img { transform: scale(1.1) translate(calc(var(--sx) * -2.4%), calc(var(--sy) * -2.4%)); transition-duration: .9s; }
.lieu__photo { --sx: 0; --sy: 0; }

/* le petit mot écrit à la main : il s'écrit de gauche à droite en apparaissant */
.lieu__signature {
  margin: clamp(26px, 3vw, 38px) 0 0; font-family: var(--font-hand); font-size: clamp(26px, 2.2vw, 32px); line-height: 1.1;
  color: var(--rouge); transform: rotate(-2deg); transform-origin: left center;
}
.lieu__signature.reveal { opacity: 1; clip-path: inset(-20% 100% -20% 0); transition: clip-path 1.8s cubic-bezier(.65, 0, .35, 1) .6s; }
.lieu__signature.reveal.is-in { clip-path: inset(-20% -2% -20% 0); transform: rotate(-2deg); }

/* Le lieu, en plus petit : la même composition resserrée au centre, avec plus d'air autour */
.section--lieu { padding-block: clamp(96px, 12vw, 168px); }
.lieu { max-width: 900px; grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: clamp(40px, 6vw, 88px); }
.lieu__titre { font-size: clamp(28px, 2.9vw, 40px); max-width: 15ch; margin-top: 12px; }
.lieu__atouts { margin-top: clamp(24px, 3vw, 36px); }
.lieu__atouts li { grid-template-columns: 36px 1fr; padding: 13px 0; }
.lieu__atouts strong { font-size: clamp(18px, 1.4vw, 20px); }
.lieu__atouts li > span:last-child { font-size: 14.5px; }
.lieu__num { font-size: 12px; }
.lieu__signature { font-size: clamp(23px, 1.8vw, 27px); }

/* ---------- Le lieu : une fenêtre en arche sur le lac (la scène reste fixée pendant qu'on descend) ---------- */
.section--lieu { padding: 0; height: 190vh; height: 190svh; position: relative; }
.fenetre__scene { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; align-items: center; padding: var(--header-h) var(--gutter) 0; overflow: hidden; }
.fenetre { max-width: 920px; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(36px, 6vw, 80px); align-items: center; justify-content: center; }
.fenetre__titre { margin: 14px 0 0; font-family: var(--font-title); font-weight: 400; font-size: clamp(38px, 4.8vw, 68px); line-height: 1; letter-spacing: -.025em; }
.fenetre__titre > span { display: block; overflow: hidden; padding-bottom: .06em; }
.fenetre__titre > span > span { display: block; transform: translateY(106%); transition: transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.fenetre__titre > span:nth-child(2) > span { transition-delay: .09s; }
.fenetre__titre > span:nth-child(3) > span { transition-delay: .18s; }
.fenetre__titre > span:nth-child(4) > span { transition-delay: .27s; }
.section--lieu.is-in .fenetre__titre > span > span { transform: none; }
.fenetre__titre em { font-style: italic; color: var(--rouge); }
.fenetre__phrase { margin: 22px 0 0; max-width: 32ch; font-size: 16px; color: var(--encre-doux); opacity: 0; transition: opacity 1s .6s; }
.section--lieu.is-in .fenetre__phrase { opacity: 1; }
/* la fenêtre : une arche cernée d'un trait rouge */
.fenetre__arche {
  position: relative; margin: 0; height: min(64vh, 560px); aspect-ratio: 2 / 3; overflow: hidden;
  border-radius: 999px 999px 18px 18px; outline: 3px solid var(--rouge); outline-offset: 10px;
  background: var(--sable); box-shadow: 0 44px 80px -44px rgba(43, 29, 20, .55);
}
/* la photo, plus grande que l'arche : au scroll (--p de 0 à 1), la vue descend du ciel vers le lac puis l'escalier */
.fenetre__plan { position: absolute; left: 50%; top: 0; width: 128%; transform: translate(-50%, calc(var(--p, 0) * -34%)); will-change: transform; }
.fenetre__plan img { width: 100%; height: auto; display: block; }
/* les atouts, épinglés à leur endroit sur la photo */
.epingle { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.epingle i { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--creme); box-shadow: 0 0 0 3px var(--rouge); transform: scale(0); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1); }
.epingle i::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1.5px solid var(--creme); opacity: 0; animation: epingle-onde 2.4s ease-out infinite; }
@keyframes epingle-onde { from { transform: scale(.35); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }
.epingle b {
  position: absolute; bottom: 20px; left: -14px; width: max-content; max-width: 200px; padding: 8px 12px 9px; border-radius: 10px;
  background: var(--creme); color: var(--encre); font: 600 13.5px/1.2 var(--font-body);
  box-shadow: 0 14px 30px -12px rgba(43, 29, 20, .5); opacity: 0; transform: translateY(10px);
  transition: opacity .5s .12s, transform .7s .12s cubic-bezier(.22, 1, .36, 1);
}
.epingle b small { display: block; margin-top: 3px; font-weight: 400; font-size: 12px; line-height: 1.3; color: var(--encre-doux); }
.epingle b::after { content: ""; position: absolute; left: 16px; bottom: -6px; width: 12px; height: 12px; background: var(--creme); transform: rotate(45deg); border-radius: 2px; }
.epingle--gauche b { left: auto; right: -14px; }
.epingle--gauche b::after { left: auto; right: 16px; }
.epingle--bas b { bottom: auto; top: 20px; transform: translateY(-10px); }
.epingle--bas b::after { bottom: auto; top: -6px; }
.epingle.is-on i { transform: scale(1); }
.epingle.is-on b { opacity: 1; transform: none; }

/* ---------- Accueil : Événements en bref, puis la page à part ---------- */
.section--evt-accueil { background: var(--creme); border-top: 1px solid rgba(43, 29, 20, .12); padding-block: clamp(80px, 10vw, 136px); }
.evtA { max-width: 980px; display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.evtA__photo { position: relative; margin: 0; aspect-ratio: 5 / 4; border-radius: 6px; overflow: hidden; background: var(--sable); }
.evtA__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity 1.2s var(--ease), transform 3.2s var(--ease); }
.evtA__photo img.is-actif { opacity: 1; transform: none; }
.evtA__moment {
  position: absolute; left: 14px; bottom: 14px; margin: 0; padding: 8px 14px; border-radius: 999px;
  background: rgba(247, 240, 228, .92); font: 600 11px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
}
.evtA__titre { margin: 12px 0 14px; font-size: clamp(28px, 2.9vw, 40px); line-height: 1.1; text-wrap: balance; }
.evtA__texte p { margin: 0; max-width: 40ch; color: var(--encre-doux); font-size: 16px; }
.evtA__types { list-style: none; margin: 20px 0 28px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.evtA__types li { padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(43, 29, 20, .2); font-size: 13.5px; }
.evtA__bouton, .resaA .btn { gap: 10px; }
.evtA__bouton { border-color: rgba(43, 29, 20, .3); color: var(--encre); }
.evtA__bouton span { transition: transform .4s var(--ease); }
.evtA__bouton:hover { background: var(--encre); color: var(--creme); }
.evtA__bouton:hover span { transform: translateX(4px); }

/* ---------- Accueil : l'espace « Réserver » ---------- */
.section--resa { background: var(--sable); padding-block: clamp(72px, 9vw, 120px); }
.resaA { max-width: 640px; text-align: center; }
.resaA__titre { margin: 12px 0 14px; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.1; text-wrap: balance; }
.resaA__texte { margin: 0 auto; max-width: 46ch; color: var(--encre-doux); }
.resaA__actions { display: flex; justify-content: center; margin-top: 28px; }
.resaA__tel { margin: 18px 0 0; font-size: 15px; color: var(--encre-doux); }

/* page Événements à part : le contenu démarre sous la barre */
.page-rubrique .section--evenements { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px)); border-top: 0; }
.evt__tete .carte__retour { display: flex; width: max-content; }

/* ---------- Accueil : trois plats en photo, puis « Voir la carte » ---------- */
.section--plats { background: var(--creme); border-top: 1px solid rgba(43, 29, 20, .12); }
.plats3__tete { text-align: center; margin: 0 auto clamp(36px, 5vw, 64px); }
.plats3__tete .section__title { margin: 10px 0 0; }
.plats3 { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.plat3__lien { display: block; color: inherit; text-decoration: none; }
.plat3__photo { margin: 0 0 18px; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 6px; background: var(--sable); }
.plat3__photo img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.01); transition: transform 1.4s cubic-bezier(.22, 1, .36, 1); }
.plat3__lien:hover .plat3__photo img, .plat3__lien:focus-visible .plat3__photo img { transform: scale(1.07); }
.plat3__categorie { display: block; font: 600 11.5px/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--rouge); }
.plat3__nom { margin: 6px 0 6px; font-family: var(--font-title); font-weight: 400; font-size: clamp(22px, 1.9vw, 26px); line-height: 1.2; }
.plat3__nom { background: linear-gradient(var(--rouge), var(--rouge)) 0 100% / 0 1.5px no-repeat; display: inline; transition: background-size .5s var(--ease); }
.plat3__lien:hover .plat3__nom { background-size: 100% 1.5px; }
.plat3__texte { margin: 8px 0 0; font-size: 15px; color: var(--encre-doux); max-width: 32ch; }
.plats3__action { display: flex; justify-content: center; margin-top: clamp(36px, 5vw, 56px); }
.plats3__bouton { border-color: rgba(43, 29, 20, .3); color: var(--encre); gap: 10px; }
.plats3__bouton span { transition: transform .4s var(--ease); }
.plats3__bouton:hover { background: var(--encre); color: var(--creme); }
.plats3__bouton:hover span { transform: translateX(4px); }

/* ---------- Rubriques à part (carte.html) : la barre est pleine, le contenu démarre sous elle ---------- */
.page-rubrique .section--carte { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px)); }
.carte__retour {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; min-height: 44px;
  font-size: 14px; font-weight: 500; color: var(--encre-doux); text-decoration: none; transition: color .3s;
}
.carte__retour:hover { color: var(--rouge); }
.carte__tete .eyebrow { display: block; }

/* ---------- La carte ---------- */
.carte__defs { position: absolute; width: 0; height: 0; }
.carte__tete { margin-bottom: clamp(24px, 4vw, 56px); }
.carte__tete .section__title { margin-bottom: 8px; }
.carte__sous { margin: 0; font-family: var(--font-hand); font-size: 26px; color: var(--rouge); }

/* ---------- Barre de menu : « Nous trouver » discret, « Réserver une table » en rouge ---------- */
.site-header__inner .site-header__cta { margin-left: 0; }
.site-header__resa { margin-left: -20px; }
.site-header .btn--ghost { border-color: rgba(43, 29, 20, .28); }
.site-header .btn--ghost:hover { background: rgba(43, 29, 20, .06); }
/* la barre ne coupe jamais ses liens ; sur les largeurs intermédiaires, elle se resserre */
.site-nav a, .site-header .btn { white-space: nowrap; }
@media (min-width: 901px) and (max-width: 1200px) {
  .site-header__inner { gap: 16px; }
  .site-nav a { padding: 0 10px; --nav-pad: 10px; }
  .site-header__resa { margin-left: -8px; }
}
/* au survol, un trait rouge se dessine sous le seul lien touché (et reste sous la rubrique ouverte) */
.site-nav a { position: relative; }
.site-header[data-state] .site-nav a:hover { background: transparent; }
.site-nav a::after {
  content: ""; position: absolute; left: var(--nav-pad, 14px); right: var(--nav-pad, 14px); bottom: 9px; height: 1.5px;
  background: var(--rouge); border-radius: 2px;
  transform: scaleX(0); transform-origin: right center; transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left center; }
.site-nav a[aria-current="page"] { color: var(--rouge); }
.carte__grille { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }

/* à gauche : le dessin qui change de forme, fixé pendant qu'on parcourt la carte */
.carte__visuel {
  position: sticky; top: calc(var(--header-h) + 32px);
  height: calc(100vh - var(--header-h) - 64px); height: calc(100svh - var(--header-h) - 64px);
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
}
.carte__cadre { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.carte__dessin { width: min(100%, 380px); height: auto; overflow: visible; }
.carte__trait {
  fill: none; stroke: var(--rouge); stroke-width: 2.6px; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1 1.001; stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.4s cubic-bezier(.65, 0, .35, 1);
}
.section--carte.is-vue .carte__trait { stroke-dashoffset: 0; }
.carte__rubrique { margin: 0; font-family: var(--font-title); font-style: italic; font-size: clamp(24px, 2.2vw, 32px); color: var(--rouge); min-height: 1.3em; }
.carte__rubrique.is-change { animation: carte-nom .6s var(--ease); }
@keyframes carte-nom { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.carte__index { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.carte__index a {
  position: relative; padding: 6px 0 6px 22px; text-decoration: none; color: var(--encre-doux);
  font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; transition: color .3s;
}
.carte__index a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 12px; height: 1.5px; background: var(--rouge);
  transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.carte__index a:hover, .carte__index a.is-actif { color: var(--encre); }
.carte__index a.is-actif::before { transform: scaleX(1); }

/* à droite : la liste, comme une ardoise typographique */
.rubrique { padding-bottom: clamp(72px, 10vw, 140px); scroll-margin-top: calc(var(--header-h) + 24px); }
.rubrique__titre { position: relative; display: inline-block; margin: 0; font-size: clamp(40px, 4.4vw, 60px); line-height: 1; }
.rubrique__titre span { position: relative; z-index: 1; }
.rubrique__pinceau { position: absolute; left: -3%; bottom: -.12em; width: 106%; height: .42em; overflow: visible; }
.rubrique__pinceau path {
  fill: none; stroke: var(--rouge); stroke-width: 9px; stroke-linecap: round; opacity: .9;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1 1.001; stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s cubic-bezier(.6, 0, .3, 1) .15s;
}
.rubrique.is-in .rubrique__pinceau path { stroke-dashoffset: 0; }
.rubrique__chapo { margin: 22px 0 0; font-family: var(--font-hand); font-size: 26px; color: var(--rouge); }
.rubrique__groupe { margin-top: 40px; }
.rubrique__sous { margin: 0 0 6px; font: 600 12.5px/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--encre-doux); }

.plats { list-style: none; margin: 0; padding: 0; }
.plat {
  display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid rgba(43, 29, 20, .08);
  opacity: 0; transform: translateY(10px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: calc(min(var(--d, 0), 18) * 40ms + .35s);
}
.rubrique.is-in .plat { opacity: 1; transform: none; }
.plat__nom { font-size: 17px; }
.plat__points { flex: 1; min-width: 24px; border-bottom: 1px dotted rgba(43, 29, 20, .3); transform: translateY(-4px); }
.plat__prix { font-variant-numeric: tabular-nums; font-weight: 500; }
.plat__prix--todo { font-size: 13px; color: var(--encre-doux); font-style: italic; }
.plat__sig { font-family: var(--font-hand); font-style: normal; font-size: 21px; color: var(--rouge); margin-left: 4px; }
.carte__note { margin: 0; font-size: 14px; color: var(--encre-doux); }

/* ---------- Événements : du jour au soir, puis la demande ---------- */
.section--evenements { background: var(--creme); border-top: 1px solid rgba(43, 29, 20, .12); }
.evt__grille { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; margin-top: clamp(8px, 2vw, 24px); }

.moment { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding: 6vh 0; }
.moment__photo { display: none; }
.moment__label { font-family: var(--font-hand); font-size: 26px; color: var(--rouge); }
.moment__titre { margin: 6px 0 14px; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; text-wrap: balance; }
.moment__texte { margin: 0; max-width: 34ch; font-size: 17px; color: var(--encre-doux); }

/* la photo, fixée pendant la lecture : elle passe du jour au soir */
.evt__cadre {
  position: sticky; top: calc(var(--header-h) + 32px);
  height: calc(100vh - var(--header-h) - 64px); height: calc(100svh - var(--header-h) - 64px);
  border-radius: 6px; overflow: hidden; background: var(--sable);
}
.evt__photo { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.05); transition: opacity 1.1s var(--ease), transform 1.8s var(--ease); }
.evt__photo.is-actif { opacity: 1; transform: none; }
.evt__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evt__etiquette {
  position: absolute; left: 18px; bottom: 18px; margin: 0; padding: 9px 16px; border-radius: 999px;
  background: rgba(247, 240, 228, .92); font: 600 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase;
}

/* la demande */
.evt__demande {
  display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start;
  margin-top: clamp(72px, 9vw, 128px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(43, 29, 20, .12);
}
.evt__demande-titre { margin: 0 0 14px; font-size: clamp(30px, 3vw, 42px); line-height: 1.1; text-wrap: balance; }
.evt__demande-texte p { margin: 0; max-width: 36ch; color: var(--encre-doux); }

.evt__types { border: 0; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.evt__types legend { padding: 0; margin-bottom: 12px; font: 600 12.5px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-doux); }
.puce { position: relative; cursor: pointer; }
.puce input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.puce span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(43, 29, 20, .25); font-size: 15px; transition: background .25s, color .25s, border-color .25s;
}
.puce:hover span { border-color: var(--encre); }
.puce input:checked + span { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
.puce input:focus-visible + span { outline: 3px solid var(--ocre); outline-offset: 2px; }

.evt__champs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ--large { grid-column: span 2; }
.champ span { font: 600 12.5px/1.6 var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--encre-doux); }
.champ input, .champ textarea {
  font: 17px/1.5 var(--font-body); color: var(--encre); background: transparent; resize: vertical;
  border: 0; border-bottom: 1px solid rgba(43, 29, 20, .25); border-radius: 0; padding: 8px 0; transition: border-color .25s;
}
.champ input:focus, .champ textarea:focus { outline: none; border-bottom-color: var(--rouge); }
.evt__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }
.evt__statut { margin: 0; font-size: 14.5px; color: var(--encre-doux); }
.evt__rgpd { margin: 16px 0 0; font-size: 13px; color: var(--encre-doux); }

/* ---------- Infos ---------- */
.infos { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.infos__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.infos__actions .btn--ghost { border-color: rgba(43, 29, 20, .28); color: var(--encre); }
.infos__liste { margin: 0; }
.infos__ligne { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid rgba(43, 29, 20, .12); }
.infos__ligne:last-child { border-bottom: 1px solid rgba(43, 29, 20, .12); }
.infos__ligne dt { font: 600 12.5px/1.8 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--encre-doux); }
.infos__ligne dd { margin: 0; }

/* Infos en trois blocs, lisibles d'un coup d'œil */
.infos2 { max-width: 1040px; }
.infos2__tete { text-align: center; margin-bottom: clamp(32px, 4vw, 52px); }
.infos2__tete .section__title { margin: 10px 0 0; }
.infos2__blocs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1.5px solid var(--rouge); }
.bloc { padding: 28px clamp(18px, 3vw, 36px) 8px; border-left: 1px solid rgba(43, 29, 20, .12); }
.bloc:first-child { border-left: 0; padding-left: 0; }
.bloc__label { font-family: var(--font-hand); font-size: 28px; line-height: 1; color: var(--rouge); }
.bloc__lignes { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.bloc__ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 17px; line-height: 1.35; }
.bloc__ligne span { color: var(--encre-doux); }
.bloc__ligne strong { font-weight: 500; color: var(--encre); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bloc__ligne strong:only-child { white-space: normal; }
.bloc__lien { display: inline-flex; gap: 8px; margin-top: 14px; min-height: 44px; align-items: center; font-weight: 600; color: var(--rouge); text-decoration: none; }
.bloc__lien span { transition: transform .4s var(--ease); }
.bloc__lien:hover span { transform: translateX(4px); }
.infos2__bas { margin: clamp(28px, 4vw, 44px) 0 0; text-align: center; font-size: 14px; color: var(--encre-doux); }
@media (max-width: 900px) {
  .infos2__blocs { grid-template-columns: 1fr; }
  .bloc { border-left: 0; padding: 22px 0 10px; border-top: 1px solid rgba(43, 29, 20, .12); }
  .bloc:first-child { border-top: 0; }
}

/* pied de page : l'encre, plus de bleu nuit */
.site-footer { background: var(--encre); }

/* ---------- Téléphones et tablettes ---------- */
@media (max-width: 900px) {
  .carte__grille, .infos, .lieu, .evt__grille, .evt__demande { grid-template-columns: 1fr; }
  /* événements, comme sur ordinateur : la photo reste fixée en haut et passe du jour au soir,
     les textes défilent en dessous */
  .evt__grille { display: flex; flex-direction: column; align-items: stretch; gap: 0; }   /* en flex, la photo reste collée sur toute la hauteur des textes */
  .evt__cadre {
    order: -1; z-index: 3; top: calc(var(--header-h) + 12px);
    height: 44vh; height: 44svh; margin-bottom: 0;
    /* au-dessus : masque le texte qui remonte ; en dessous : un fondu crème, le texte s'efface en passant sous la photo */
    box-shadow: 0 -24px 0 var(--creme), 0 30px 26px -6px var(--creme);
  }
  .moment { min-height: 50vh; min-height: 50svh; justify-content: center; padding: 24px 0; }
  .moment:last-child { min-height: 42vh; min-height: 42svh; }
  .evt__champs { grid-template-columns: 1fr; }
  .champ--large { grid-column: auto; }
  .lieu__photo { aspect-ratio: 4 / 3; }
  .lieu { max-width: 560px; }
  .lieu__photo { max-width: 100%; }
  .evtA { grid-template-columns: 1fr; max-width: 560px; }
  .fenetre { grid-template-columns: 1fr; gap: 20px; justify-items: center; text-align: center; }
  .fenetre__scene { align-items: start; padding-top: calc(var(--header-h) + 16px); }
  .fenetre__titre { font-size: clamp(34px, 9.5vw, 46px); }
  .fenetre__phrase { display: none; }
  .fenetre__arche { height: 56vh; height: 56svh; }
  .epingle b { font-size: 12.5px; max-width: 150px; padding: 7px 10px; }
  .epingle b small { display: none; }
  .plats3 { grid-template-columns: 1fr; max-width: 520px; gap: 36px; }
  .site-header__inner .site-header__cta { margin-left: auto; }
  /* le dessin devient une bande fixée sous la barre de menu, avec le nom de la rubrique */
  .carte__visuel {
    top: var(--header-h); height: auto; z-index: 5; margin: 0 calc(-1 * var(--gutter)); padding: 10px var(--gutter);
    background: linear-gradient(var(--creme) 78%, rgba(247, 240, 228, 0));
  }
  .carte__cadre { flex-direction: row; align-items: center; gap: 14px; }
  .carte__dessin { width: 76px; }
  .carte__index { display: none; }
  .infos__ligne { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 560px) {
  .site-header__inner .site-header__cta { display: none; }           /* sur téléphone : un seul bouton, la réservation */
  .site-header__resa { margin-left: auto; padding: 0 16px; }
  .brand__name { display: none; }
}


/* ---------- Aujourd'hui : le bandeau juste après l'intro ---------- */
.statut { background: var(--creme); border-top: 1px solid rgba(43, 29, 20, .12); border-bottom: 1px solid rgba(43, 29, 20, .12); padding: 16px var(--gutter); }
.statut__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 28px; }
.statut__etat { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 16px; }
/* le point : rouge qui scintille quand c'est fermé, vert quand c'est ouvert */
.statut__etat i { position: relative; width: 11px; height: 11px; border-radius: 50%; background: var(--rouge); flex: none; animation: scintille 1.6s ease-in-out infinite; }
.statut__etat i::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--rouge); opacity: 0; animation: halo 1.6s ease-out infinite; }
.statut__etat.is-ouvert i, .statut__etat.is-ouvert i::after { animation: none; }
@keyframes scintille { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes halo { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }
.statut__etat.is-ouvert i { background: #2f8a4b; box-shadow: 0 0 0 4px rgba(47, 138, 75, .18); }
.statut__etat strong { font-weight: 600; }
.statut__etat span { color: var(--encre-doux); }
.statut__lieu { margin: 0; font-size: 15px; color: var(--encre-doux); }

/* ---------- Téléphone : la barre fixe du bas ---------- */
.barre-mobile { display: none; }
@media (max-width: 900px) {
  .barre-mobile {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); gap: 8px;
    background: rgba(247, 240, 228, .96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid rgba(43, 29, 20, .12);
  }
  .barre-mobile a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; border-radius: 12px;
    color: var(--encre); text-decoration: none; font: 600 12.5px/1 var(--font-body);
  }
  .barre-mobile a.barre-mobile__resa { background: var(--rouge); color: var(--blanc); }
  .barre-mobile svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); }
  .statut__lieu, .statut__resa { display: none; }
  .statut__in { justify-content: center; }
  /* la carte : les rubriques en boutons, dans la bande fixée en haut */
  .carte__visuel { flex-direction: column; align-items: stretch; gap: 8px; }
  .carte__index { display: flex !important; flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 4px; }
  .carte__index::-webkit-scrollbar { display: none; }
  .carte__index a { flex: none; padding: 8px 14px; border: 1px solid rgba(43, 29, 20, .2); border-radius: 999px; background: var(--creme); letter-spacing: .08em; font-size: 12px; }
  .carte__index a::before { display: none; }
  .carte__index a.is-actif { background: var(--rouge); border-color: var(--rouge); color: var(--blanc); }
}


/* =====================================================================
   Lisibilité pour tous : pas de texte sous 13 px, les infos utiles à 16–18 px,
   une barre de menu avec moins de choix.
   ===================================================================== */
.site-header__cta { display: none !important; }                 /* « Nous trouver » faisait doublon avec « Horaires & accès » */
.site-header__resa { margin-left: 0 !important; }
.intro__accroche {
  position: absolute; left: 50%; top: calc(var(--header-h) + 6px); transform: translateX(-50%); z-index: 3; margin: 0; width: max-content; max-width: calc(100% - 2 * var(--gutter));
  text-align: center; font: 600 13.5px/1.4 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--encre);
  transition: opacity .6s var(--ease);
}
.intro.is-scrolled .intro__accroche { opacity: 0; }
.section--lieu { height: 150vh; height: 150svh; }
.epingle b { font-size: 15px; max-width: 230px; }
.epingle b small { font-size: 13.5px; }
.statut__etat { font-size: 17px; }
.statut__lieu { font-size: 16px; }
.plat3__categorie { font-size: 13px; letter-spacing: .12em; }
.plat3__texte { font-size: 16px; }
.evtA__texte p { font-size: 17px; }
.evtA__types li { font-size: 15px; }
.evtA__moment { font-size: 12.5px; }
.resaA__tel { font-size: 17px; }
.bloc__ligne { font-size: 18px; }
.infos2__bas { font-size: 15.5px; line-height: 1.8; }
.rubrique__sous { font-size: 13.5px; }
.carte__index a { font-size: 14px; }
.plat__nom { font-size: 18px; }
.evt__types legend, .champ span { font-size: 13.5px; }
.evt__rgpd { font-size: 14.5px; }
.site-footer small { font-size: 14.5px; opacity: .75; }
@media (max-width: 900px) {
  .epingle b { font-size: 14px; max-width: 170px; }
  .carte__index a { font-size: 13px; }
  .barre-mobile a { font-size: 13px; }
  .intro__accroche { font-size: 12.5px; letter-spacing: .1em; white-space: normal; width: auto; }
}

/* mouvement réduit : tout est affiché d'emblée */
.reduced-motion .plat, .reduced-motion .carte__trait, .reduced-motion .rubrique__pinceau path { transition: none; opacity: 1; transform: none; stroke-dashoffset: 0; }
.reduced-motion .lieu__signature.reveal { clip-path: none; transition: none; }
.reduced-motion .lieu__photo img, .reduced-motion .plat3__photo img { transform: none; transition: none; }
.reduced-motion .evtA__photo img { transition: none; transform: none; }
.reduced-motion .statut__etat i, .reduced-motion .statut__etat i::after { animation: none; }
.reduced-motion .fenetre__titre > span > span { transform: none; transition: none; }
.reduced-motion .fenetre__phrase { opacity: 1; transition: none; }
