/* Buvette Beaubien — stylesheet (mockup, September 2026)
   Direction: bright and airy. Full-bleed photo headers with white letterspaced
   uppercase, centred text blocks on white, a geometric sans (Jost), outlined
   rectangular buttons, photos in simple grids. Pink lives in the wordmark and
   the calendar's day-events; wine red belongs to Le Salon. */

:root {
  --bg: #FFFFFF;
  --bg-2: #F7F5F2;
  --ink: #1A1A1A;
  --ink-2: #4A4A4A;
  --muted: #8A8A8A;
  --line: #E4E1DD;
  --pink: #FFBFB3;
  --pink-2: #F4A797;
  --wine: #6B1F2E;
  --wine-2: #4B1420;
  --ok: #2F6B4F;
  --ok-bg: #E9F2ED;
  --warn: #A63B2E;
  --warn-bg: #F8E8E5;
  --font: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --max: 1200px;
  --narrow: 720px;
  --gutter: clamp(20px, 3vw, 40px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Anchor jumps (the welcome page's "notre salle privee" button, #politiques)
   glide instead of teleporting, and stop clear of the sticky 72px header. */
html { scroll-behavior: smooth; }
:target, #salon { scroll-margin-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.7; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; letter-spacing: 0.02em; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-weight: 500; margin: 0; line-height: 1.2; }

.caps { text-transform: uppercase; letter-spacing: 0.18em; }
.label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted); font-weight: 500; }
.h-section { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.28em; font-weight: 500; text-align: center; margin-bottom: 14px; }
.h-sub { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.22em; font-weight: 500; }
.statement { font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.75; letter-spacing: 0.04em; text-align: center; max-width: 42em; margin: 0 auto; color: var(--ink); }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.center { text-align: center; }
.link { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.narrow { width: min(100% - 2 * var(--gutter), var(--narrow)); margin-inline: auto; }
.section { padding: clamp(64px, 8vw, 120px) 0; }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- Buttons: outlined rectangles, letterspaced ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: inherit; font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.25em; padding: 16px 30px; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s; }
.btn:hover { background: var(--ink); color: #fff; }
.btn:disabled { opacity: 0.3; cursor: not-allowed; }
.btn.inactive { opacity: 0.45; }
.btn.inactive:hover { opacity: 0.7; }
.btn-pink { background: var(--pink); border-color: var(--pink); color: var(--ink); }
.btn-pink:hover { background: var(--pink-2); border-color: var(--pink-2); color: var(--ink); }
.btn-wine { background: var(--wine); border-color: var(--wine); color: #fff; }
.btn-wine:hover { background: transparent; color: var(--wine); }
.btn-sm { padding: 11px 18px; font-size: 0.62rem; }
/* Spinner shown while a reservation is in flight. The wait is not always
   short: the Apps Script writes the calendar event and sends two emails,
   and a cold start adds several seconds on top. */
.btn .ring {
  width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.35); border-top-color: #fff;
  animation: btn-spin 0.75s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
/* Overrides the 0.3 of :disabled - at that opacity the wine button turns
   pale pink and the spinner all but vanishes, which reads as broken
   rather than busy. Still unclickable; the cursor says so. */
.btn[aria-busy="true"] { opacity: 0.9; cursor: progress; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: center; }

/* ---------- Announcement bar ----------
   Above the header and not sticky: it is read once and scrolls away, the
   navigation stays. Wine because what it announces so far is an evening
   affair. Two groups, so a phone breaks the line between them and never in
   the middle of the dates. */
.annonce { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; padding: 10px var(--gutter); background: var(--wine); color: #fff; font-size: 0.84rem; letter-spacing: 0.04em; line-height: 1.55; text-align: center; transition: background 0.15s; }
.annonce[hidden] { display: none; }
a.annonce:hover { background: var(--wine-2); }
.annonce .a-g { white-space: nowrap; }
.annonce .a-title { color: var(--pink); font-weight: 500; letter-spacing: 0.16em; }
.annonce .a-dot::before { content: "·"; margin: 0 0.8em; opacity: 0.55; }
.annonce .a-cta { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.annonce .a-cta::after { content: " →"; display: inline-block; text-decoration: none; margin-left: 0.4em; }
@media (max-width: 720px) {
  .annonce { flex-direction: column; align-items: center; font-size: 0.8rem; padding-block: 9px; }
  .annonce .a-mid { display: none; }
}
@media (max-width: 360px) { .annonce .a-g { white-space: normal; } }
@media print { .annonce { display: none !important; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; }
.brand img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: 34px; }
.nav a { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.22em; font-weight: 500; position: relative; padding: 4px 0; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: center; transition: transform 0.2s; }
.nav a:hover::after, .nav a.active::after { transform: scaleX(1); }

/* ---------- Full-bleed photo banners with white letterspaced text ---------- */
.banner { position: relative; min-height: 62vh; display: grid; place-items: center; overflow: hidden; color: #fff; text-align: center; }
.banner.tall { min-height: 78vh; }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner .shade { position: absolute; inset: 0; background: rgba(0,0,0,0.18); }
.banner .txt { position: relative; padding: 40px var(--gutter); }
.banner h1, .banner h2 { font-size: clamp(1.3rem, 2.8vw, 2.3rem); font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em; line-height: 1.45; text-shadow: 0 1px 12px rgba(0,0,0,0.25); }
.banner .sub { margin-top: 14px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.3em; opacity: 0.9; }

/* ---------- Centred intro with the fox ---------- */
.intro { padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 72px); text-align: center; }
.intro .fox { width: min(60vw, 250px); margin: 0 auto 28px; }
.intro .wordmark { width: min(80vw, 430px); margin: 0 auto 34px; }
.intro .icons { display: flex; justify-content: center; gap: 14px; margin-bottom: 30px; }
.intro .statement { margin-bottom: 34px; }

.page-fox { width: min(50vw, 190px); margin: 0 auto 32px; }

/* Solid marks, so they hold their own next to the wordmark. */
.icons a { display: inline-flex; }
.icons .social { display: block; width: 34px; height: 34px; }
.icons a:hover .social { opacity: 0.68; }


/* ---------- Photo grids ---------- */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid3 img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid2 img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
figure { margin: 0; }
figcaption { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); text-align: center; margin-top: 12px; }

/* ---------- Three centred text columns ---------- */
.cols3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); text-align: center; }
.cols3 .h-sub { display: block; margin-bottom: 14px; }
.cols3 p { color: var(--ink-2); margin: 0; font-size: 0.95rem; }

/* ---------- Menus ---------- */
.menus-head { text-align: center; margin-bottom: 40px; }
.menus-head p { color: var(--ink-2); max-width: 40em; margin: 0 auto 22px; font-size: 0.95rem; }
.tabs { display: inline-flex; gap: 34px; justify-content: center; }
.tab { border: 0; background: none; font: inherit; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.25em; font-weight: 500; padding: 6px 0; cursor: pointer; color: var(--muted); border-bottom: 1px solid transparent; }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
/* An event's menu (MTLàTABLE...) in the wine red of its bar at the top of
   the page, so the two read as one thing. */
.tab.event-tab { color: var(--wine); }
.tab.event-tab[aria-selected="true"] { border-bottom-color: var(--wine); }
.menu-dates { text-align: center; color: var(--wine); font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; margin: 0 0 10px; }
.menu-dates + .menu-note { margin-top: 0; }
.event-panel .menu-grid { grid-template-columns: minmax(0, 640px); justify-content: center; }
.menu-actions { display: none; }
@media (min-width: 720px) { .menu-actions { display: flex; justify-content: center; margin-top: 8px; } }
.menu-panel { display: none; }
.menu-panel.active { display: block; }
.menu-note { color: var(--muted); font-size: 0.85rem; text-align: center; margin: 0 0 44px; }
/* The Nature leaf after a wine's name, and its legend under the wine list's note. */
.wleaf { display: inline-block; width: 0.85em; height: 0.85em; vertical-align: -0.08em; margin-left: 0.3em; }
.wine-legend { color: var(--muted); font-size: 0.85rem; text-align: center; margin: -34px 0 44px; }
.wine-legend .wleaf { margin: 0 0.35em 0 0; }
/* Français / English, above the note on the Menu and Brunch tabs only (the
   wine list stays French). Quieter than the tabs: same small capitals,
   lighter, the language in use underlined. */
.lang-switch { display: flex; justify-content: center; gap: 22px; margin: -14px 0 18px; }
.lang-btn { border: 0; background: none; font: inherit; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.22em; padding: 4px 0; cursor: pointer; color: var(--muted); border-bottom: 1px solid transparent; }
.lang-btn[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(40px, 6vw, 96px); }
.mcat { margin-bottom: clamp(36px, 4vw, 56px); }
.mcat h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.28em; font-weight: 500; text-align: center; margin-bottom: 18px; display: flex; align-items: center; gap: 16px; }
.mcat h3::before, .mcat h3::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.item { display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: baseline; padding: 10px 0; }
.item .n { font-weight: 500; font-size: 1rem; letter-spacing: 0.01em; }
.item .p { font-variant-numeric: tabular-nums; font-size: 0.9rem; white-space: nowrap; }
.item .gf { grid-column: 1 / -1; font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wine); margin-top: 3px; }
.item .d { grid-column: 1 / -1; color: var(--muted); font-size: 0.88rem; line-height: 1.55; letter-spacing: 0.01em; }
.mcat .note { color: var(--muted); font-size: 0.78rem; margin: 10px 0 0; text-align: center; }
.menu-footnote { color: var(--muted); font-size: 0.85rem; text-align: center; margin-top: 8px; }
/* Wine list: the wine and its producer, grapes and region below, then the
   glass and bottle prices in two narrow columns, labelled once per section. */
