/* La Marmite Dauphinoise — feuille de style unique.
   Esprit « nappe blanche » : fond blanc cassé, grandes photos réelles, bordeaux des serviettes
   et du store, filets dorés, Marcellus (le lettrage de l'enseigne) et EB Garamond. */

/* ---------- Polices (auto-hébergées, licence OFL) ---------- */
@font-face {
  font-family: "Marcellus";
  src: url("../fonts/marcellus-latin.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  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: "Marcellus";
  src: url("../fonts/marcellus-latin-ext.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "EB Garamond";
  src: url("../fonts/eb-garamond-latin.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
  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: "EB Garamond";
  src: url("../fonts/eb-garamond-latin-ext.woff2") format("woff2");
  font-weight: 400 600; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "EB Garamond";
  src: url("../fonts/eb-garamond-italic-latin.woff2") format("woff2");
  font-weight: 400 600; font-style: italic; font-display: swap;
  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: "EB Garamond";
  src: url("../fonts/eb-garamond-italic-latin-ext.woff2") format("woff2");
  font-weight: 400 600; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}

/* ---------- Couleurs et mesures ---------- */
:root {
  color-scheme: light;
  --nappe: #FDFCFA;
  --lin: #F4F1EC;
  --encre: #231D1E;
  --encre-2: #5E5557;
  --filet: #DDD4C7;
  --bordeaux: #7C1D2B;
  --bordeaux-fonce: #5E1420;
  --bordeaux-nuit: #3A0D16;
  --dore: #A6834D;
  --dore-clair: #CDB488;
  --dore-texte: #7E6232;
  --aujourdhui: #F1E5D5;
  --vert-ouvert: #3E7B55;

  --titre: "Marcellus", "Optima", "Palatino Linotype", Georgia, serif;
  --texte: "EB Garamond", Garamond, "Palatino Linotype", "Times New Roman", serif;

  --gouttiere: clamp(1.1rem, 4.5vw, 3.5rem);
  --largeur: 76rem;
  --entete-h: 4.6rem;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--entete-reelle, var(--entete-h)); /* pile sous l'en-tête (mesuré par site.js) */
  scrollbar-color: var(--bordeaux) var(--lin);
}
body {
  margin: 0;
  background: var(--nappe);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.1875rem;
  line-height: 1.6;
  font-kerning: normal;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--bordeaux); color: var(--nappe); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: var(--dore); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--dore); outline-offset: 3px; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; text-wrap: balance; }
p { margin: 0 0 1rem; max-width: 64ch; text-wrap: pretty; }
figure { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; cursor: pointer; }
sup { font-size: 0.7em; line-height: 0; }
.evitement {
  position: absolute; left: 1rem; top: -5rem; z-index: 60;
  background: var(--encre); color: var(--nappe); padding: 0.6rem 1rem; text-decoration: none;
}
.evitement:focus { top: 1rem; }

/* ---------- La marmite de l'enseigne ---------- */
.pot { width: 2.3rem; height: auto; flex: none; overflow: visible; color: var(--bordeaux); }
.pot__corps { fill: currentColor; }
.pot__anse { fill: none; stroke: currentColor; stroke-width: 2.4; }
.pot__neige { fill: var(--pot-neige, var(--nappe)); }
.fleuron {
  display: block; box-sizing: content-box; width: 2.4rem; height: auto; margin: 0 auto 1.6rem;
  padding-inline: 5.6rem; color: var(--bordeaux); overflow: visible;
  background:
    linear-gradient(var(--dore), var(--dore)) left 55% / 4.4rem 1px no-repeat,
    linear-gradient(var(--dore), var(--dore)) right 55% / 4.4rem 1px no-repeat;
}

/* ---------- En-tête ---------- */
.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; gap: clamp(0.9rem, 2.2vw, 2.2rem);
  min-height: var(--entete-h);
  padding-block: calc(0.55rem + env(safe-area-inset-top, 0px)) 0.55rem; padding-inline: var(--gouttiere);
  background: var(--nappe); color: var(--encre);
  border-bottom: 1px solid var(--filet);
  transition: background-color 0.45s var(--ease), color 0.45s var(--ease), border-color 0.45s var(--ease);
}
.marque { display: flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; }
.marque__texte { display: grid; line-height: 1.05; }
.marque__nom { font-family: var(--titre); font-size: clamp(1.1rem, 2.6vw, 1.35rem); letter-spacing: 0.01em; white-space: nowrap; }
.marque__sous {
  margin-top: 0.2rem; font-size: 0.86rem; letter-spacing: 0.16em; color: var(--encre-2);
  font-variant-caps: all-small-caps; transition: color 0.45s var(--ease);
}
.entete__nav { display: none; gap: clamp(1.1rem, 1.8vw, 1.8rem); }
.entete__nav a {
  font-size: 1.08rem; letter-spacing: 0.08em; font-variant-caps: all-small-caps;
  text-decoration: none; padding-block: 0.25rem; border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.entete__nav a:hover { border-bottom-color: var(--dore); }
/* l'état d'ouverture (« Fermé, réouverture mardi à 11 h 45 ») : en gras, pour qu'on le voie bien */
.etat {
  display: none; align-items: center; gap: 0.6rem; margin: 0 0 0 auto;
  font-size: 1.1rem; font-style: italic; font-weight: 600; line-height: 1.3; max-width: 21ch;
}
.etat__point { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--encre-2); flex: none; }
[data-etat="ouvert"] .etat__point { background: var(--vert-ouvert); }
[data-etat="bientot"] .etat__point { background: var(--dore); }
[data-etat="ferme"] .etat__point { background: var(--bordeaux); }
.entete__appel { margin-left: auto; }
.etat + .entete__appel { margin-left: 0; }

