/* =====================================================================
   LE SITE DES CLIENTS — vitrine (/), puis réservation (lot 2)
   =====================================================================
   Refonte UI suite 12 (S1, décision de Charly du 01/10/2026) : le site a SA
   feuille. `styles.css` reste chargée par les modules de gestion, la
   comptabilité, le portail et l'admin ; une retouche du site ne peut plus
   les toucher, et le site ne télécharge plus 265 Ko de règles qui ne le
   concernent pas.
   Identité LE REMOUS (jamais Orkestro) : bordeaux, crème, filet doré ;
   titres en Young Serif servie par le site (S2 — aucune adresse IP de
   client envoyée à Google), texte dans la police du système (0 Ko).
   Téléphone d'abord (390 px), puis 900 px et 1600 px.
   ⚠️ Un état visuel s'exprime par une CLASSE (`is-on`, `is-open`…), jamais
   par un style en ligne posé par le JS (§4.300). */

@font-face {
  font-family: "Young Serif";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/young-serif-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bx: #7A1F2B;          /* bordeaux du Remous : l'action */
  --bx-sombre: #4f111a;   /* titres, pied de page */
  --bx-pale: #fbefec;     /* fond de message */
  --creme: #fffaf2;       /* fond de page */
  --sable: #f3eadb;       /* fond de section alternée */
  --filet: #e4d8c4;       /* bordures */
  --or: #b9953f;          /* filet doré, focus clavier */
  --encre: #1f1a17;
  --gris: #6b5f59;        /* texte secondaire : 5,9:1 sur la crème */
  --vert: #1d6b3a;
  --vert-pale: #e8f3eb;
  --ambre: #8a4b0b;
  --ambre-pale: #fff4e5;
  --titre: "Young Serif", Georgia, "Times New Roman", serif;
  --texte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --max: 1240px;
  --gouttiere: 20px;
  --haut: 64px;           /* hauteur de l'en-tête collant */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--haut) + 8px); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--encre); font: 16px/1.55 var(--texte); }
img { max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--titre); font-weight: 400; margin: 0; text-wrap: balance; }
.hidden { display: none !important; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gouttiere); }
:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px;
  font: 700 15px/1 var(--texte); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; white-space: nowrap; }