.item.wine { grid-template-columns: minmax(0, 1fr) 3.4em 3.4em; column-gap: 10px; }
.item.wine .n, .item.wine .d { display: block; }
.item.wine .wp { font-weight: 400; }
.item.wine .p { text-align: right; }
.item.wine .prov + .wnote::before { content: " — "; }
.item.wine .wnote { font-style: italic; }
.item.whead { padding: 0 0 2px; }
/* The bar menu: the details after the name, a cocktail's taste and the
   16 h – 18 h price in the paper menu's red, a section's line under its heading. */
.item.bar .bd { font-weight: 400; }
.item.bar .bs { font-weight: 400; font-size: 0.8rem; color: var(--warn); margin-left: 0.6em; white-space: nowrap; }
.item.bar .hp { color: var(--warn); font-size: 0.8rem; margin-right: 0.75em; }
.bcat .bsub { text-align: center; color: var(--muted); font-size: 0.8rem; margin: -10px 0 10px; }
.bar-panel .bar-note { color: var(--warn); }
.item.whead .p { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); }

/* ---------- Le Salon on the home page ---------- */
.salon-home .statement { margin-bottom: 30px; }
.stats { display: flex; justify-content: center; gap: clamp(28px, 6vw, 80px); flex-wrap: wrap; text-align: center; margin: 40px 0 36px; }
.stats b { display: block; font-weight: 500; font-size: 1.6rem; letter-spacing: 0.04em; line-height: 1.2; }
.stats span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.22em; color: var(--muted); }