/* posé sur la photo d'ouverture */
.entete.est-sur-photo { background: transparent; border-bottom-color: transparent; color: #FFFFFF; }
.entete.est-sur-photo .pot { color: #FFFFFF; }
.entete.est-sur-photo .pot__neige { fill: currentColor; }
.entete.est-sur-photo .marque__sous { color: rgba(255, 255, 255, 0.86); }
.entete.est-sur-photo [data-etat="ouvert"] .etat__point { background: #8FD1A3; }
.entete.est-sur-photo [data-etat="ferme"] .etat__point { background: var(--dore-clair); }

@media (min-width: 760px) { .etat { display: flex; } }
@media (min-width: 1200px) {
  .entete__nav { display: flex; }
  .etat { margin-left: auto; }
}
@media (min-width: 1560px) {
  .entete__nav { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; }
}

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.85rem;
  min-height: 3rem; padding: 0.6rem 1.4rem;
  font-family: var(--texte); font-weight: 500; font-size: 1.12rem; letter-spacing: 0.08em; font-variant-caps: all-small-caps;
  text-decoration: none; border: 1px solid currentColor; border-radius: 1px;
  transition: background-color 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.bouton--plein { background: var(--bordeaux); border-color: var(--bordeaux); color: #FFFFFF; }
.bouton--plein:hover { background: var(--bordeaux-fonce); border-color: var(--bordeaux-fonce); }
.bouton__numero {
  padding-left: 0.85rem; border-left: 1px solid rgba(255, 255, 255, 0.4);
  font-family: var(--titre); font-size: 1.12rem; letter-spacing: 0.05em; font-variant-caps: normal;
  font-variant-numeric: lining-nums tabular-nums; white-space: nowrap;
}
.bouton--grand { min-height: 3.5rem; padding: 0.75rem 1.7rem; }
.bouton--grand .bouton__numero { font-size: 1.35rem; }
.bouton--clair { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.75); background: transparent; }
.bouton--clair:hover { background: #FFFFFF; color: var(--encre); border-color: #FFFFFF; }
.bouton--trait { color: var(--bordeaux); background: transparent; }
.bouton--trait:hover { background: var(--bordeaux); color: #FFFFFF; border-color: var(--bordeaux); }
/* « Voir la carte », en tête de l'ouverture : un carton de menu clair à filet doré, en lettres de l'enseigne */
.bouton--carte {
  min-height: 4rem; padding: 0.8rem 1.8rem;
  font-family: var(--titre); font-weight: 400; font-size: 1.55rem; letter-spacing: 0.04em; font-variant-caps: normal;
  color: var(--bordeaux); background: var(--nappe); border-color: var(--dore);
  outline: 1px solid rgba(253, 252, 250, 0.6); outline-offset: 3px;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.75);
}
.bouton--carte:hover { background: #FFFFFF; color: var(--bordeaux-fonce); border-color: var(--dore); }

/* ---------- Ouverture : la salle ---------- */
.ouverture {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: end;
  min-height: max(34rem, 100svh);
  color: #FFFFFF;
}
.ouverture__photo img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 45% 45%;
}
/* au téléphone, la photo en hauteur garde son bord gauche : l'arche de briques encadre la salle */
@media (max-width: 700px) { .ouverture__photo img { object-position: 0% 45%; } }
.ouverture::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(24, 12, 14, 0.55) 0%, rgba(24, 12, 14, 0) 22%),
    linear-gradient(to top, rgba(24, 12, 14, 0.82) 0%, rgba(24, 12, 14, 0.45) 38%, rgba(24, 12, 14, 0) 68%),
    linear-gradient(to right, rgba(24, 12, 14, 0.5) 0%, rgba(24, 12, 14, 0) 58%);
}
.ouverture__texte {
  width: 100%; max-width: calc(var(--largeur) + 2 * var(--gouttiere)); margin-inline: auto;
  padding: calc(7rem + min(7.5vw, 6.5rem)) var(--gouttiere) clamp(2.6rem, 8vh, 5.5rem); /* le haut dégage le grand logo, même sur un écran bas */
}
.ouverture h1 {
  max-width: 13em;
  font-family: var(--titre); font-size: clamp(2.6rem, 6.2vw, 5.3rem); line-height: 1.04; letter-spacing: -0.005em;
}
.ouverture h1 em { display: block; font-style: normal; color: #F3E3C4; }
.ouverture__lieu { margin: 1rem 0 1.8rem; max-width: 34ch; font-size: clamp(1.15rem, 2.4vw, 1.35rem); line-height: 1.45; color: rgba(255, 255, 255, 0.93); }
/* la carte d'abord, la réservation juste en dessous : deux boutons de même largeur, l'un sur l'autre */
.ouverture__actions { display: grid; width: fit-content; gap: 0.75rem; }
/* annonce du restaurant (fermeture, occasion, message), réglée depuis l'espace du restaurant :
   un carton de menu posé sur la photo, double filet doré, le symbole de l'occasion dans un médaillon */
.ouverture__annonce {
  display: grid; gap: 0.8rem;
  width: fit-content; max-width: min(34rem, 100%);
  margin: 0 0 1.7rem; padding: 0.85rem 1.3rem 0.9rem 0.85rem;
  background: var(--nappe); color: var(--encre);
  border: 1px solid var(--dore);
  outline: 1px solid rgba(253, 252, 250, 0.55); outline-offset: 4px;
  box-shadow: 0 24px 48px -24px rgba(24, 12, 14, 0.9);
}
.ouverture__annonce[hidden] { display: none; }
.annonce__ligne { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.95rem; margin: 0; }
.annonce__ligne + .annonce__ligne { padding-top: 0.8rem; border-top: 1px solid var(--filet); }
.annonce__symbole {
  width: 3.1rem; height: 3.1rem; padding: 0.5rem; box-sizing: border-box;
  border: 1px solid var(--dore-clair); border-radius: 50%; background: var(--lin);
}
.annonce__titre { display: block; font-family: var(--titre); font-weight: 400; font-size: 1.3rem; line-height: 1.2; color: var(--bordeaux); }
.annonce__message { display: block; margin-top: 0.1rem; font-size: 1.1rem; line-height: 1.38; text-wrap: pretty; }
@media (prefers-reduced-motion: no-preference) {
  .ouverture__annonce:not([hidden]) { animation: annonce-posee 0.9s var(--ease) both; }
}
@keyframes annonce-posee { from { opacity: 0; transform: translateY(0.6rem); } }
.annonce__lien {
  display: inline-block; margin-top: 0.3rem; font-size: 1.05rem; font-weight: 500; letter-spacing: 0.08em; font-variant-caps: all-small-caps;
  color: var(--bordeaux); text-decoration: underline; text-decoration-color: var(--dore); text-underline-offset: 0.25em;
}
.annonce__lien:hover { color: var(--bordeaux-fonce); text-decoration-color: currentColor; }

/* menu spécial d'une fête (Saint-Valentin, Noël…) : la carte du menu du jour, avec le symbole de l'occasion */
.menu-special .menu-jour__carte { position: relative; }
/* effet d'annonce : un ruban cousu sur le cadre doré, un médaillon qui éclot dans des éclats d'or, puis bat doucement */
.menu-special__ruban {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  margin: 0; padding: 0.42rem 2.1rem 0.5rem; white-space: nowrap;
  font-size: 1.02rem; letter-spacing: 0.2em; font-variant-caps: all-small-caps; color: #FBF3E6;
  background-color: var(--bordeaux);
  background-image: linear-gradient(105deg, transparent 35%, rgba(255, 233, 190, 0.55) 50%, transparent 65%);
  background-size: 260% 100%; background-position: 150% 0; background-repeat: no-repeat;
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.85rem) 50%, 100% 100%, 0 100%, 0.85rem 50%);
}
.menu-special__medaillon { position: relative; display: block; width: 4.6rem; height: 4.6rem; margin: 0.6rem auto 1.1rem; }
.menu-special__symbole {
  position: relative; display: block; width: 100%; height: 100%; padding: 0.8rem; box-sizing: border-box;
  border: 1px solid var(--dore-clair); border-radius: 50%; background: var(--nappe);
}
.menu-special__halo { position: absolute; inset: 0; border: 1px solid var(--dore); border-radius: 50%; opacity: 0; }
.menu-special__eclats > span {
  position: absolute; left: 50%; top: 50%; width: 0.42rem; height: 0.42rem; margin: -0.21rem 0 0 -0.21rem;
  background: var(--dore); opacity: 0; transform: rotate(45deg);
}
.menu-special__eclats > span:nth-child(1) { --a: 0deg; }
.menu-special__eclats > span:nth-child(2) { --a: 45deg; }
.menu-special__eclats > span:nth-child(3) { --a: 90deg; }
.menu-special__eclats > span:nth-child(4) { --a: 135deg; }
.menu-special__eclats > span:nth-child(5) { --a: 180deg; }
.menu-special__eclats > span:nth-child(6) { --a: 225deg; }
.menu-special__eclats > span:nth-child(7) { --a: 270deg; }
.menu-special__eclats > span:nth-child(8) { --a: 315deg; }
@media (prefers-reduced-motion: no-preference) {
  .menu-special.est-annoncee .menu-special__ruban { animation: ruban-deroule 0.9s var(--ease) 0.5s both, ruban-reflet 5.5s ease-in-out 1.8s infinite; }
  .menu-special.est-annoncee .menu-special__symbole { animation: medaillon-eclot 1.1s var(--ease) 0.7s both; }
  .menu-special.est-annoncee .menu-special__halo { animation: halo 3.6s ease-out 1.3s infinite; }
  .menu-special.est-annoncee .menu-special__halo + .menu-special__halo { animation-delay: 3.1s; }
  .menu-special.est-annoncee .menu-special__eclats > span { animation: eclat 1.5s var(--ease) 0.95s both; }
  .annonce__ligne--menu .annonce__symbole { animation: appel-doux 3.2s ease-out 1.5s infinite; }
}
@keyframes ruban-deroule { from { transform: translate(-50%, -50%) scaleX(0.1); opacity: 0; } }
@keyframes ruban-reflet { 0%, 62% { background-position: 150% 0; } 100% { background-position: -50% 0; } }
@keyframes medaillon-eclot { 0% { transform: scale(0.35) rotate(-14deg); opacity: 0; } 55% { transform: scale(1.14) rotate(4deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes halo { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes eclat {
  0% { transform: rotate(var(--a)) translateY(0) rotate(45deg) scale(0.3); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: rotate(var(--a)) translateY(-3.8rem) rotate(45deg) scale(1); opacity: 0; }
}
@keyframes appel-doux { 0% { box-shadow: 0 0 0 0 rgba(166, 131, 77, 0.6); } 70%, 100% { box-shadow: 0 0 0 0.85rem rgba(166, 131, 77, 0); } }
.menu-special__choix { display: block; }
.menu-special__ou { display: block; margin: 0.15rem 0; font-family: var(--texte); font-style: italic; font-size: 1.05rem; color: var(--dore-texte); }
.menu-special__prix { margin: 0 0 0.5rem; font-family: var(--titre); font-size: clamp(1.7rem, 3.4vw, 2.2rem); color: var(--bordeaux); }
.menu-special__note { max-width: 34rem; margin: 0 auto 1.7rem; font-style: italic; font-size: 1.15rem; line-height: 1.5; color: var(--encre-2); }
.menu-special [hidden] { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .ouverture__photo img { animation: salle-se-pose 2.6s var(--ease) both; }
}
@keyframes salle-se-pose { from { transform: scale(1.06); } to { transform: scale(1); } }

/* ---------- Sections ---------- */
.section { padding-block: clamp(4.5rem, 10vw, 8.5rem); padding-inline: var(--gouttiere); }
.section--nappe { background: var(--nappe); }
.section--lin { background: var(--lin); }
.section h2 { font-family: var(--titre); font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.1; margin-bottom: 1.2rem; }
.section__tete { max-width: 48rem; margin: 0 auto clamp(2.6rem, 5vw, 4rem); text-align: center; }
.section__tete p { margin-inline: auto; }
.chapeau { font-size: clamp(1.2rem, 2.2vw, 1.35rem); line-height: 1.55; color: var(--encre-2); }
.note { font-size: 1.02rem; color: var(--encre-2); }
.credit { display: block; font-style: normal; font-size: 0.78rem; letter-spacing: 0.03em; }

/* photos : fine marie-louise blanche à l'intérieur de l'image */
.mosaique img, .service__photo, .vedette__photos img, .maison img {
  outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: -11px;
}

/* ---------- Le menu du jour (juste sous la photo d'accueil) ---------- */
.menu-jour { padding-block: clamp(3.5rem, 8vw, 6rem); }
.menu-jour__carte {
  max-width: 46rem; margin-inline: auto; padding: clamp(2rem, 5vw, 3.2rem) clamp(1.2rem, 5vw, 3.4rem);
  text-align: center; background: var(--nappe);
  border: 1px solid var(--dore); outline: 1px solid var(--dore); outline-offset: -9px;
}
.menu-jour__carte .fleuron { margin-bottom: 1.1rem; }
.menu-jour h2 { margin-bottom: 0.35rem; }
.menu-jour__quand { margin: 0 auto 1.8rem; font-size: 1.15rem; letter-spacing: 0.12em; font-variant-caps: all-small-caps; color: var(--bordeaux); }
.menu-jour__plats { display: grid; gap: 1.25rem; max-width: 34rem; margin: 0 auto 1.7rem; }
.menu-jour__ligne dt { font-size: 1rem; letter-spacing: 0.16em; font-variant-caps: all-small-caps; color: var(--dore-texte); }
.menu-jour__ligne dt::before, .menu-jour__ligne dt::after { content: "·"; margin-inline: 0.5rem; }
.menu-jour__ligne dd { margin: 0.15rem 0 0; font-family: var(--titre); font-size: clamp(1.4rem, 2.8vw, 1.8rem); line-height: 1.25; color: var(--encre); }
.menu-jour__attente { max-width: 34rem; margin: 0 auto 1.7rem; font-style: italic; font-size: 1.18rem; line-height: 1.5; color: var(--encre-2); }
.menu-jour__plats[hidden], .menu-jour__ligne[hidden], .menu-jour__attente[hidden] { display: none; }
.menu-jour__prix {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 2rem; max-width: 36rem; margin: 0 auto 1.8rem;
  padding-top: 1.3rem; border-top: 1px solid var(--filet); font-size: 1.12rem;
}
.menu-jour__prix strong { margin-left: 0.45rem; font-weight: 500; font-size: 1.3rem; color: var(--bordeaux); font-variant-numeric: oldstyle-nums proportional-nums; }

/* ---------- Fait maison : la mosaïque ---------- */
.mosaique {
  max-width: var(--largeur); margin-inline: auto;
  display: grid; gap: clamp(0.6rem, 1.2vw, 1rem);
  grid-template-columns: repeat(2, 1fr); grid-auto-rows: 13rem;
}
.mosaique__photo { position: relative; overflow: hidden; background: var(--lin); }
.mosaique__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mosaique__photo:hover img { transform: scale(1.03); }
.mosaique__photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.3rem 1.05rem; color: #FFFFFF; font-style: italic; font-size: 1.08rem; line-height: 1.35;
  background: linear-gradient(to top, rgba(22, 11, 13, 0.66), rgba(22, 11, 13, 0));
}
.mosaique__photo .credit { margin-top: 0.15rem; color: rgba(255, 255, 255, 0.78); }
/* téléphone : les photos en largeur prennent toute la ligne, les autres vont par deux */
.mosaique__photo--a, .mosaique__photo--d, .mosaique__photo--g { grid-column: 1 / -1; }
.mosaique__photo--e img { object-position: 50% 70%; }
.terroir {
  max-width: 44rem; margin: clamp(2.4rem, 5vw, 3.4rem) auto 0; text-align: center;
  font-style: italic; font-size: 1.2rem; color: var(--encre-2);
}
@media (min-width: 900px) {
  .mosaique { grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(10rem, 13vw, 13rem); }
  .mosaique__photo--a { grid-column: 1 / span 7; grid-row: span 2; }
  .mosaique__photo--b { grid-column: 8 / span 5; grid-row: span 2; }
  .mosaique__photo--c { grid-column: 1 / span 3; grid-row: span 2; }
  .mosaique__photo--d { grid-column: 4 / span 6; grid-row: span 2; }
  .mosaique__photo--e { grid-column: 10 / span 3; grid-row: span 2; }
  .mosaique__photo--f { grid-column: 1 / span 5; grid-row: span 2; }
  .mosaique__photo--g { grid-column: 6 / span 7; grid-row: span 2; }
}

/* ---------- Le midi, le soir ---------- */
.services { max-width: var(--largeur); margin-inline: auto; display: grid; gap: clamp(3.5rem, 7vw, 5.5rem); }
.service { display: grid; gap: 1.8rem; align-content: start; }
.service__photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.service h2 { margin-bottom: 0.2rem; }
.service__quand {
  margin-bottom: 1.1rem; font-size: 1.12rem; letter-spacing: 0.12em; font-variant-caps: all-small-caps; color: var(--bordeaux);
}
/* le menu du jour en toutes lettres, sous le texte du midi */
.menu-du-jour {
  margin: 0 0 1rem; padding: 0.2rem 0 0.2rem 0.9rem; border-left: 3px solid var(--dore);
  font-style: italic; font-size: 1.18rem; line-height: 1.5; color: var(--encre);
}
.menu-du-jour[hidden] { display: none; }
.service .bouton { margin-top: 0.6rem; }
@media (min-width: 960px) {
  .services { position: relative; grid-template-columns: 1fr 1fr; column-gap: clamp(4rem, 8vw, 7rem); }
  .services::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--filet); }
}

/* ---------- Tarifs à points de conduite ---------- */
.tarif { margin: 1.3rem 0 1.2rem; max-width: 32rem; }
.tarif__ligne { display: flex; align-items: baseline; gap: 0.7rem; padding-block: 0.4rem; }
.tarif dt { display: flex; flex: 1; align-items: baseline; gap: 0.7rem; font-size: 1.15rem; }
.tarif dt::after { content: ""; flex: 1; min-width: 1.5rem; border-bottom: 1px dotted var(--encre-2); transform: translateY(-0.3em); }
.tarif dd {
  margin: 0; font-family: var(--texte); font-weight: 500; font-size: 1.45rem; line-height: 1; color: var(--bordeaux);
  font-variant-numeric: oldstyle-nums proportional-nums; white-space: nowrap;
}

/* ---------- Les grenouilles ---------- */
.vedette { max-width: var(--largeur); margin-inline: auto; display: grid; gap: clamp(2.8rem, 6vw, 6rem); align-items: center; }
.vedette__photos { position: relative; padding-bottom: clamp(3rem, 8vw, 5.5rem); }
.vedette__grande { width: 86%; }
.vedette__grande img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.vedette__petite {
  position: absolute; right: 0; bottom: 1.6rem; z-index: 1; width: 40%;
  border: 10px solid var(--nappe);
}
.vedette__petite img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.vedette__photos .credit { position: absolute; left: 0; bottom: 0; color: var(--encre-2); }
.preparations { list-style: none; margin: 1.6rem 0 0.4rem; padding: 0; max-width: 32rem; }
.preparations li { padding-block: 0.75rem; border-top: 1px solid var(--filet); color: var(--encre-2); font-style: italic; }
.preparations li:last-child { border-bottom: 1px solid var(--filet); }
.preparations strong { display: block; font-family: var(--titre); font-weight: 400; font-style: normal; font-size: 1.45rem; color: var(--encre); }
.accompagnement { max-width: 32rem; margin: 1.2rem 0 1.3rem; font-family: var(--titre); font-size: 1.3rem; line-height: 1.3; color: var(--bordeaux); }
.accompagnement::before { content: ""; display: inline-block; width: 1.7rem; height: 1px; margin-right: 0.75rem; vertical-align: 0.32em; background: var(--dore); }
.vedette__texte .bouton { margin-top: 0.8rem; }
@media (min-width: 960px) { .vedette { grid-template-columns: 1.05fr 1fr; } }

/* ---------- La carte imprimée ---------- */
.carte-imprimee {
  max-width: 68rem; margin-inline: auto;
  padding: clamp(2.4rem, 6vw, 4.8rem) clamp(1.2rem, 5vw, 4.6rem);
  background: var(--nappe);
  border: 1px solid var(--dore); outline: 1px solid var(--dore); outline-offset: -9px;
}
.carte-imprimee__tete { text-align: center; }
.carte-imprimee__tete h2 { font-size: clamp(2.6rem, 5vw, 3.8rem); margin-bottom: 0.5rem; }
.carte-imprimee__tete p { margin-inline: auto; font-style: italic; color: var(--encre-2); }
.onglets { display: flex; justify-content: center; gap: clamp(1.6rem, 4vw, 3rem); margin: 2.2rem 0 2.8rem; }
.onglets[hidden] { display: none; }
.onglets button {
  padding: 0.35rem 0.2rem; background: none; border: 0; border-bottom: 1px solid transparent;
  font-family: var(--titre); font-size: clamp(1.25rem, 2.4vw, 1.5rem); color: var(--encre-2);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.onglets button:hover { color: var(--encre); }
.onglets button[aria-selected="true"] { color: var(--bordeaux); border-bottom-color: var(--bordeaux); }
.panneau__titre { font-family: var(--titre); font-size: 1.8rem; text-align: center; margin: 2.4rem 0 1.6rem; }
.js .panneau__titre { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.panneau[hidden] { display: none; }
.formule-midi { max-width: 40rem; margin: 0 auto 3rem; padding: 1.4rem 1rem 1.5rem; text-align: center; border-block: 1px solid var(--filet); }
.formule-midi__titre { font-family: var(--titre); font-weight: 400; font-size: 1.7rem; color: var(--bordeaux); }
.formule-midi__quand { margin: 0.2rem auto 0.9rem; font-size: 1rem; letter-spacing: 0.14em; font-variant-caps: all-small-caps; color: var(--dore-texte); }
.formule-midi__prix { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.3rem 2rem; margin: 0 auto 0.8rem; font-size: 1.12rem; }
.formule-midi__prix strong { margin-left: 0.45rem; font-weight: 500; font-size: 1.3rem; color: var(--bordeaux); font-variant-numeric: oldstyle-nums proportional-nums; }
.formule-midi__note { max-width: 36rem; margin: 0 auto; font-style: italic; font-size: 1rem; line-height: 1.6; color: var(--encre-2); }
/* « hors vacances scolaires » sous la composition ; pendant les vacances, la date de retour de la formule */
.formule-midi__vacances { margin: 0.8rem auto 0; font-size: 1rem; letter-spacing: 0.12em; font-variant-caps: all-small-caps; color: var(--dore-texte); }
.formule-midi__vacances.est-en-vacances { letter-spacing: 0.02em; font-variant-caps: normal; font-style: italic; color: var(--bordeaux); }
.formule-midi__titres { margin: 0.3rem auto 0; font-style: italic; font-size: 0.98rem; color: var(--encre-2); }
.menus { display: grid; gap: 3rem; }
.menu { text-align: center; }
.menu__prix { font-family: var(--titre); font-size: 1.75rem; color: var(--bordeaux); font-variant-numeric: lining-nums; }
.menu h5 {
  margin: 1.5rem 0 0.5rem; font-size: 1rem; letter-spacing: 0.18em; font-variant-caps: all-small-caps; color: var(--dore-texte);
}
.menu h5::before, .menu h5::after { content: "·"; margin-inline: 0.5rem; }
.choix { list-style: none; margin: 0; padding: 0; }
.choix li { line-height: 1.35; }
.choix li + li::before { content: "ou"; display: block; margin: 0.3rem 0; font-style: italic; font-size: 0.95rem; color: var(--encre-2); }
.choix small, .plat__nom small { display: block; font-style: italic; font-size: 0.92rem; color: var(--encre-2); line-height: 1.35; }
.menu__garniture { margin: 0.5rem auto 0; font-style: italic; font-size: 0.98rem; color: var(--encre-2); }
.rubriques { display: grid; gap: 2.4rem clamp(2.5rem, 6vw, 5rem); }
.rubrique h4 {
  font-family: var(--titre); font-size: 1.55rem; line-height: 1.1;
  padding-bottom: 0.55rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--dore);
}
.rubrique--vedette h4 { color: var(--bordeaux); }
.plats { list-style: none; margin: 0; padding: 0; }
.plats li { display: flex; align-items: baseline; gap: 1.2rem; padding-block: 0.8rem; border-bottom: 1px dotted var(--filet); }
.plat__nom { flex: 1; }
.plat__prix { font-family: var(--texte); font-weight: 500; font-size: 1.25rem; color: var(--bordeaux); white-space: nowrap; font-variant-numeric: oldstyle-nums proportional-nums; }
.carte-imprimee__notes {
  margin-top: 2.8rem; padding-top: 1.6rem; border-top: 1px solid var(--filet);
  text-align: center; font-style: italic; font-size: 1.02rem; color: var(--encre-2);
}
.carte-imprimee__notes p { margin-inline: auto; margin-bottom: 0.3rem; }
.carte-imprimee__appel { display: flex; width: fit-content; margin: 2.2rem auto 0; }
@media (min-width: 900px) {
  .menus { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .menu { padding-inline: clamp(1.2rem, 2.4vw, 2.2rem); }
  .menu + .menu { border-left: 1px solid var(--filet); }
  .rubriques { grid-template-columns: 1fr 1fr; }
}

/* ---------- La maison ---------- */
.maison { max-width: var(--largeur); margin-inline: auto; display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.maison .maison__arche img { width: 100%; height: auto; outline: 0; }
.maison__arche { max-width: 30rem; width: 100%; justify-self: center; }
.maison__galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.5rem, 1.2vw, 1rem); }
.maison__galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; outline-offset: -7px; }
.maison__galerie figcaption { margin-top: 0.5rem; font-style: italic; font-size: 0.95rem; line-height: 1.3; color: var(--encre-2); }
@media (min-width: 960px) {
  .maison { grid-template-columns: 5fr 6fr; grid-template-areas: "arche texte" "arche galerie"; align-items: end; }
  .maison__arche { grid-area: arche; max-width: 34rem; align-self: end; }
  .maison__texte { grid-area: texte; align-self: center; }
  .maison__galerie { grid-area: galerie; }
}
@media (max-width: 560px) {
  .maison__galerie { grid-template-columns: 1fr 1fr; }
  .maison__galerie figure:last-child { grid-column: 1 / -1; }
}

/* ---------- Les avis ---------- */
.avis { max-width: var(--largeur); margin-inline: auto; display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: center; }
.notes { display: grid; gap: 0; margin: 1.8rem 0 1.2rem; max-width: 34rem; }
.notes[hidden] { display: none; }
.note-avis { display: flex; align-items: baseline; gap: 1.1rem; margin: 0; padding-block: 0.9rem; border-top: 1px solid var(--filet); }
.note-avis:last-child { border-bottom: 1px solid var(--filet); }
.note-avis__chiffre { font-family: var(--titre); font-size: 2.8rem; line-height: 1; color: var(--bordeaux); font-variant-numeric: lining-nums; }
.note-avis__detail { font-size: 1.08rem; color: var(--encre-2); }
.citation { margin: 0; padding: clamp(1.8rem, 4vw, 2.8rem) 0; border-block: 1px solid var(--dore); text-align: center; }
.citation blockquote { margin: 0; }
.citation p { margin: 0 auto; max-width: 22ch; text-wrap: balance; font-style: italic; font-size: clamp(1.7rem, 3.4vw, 2.4rem); line-height: 1.3; color: var(--encre); }
.citation p::before { content: "« "; color: var(--dore); }
.citation p::after { content: " »"; color: var(--dore); }
.citation figcaption { margin-top: 1rem; font-size: 1.02rem; letter-spacing: 0.08em; font-variant-caps: all-small-caps; color: var(--dore-texte); }
.citation figcaption a { color: inherit; text-decoration-color: var(--filet); text-underline-offset: 0.2em; }
/* les avis défilent un à un dans le même cadre doré : le cadre garde la hauteur du plus long, rien ne saute */
.temoignages__piste { display: grid; align-items: center; padding: clamp(1.8rem, 4vw, 2.8rem) 0; border-block: 1px solid var(--dore); }
.temoignages .citation { grid-area: 1 / 1; padding: 0; border: 0; transition: opacity 0.7s var(--ease), visibility 0.7s; }
.temoignages .citation:not(.est-active) { opacity: 0; visibility: hidden; }
.temoignages .citation--longue p { max-width: 30ch; font-size: clamp(1.3rem, 2.3vw, 1.65rem); line-height: 1.4; }
.temoignages__nav { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 0.9rem; }
.temoignages__nav[hidden] { display: none; }
.temoignages__bouton { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--bordeaux); cursor: pointer; }
.temoignages__bouton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.temoignages__bouton:hover { background: var(--lin); }
.temoignages__bouton:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: 2px; }
.temoignages__lecture { display: none; }
.temoignages__bouton[aria-pressed="true"] .temoignages__pause { display: none; }
.temoignages__bouton[aria-pressed="true"] .temoignages__lecture { display: inline; fill: currentColor; stroke: none; }
.temoignages__points { display: flex; }
.temoignages__point { display: grid; place-items: center; width: 26px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.temoignages__point::before { content: ""; width: 9px; height: 9px; box-sizing: border-box; border: 1px solid var(--dore); border-radius: 50%; transition: background-color 0.3s var(--ease); }
.temoignages__point[aria-current="true"]::before { background: var(--dore); }
.temoignages__point:focus-visible { outline: 2px solid var(--bordeaux); outline-offset: -8px; }
@media (prefers-reduced-motion: reduce) { .temoignages .citation { transition: none; } }
@media (min-width: 960px) { .avis { grid-template-columns: 1.1fr 1fr; } }

/* ---------- Réserver ---------- */
.reservation {
  background: var(--bordeaux-nuit); color: var(--nappe); text-align: center;
  padding-block: clamp(4rem, 9vw, 6.5rem); padding-inline: var(--gouttiere);
  --pot-neige: var(--bordeaux-nuit);
}
.reservation__corps {
  max-width: 52rem; margin-inline: auto; padding-block: clamp(2rem, 5vw, 3rem);
  border-block: 1px solid rgba(205, 180, 136, 0.45);
}
.reservation h2 { font-family: var(--titre); font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; }
.reservation__numero {
  display: block; width: fit-content; margin: 1rem auto 1.2rem; color: #FFFFFF; text-decoration: none;
  font-family: var(--titre); font-size: clamp(2.2rem, 10vw, 5.4rem); line-height: 1; letter-spacing: 0.04em; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums; border-bottom: 1px solid transparent;
}
.reservation__numero:hover { border-bottom-color: var(--dore-clair); }
.reservation__etat { display: flex; justify-content: center; align-items: center; gap: 0.6rem; margin: 0 auto 0.8rem; font-style: italic; font-weight: 600; font-size: 1.2rem; color: rgba(251, 249, 245, 0.95); }
.reservation [data-etat="ouvert"] .etat__point { background: #8FD1A3; }
.reservation [data-etat="ferme"] .etat__point { background: var(--dore-clair); }
.reservation__horaires { margin: 0 auto; max-width: none; color: var(--dore-clair); line-height: 1.7; }

/* ---------- Nous trouver ---------- */
.itineraires { display: flex; flex-wrap: wrap; gap: 0.8rem 1rem; }
.trouver { max-width: var(--largeur); margin-inline: auto; display: grid; gap: clamp(2.8rem, 5vw, 4.5rem); }
.adresse { font-family: var(--titre); font-size: clamp(1.35rem, 2.6vw, 1.6rem); line-height: 1.35; margin-bottom: 1.6rem; }
.acces { list-style: none; margin: 0 0 2rem; padding: 0; max-width: 34rem; }
.acces li { padding-block: 0.65rem; border-top: 1px solid var(--filet); }
.acces li:last-child { border-bottom: 1px solid var(--filet); }
.acces strong { display: block; font-weight: 500; font-size: 1.05rem; letter-spacing: 0.12em; font-variant-caps: all-small-caps; color: var(--bordeaux); }
.horaires { width: 100%; max-width: 32rem; border-collapse: collapse; margin: 0 0 1.2rem; font-variant-numeric: lining-nums tabular-nums; }
.horaires caption { text-align: left; padding-bottom: 0.6rem; font-family: var(--titre); font-size: 1.45rem; }
.horaires th, .horaires td { text-align: left; padding: 0.5rem 0.7rem 0.5rem 0; border-bottom: 1px solid var(--filet); font-size: 1.08rem; }
.horaires th { font-weight: 400; }
.horaires td { white-space: nowrap; }
.horaires tr.aujourdhui { background: var(--aujourdhui); }
.horaires tr.aujourdhui th { padding-left: 0.6rem; font-weight: 600; }
.horaires tr.aujourdhui th::after { content: ", aujourd'hui"; font-weight: 400; font-style: italic; }
html[lang="en"] .horaires tr.aujourdhui th::after { content: ", today"; }
.trouver .bouton--trait { margin-top: 0.4rem; }
.plan svg { display: block; width: 100%; height: auto; border: 1px solid var(--filet); background: #F4F1EB; }
.plan figcaption { margin-top: 0.6rem; font-size: 0.88rem; font-style: italic; color: var(--encre-2); }
.plan-rue { font-family: var(--texte); font-style: italic; font-size: 21px; fill: #6D6466; letter-spacing: 0.02em; paint-order: stroke; stroke: #F4F1EB; stroke-width: 7px; stroke-linejoin: round; }
.plan-eau { font-family: var(--texte); font-style: italic; font-size: 34px; fill: #557F8E; }
.plan-lieu { font-family: var(--texte); font-size: 25px; font-weight: 600; fill: var(--encre); paint-order: stroke; stroke: #F4F1EB; stroke-width: 7px; stroke-linejoin: round; }
.plan-detail { font-family: var(--texte); font-style: italic; font-size: 22px; fill: var(--encre-2); paint-order: stroke; stroke: #F4F1EB; stroke-width: 7px; stroke-linejoin: round; }
.plan-resto { font-family: var(--titre); font-size: 25px; fill: #FFFFFF; letter-spacing: 0.02em; }
@media (min-width: 960px) {
  .trouver { grid-template-columns: 5fr 6fr; grid-template-rows: auto 1fr; grid-template-areas: "texte plan" "infos plan"; row-gap: 1.6rem; align-items: start; }
  .trouver__texte { grid-area: texte; }
  .trouver__infos { grid-area: infos; }
  .plan { grid-area: plan; position: sticky; top: calc(var(--entete-h) + 2rem); }
}

/* le moyen de transport choisi : quatre pictogrammes ronds, comme la signalétique ; le texte et le plan suivent */
.masque-visuel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.moyens { max-width: 34rem; }
.moyens__choix { display: none; }
.js .moyens__choix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; margin: 0 0 1.5rem; }
.moyen { display: grid; justify-items: center; align-content: start; gap: 0.2rem; min-width: 0; padding: 0.35rem 0.1rem 0.3rem; border: 0; background: none; color: var(--encre); font: inherit; text-align: center; cursor: pointer; }
.moyen__rond {
  display: grid; place-items: center; width: 4.25rem; height: 4.25rem; margin-bottom: 0.4rem; border-radius: 50%; background: var(--encre); color: #FFFFFF;
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.moyen__rond svg { width: 2.1rem; height: 2.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.moyen:hover .moyen__rond { transform: translateY(-2px); }
.moyen__nom { font-family: var(--titre); font-size: 1.08rem; line-height: 1.15; }
.moyen small { font-style: italic; font-size: 0.95rem; color: var(--encre-2); }
.moyen[aria-selected="true"] .moyen__rond { background: var(--bordeaux); box-shadow: 0 0 0 3px var(--nappe), 0 0 0 4.5px var(--dore); }
.moyen[aria-selected="true"] .moyen__nom { color: var(--bordeaux); }
.moyen:focus-visible { outline: none; }
.moyen:focus-visible .moyen__rond { outline: 2px solid var(--dore); outline-offset: 6px; }
@media (max-width: 440px) {
  .moyen__rond { width: 3.5rem; height: 3.5rem; }
  .moyen__rond svg { width: 1.75rem; height: 1.75rem; }
  .moyen__nom { font-size: 0.86rem; }
  .moyen small { font-size: 0.82rem; }
}
.moyens__texte p { margin: 0 0 0.5rem; font-size: 1.12rem; }
.moyens__texte .moyens__titre { margin-bottom: 0.3rem; font-family: var(--titre); font-size: 1.45rem; line-height: 1.2; color: var(--bordeaux); }
/* le stationnement dans la rue : bien en vue, avec le même P que sur le plan */
.moyens__texte .moyens__rue {
  display: flex; align-items: center; gap: 0.8rem; margin: 1rem 0 0; padding: 0.75rem 1rem 0.75rem 0.8rem;
  background: var(--lin); border: 1px solid var(--filet); color: var(--encre); line-height: 1.4;
}
.moyens__p {
  display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; border-radius: 5px;
  background: #24467A; color: #FFFFFF; font-weight: 700; font-size: 1.3rem; line-height: 1;
}
.js .moyens__texte:not(.est-actif) { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .moyens__texte.est-actif { animation: moyen-apparait 0.4s var(--ease) both; }
}
@keyframes moyen-apparait { from { opacity: 0; transform: translateY(8px); } }
/* sur le plan, seul le calque du moyen choisi s'affiche, et son trajet se dessine */
.plan-mode { transition: opacity 0.45s var(--ease); }
.js .plan .plan-mode { opacity: 0; }
.js .plan:not([data-mode-actif]) .plan-mode--tram,
.plan[data-mode-actif="tram"] .plan-mode--tram,
.plan[data-mode-actif="bus"] .plan-mode--bus,
.plan[data-mode-actif="voiture"] .plan-mode--voiture,
.plan[data-mode-actif="telepherique"] .plan-mode--telepherique { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .plan[data-mode-actif] .plan-mode .plan-trajet { stroke-dashoffset: 1; transition: none; }
  .plan[data-mode-actif="tram"] .plan-mode--tram .plan-trajet,
  .plan[data-mode-actif="bus"] .plan-mode--bus .plan-trajet,
  .plan[data-mode-actif="voiture"] .plan-mode--voiture .plan-trajet,
  .plan[data-mode-actif="telepherique"] .plan-mode--telepherique .plan-trajet { animation: plan-tracer 1.3s cubic-bezier(0.45, 0, 0.25, 1) 0.15s both; }
}
@keyframes plan-tracer { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.plan-arret { font-family: var(--texte); font-size: 17px; font-weight: 700; fill: var(--encre); }
.plan-parking { font-family: var(--texte); font-size: 24px; font-weight: 700; fill: #FFFFFF; }
/* le stationnement dans la rue (calque « voiture ») : un pointillé discret, et sa légende */
.plan-stationnement { fill: none; stroke: #24467A; stroke-opacity: 0.65; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0.1 13; }
.plan-legende { font-family: var(--texte); font-style: italic; font-weight: 600; font-size: 23px; fill: #24467A; paint-order: stroke; stroke: #F4F1EB; stroke-width: 7px; stroke-linejoin: round; }

/* ---------- Pied de page ---------- */
.pied {
  background: var(--bordeaux-nuit); color: var(--nappe);
  padding-block: clamp(3.2rem, 7vw, 4.6rem) calc(clamp(3.2rem, 7vw, 4.6rem) + 4.6rem);
  padding-inline: var(--gouttiere);
  border-top: 1px solid rgba(205, 180, 136, 0.3);
  --pot-neige: var(--bordeaux-nuit);
}
.pied__corps { max-width: var(--largeur); margin-inline: auto; display: grid; gap: 1.8rem; justify-items: center; text-align: center; }
.pied__marque { display: grid; justify-items: center; gap: 0.35rem; margin: 0; max-width: none; }
.pied__marque .pot { width: 3rem; color: var(--dore-clair); margin-bottom: 0.4rem; }
.pied__nom { font-family: var(--titre); font-size: 1.8rem; line-height: 1.1; }
.pied__sous { font-size: 1rem; letter-spacing: 0.16em; font-variant-caps: all-small-caps; color: var(--dore-clair); }
.pied__liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2rem; font-size: 1.05rem; }
.pied__liens a { text-decoration-color: rgba(205, 180, 136, 0.6); }
.pied__liens li:first-child a { font-family: var(--titre); font-variant-numeric: lining-nums; letter-spacing: 0.04em; }
@media (min-width: 900px) { .pied { padding-bottom: clamp(3.2rem, 7vw, 4.6rem); } }
/* les questions fréquentes, au pied de la page : une seule ligne discrète, qu'on ouvre d'un clic
   (elles servent surtout aux recherches Google) */
.questions-frequentes { width: 100%; max-width: 44rem; margin: 0 auto; text-align: left; }
.questions-frequentes__bloc > summary {
  display: flex; justify-content: center; align-items: center; gap: 0.6rem; width: fit-content; margin-inline: auto; padding: 0.35rem 0.6rem;
  list-style: none; cursor: pointer; color: var(--dore-clair); transition: color 0.2s var(--ease);
}
.questions-frequentes__bloc > summary::-webkit-details-marker { display: none; }
.questions-frequentes__bloc > summary::after {
  content: ""; width: 0.4rem; height: 0.4rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-0.15rem) rotate(45deg); transition: transform 0.25s var(--ease);
}
.questions-frequentes__bloc[open] > summary::after { transform: translateY(0.1rem) rotate(-135deg); }
.questions-frequentes__bloc > summary:hover { color: var(--nappe); }
.questions-frequentes__bloc > summary:focus-visible { outline: 2px solid var(--dore-clair); outline-offset: 2px; }
.questions-frequentes__titre {
  margin: 0; font-family: var(--texte); font-weight: 500; font-size: 1rem; line-height: 1.3; letter-spacing: 0.16em;
  font-variant-caps: all-small-caps; color: inherit;
}
.questions-frequentes__liste { margin: 0.8rem 0 0; padding-top: 0.2rem; border-top: 1px solid rgba(205, 180, 136, 0.22); }
.questions-frequentes__liste dt { margin-top: 0.95rem; font-weight: 500; font-size: 1rem; line-height: 1.4; color: rgba(253, 252, 250, 0.85); }
.questions-frequentes__liste dd { margin: 0.2rem 0 0; font-size: 0.98rem; line-height: 1.5; color: rgba(253, 252, 250, 0.7); }

/* ---------- Barre d'appel mobile ---------- */
.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  display: grid; grid-template-columns: 2.1fr 1fr 1fr;
  background: var(--bordeaux-nuit); border-top: 1px solid rgba(205, 180, 136, 0.4);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  transition: transform 0.35s var(--ease);
}
.barre-mobile[data-cachee="oui"] { transform: translateY(110%); }
.barre-mobile a { display: grid; place-content: center; min-height: 3.7rem; text-decoration: none; color: var(--nappe); text-align: center; }
.barre-mobile a.barre-mobile__appel { background: var(--bordeaux); justify-items: start; place-content: center start; padding-inline: 0.9rem; text-align: left; }
.barre-mobile__etat { font-size: 0.95rem; font-style: italic; line-height: 1.3; }
.barre-mobile__numero { font-family: var(--titre); font-size: 1.2rem; line-height: 1.15; letter-spacing: 0.02em; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.barre-mobile__lien { font-size: 1.05rem; letter-spacing: 0.08em; font-variant-caps: all-small-caps; border-left: 1px solid rgba(205, 180, 136, 0.3); }
@media (min-width: 900px) { .barre-mobile { display: none; } }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation: none !important; }
}

/* ---------- Petits écrans ---------- */
@media (max-width: 520px) {
  .marque__sous { display: none; }
  .marque .pot { width: 2rem; }
  .marque__nom { font-size: 1rem; }
  .ouverture__actions { width: auto; }
  .service .bouton, .vedette__texte .bouton, .carte-imprimee__appel, .ouverture__actions .bouton, .menu-jour .bouton { width: 100%; }
  .bouton:has(.bouton__numero) { flex-direction: column; align-items: flex-start; gap: 0.15rem; padding-block: 0.7rem; }
  .bouton:has(.bouton__numero) .bouton__numero { padding-left: 0; border-left: 0; font-size: 1.45rem; }
}

@media (max-width: 380px) {
  .marque .pot { width: 1.8rem; }
  .marque__nom { font-size: 0.95rem; }
  .entete__appel { padding-inline: 0.9rem; }
}
/* sur la photo, un fin contour sombre détache les grenouilles de la marmite blanche */
.entete.est-sur-photo .pot__dessin, .entete.est-sur-photo .g-cadre { filter: url(#logo-contour); }

/* ---------- Pages de texte (mentions légales, page introuvable) ---------- */
.page-texte .pied { padding-bottom: clamp(3.2rem, 7vw, 4.6rem); }
.texte-legal {
  max-width: 46rem; margin-inline: auto;
  padding: calc(var(--entete-h) + clamp(3rem, 8vw, 5rem)) var(--gouttiere) clamp(4rem, 9vw, 6rem);
}
.texte-legal h1 { font-family: var(--titre); font-size: clamp(2.3rem, 5vw, 3.4rem); line-height: 1.1; margin-bottom: 2rem; }
.texte-legal h2 {
  font-family: var(--titre); font-size: 1.45rem; margin: 2.4rem 0 0.8rem;
  padding-top: 1.4rem; border-top: 1px solid var(--filet);
}
.a-completer { padding: 0.8rem 1rem; background: var(--aujourdhui); font-style: italic; }
.retour { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 2.6rem; }
.texte-legal--introuvable { min-height: 70vh; }

/* ---------- Le logo et ses grenouilles (demandes du 29/09/2026) ----------
   En haut de page : grand logo en haut à gauche, sous la barre du menu. Deux grenouilles, silhouettes pleines dans la couleur
   de la marmite (yeux, bouche et cuisse dessinés en creux), montent par l'ouverture, prennent leur élan et bondissent
   jusqu'au bord ; une troisième fait un grand bond jusqu'au nom. Dès qu'on descend : demi-tour, bond, plongeon.
   Fluidité : chaque grenouille est un calque HTML à part (deux SVG fixes, assise et en saut) que le script anime
   uniquement en transform et opacité (Web Animations) : le compositeur les déplace sans repeindre le logo.
   Repère : la viewBox de la marmite (64 × 58). Le cadre .logo-grenouilles s'étend de -200 à 600 en x et de -200 à 11
   en y (le haut du bord) : rien ne se voit sous le bord, on les voit toujours sortir et rentrer par l'ouverture. */
.pot--logo { overflow: visible; }
.marque { transform-origin: 0 0; transition: transform 0.8s var(--ease); }
.entete.logo-grand .marque { transform: translate(0, var(--logo-descente, 3.4rem)) scale(var(--logo-echelle, 2)); }
.entete.logo-grand { --logo-echelle: 2.1; --logo-descente: 3.6rem; }
@media (max-width: 759px) { .entete.logo-grand { --logo-echelle: 1.55; --logo-descente: 3.5rem; } }

.marque__pot { position: relative; display: block; flex: none; }
.marque__pot .pot { display: block; }
.logo-grenouilles {
  position: absolute; left: -312.5%; top: -344.828%; width: 1250%; height: 363.793%;
  overflow: hidden; pointer-events: none; color: var(--bordeaux);
}
.entete.est-sur-photo .logo-grenouilles { color: #FFFFFF; }
.grenouille {
  position: absolute; left: 25%; top: 94.787%; width: 8%; height: 27.488%;
  transform-origin: 50% 44.828%; transform: var(--cache);
}
.grenouille svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.entete.logo-grand .grenouille { will-change: transform; }
.entete.logo-grand .grenouille svg { will-change: opacity; }
.grenouille, .grenouille * { fill: currentColor; }
.g-saut { opacity: 0; }
/* dans la marmite (cachée sous le bord) et au repos (mêmes valeurs que le script : x / 0,64 %, y / 0,58 %) */
.grenouille--a, .grenouille--c { --cache: translate(0%, 41.379%); }
.grenouille--b { --cache: translate(0%, 47.586%); }
.grenouille--a { --repos: translate(-19.531%, -25.862%); }
.grenouille--c { --repos: translate(19.531%, -25.862%); }
.grenouille--b { --repos: translate(143.75%, -46.595%); }
.entete.logo-grand .grenouille.est-posee { transform: var(--repos); }

/* la marmite frémit quand les grenouilles sortent (sur l'élément SVG lui-même : animation composée) */
.entete.logo-grand .pot--logo { transform-origin: 50% 100%; animation: marmite-secousse 1.2s 0.15s both; }
@keyframes marmite-secousse {
  0%, 30%, 52%, 74%, 100% { transform: none; }
  18% { transform: translateY(-0.9px) rotate(-1.5deg); }
  40% { transform: translateY(-0.7px) rotate(1.5deg); }
  62% { transform: translateY(-0.6px) rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .entete.logo-grand .grenouille { transform: var(--repos); }
}

/* ---------- Plan : le trajet depuis le tram se dessine, puis l'épingle se pose ---------- */
.plan-trajet { fill: none; stroke: var(--bordeaux); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.plan-trajet-duree { font-family: var(--texte); font-style: italic; font-weight: 500; font-size: 23px; fill: var(--bordeaux); paint-order: stroke; stroke: #F4F1EB; stroke-width: 7px; stroke-linejoin: round; }
.plan-epingle { transform-box: fill-box; transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .plan--anime .plan-trajet { stroke-dashoffset: 1; }
  .plan--anime .plan-trajet-duree, .plan--anime .plan-epingle { opacity: 0; }
  .plan--dessine .plan-trajet { stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s cubic-bezier(0.45, 0, 0.25, 1) 0.2s; }
  .plan--dessine .plan-trajet-duree { opacity: 1; transition: opacity 0.6s var(--ease) 1.4s; }
  .plan--dessine .plan-epingle { opacity: 1; animation: epingle-pose 0.7s var(--ease) 2.25s both; }
}
@keyframes epingle-pose {
  0% { opacity: 0; transform: translateY(-34px); }
  60% { opacity: 1; transform: translateY(3px) scale(1.04, 0.96); }
  100% { opacity: 1; transform: none; }
}

/* ---------- La vapeur sur les plats (canevas ajouté par le script) ---------- */
.vapeur { overflow: hidden; }
.vedette__grande { position: relative; }
.vapeur canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mosaique__photo figcaption { z-index: 1; }

/* ---------- L'ardoise de la formule, écrite à la craie ---------- */
@font-face {
  font-family: "Caveat";
  src: url("../fonts/caveat-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
.ardoise { margin: 0; }
.ardoise__svg { display: block; width: 100%; height: auto; }
.craie { fill: #F2F0E8; }
.craie__ligne { font-family: "Caveat", "Segoe Script", "Bradley Hand", cursive; font-weight: 500; font-size: 46px; }
.craie__titre { font-size: 68px; font-weight: 600; }
.craie__prix { font-weight: 600; }
.craie__note { font-size: 38px; }
.craie__trait { fill: none; stroke: #F2F0E8; stroke-width: 3.2; stroke-linecap: round; }
.craie__points { stroke: #F2F0E8; stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 0.1 13; opacity: 0.85; }
.ardoise { cursor: pointer; }
.craie--1 { --debut: 0.1s; --duree: 0.9s; }
.craie--2 { --debut: 1s; --duree: 0.35s; }
.craie--3 { --debut: 1.4s; --duree: 0.7s; }
.craie--4 { --debut: 2.15s; --duree: 0.3s; }
.craie--5 { --debut: 2.5s; --duree: 0.7s; }
.craie--6 { --debut: 3.25s; --duree: 0.3s; }
.craie--7 { --debut: 3.6s; --duree: 0.95s; }
.craie--8 { --debut: 4.6s; --duree: 0.3s; }
.craie--9 { --debut: 5s; --duree: 0.9s; }
@media (prefers-reduced-motion: no-preference) {
  .ardoise--prete .craie__ligne, .ardoise--prete .craie__points { clip-path: inset(-30% 100% -30% 0); }
  .ardoise--prete .craie__trait { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .ardoise--ecrit .craie__ligne { animation: craie-ecrit var(--duree) cubic-bezier(0.35, 0.1, 0.35, 1) var(--debut) both; }
  .ardoise--ecrit .craie__points { animation: craie-ecrit 0.45s linear calc(var(--debut) + var(--duree)) both; }
  .ardoise--ecrit .craie__trait { animation: craie-trait var(--duree) ease-out var(--debut) both; }
}
@keyframes craie-ecrit { from { clip-path: inset(-30% 100% -30% 0); } to { clip-path: inset(-30% 0 -30% 0); } }
@keyframes craie-trait { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- La carte fermée, qui s'ouvre comme un menu relié ---------- */
/* Fermée, la carte tient entière dans l'écran quand on arrive sur la section (en-tête, marges de la section
   et de la carte déduits) ; la perspective grandit avec la largeur pour que la couverture ne gonfle pas en pivotant. */
.carte-imprimee {
  position: relative; perspective: max(2400px, 300vw);
  --hauteur-couverture: clamp(20rem, calc(100svh - var(--entete-h) - 2 * clamp(2.4rem, 6vw, 4.8rem) - clamp(4.5rem, 10vw, 8.5rem) - 1.5rem - var(--barre-basse, 0px)), 40rem);
}
@media (max-width: 899px) { .carte-imprimee { --barre-basse: 3.7rem; } }
.carte-imprimee.est-fermee .carte-imprimee__interieur { max-height: var(--hauteur-couverture); overflow: hidden; }
.couverture {
  position: absolute; z-index: 5; inset: -1px;
  display: grid; padding: 0; border: 0; cursor: pointer; text-align: center;
  color: #E2C78F; background-color: #641724;
  background-image:
    radial-gradient(ellipse at 28% 18%, rgba(255, 236, 214, 0.1), rgba(255, 236, 214, 0) 58%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  box-shadow: inset 16px 0 22px -12px rgba(0, 0, 0, 0.5), 0 18px 40px -18px rgba(40, 8, 14, 0.45);
  transform-origin: left center; transform-style: preserve-3d; backface-visibility: hidden;
  transition: transform 1.15s cubic-bezier(0.6, 0.05, 0.25, 1), opacity 0.45s ease 0.75s;
}
.couverture[hidden] { display: none; }
.couverture__face {
  position: relative; display: grid; align-content: center; justify-items: center; gap: 0.9rem;
  margin: 18px; border: 1px solid rgba(217, 189, 132, 0.75); padding: 2rem 1.2rem;
}
.couverture__face::after { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(217, 189, 132, 0.45); pointer-events: none; }
.couverture__pot { width: 4.4rem; height: auto; fill: #D9BD84; margin-bottom: 0.4rem; }
.couverture__pot .couverture__neige { fill: #641724; }
.couverture__titre { font-family: var(--titre); font-size: clamp(3rem, 8vw, 4.8rem); line-height: 1; letter-spacing: 0.06em; color: #E8CD95; }
.couverture__nom { font-size: 1.08rem; letter-spacing: 0.2em; font-variant-caps: all-small-caps; color: #D9BD84; }
.couverture__invite {
  margin-top: 1.6rem; padding-bottom: 0.25rem; font-style: italic; font-size: 1.15rem; color: #F3E3C4;
  border-bottom: 1px solid rgba(217, 189, 132, 0.6); transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.couverture:hover .couverture__invite, .couverture:focus-visible .couverture__invite { color: #FFFFFF; border-bottom-color: #E8CD95; }
.couverture:focus-visible { outline: 2px solid var(--dore); outline-offset: 4px; }
.carte-imprimee.est-ouverte .couverture { transform: rotateY(-168deg); opacity: 0; pointer-events: none; }

/* le lien discret vers l'espace du restaurant, en bas de page */
.pied__espace svg { margin-right: 0.4em; vertical-align: -0.1em; opacity: 0.8; }

/* ---------- Langue : le drapeau de l'autre version du site ---------- */
.langue {
  display: inline-flex; align-items: center; gap: 0.45rem; flex: none; min-height: 44px; margin-left: auto; padding: 0 0.15rem;
  color: inherit; font-size: 0.98rem; font-weight: 600; letter-spacing: 0.08em; text-decoration: none;
}
.langue img { display: block; width: auto; height: 0.95rem; border-radius: 2px; box-shadow: 0 0 0 1px rgba(35, 29, 30, 0.2); }
.langue:hover span { text-decoration: underline; text-underline-offset: 0.2em; }
.langue + .entete__appel { margin-left: 0; }
@media (min-width: 760px) { .etat + .langue { margin-left: 0; } }
/* sur un téléphone étroit, l'en-tête garde la marque et le drapeau : la réservation reste dans la barre du bas */
@media (max-width: 479px) { .entete .langue ~ .entete__appel { display: none; } }

/* ---------- Les groupes : sobre et élégant, des questions, des choix soulignés, de l'air ---------- */
.reservation__groupes { margin: 1.2rem auto 0; color: rgba(251, 249, 245, 0.9); }
.reservation__groupes a { color: #FFFFFF; text-underline-offset: 0.2em; }
.groupes {
  max-width: var(--largeur); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--nappe); box-shadow: 0 30px 60px -46px rgba(40, 10, 14, 0.65);
}
.groupes > * { min-width: 0; }
@media (min-width: 960px) { .groupes { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.groupes__photo { margin: 0; }
.groupes__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 960px) { .groupes__photo { position: relative; } .groupes__photo img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; } }
.groupes__formulaire { position: relative; padding: clamp(1.8rem, 5vw, 3.6rem) clamp(1.3rem, 5vw, 4rem) clamp(2rem, 5vw, 3.2rem); }
.groupes__piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.section .groupes__formulaire h2 { margin-bottom: 0.6rem; font-size: clamp(2.1rem, 4vw, 2.9rem); }
.groupes__intro { margin: 0 0 2.2rem; max-width: 30rem; color: var(--encre-2); }
.question { min-width: 0; margin: 0 0 1.75rem; padding: 0; border: 0; }
.question legend { padding: 0; margin-bottom: 0.45rem; font-family: var(--titre); font-size: 1.32rem; line-height: 1.25; color: var(--encre); }
.question legend small { margin-left: 0.35rem; font-family: var(--texte); font-size: 0.95rem; font-style: italic; color: var(--encre-2); }
/* le nombre : − 14 + */
.nombre { display: flex; align-items: center; gap: 0.6rem; }
.nombre__pas {
  display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 0 0.15rem; border: 0; background: none;
  font-family: var(--titre); font-size: 1.75rem; line-height: 1; color: var(--dore-texte); cursor: pointer; transition: color 0.2s var(--ease), transform 0.15s var(--ease);
}
.nombre__pas:hover { color: var(--bordeaux); }
.nombre__pas:active { transform: scale(0.9); }
.nombre__pas:focus-visible { outline: 2px solid var(--dore); outline-offset: 2px; }
.nombre__pas[hidden] { display: none; }
.nombre__valeur {
  width: 4.3rem; padding: 0 0.2rem; border: 0; border-bottom: 1px solid var(--dore); border-radius: 0; background: transparent;
  text-align: center; font-family: var(--titre); font-size: 2.4rem; line-height: 1.2; color: var(--bordeaux);
  font-variant-numeric: lining-nums tabular-nums; -moz-appearance: textfield; appearance: textfield;
}
.nombre__valeur::-webkit-outer-spin-button, .nombre__valeur::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nombre__valeur:focus { outline: none; border-bottom-color: var(--bordeaux); box-shadow: 0 1px 0 var(--bordeaux); }
.nombre__unite { margin-left: 0.3rem; color: var(--encre-2); }
/* des choix soulignés, sans cases */
.options { display: flex; flex-wrap: wrap; gap: 0 1.35rem; }
.options[hidden] { display: none; }
.option { position: relative; display: inline-flex; }
.option input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.option span, .jour-texte {
  display: inline-block; padding: 0.55rem 0 0.4rem; border: 0; background: none; color: var(--encre-2); font: inherit; font-size: 1.12rem; cursor: pointer;
  background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0 1px; background-position: 0 calc(100% - 0.25rem);
  transition: color 0.2s var(--ease), background-size 0.3s var(--ease);
}
.option:hover span, .jour-texte:hover { color: var(--encre); }
.option input:checked + span, .jour-texte[aria-pressed="true"] { color: var(--bordeaux); background-size: 100% 1px; }
.option input:focus-visible + span, .jour-texte:focus-visible { outline: 2px solid var(--dore); outline-offset: 2px; }
.option input:disabled + span { color: #A79D98; text-decoration: line-through; cursor: not-allowed; }
.jour-texte { font-variant-numeric: lining-nums; }
.jour-texte--autre { font-style: italic; }
.groupes__date { display: block; max-width: 15rem; margin-top: 0.3rem; }
.js .groupes__date { display: none; }
/* « une autre date » : un calendrier d'un mois, posé comme une carte sur la nappe (sans script : le champ date du navigateur) */
.calendrier {
  width: min(100%, 22rem); margin-top: 0.8rem; padding: 0.55rem 0.8rem 0.8rem;
  background: var(--nappe); border: 1px solid var(--dore-clair);
  box-shadow: 0 22px 40px -30px rgba(40, 10, 14, 0.55);
}
.calendrier[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .calendrier:not([hidden]) { animation: calendrier-ouvre 0.5s var(--ease) both; }
}
@keyframes calendrier-ouvre { from { opacity: 0; transform: translateY(-0.5rem); } }
.calendrier__tete { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; margin-bottom: 0.2rem; }
.calendrier__mois { margin: 0; text-align: center; font-family: var(--titre); font-size: 1.3rem; line-height: 1.2; color: var(--bordeaux); text-transform: capitalize; }
.calendrier__fleche {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--bordeaux); cursor: pointer; transition: background-color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.calendrier__fleche svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.calendrier__fleche:hover:not(:disabled) { background: var(--lin); }
.calendrier__fleche:disabled { opacity: 0.25; cursor: default; }
.calendrier__fleche:focus-visible { outline: 2px solid var(--dore); outline-offset: 1px; }
.calendrier__grille { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendrier__grille th {
  padding: 0.15rem 0 0.35rem; font-weight: 500; font-size: 1rem; letter-spacing: 0.06em; font-variant-caps: all-small-caps;
  color: var(--dore-texte); text-align: center;
}
.calendrier__grille td { padding: 1px; text-align: center; }
.calendrier__jour {
  position: relative; display: inline-grid; place-items: center; width: 100%; max-width: 2.75rem; aspect-ratio: 1; padding: 0 0 0.12rem;
  border: 0; border-radius: 50%; background: none; font: inherit; font-size: 1.1rem; line-height: 1; color: var(--encre-2);
  font-variant-numeric: lining-nums tabular-nums; cursor: pointer; transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.calendrier__jour.est-ouvert { color: var(--encre); }
.calendrier__jour.est-ouvert::after {
  content: ""; position: absolute; bottom: 17%; left: 50%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--dore);
}
.calendrier__jour:hover:not(:disabled) { background: var(--lin); }
.calendrier__jour:disabled { color: #CBC2BC; cursor: default; }
.calendrier__jour:disabled::after { display: none; }
.calendrier__jour[aria-pressed="true"], .calendrier__jour[aria-pressed="true"]:hover { background: var(--bordeaux); color: #FFFFFF; }
.calendrier__jour[aria-pressed="true"]::after { background: #FFFFFF; }
.calendrier__jour:focus-visible { outline: 2px solid var(--dore); outline-offset: 1px; }
.calendrier__legende { display: flex; align-items: center; gap: 0.55rem; margin: 0.5rem 0 0; padding-top: 0.55rem; border-top: 1px solid var(--filet); font-size: 0.98rem; font-style: italic; color: var(--encre-2); }
.calendrier__point { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--dore); }
.groupes__date input { width: 100%; padding: 0.45rem 0; border: 0; border-bottom: 1px solid var(--encre-2); border-radius: 0; background: transparent; font: inherit; font-size: 1.1rem; color: var(--encre); font-variant-numeric: lining-nums tabular-nums; }
.groupes__date input:focus { outline: none; border-bottom-color: var(--bordeaux); box-shadow: 0 1px 0 var(--bordeaux); }
.groupes__note-date { margin: 0.5rem 0 0; font-size: 1rem; font-style: italic; color: var(--bordeaux); }
.groupes__note-date[hidden] { display: none; }
/* les coordonnées : un simple trait */
.traits { display: grid; gap: 0.5rem 1.6rem; }
@media (min-width: 600px) { .traits { grid-template-columns: 1fr 1fr; } .trait--large { grid-column: 1 / -1; } }
.trait input, .trait textarea {
  display: block; width: 100%; padding: 0.65rem 0 0.45rem; border: 0; border-bottom: 1px solid var(--encre-2); border-radius: 0; background: transparent;
  font: inherit; font-size: 1.12rem; color: var(--encre); caret-color: var(--bordeaux);
}
.trait input[type="tel"] { font-variant-numeric: lining-nums tabular-nums; }
.trait textarea { min-height: 2.7rem; resize: vertical; line-height: 1.4; field-sizing: content; }
.trait ::placeholder { color: #6E6669; font-style: italic; opacity: 1; }
.trait input:focus, .trait textarea:focus { outline: none; border-bottom-color: var(--bordeaux); box-shadow: 0 1px 0 var(--bordeaux); }
/* l'envoi */
.groupes__envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.2rem; margin-top: 0.6rem; }
.groupes__envoi .bouton[disabled] { opacity: 0.6; cursor: progress; }
.groupes__retour { margin: 0; max-width: none; font-size: 1.05rem; }
.groupes__retour.est-erreur { color: var(--bordeaux); font-weight: 500; }
.groupes__appel { margin: 1.3rem 0 0; color: var(--encre-2); }
.groupes__appel a { font-family: var(--titre); font-size: 1.2rem; color: var(--bordeaux); text-decoration: none; white-space: nowrap; border-bottom: 1px solid var(--dore-clair); font-variant-numeric: lining-nums tabular-nums; }
.groupes__rgpd { margin: 0.6rem 0 0; max-width: 34rem; font-size: 0.95rem; color: var(--encre-2); }
.groupes__merci { padding: 0.4rem 0 0.2rem; }
.groupes__merci:focus { outline: none; }
.groupes__merci-titre { margin: 0 0 0.6rem; font-family: var(--titre); font-size: clamp(1.8rem, 3.6vw, 2.4rem); color: var(--bordeaux); }
.groupes__merci p { max-width: 34rem; font-size: 1.12rem; }