.btn-bx { background: var(--bx); color: #fff; }
.btn-bx:hover { background: var(--bx-sombre); }
.btn-clair { background: #fff; color: var(--bx-sombre); border-color: var(--filet); }
.btn-clair:hover { border-color: var(--bx); }
.btn-ligne { color: #fff; border-color: rgba(255,255,255,.75); background: rgba(0,0,0,.2); }
.btn-ligne:hover { background: rgba(0,0,0,.35); }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- en-tête ---------- */
.topbar { position: sticky; top: 0; z-index: 50; height: var(--haut); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 0 16px; background: rgba(255,250,242,.95); border-bottom: 1px solid var(--filet); }
@supports (backdrop-filter: blur(8px)) { .topbar { backdrop-filter: blur(8px); background: rgba(255,250,242,.88); } }
.topbar[data-scrolled="true"] { box-shadow: 0 6px 20px rgba(40,20,10,.08); }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 40px; width: auto; display: block; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.topbar-actions .nav-book { display: none; }
.lang-switch { display: inline-flex; border: 1.5px solid var(--filet); border-radius: 999px; overflow: hidden; background: #fff; flex: none; }
.lang-switch button { border: 0; background: #fff; padding: 7px 10px; line-height: 0; cursor: pointer; }
.lang-switch button.btn-primary { background: var(--bx); }
.lang-switch svg { width: 24px; height: 16px; display: block; border-radius: 2px; }
.nav-toggle { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--filet); background: #fff; color: var(--bx-sombre); display: grid; place-items: center; cursor: pointer; }
.main-nav { position: absolute; left: 0; right: 0; top: var(--haut); display: none; flex-direction: column; padding: 8px 16px 16px;
  background: var(--creme); border-bottom: 1px solid var(--filet); box-shadow: 0 16px 30px rgba(40,20,10,.12); }
.main-nav.open { display: flex; }
.main-nav a { text-decoration: none; font: 600 16px/1 var(--texte); color: var(--encre); padding: 15px 12px; border-bottom: 1px solid var(--sable);
  transition: color .3s ease, background-color .2s ease, box-shadow .3s ease; }
/* Le titre de la section affichée (3e retour, 02/10/2026) : au téléphone un trait bordeaux à gauche ; à
   l'ordinateur un soulignement (.nav-ink) qui GLISSE d'un titre à l'autre. Couleur seule, jamais de graisse :
   la largeur des titres ne bouge pas, la barre ne saute pas. */
.main-nav a.active { color: var(--bx); box-shadow: inset 3px 0 0 var(--bx); }
.nav-ink { display: none; }

/* ---------- haut de page (photo) ---------- */
.hero { position: relative; color: #fff; background: #2b1a14; }
.hero-media { position: relative; min-height: 520px; display: flex; align-items: flex-end; overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transition: opacity .6s ease; }
.hero-img.is-fading { opacity: 0; }
/* 6e retour (02/10/2026) : « au téléphone la photo d'accueil est cadrée trop haut ». CAUSE : le cadre (≈ 390 × 660)
   a presque la forme de la photo (portrait) — cover n'a rien à couper en hauteur : on voyait la photo ENTIÈRE, arbres
   et ciel en haut, la terrasse tout en bas ; déplacer le point de cadrage n'y change rien. Un zoom ancré près du BAS
   montre la terrasse (parasols, tables), comme à l'ordinateur. */
/* 7e retour : « encore un peu plus bas » — ancré TOUT en bas ; 8e : « moins de ciel » — ×1,7 : on voit de 41 % au bas */
.hero-img { transform: scale(1.7); transform-origin: 50% 100%; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,8,6,.08) 20%, rgba(20,8,6,.8) 80%); pointer-events: none; }
.hero-inner { position: relative; z-index: 1; width: 100%; }
.hero-content { padding: 28px var(--gouttiere); display: grid; gap: 14px; }
.eyebrow { font: 700 11.5px/1.3 var(--texte); letter-spacing: .16em; text-transform: uppercase; color: var(--bx); margin: 0; }
.hero .eyebrow { color: #f1dfb6; }
.hero h1 { font-size: 34px; line-height: 1.07; color: #fff; }
.hero-content p.lead { margin: 0; max-width: 54ch; color: rgba(255,255,255,.93); }
/* 4e retour (02/10/2026) : « le texte titre sur la vue est pas très visible » — la photo en pleine largeur met
   des parasols CLAIRS derrière le texte, et le voile ne fonçait que le BAS. Une ombre douce sous les lettres, et
   (à l'ordinateur) un voile qui fonce aussi la GAUCHE, là où est le texte. */
.hero h1, .hero .eyebrow, .hero-content p.lead { text-shadow: 0 2px 18px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.55); }
main > section[tabindex="-1"]:focus { outline: none; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* la carte « aujourd'hui » : un bandeau bordeaux sous la photo au téléphone, une carte posée sur la photo au-delà de 900 px */
.today-card { position: relative; z-index: 1; background: var(--bx-sombre); color: #fff; padding: 18px var(--gouttiere) 20px; display: grid; gap: 10px; }
.state-pill { display: inline-flex; align-items: center; gap: 9px; justify-self: start; border-radius: 999px; padding: 7px 13px;
  font: 600 13.5px/1.3 var(--texte); background: rgba(255,250,242,.14); color: #fff; }
.state-pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #c9b9b2; flex: none; }
.state-pill.is-open::before { background: #34c26b; box-shadow: 0 0 0 3px rgba(52,194,107,.25); }
.state-pill.is-later::before { background: #34c26b; }
.state-pill.is-full::before, .state-pill.is-exception::before { background: #f0a43a; }
.today-card h2 { font-size: 21px; color: #fff; }
.today-rows { display: grid; }
.today-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: 14.5px; font-variant-numeric: tabular-nums; }
.today-row:last-child { border-bottom: 0; }
.today-row span:first-child { color: #ead2ca; white-space: nowrap; }
.today-row strong { font-weight: 600; text-align: right; }
.today-row a { color: #fff; }
.today-note { margin: 0; color: #ead2ca; font-size: 14px; }
.today-actions { display: none; gap: 8px; flex-wrap: wrap; }

/* ---------- sections ---------- */
.section { padding-block: 56px; }
.section + .section { border-top: 1px solid var(--filet); }
.section-alt { background: var(--sable); }
.section-heading { display: grid; gap: 8px; margin-bottom: 24px; max-width: 64ch; }
.section-heading h2 { font-size: 30px; line-height: 1.12; color: var(--bx-sombre); }
.section-heading p { margin: 0; color: var(--gris); }
.intro .wrap { display: grid; gap: 22px; }
.intro-col { display: grid; gap: 10px; align-content: start; }
.intro-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.intro-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; display: block; transition: opacity .7s ease; }
.intro-photos img:last-child { margin-top: 28px; }
.intro-photos img.is-fading { opacity: 0; }
.intro h2 { font-size: 30px; line-height: 1.12; color: var(--bx-sombre); }
.intro-text { margin: 0; white-space: pre-line; max-width: 64ch; font-size: 16.5px; }

/* menu du jour (ardoise) */
.mj-grid { display: grid; gap: 14px; }
.mj-day { background: #fff; border: 1px solid var(--filet); border-radius: 16px; padding: 18px; }
.mj-day h3 { font-size: 20px; color: var(--bx-sombre); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 4px; }
.mj-today-tag { font: 700 11px/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; background: var(--bx); color: #fff; border-radius: 999px; padding: 5px 8px; }
.mj-fam { margin-top: 12px; }
.mj-fam-h { font: 700 11.5px/1.2 var(--texte); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-bottom: 6px; }
.mj-item { padding: 4px 0; }
.mj-item .n { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-weight: 600; }
.mj-item .p { color: var(--bx); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mj-item .d { color: var(--gris); font-size: 14px; }
.mj-empty { margin: 8px 0 0; color: var(--gris); }

/* la carte : une page à la fois */
.menu-viewer { display: grid; gap: 14px; }
.menu-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.menu-tabs button { flex: none; border: 1.5px solid var(--filet); background: #fff; color: var(--encre); border-radius: 999px; padding: 10px 15px; font: 600 14px/1.1 var(--texte); cursor: pointer; }
.menu-tabs button.is-on { background: var(--bx-sombre); border-color: var(--bx-sombre); color: #fff; }
.menu-main { display: grid; gap: 12px; min-width: 0; }
.menu-page { margin: 0; position: relative; background: #fff; border: 1px solid var(--filet); border-radius: 16px; padding: 10px; }
.menu-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 8px; }
/* 6e retour : au téléphone la carte se lit EN DÉFILANT — toutes les pages l'une sous l'autre, la rangée de titres
   collée sous l'en-tête (elle suit la page lue, un titre touché y mène) ; la page seule et ses flèches restent à
   l'ordinateur. */
.menu-main > .menu-page, .menu-main > .menu-pager { display: none; }
.menu-tabs { position: sticky; top: var(--haut); z-index: 4; background: var(--creme); margin-inline: calc(-1 * var(--gouttiere)); padding: 8px var(--gouttiere); }
.menu-stack { display: grid; gap: 14px; }
.menu-sheet { margin: 0; background: #fff; border: 1px solid var(--filet); border-radius: 16px; padding: 10px; }
.menu-sheet figcaption { font: 400 19px/1.2 var(--titre); color: var(--bx-sombre); padding: 4px 4px 10px; }
.menu-sheet img { display: block; width: 100%; height: auto; border-radius: 8px; }
.menu-page img { display: block; width: 100%; height: auto; border-radius: 8px; }
.zoom-hint { position: absolute; right: 18px; bottom: 18px; display: inline-flex; gap: 6px; align-items: center; pointer-events: none;
  background: rgba(31,26,23,.84); color: #fff; border-radius: 999px; padding: 8px 12px; font: 600 13px/1 var(--texte); }
.pdf-placeholder { display: grid; place-items: center; min-height: 260px; border-radius: 8px; background: var(--sable); color: var(--bx-sombre); font-weight: 700; padding: 20px; text-align: center; }
.menu-pager { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: var(--gris); font-size: 14px; }
.menu-pager button { min-width: 44px; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--filet); background: #fff; color: var(--bx-sombre); font-size: 20px; cursor: pointer; }

/* photos : la mosaïque qui change (S5), puis la visionneuse */
.mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mosaic-tile { position: relative; display: block; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; background: var(--sable); aspect-ratio: 1; }
.mosaic-tile:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
.mosaic-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .7s ease; }
.mosaic-tile img.is-fading { opacity: 0; }
.mosaic-tile:nth-child(n+6) { display: none; }
.mosaic-more.is-d { display: none; }
.mosaic-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(40,12,16,.58); color: #fff; font: 600 15px/1.25 var(--texte); text-align: center; padding: 8px; }
.viewer { border: 0; padding: 0; margin: auto; width: min(1100px, 100vw); max-width: 100vw; max-height: 100svh; background: #120c0a; color: #fff; border-radius: 14px; }
.viewer::backdrop { background: rgba(10,6,5,.86); }
.viewer-body { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; height: min(92svh, 860px); }
.viewer-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; gap: 10px; font-size: 14px; color: #e9ddd6; font-variant-numeric: tabular-nums; }
.viewer-stage { position: relative; display: grid; place-items: center; min-height: 0; touch-action: pan-y; }
/* 6e retour (02/10/2026) : « la photo un peu plus petite pour entrer complètement dans l'écran ». CAUSE : un
   max-height: 100% posé sur un enfant de GRILLE se calcule sur sa RANGÉE — ici une rangée implicite taillée sur la
   photo elle-même : la limite ne bridait rien, la photo gardait sa taille, débordait sous le carrousel et faisait
   défiler la fenêtre. Elle occupe désormais exactement la scène, et s'y ajuste entière (contain). */
.viewer-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.7); background: rgba(18,12,10,.62); color: #fff; font-size: 26px; cursor: pointer; }
.viewer-nav:hover { background: rgba(18,12,10,.85); }
.viewer-nav.prev { left: 10px; }
.viewer-nav.next { right: 10px; }
.viewer-close { width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(255,255,255,.16); color: #fff; font-size: 24px; cursor: pointer; }
.viewer-caption { margin: 0; padding: 10px 14px 8px; text-align: center; color: #e9ddd6; min-height: 20px; }
/* le carrousel : une rangée de vignettes qui défile en largeur, la photo en cours cerclée d'or et ramenée au centre */
.viewer-strip { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 4px 14px 14px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent; }
.viewer-strip:empty { display: none; }
.viewer-thumb { flex: none; width: 92px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 9px; overflow: hidden; background: #2a1d18; cursor: pointer;
  opacity: .55; transition: opacity .2s ease, border-color .2s ease; }
.viewer-thumb:hover { opacity: .9; }
.viewer-thumb.is-on { opacity: 1; border-color: var(--or); }
.viewer-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 599px) { .viewer-thumb { width: 64px; height: 48px; } }

/* événements (affiches) — la section disparaît quand rien n'est publié (S7) */
.visual-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.visual-card { background: #fff; border: 1px solid var(--filet); border-radius: 16px; overflow: hidden; cursor: zoom-in; }
.visual-thumb { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.visual-card-title { padding: 10px 14px; font-weight: 600; }

/* le bon cadeau et les avis, côte à côte (2e retour, 02/10/2026) : un encart crème au filet doré,
   le bon dessiné comme le vrai mais SANS montant ; les avis dans une carte blanche à côté */
.duo { display: grid; gap: 16px; align-items: stretch; }
.panel { border-radius: 20px; padding: 26px; min-width: 0; }
.panel-gift { background: var(--creme); border: 1px solid var(--filet); position: relative; overflow: hidden; display: grid; gap: 24px; align-items: center; }
.panel-gift::after { content: ""; position: absolute; inset: 8px; border: 1px solid var(--or); border-radius: 14px; pointer-events: none; opacity: .75; }
.gift-text { display: grid; gap: 12px; justify-items: start; position: relative; z-index: 1; }
.gift-text h2 { font-size: 28px; line-height: 1.15; color: var(--bx-sombre); }
.gift-text p { margin: 0; color: var(--gris); font-size: 16px; }
/* le chèque : allongé (2,35 pour 1), talon bordeaux séparé par des pointillés et deux encoches, corps crème
   guilloché d'or, cadre doré intérieur ; légèrement penché, comme posé sur la table */
.gift-cheque { --talon: 86px; position: relative; z-index: 1; width: 100%; max-width: 470px; justify-self: center; aspect-ratio: 2.35 / 1;
  display: grid; grid-template-columns: var(--talon) minmax(0, 1fr); border-radius: 10px; overflow: hidden; background: #fffdf8;
  box-shadow: 0 18px 36px rgba(79,17,26,.16), 0 2px 6px rgba(79,17,26,.08); transform: rotate(-2.5deg); }
.gift-cheque::before, .gift-cheque::after { content: ""; position: absolute; left: calc(var(--talon) - 9px); width: 18px; height: 18px; border-radius: 50%;
  background: var(--creme); z-index: 2; }
.gift-cheque::before { top: -9px; }
.gift-cheque::after { bottom: -9px; }
.cheque-stub { background: var(--bx); color: var(--creme); display: grid; place-content: center; justify-items: center; gap: 8px; padding: 10px 8px; }
.cheque-stub img { width: 62px; height: auto; display: block; }
.cheque-stub span { font: 600 9px/1.2 var(--texte); letter-spacing: .12em; text-transform: uppercase; opacity: .8; text-align: center; }
.cheque-main { position: relative; display: grid; grid-template-rows: auto 1fr 1fr auto; align-items: center; gap: 2px; padding: 14px 18px 12px 20px;
  border-left: 2px dashed var(--filet);
  background: repeating-linear-gradient(135deg, rgba(185,149,63,.07) 0 1px, transparent 1px 7px),
              radial-gradient(120% 90% at 85% 15%, rgba(185,149,63,.12), transparent 60%), #fffdf8; }
.cheque-main::before { content: ""; position: absolute; inset: 6px; border: 1px solid rgba(185,149,63,.5); border-radius: 6px; pointer-events: none; }
.cheque-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; align-self: start; }
.cheque-title { font: 400 22px/1 var(--titre); color: var(--bx-sombre); }
.cheque-orn { color: var(--or); font-size: 9px; letter-spacing: .45em; }
.cheque-row { display: flex; align-items: baseline; gap: 8px; font: 600 10.5px/1 var(--texte); letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.cheque-row i { flex: 1; border-bottom: 1px dotted #b3a283; transform: translateY(-2px); }
.cheque-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; align-self: end; }
.gift-line { font: italic 400 13px/1.3 var(--titre); color: var(--gris); text-wrap: balance; }
.cheque-sign { font: italic 400 17px/1 var(--titre); color: var(--bx); padding-top: 4px; border-top: 1px solid rgba(122,31,43,.35); white-space: nowrap; }
/* au téléphone le chèque fait ~300 px : un peu plus haut, talon plus fin, titre sur une ligne, la petite phrase
   s'efface (la signature reste) — sinon les lignes se chevauchent */
@media (max-width: 599px) {
  .gift-cheque { --talon: 64px; aspect-ratio: 2.05 / 1; }
  .cheque-stub img { width: 48px; }
  .cheque-stub span { font-size: 7.5px; }
  .cheque-main { padding: 12px 14px 10px 14px; }
  .cheque-title { font-size: 19px; white-space: nowrap; }
  .cheque-orn { display: none; }
  .cheque-row { font-size: 9.5px; }
  .cheque-foot { justify-content: flex-end; }
  .cheque-foot .gift-line { display: none; }
  .cheque-sign { font-size: 15px; }
}
.panel-reviews { background: #fff; border: 1px solid var(--filet); display: grid; gap: 10px; align-content: start; }
.panel-reviews h2 { font-size: 28px; line-height: 1.15; color: var(--bx-sombre); }
.panel-reviews > p { margin: 0; color: var(--gris); }
.tripadvisor-widget-card { min-height: 60px; overflow: hidden; }
.tripadvisor-fallback { display: grid; gap: 10px; justify-items: start; }
.tripadvisor-fallback p { color: var(--gris); margin: 0; }
.tripadvisor-fallback .btn { background: var(--bx); color: #fff; }

/* infos pratiques (refaites le 02/10/2026 : une photo, l'adresse, UN bouton principal, les réseaux) */
.info-grid { display: grid; gap: 14px; }
.info-card { background: #fff; border: 1px solid var(--filet); border-radius: 16px; padding: 18px; min-width: 0; }
.info-card h3 { font-size: 19px; color: var(--bx-sombre); margin-bottom: 10px; }
.info-card p { margin: 0 0 8px; }
.visit { display: grid; gap: 10px; align-content: start; }
.visit h3 { margin-bottom: 0; }
.visit p { margin: 0; }
/* la photo, dézoomée comme celle du haut : entière, ses bords complétés par elle-même floutée (2e retour) */
.visit-media { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: var(--sable); }
.visit-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
/* le voile : la carte ne prend la molette et le doigt qu'une fois choisie (clic) */
/* l'indication en HAUT, dans une pastille : en bas, elle chevauchait la ligne de crédits d'OpenStreetMap */
.map-shield { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding: 12px 0 0; border: 0; cursor: pointer;
  background: rgba(20,8,6,.06); font: 700 13.5px/1 var(--texte); }
.map-shield span { background: rgba(43,26,20,.82); color: #fff; padding: 8px 14px; border-radius: 999px; box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.map-shield:focus-visible { outline: 3px solid var(--or); outline-offset: -3px; }
.visit-map.is-live .map-shield { display: none; }
.visit-address { font-size: 15.5px; }
.address-link { color: var(--encre); text-decoration-color: var(--filet); text-underline-offset: 3px; white-space: pre-line; }   /* « 74200 Thonon-les-Bains » entier sur la 2e ligne */
.visit-phone .phone-link { font: 700 22px/1.2 var(--texte); letter-spacing: .02em; color: var(--bx-sombre); text-decoration: none; font-variant-numeric: tabular-nums; }
.visit-route { justify-self: start; }
.visit-social { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding-top: 10px; border-top: 1px solid var(--sable); font-size: 14.5px; }
.visit-follow { color: var(--gris); }
.visit-social a { color: var(--bx); font-weight: 700; text-decoration: none; }
.visit-social a:hover { text-decoration: underline; }
.hours-list { display: grid; font-variant-numeric: tabular-nums; }
.hours-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--sable); font-size: 14.5px; }
.hours-row:last-child { border-bottom: 0; }
.hours-row span { white-space: nowrap; }
.hours-row strong { font-weight: 500; text-align: right; }
.hours-row.today { color: var(--bx); }
.hours-row.today span, .hours-row.today strong { font-weight: 700; }

/* pied de page (refait le 02/10/2026 : « fait vide ») */
.footer { background: var(--bx-sombre); color: #f3e3dc; padding: 46px 0 112px; }
.footer-grid { display: grid; gap: 26px; }
.footer-brand { display: grid; gap: 12px; align-content: start; }
.footer-logo { height: 58px; width: auto; display: block; }
.footer-brand p { margin: 0; color: #e7cfc6; max-width: 34ch; }
.footer-col { display: grid; gap: 8px; align-content: start; font-size: 14.5px; }
.footer-col h3 { font: 700 11.5px/1.2 var(--texte); letter-spacing: .14em; text-transform: uppercase; color: #f1dfb6; margin-bottom: 4px; }
.footer-col p { margin: 0; }
.footer a { color: #fff; }
.footer-phone { font: 700 20px/1.2 var(--texte); letter-spacing: .02em; font-variant-numeric: tabular-nums; text-decoration: none; }   /* le numéro dans la police du texte (2e retour) */
#footerAddress { white-space: pre-line; }
.footer-book { margin-top: 6px; background: var(--creme); color: var(--bx-sombre); min-height: 44px; }
.footer .footer-book { color: var(--bx-sombre); }
.footer-book:hover { background: #fff; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); font-size: 13px; color: #d9bdb2; }
.footer-bottom p { margin: 0; flex-basis: 100%; }

/* barre d'action du téléphone (S10) */
.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,250,242,.97); border-top: 1px solid var(--filet);
  box-shadow: 0 -8px 24px rgba(40,20,10,.08); }
.action-bar a { min-height: 50px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  text-decoration: none; font: 700 12.5px/1 var(--texte); color: var(--bx-sombre); border: 1.5px solid var(--filet); background: #fff; }
.action-bar a.book { flex-direction: row; gap: 7px; background: var(--bx); border-color: var(--bx); color: #fff; font-size: 14px; }

/* bouton « haut de page » */
.to-top { position: fixed; right: 14px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); z-index: 55; width: 46px; height: 46px; border-radius: 50%; border: 0;
  background: var(--bx); color: #fff; font-size: 22px; font-weight: 800; cursor: pointer; box-shadow: 0 8px 22px rgba(0,0,0,.3); display: none; }
.to-top.is-on { display: block; }

/* modale d'agrandissement (carte, affiches) */
.visual-modal { border: 0; padding: 0; margin: auto; max-width: min(1000px, 100vw); max-height: 100svh; background: #fff; border-radius: 14px; overflow: auto; }
.visual-modal::backdrop { background: rgba(10,6,5,.82); }
.visual-modal iframe { display: block; width: min(1000px, 96vw); height: 90svh; border: 0; }
.modal-close { position: sticky; top: 8px; float: right; margin: 8px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bx-sombre); color: #fff; font-size: 24px; cursor: pointer; z-index: 2; }

/* fenêtre d'annonce (réglée dans /admin/) */
.site-popup { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(30,10,12,.58); }
.site-popup-box { background: #fff; color: var(--encre); width: 100%; max-width: 430px; max-height: 92vh; overflow: auto; border-radius: 18px; padding: 24px; text-align: center; box-shadow: 0 24px 64px rgba(0,0,0,.4); }
.site-popup-box.has-media { max-width: 640px; }
.site-popup-box h2 { font-size: 24px; color: var(--bx-sombre); margin-bottom: 8px; }
.site-popup-box p { margin: 0 0 14px; white-space: pre-line; }
.site-popup-box img { max-width: 100%; max-height: 56vh; border-radius: 12px; margin: 0 0 12px; }
.site-popup-box iframe { width: 100%; height: 56vh; border: 1px solid var(--filet); border-radius: 12px; margin: 0 0 12px; }
.site-popup-box .poster-link { display: block; margin: 0 0 12px; color: var(--bx); font-weight: 700; }

/* ======================= 900 px et plus ======================= */
@media (min-width: 900px) {
  :root { --gouttiere: 48px; --haut: 76px; }
  .topbar { padding: 0 var(--gouttiere); }
  .brand img { height: 48px; }
  .nav-toggle { display: none; }
  /* relative (le trait s'y accroche) : les décalages du téléphone (top: var(--haut), left/right: 0) s'appliqueraient
     alors et feraient DESCENDRE la barre de 76 px — ils reviennent à auto */
  .main-nav { position: relative; inset: auto; display: flex; flex-direction: row; align-items: center; gap: 2px; padding: 0; background: none; border: 0; box-shadow: none; }
  .main-nav a { border: 0; padding: 10px 12px; border-radius: 999px; font-size: 14.5px; color: #4a3a33; }
  .main-nav a:hover { background: var(--sable); }
  .main-nav a.active { color: var(--bx); box-shadow: none; }
  .nav-ink { display: block; position: absolute; left: 0; bottom: 3px; height: 2px; width: 0; border-radius: 2px; background: var(--bx); pointer-events: none;
    opacity: 0; transition: transform .42s cubic-bezier(.45, 0, .15, 1), width .42s cubic-bezier(.45, 0, .15, 1), opacity .25s ease; }
  .nav-ink.is-on { opacity: 1; }
  .topbar-actions .nav-book { display: inline-flex; min-height: 44px; }
  .hero-media { min-height: 640px; }
  /* 3e retour (02/10/2026) : la photo entière aux bords flous ne va pas — « je veux voir la partie de la
     capture » : la terrasse, parasols, tables et clients. Pleine largeur (cover), cadre posé à 64 % de la
     hauteur : mesuré sur la photo d'accueil actuelle (1452 × 2048), il montre ce cadrage à 1366 comme à
     1920 px. Une autre photo d'accueil pourra demander un autre point. */
  /* 7e retour : « un poil plus haut » — 64 % → 60 % */
  .hero-img { object-fit: cover; object-position: 50% 60%; transform: none; }
  .hero-inner { max-width: var(--max); margin: 0 auto; padding: 56px var(--gouttiere); display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 40px; align-items: end; }
  .hero-content { padding: 0; gap: 16px; }
  .hero h1 { font-size: 54px; max-width: 16ch; }
  .today-card { background: rgba(255,250,242,.97); color: var(--encre); border-radius: 18px; padding: 20px; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
  .today-card .state-pill { background: var(--sable); color: var(--encre); }
  .today-card .state-pill.is-open, .today-card .state-pill.is-later { background: var(--vert-pale); color: var(--vert); }
  .today-card .state-pill.is-full, .today-card .state-pill.is-exception { background: var(--ambre-pale); color: var(--ambre); }
  .today-card h2 { color: var(--bx-sombre); }
  .today-row { border-bottom-color: var(--sable); }
  .today-row span:first-child { color: var(--gris); }
  .today-row a { color: var(--bx-sombre); }
  .today-note { color: var(--gris); }
  .today-actions { display: flex; }
  .section { padding-block: 84px; }
  .section-heading h2, .intro h2 { font-size: 42px; }
  .intro .wrap { grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; }
  .duo { grid-template-columns: 1.25fr 1fr; gap: 20px; }
  .panel { padding: 34px; }
  .panel-gift { gap: 30px; }
  .gift-text h2, .panel-reviews h2 { font-size: 34px; }
  .mj-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
  .menu-viewer { grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; }
  .menu-tabs { flex-direction: column; overflow: visible; position: sticky; top: calc(var(--haut) + 20px); margin: 0; padding: 0; background: none; }
  .menu-main > .menu-page { display: block; }
  .menu-main > .menu-pager { display: flex; }
  .menu-stack { display: none; }
  .menu-tabs button { text-align: left; border-radius: 12px; padding: 13px 16px; font-size: 15px; }
  .menu-main { max-width: 760px; }
  .mosaic { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-rows: 180px; }
  .mosaic-tile, .mosaic-tile:first-child { aspect-ratio: auto; }
  .mosaic-tile:first-child { grid-column: span 2; grid-row: span 2; }
  .mosaic-tile:nth-child(n+6) { display: block; }
  .mosaic-more.is-m { display: none; }
  .mosaic-more.is-d { display: grid; }
  .info-grid { grid-template-columns: 1.15fr 1fr 1fr; }
  .footer { padding: 60px 0 30px; }
  .footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; }
  .action-bar { display: none; }
  .to-top { bottom: 20px; right: 20px; }
}
/* L'aimantation CSS (scroll-snap) du 3e retour est PARTIE au 4e : elle n'agissait qu'APRÈS l'arrêt de la
   molette — deux mouvements au lieu d'un. La glissade est en JS (siteGlide, app.js). */
@media (min-width: 900px) {
  .hero-media::after { background: linear-gradient(90deg, rgba(20,8,6,.72) 0%, rgba(20,8,6,.5) 36%, rgba(20,8,6,.12) 68%, rgba(20,8,6,0) 100%),
    linear-gradient(180deg, rgba(20,8,6,.22) 0%, rgba(20,8,6,.04) 30%, rgba(20,8,6,.7) 100%); }
}
@media (min-width: 1600px) {
  :root { --max: 1440px; }
  .hero-media { min-height: 760px; }
  .hero h1 { font-size: 64px; }
  .menu-main { max-width: 860px; }
  .mosaic { grid-auto-rows: 220px; }
}

/* =====================================================================
   LA RÉSERVATION (/reservation/) — refonte UI suite 12, lot 3
   =====================================================================
   Tout est scopé sous `.page-resa`. Les classes que fabrique reservation.js
   (slot-button, service-switch, phone-input-group, optional-hint, room-chip,
   reservation-message…) sont dessinées ICI : la page ne charge plus
   `styles.css`, où elles vivaient — une classe sans règle serait un bouton nu. */
.page-resa { background: var(--creme); }
.page-resa .res-top { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  padding: 8px 14px; background: rgba(255,250,242,.96); border-bottom: 1px solid var(--filet); }
.page-resa .res-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; font-weight: 600; color: var(--bx-sombre); }
.page-resa .res-back span:first-child { font-size: 22px; line-height: 1; }
.page-resa .res-logo img { height: 36px; width: auto; display: block; }
.page-resa .lang-switch { justify-self: end; }
.page-resa .res-shell { width: 100%; max-width: 1180px; margin: 0 auto; padding: 20px 16px 24px; display: grid; gap: 16px; }
.page-resa .res-head { display: grid; gap: 6px; }
.page-resa .res-head h1 { font-size: 30px; line-height: 1.1; color: var(--bx-sombre); }
.page-resa .res-head p { margin: 0; }
.page-resa .res-call { color: var(--bx); font-weight: 700; white-space: nowrap; }
.page-resa .res-muted { color: var(--gris); }
.page-resa .res-small { font-size: 13.5px; margin: 0; }
.page-resa .res-main { display: grid; gap: 14px; min-width: 0; }
.page-resa .reservation-form { display: grid; gap: 14px; }
.page-resa .res-step { background: #fff; border: 1px solid var(--filet); border-radius: 18px; padding: 18px; display: grid; gap: 14px; min-width: 0; }
.page-resa .res-step-t { display: flex; align-items: center; gap: 10px; font-size: 20px; color: var(--bx-sombre); }
.page-resa .res-num { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--sable); color: var(--bx); font: 700 13px/1 var(--texte); }
.page-resa .res-row { display: grid; gap: 14px; }
.page-resa .reservation-form label { display: flex; flex-direction: column; gap: 7px; font-weight: 600; font-size: 14.5px; color: #3b2a2a; min-width: 0; }
.page-resa .res-lab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px; }
.page-resa .req-star { color: var(--bx); font-weight: 800; }
.page-resa .optional-hint { font-weight: 500; color: var(--gris); font-size: 13px; }
.page-resa .reservation-form input, .page-resa .reservation-form select, .page-resa .reservation-form textarea {
  width: 100%; min-height: 50px; border: 1.5px solid var(--filet); border-radius: 12px; padding: 0 14px; background: #fff; color: var(--encre); font: 500 16px/1.3 var(--texte); }
.page-resa .reservation-form textarea { padding: 12px 14px; min-height: 92px; resize: vertical; }
/* 6e retour : « le champ date dépasse de son cadre ». Safari (iPhone) donne au champ date une largeur minimale
   NATIVE et ignore width: 100% tant qu'il garde son apparence système : il déborde. Sans apparence système (iOS
   seulement : -webkit-touch-callout n'existe que là), il suit la largeur du cadre ; partout, min-width: 0. */
.page-resa .reservation-form input[type="date"] { display: block; min-width: 0; max-width: 100%; }
@supports (-webkit-touch-callout: none) {
  .page-resa .reservation-form input[type="date"] { -webkit-appearance: none; appearance: none; line-height: 50px; }
  .page-resa .reservation-form input[type="date"]::-webkit-date-and-time-value { text-align: left; }
}
.page-resa .reservation-form input:focus, .page-resa .reservation-form select:focus, .page-resa .reservation-form textarea:focus { border-color: var(--bx); outline: 2px solid rgba(122,31,43,.18); outline-offset: 0; }
.page-resa .phone-input-group { display: grid; grid-template-columns: 104px 1fr; gap: 8px; }
.page-resa .phone-input-group select { padding: 0 8px; }
/* lot 14 — le sondage après réservation : des pastilles d'une touche, puis cinq étoiles ; rien d'obligatoire */
.page-resa .res-survey { margin: 4px auto 18px; max-width: 540px; padding: 16px; border: 1px solid var(--filet); border-radius: 16px; background: var(--creme); display: grid; gap: 10px; text-align: center; }
.page-resa .res-survey-q { margin: 0; font-weight: 700; color: var(--bx-sombre); }
/* lot 18 (Charly : « l'encart d'avis peut clignoter deux fois pour attirer l'attention ») — deux pulsations dorées,
   un court instant après l'affichage (le temps de lire « Réservation confirmée ») ; rien si l'appareil demande
   moins d'animations. */
.page-resa .res-survey.is-flash { animation: resSurveyFlash .65s ease-in-out .6s 2; }
@keyframes resSurveyFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185, 149, 63, 0); background-color: var(--creme); }
  50% { box-shadow: 0 0 0 5px rgba(185, 149, 63, .55); background-color: #fbf0d6; }
}
@media (prefers-reduced-motion: reduce) { .page-resa .res-survey.is-flash { animation: none; } }
.page-resa .res-survey-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.page-resa .res-survey-chips button { min-height: 42px; padding: 0 14px; border: 1.5px solid var(--filet); border-radius: 999px; background: #fff; color: var(--encre); font: 600 14px/1.1 var(--texte); cursor: pointer; }
.page-resa .res-survey-chips button:hover:not(:disabled) { border-color: var(--bx); }
.page-resa .res-survey-chips button.is-on { background: var(--bx); border-color: var(--bx); color: #fff; }
.page-resa .res-survey-chips button:disabled:not(.is-on) { opacity: .5; cursor: default; }
.page-resa .res-survey-other { display: flex; gap: 8px; }
.page-resa .res-survey-other input { flex: 1; min-width: 0; min-height: 44px; }
.page-resa .res-survey-stars { display: flex; justify-content: center; gap: 2px; }
.page-resa .res-survey-stars button { min-width: 44px; min-height: 44px; border: 0; background: none; color: #d6c9b2; font-size: 30px; line-height: 1; cursor: pointer; }
.page-resa .res-survey-stars button.is-on { color: var(--or); }
.page-resa .res-survey-thanks { margin: 0; font-weight: 700; color: var(--bx); }
/* Midi | Soir (fabriqué par reservation.js) */
.page-resa .service-switch { display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--filet); border-radius: 12px; overflow: hidden; background: #fff; }
.page-resa .service-switch-btn { min-height: 50px; border: 0; background: #fff; color: var(--encre); font: 700 15px/1 var(--texte); cursor: pointer; }
.page-resa .service-switch-btn.active { background: var(--bx); color: #fff; }
/* le nombre de personnes : − [ 2 ] + */
.page-resa .stepper { display: inline-grid; grid-template-columns: 56px 92px 56px; align-self: start; border: 1.5px solid var(--filet); border-radius: 12px; overflow: hidden; }
.page-resa .stepper input { border: 0; border-radius: 0; text-align: center; font-weight: 700; font-size: 18px; min-height: 52px; padding: 0 4px; -moz-appearance: textfield; }
.page-resa .stepper input::-webkit-outer-spin-button, .page-resa .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.page-resa .step-btn { border: 0; background: var(--sable); color: var(--bx-sombre); font: 600 24px/1 var(--texte); cursor: pointer; }
.page-resa .step-btn:disabled { color: #b8aca5; cursor: not-allowed; }
.page-resa .res-hint { margin: 0; font-size: 14px; }
.page-resa .res-hint:empty { display: none; }
.page-resa .res-hint.is-warn { color: var(--bx); font-weight: 700; }
/* les horaires */
.page-resa .slot-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.page-resa .slot-list > p { grid-column: 1 / -1; margin: 0; }
.page-resa .slot-group { grid-column: 1 / -1; font: 700 11.5px/1.2 var(--texte); letter-spacing: .12em; text-transform: uppercase; color: var(--gris); margin-top: 4px; }
.page-resa .slot-button { min-height: 46px; border: 1.5px solid var(--filet); background: #fff; color: var(--encre); border-radius: 12px; font: 700 15px/1.1 var(--texte);
  font-variant-numeric: tabular-nums; cursor: pointer; padding: 4px; overflow-wrap: anywhere; }
.page-resa .slot-button[aria-pressed="true"] { background: var(--bx); border-color: var(--bx); color: #fff; }
.page-resa .slot-button:disabled { background: var(--sable); border-style: dashed; color: #857872; text-decoration: line-through; cursor: not-allowed; font-size: 12.5px; }
.page-resa .reservation-message { padding: 12px 14px; border-radius: 12px; background: var(--bx-pale); color: var(--bx-sombre); font-weight: 600; }
.page-resa .reservation-message.ok { background: var(--vert-pale); color: var(--vert); }
.page-resa .room-chip { min-height: 44px; padding: 0 16px; font-size: 14px; }
/* boutons de la page (la vitrine n'a pas btn-primary / btn-light) */
.page-resa .btn.btn-primary { background: var(--bx); color: #fff; border-color: var(--bx); }
.page-resa .btn.btn-primary:hover { background: var(--bx-sombre); }
.page-resa .btn.btn-light { background: #fff; color: var(--bx-sombre); border-color: var(--filet); }
.page-resa .btn:disabled { opacity: .55; cursor: not-allowed; }
/* le récapitulatif + Confirmer, collés au pouce au téléphone */
.page-resa .res-submit { position: sticky; bottom: 0; z-index: 30; margin: 0 -16px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,250,242,.97); border-top: 1px solid var(--filet); box-shadow: 0 -8px 24px rgba(40,20,10,.08); display: grid; gap: 8px; }
.page-resa .res-recap { margin: 0; font-weight: 600; font-size: 14px; color: var(--bx-sombre); font-variant-numeric: tabular-nums; }
.page-resa .res-submit .btn { width: 100%; min-height: 52px; font-size: 16px; }
/* la confirmation */
.page-resa .reservation-success-panel { background: #fff; border: 1px solid var(--filet); border-radius: 18px; padding: 26px 18px; display: grid; gap: 12px; justify-items: center; text-align: center; }
.page-resa .reservation-success-panel.hidden { display: none !important; }
.page-resa .reservation-success-panel h2 { font-size: 28px; color: var(--bx-sombre); }
.page-resa .reservation-success-panel p { margin: 0; }
.page-resa .success-icon { width: 60px; height: 60px; border-radius: 50%; background: var(--vert); color: #fff; display: grid; place-items: center; font-size: 30px; font-weight: 800; }
/* le récapitulatif de la confirmation : trois lignes (quand · qui · code), une seule carte */
.page-resa .success-details { display: grid; gap: 4px; width: 100%; max-width: 560px; background: var(--creme); border: 1px solid var(--filet); border-radius: 14px; padding: 14px 16px; overflow-wrap: anywhere; }
.page-resa .success-details .success-when { font-size: 19px; font-weight: 700; color: var(--bx-sombre); }
.page-resa .success-details .success-who { font-size: 15px; }
.page-resa .success-details .success-code { font-size: 14px; color: var(--bx); }
.page-resa .res-cal-hint { width: 100%; font-weight: 700; }
.page-resa #reservationCalendar .btn { min-height: 48px; }
/* la carte « Votre table » : ordinateur seulement */
.page-resa .res-aside { display: none; }
.page-resa .res-legal { text-align: center; font-size: 13.5px; margin: 0; padding: 4px 16px 24px; }
.page-resa .res-legal a, .page-resa .res-small a { color: var(--bx); font-weight: 600; }
@media (min-width: 900px) {
  .page-resa .res-top { padding: 10px 48px; }
  .page-resa .res-logo img { height: 44px; }
  .page-resa .res-shell { grid-template-columns: minmax(0, 1fr) 360px; gap: 28px 32px; padding: 36px 48px 32px; align-items: start; }
  .page-resa .res-head { grid-column: 1 / -1; }
  .page-resa .res-head h1 { font-size: 44px; }
  .page-resa .res-row { grid-template-columns: 1fr 1fr; }
  .page-resa .res-wide { grid-column: 1 / -1; }
  .page-resa .slot-list { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .page-resa .res-submit { position: static; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
  .page-resa .res-recap { display: none; }
  .page-resa .res-submit .btn { width: auto; justify-self: start; padding: 0 34px; }
  .page-resa .res-aside { display: grid; gap: 14px; position: sticky; top: 90px; }
  .page-resa .res-photo { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; display: block; }
  .page-resa .res-card { background: #fff; border: 1px solid var(--filet); border-radius: 18px; padding: 18px; display: grid; gap: 10px; }
  .page-resa .res-card h2 { font-size: 21px; color: var(--bx-sombre); }
  .page-resa .res-line { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 7px; border-bottom: 1px solid var(--sable); font-size: 14.5px; font-variant-numeric: tabular-nums; }
  .page-resa .res-line span { color: var(--gris); }
  .page-resa .res-line strong { color: var(--bx-sombre); text-align: right; }
}
@media (min-width: 1600px) {
  .page-resa .res-shell { max-width: 1320px; grid-template-columns: minmax(0, 1fr) 420px; }
}