/* ---------- Gift ---------- */
.gift { background: var(--bg-2); text-align: center; }
.gift p { color: var(--ink-2); max-width: 36em; margin: 0 auto 26px; }

/* ---------- Footer: centred, quiet ---------- */
.site-footer { border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 88px) 0 32px; text-align: center; }
.site-footer .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; font-size: 0.9rem; color: var(--ink-2); }
.site-footer .label { display: block; margin-bottom: 14px; color: var(--ink); }
/* « Heures d'ouverture » is also the staff's way to /eos (end-of-shift
   page): a link that looks exactly like the other headings. */
.label-link { text-decoration: none; }
.site-footer address { font-style: normal; }
.site-footer .hours div { display: flex; justify-content: center; gap: 14px; }
.site-footer .hours-note { color: var(--muted); font-size: 0.8rem; margin: 10px 0 0; }
.site-footer .icons { display: flex; justify-content: center; gap: 14px; margin: 40px 0 18px; }
.site-footer .legal { font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }

/* ---------- Reservation page: desktop layout ----------
   The form used .narrow (720px) while every other page uses .wrap (1200px).
   1080 is the compromise: wide enough for a month beside the day's bookings,
   narrow enough that a single text input is still easy to scan. */
.resa-wrap { width: min(100% - 2 * var(--gutter), 1080px); margin-inline: auto; }
.resa-intro { width: min(100% - 2 * var(--gutter), 860px); }
/* 36em holds the line near 70 characters: bigger type on a wider page still
   needs a short measure. */
.lead-resa { font-size: clamp(1.05rem, 1.45vw, 1.22rem); max-width: 36em; }

/* Section 01 takes the Le Salon page's two-column calendar: month on the
   left, that day's bookings and the time fields on the right, so choosing a
   date and choosing a time are one movement. */
.resa .cal-wrap { grid-template-columns: 7fr 5fr; column-gap: clamp(28px, 3.5vw, 52px); row-gap: 22px; align-items: start; }
.resa .cal-wrap > .cal-main { grid-column: 1; grid-row: 1; }
.resa .cal-wrap > .cal-side { grid-column: 2; grid-row: 1; }
.resa .cal-side { gap: 22px; }

/* 02 and 03 side by side, equal height: the textarea takes up the slack so
   the two bordered boxes end level. */
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(20px, 2.5vw, 34px); align-items: stretch; }
.two-up .fieldset { display: flex; flex-direction: column; }
.two-up .fieldset .field:last-of-type { flex: 1; display: flex; flex-direction: column; }
.two-up .fieldset textarea { flex: 1; min-height: 120px; resize: vertical; }
/* Two fields per row would be cramped inside a half-width column. */
.two-up .row2 { grid-template-columns: 1fr; gap: 0; }

@media (max-width: 900px) {
  .two-up { grid-template-columns: 1fr; }
  .resa .cal-wrap { grid-template-columns: 1fr; }
  .resa .cal-wrap > .cal-main, .resa .cal-wrap > .cal-side { grid-column: 1; grid-row: auto; }
}

/* ---------- Le Salon page ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); text-align: center; }
.two-col .h-sub { display: block; margin-bottom: 14px; }
.two-col p { color: var(--ink-2); margin: 0; font-size: 0.95rem; }

.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.fact { padding: 30px 20px; background: var(--bg-2); }
.fact .label { display: block; margin-bottom: 12px; }
.fact .value { font-weight: 500; font-size: 1.05rem; letter-spacing: 0.04em; line-height: 1.35; margin-bottom: 8px; }
.fact .detail { color: var(--muted); font-size: 0.82rem; margin: 0; line-height: 1.5; }

/* Calendar */
.cal-wrap { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 56px); background: var(--bg-2); padding: clamp(24px, 3vw, 40px); }
.cal-side { display: flex; flex-direction: column; gap: 28px; }
.cal-main[data-loading] .cal-nav, .cal-main[data-loading] .cal-grid, .cal-main[data-loading] .cal-legend { display: none; }
.cal-loading { color: var(--muted); font-size: 0.85rem; text-align: center; padding: 64px 16px; margin: 0; }
.cal-loading.cal-error { color: var(--warn); }
.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-nav button { width: 36px; height: 36px; border: 1px solid var(--line); background: #fff; cursor: pointer; font-size: 1rem; color: var(--ink); display: grid; place-items: center; }
.cal-nav button:hover { border-color: var(--ink); }
.cal-nav button:disabled { opacity: 0.3; cursor: not-allowed; }
.cal-month { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.25em; font-weight: 500; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-head { text-align: center; font-size: 0.62rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); padding-bottom: 10px; }
.cal-cell { position: relative; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.9rem; cursor: pointer; border: 1px solid transparent; background: transparent; color: var(--ink); font-variant-numeric: tabular-nums; font-family: inherit; transition: background 0.12s; }
.cal-cell:hover:not(:disabled) { background: #fff; }
.cal-cell.empty { cursor: default; }
.cal-cell.past, .cal-cell.too-soon, .cal-cell:disabled { color: var(--line); cursor: default; }
.cal-cell.past:hover, .cal-cell.too-soon:hover { background: transparent; }
.cal-cell.closed { background: repeating-linear-gradient(135deg, #E6E1DB 0 3px, transparent 3px 8px); color: var(--muted); }
.cal-cell.today .num { text-decoration: underline; text-underline-offset: 4px; }
.cal-cell.selected { border-color: var(--ink); background: #fff; }
.cal-cell.pulse { animation: pulse 1.4s ease-out 1; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(26,26,26,0.35); } 100% { box-shadow: 0 0 0 14px rgba(26,26,26,0); } }
.cal-dots { display: flex; gap: 3px; height: 6px; margin-top: 4px; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; }
.cal-dot.day { background: var(--pink-2); }
.cal-dot.evening { background: var(--wine); }
.cal-legend { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 20px; font-size: 0.72rem; letter-spacing: 0.08em; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: 7px; }
.cal-legend .sw { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.cal-legend .sw.closed { border-radius: 0; background: repeating-linear-gradient(135deg, #D6D2CC 0 2px, transparent 2px 4px); }

/* Sister-restaurant note in the calendar side panel */
.alt-venue { margin-top: auto; padding-top: 24px; border-top: 1px solid var(--line); }
.alt-venue .label { display: block; margin-bottom: 14px; }
.alt-venue .alt-mark { width: 156px; height: auto; opacity: 0.9; margin-bottom: 16px; }
.alt-venue p { color: var(--ink-2); font-size: 0.85rem; line-height: 1.6; margin: 0 0 10px; }
.alt-venue .link { font-size: 0.8rem; letter-spacing: 0.02em; }

.day-panel h3 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 500; margin-bottom: 8px; }
.day-panel .status { display: inline-block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; padding: 4px 8px; margin: 4px 0 14px; border: 1px solid var(--line); color: var(--muted); }
/* Wine, not green: on the reservation page it sits above a wine slot and a
   wine verdict, and green was the only other accent left. */
.day-panel .status.free { color: var(--wine); border-color: var(--wine); }
.day-panel .status.partial { color: var(--wine); border-color: var(--wine); }
.evt { display: grid; grid-template-columns: 3px 1fr auto; gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.evt:first-of-type { border-top: 0; }
.evt .bar { width: 3px; height: 100%; min-height: 26px; }
.evt .bar.day { background: var(--pink-2); }
.evt .bar.evening { background: var(--wine); }
.evt .who { font-size: 0.92rem; font-weight: 500; letter-spacing: 0.04em; }
.evt .kind { display: block; font-size: 0.72rem; color: var(--muted); font-weight: 400; letter-spacing: 0.04em; }
.evt .when { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 0.85rem; white-space: nowrap; }
.day-panel .empty { color: var(--ink-2); margin: 0; font-size: 0.9rem; }
.day-panel .hint { color: var(--muted); font-size: 0.78rem; margin: 18px 0 0; }

/* Group menus */
.gmenus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.gmenu { background: var(--bg-2); padding: 34px 28px; text-align: center; }
.gmenu .tag { display: block; margin-bottom: 10px; }
.gmenu h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.16em; font-weight: 500; margin-bottom: 6px; }
.gmenu .price { font-size: 0.9rem; color: var(--ink-2); margin-bottom: 22px; }
.gmenu .price small { color: var(--muted); margin-left: 4px; }
.gmenu ul { list-style: none; padding: 0; margin: 0; }
.gmenu li { padding: 9px 0; border-top: 1px solid #E4E0DA; color: var(--ink-2); font-size: 0.88rem; line-height: 1.5; }

/* Policies */
.pol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 72px); }
.pol { padding: 26px 0 20px; border-top: 1px solid var(--line); }
.pol h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.22em; font-weight: 500; margin-bottom: 12px; }
.pol ul { margin: 0; padding-left: 18px; }
.pol li { color: var(--ink-2); margin-bottom: 8px; font-size: 0.9rem; line-height: 1.6; }
.pol li::marker { color: var(--muted); }

.salon-cta { background: var(--bg-2); text-align: center; }
.salon-cta p { color: var(--ink-2); max-width: 40em; margin: 0 auto 26px; }

/* ---------- Reservation form ---------- */
/* The form was underline-only inputs on white, which read as a page of
   rules rather than fields. Each section is now a hairline box broken by its
   title (a plain <legend>, which browsers cut out of the border for free),
   and the inputs carry the shading, so what to fill in is obvious. */
.fieldset { border: 1px solid var(--line); min-width: 0; margin: 0 0 26px; padding: 22px clamp(20px, 3vw, 32px) clamp(22px, 3vw, 30px); background: transparent; }
.fieldset legend { margin: 0 auto; padding: 0 16px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--ink); font-weight: 500; text-align: center; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 24px; }
.field label { font-size: 0.85rem; color: var(--ink-2); }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--line); background: var(--bg-2); color: var(--ink); width: 100%; border-radius: 0; letter-spacing: 0.02em; }
.field select { appearance: none; -webkit-appearance: none; background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231A1A1A' stroke-width='1.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 34px; }
.field select option { padding: 8px 14px; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); background-color: #fff; }
/* Example text must never read as a filled-in value: pale and italic, so the
   difference carries by colour and by shape. */
.field input::placeholder, .field textarea::placeholder { color: #B5B0AB; opacity: 1; font-style: italic; }
.field .err { font-size: 0.78rem; color: var(--warn); min-height: 1.1em; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
/* Required marker. aria-hidden on the asterisk itself; the input carries
   `required`, so assistive tech hears it once rather than as "star". */
.field label .req { color: var(--wine); margin-left: 3px; }
.req-note { margin: 0 0 16px; text-align: center; }
.resa .cal-wrap { background: transparent; padding: 0; }
#time-wrap { border-top: 1px solid var(--line); padding-top: 22px; }
#time-wrap > .label { color: var(--ink); }
.resa .cal-cell:hover:not(:disabled) { background: var(--bg-2); }
.resa .cal-cell.selected { background: var(--bg-2); }
/* Wine, not green, for the client's own slot. The timeline writes
   var(--ok-bg) / var(--ok) inline, so pointing both tokens at --wine here
   moves the block, its border and the legend swatch together. */
#timeline, .tl-legend { --ok: var(--wine); --ok-bg: var(--wine); }
/* The frame is drawn inside the box rather than as a border, so a block
   sitting flush covers it exactly. 42px keeps the height the border gave. */
#timeline { position: relative; height: 42px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.axis { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--muted); margin-top: 6px; font-variant-numeric: tabular-nums; }
.tl-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 0.75rem; color: var(--muted); }
.tl-legend .sw { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.status-msg { padding: 12px 14px; font-size: 0.88rem; margin: 16px 0 0; border: 1px solid var(--line); text-align: center; }
/* The available-slot message reads like a recap row: a receding lead,
   then the times in full strength. Centred in the block. */
.status-msg.ok { display: flex; justify-content: center; gap: 10px; text-align: center; flex-wrap: wrap; }
.status-msg.ok .lead { opacity: 0.62; }
.status-msg.ok strong { font-weight: 500; }
.status-msg.ok { border-color: var(--wine); color: #fff; background: var(--wine); }
.status-msg.bad { border-color: var(--warn); color: var(--warn); background: var(--warn-bg); }
.status-msg.neutral { color: var(--ink-2); }
/* Summary before committing — a pale block, deliberately unlike the white
   boxes above it, so it reads as a review rather than more to fill in. */
.recap { background: var(--wine); color: #fff; padding: clamp(22px, 2.8vw, 32px); margin: 0 0 24px; }
.recap .label { display: block; text-align: center; margin-bottom: 18px; color: var(--pink); }
.recap-rows { display: grid; grid-template-columns: auto minmax(0, 1.5fr) auto minmax(0, 1fr); gap: 9px 18px; font-size: 0.92rem; max-width: 68em; margin: 0 auto; }
/* A label sits close to its own value; the space goes between the pairs,
   where it does the separating. A single even gap had to stay small or the
   menu line wrapped. */
.recap-rows > :nth-child(4n + 3) { padding-left: clamp(56px, 8vw, 130px); }
.recap-rows span { color: rgba(255,255,255,0.6); }
.recap-rows strong { font-weight: 500; text-align: right; color: #fff; }
@media (max-width: 760px) { .recap-rows { grid-template-columns: auto 1fr; max-width: 30em; } .recap-rows > :nth-child(4n + 3) { padding-left: 0; } }
@media (max-width: 480px) { .recap-rows { grid-template-columns: 1fr; gap: 2px; } .recap-rows strong { text-align: left; margin-bottom: 8px; } }

.terms { display: flex; gap: 12px; align-items: flex-start; font-size: 0.88rem; color: var(--ink-2); margin: 4px 0 28px; cursor: pointer; }
.terms input { margin-top: 5px; width: 16px; height: 16px; accent-color: var(--ink); flex: none; }
.terms a { text-decoration: underline; text-underline-offset: 3px; }
#submit-msg { font-size: 0.88rem; margin: 12px 0 0; min-height: 1.2em; text-align: center; }
.missing-list { list-style: none; padding: 0; margin: 8px 0 0; text-align: center; }
.missing-list li { padding: 3px 0; }
.success { padding: 40px 0; text-align: center; }
.success img { width: 140px; margin: 0 auto 24px; }
.success p { color: var(--ink-2); max-width: 40em; margin-inline: auto; }
/* The payment deadline set apart from the thank-you, so it is not skimmed
   past as boilerplate. A hairline rather than a coloured block: the page is
   already carrying a fox and a wine button. */
.success-note { border-top: 1px solid var(--line); padding-top: 20px; margin-top: 24px; color: var(--ink); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .grid3, .cols3, .two-col, .menu-grid, .cal-wrap { grid-template-columns: 1fr; }
  .facts-grid, .gmenus { grid-template-columns: 1fr 1fr; }
  .site-footer .cols { grid-template-columns: 1fr; }
  .pol-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .btn .ring { animation: none; border-top-color: rgba(255, 255, 255, 0.75); }
}

@media (max-width: 720px) {
  /* Half the desktop size on phones: the fox was dominating the first screen */
  .intro .fox { width: min(30vw, 125px); margin-bottom: 22px; }
  /* One fixed link rather than a hamburger. The panel used to drop down over
     the top of the page, which read as something covering the content rather
     than as navigation. */
  .nav a:not([data-keep]) { display: none; }
  .row2 { grid-template-columns: 1fr; }
  .facts-grid, .gmenus, .grid2 { grid-template-columns: 1fr; }
  .banner { min-height: 52vh; }
  .cal-grid { gap: 1px; }
  .cal-cell { font-size: 0.85rem; }
  .btn-row .btn { width: 100%; }
  .item.wine { grid-template-columns: minmax(0, 1fr) 2.4em 2.6em; column-gap: 8px; }
}

/* ---------- Print: paginated menu (see printMenu / paginateMenu in site.js) ----------
   Chrome cannot repeat a header on every printed page with CSS alone, so the
   script cuts the menu into explicit .ppage containers, each with its own
   header and footer. The .ppage rules apply on screen too, because the
   script measures the chunks on screen (off-screen container) in the same
   mm units the printer uses; print at 100 % scale, headers/footers off. */
@page { size: letter; margin: 11.25mm 14mm 15mm; }
#print-paged { position: absolute; left: -10000px; top: 0; width: 187.9mm; }
.ppage { width: 187.9mm; height: 253.15mm; overflow: hidden; display: flex; flex-direction: column; background: #fff; color: #000; font-family: var(--font); letter-spacing: 0.02em; }
/* The buvette's printer is colour: keep the fox and wordmark in their own
   colours (print-color-adjust stops the browser "optimising" them away) and
   set every piece of menu text to solid black for maximum legibility. */
.pheader img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.pheader { text-align: center; padding-bottom: 2mm; margin-bottom: 3mm; }
/* 16mm, down from 22: the allergy line at the foot of the sheet needs the
   space, and at 18mm the day menu already spills onto a second page. */
.pheader .pfox { width: 16mm; height: auto; margin: 0 auto 1.5mm; }
/* The wordmark and the address line are gone from the printout: at the
   larger type below, the day menu needs every millimetre to stay on one
   sheet. The fox still identifies it. */
.pheader .pwm { display: none; }
/* The allergy notice, at the foot of every printed sheet. A little larger and
   heavier than the address it replaced: it is a safety line, and the
   buvette's printer is not kind to small type. */
.pfooter { margin-top: auto; padding-top: 3mm; text-align: center; font-size: 8pt; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #000; }
.pcols { display: flex; gap: 10mm; align-items: flex-start; flex: 1; }
.pcol { width: 88.95mm; flex: none; }
.pchunk h3 { font-size: 8.63pt; letter-spacing: 0.25em; text-transform: uppercase; font-weight: 500; margin: 0 0 1.5mm; padding-bottom: 1.5mm; border-bottom: 0.5pt solid #000; }
.pchunk.cat-gap { margin-top: 5mm; }
.ppage .item { padding: 1.4mm 0; border-bottom: 0; column-gap: 4mm; }
.ppage .item .n { font-size: 11.04pt; font-weight: 500; letter-spacing: 0.01em; text-transform: none; }
.ppage .item .p { font-size: 10.12pt; }
.ppage .item .d { font-size: 8.97pt; color: #000; line-height: 1.35; margin-top: 0.5mm; }
.ppage .note { font-size: 8.05pt; color: #000; margin: 1.5mm 0 0; }
.ppage .item .gf { font-size: 7.5pt; color: #000; margin-top: 0.5mm; }
/* Printed wine list (paginateWines in site.js): one full-width column, one
   line per wine. Same type as the food menu - Jost, the wine in 500, the
   rest in 400, headings in tracked capitals over a rule - at 9 pt (Philip's
   choice; the dishes are 11 pt), scaled by --ws,
   which the script lowers until the list fits on two sheets. A hairline
   between wines guides the eye across the width to the prices. */
.ppage.wines .pcol { width: 187.9mm; }
.pheader .pnote { margin: 0; font-size: 8.05pt; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: #000; }
.pheader .wine-legend { margin: 2pt 0 0; font-size: 7.5pt; letter-spacing: 0.05em; color: #000; }
.ppage.wines .pchunk h3 { display: grid; grid-template-columns: minmax(0, 1fr) 13mm 13mm; column-gap: 3mm; align-items: baseline; font-size: calc(8.63pt * var(--ws, 1)); margin-bottom: 0; padding-bottom: calc(1.2mm * var(--ws, 1)); }
.ppage.wines .pchunk h3 .wh { text-align: right; letter-spacing: 0.12em; font-size: 0.9em; }
.ppage.wines .pchunk.cat-gap { margin-top: calc(3.5mm * var(--ws, 1)); }
.ppage .item.bar { padding: 0.9mm 0; }
.ppage .item.bar .n { font-size: 10pt; }
.ppage .item.bar .p { font-size: 9.5pt; }
.ppage .item.bar .d { font-size: 8.4pt; margin-top: 0.2mm; }
.ppage .item.bar .bs, .ppage .item.bar .hp { font-size: 8.4pt; color: #A63B2E; }
/* Printed, a section is cut into chunks without its .bcat wrapper. */
.ppage .bsub { font-size: 8.4pt; color: #000; text-align: center; margin: -1mm 0 1.2mm; }
.ppage .item.wine { grid-template-columns: minmax(0, 1fr) 13mm 13mm; column-gap: 3mm; padding: calc(0.4mm * var(--ws, 1)) 0; border-bottom: 0.15pt solid #c8c8c8; }
.ppage .item.wine .wl { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(9pt * var(--ws, 1)); line-height: 1.22; }
.ppage .item.wine .n, .ppage .item.wine .d { display: inline; font-size: inherit; margin: 0; line-height: inherit; }
.ppage .item.wine .prov::before { content: " · "; }
.ppage .item.wine .wnote { display: none; }
.ppage .item.wine .p { font-size: calc(9pt * var(--ws, 1)); line-height: 1.22; }
@media print {
  html, body { background: #fff; }
  body[data-print-paged] > *:not(#print-paged) { display: none !important; }
  body[data-print-paged] #print-paged { position: static; left: auto; width: auto; }
  body:not([data-print-paged]) #print-paged { display: none; }
  .ppage { break-after: page; page-break-after: always; }
  .ppage:last-child { break-after: auto; page-break-after: auto; }
  /* Un-paginated fallback (pagination failed): print the menu section only, header on page 1 */
  body:not([data-print-paged]) .site-header, body:not([data-print-paged]) .site-footer, body:not([data-print-paged]) .banner,
  body:not([data-print-paged]) .intro, body:not([data-print-paged]) .grid3, body:not([data-print-paged]) #buvette,
  body:not([data-print-paged]) #salon, body:not([data-print-paged]) #cadeaux, body:not([data-print-paged]) .menu-actions { display: none !important; }
}