/* 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%; }
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; 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; }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: center; }

/* ---------- 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); }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; color: var(--ink); }
.nav-toggle svg { display: block; }

/* ---------- 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; }

.cal-wrap .lead-note { margin: 2px 0 0; text-align: center; }

/* ---------- 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); }
.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; }
.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 .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; }

/* ---------- 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); }
.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); }

/* ---------- 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); }
.day-panel .status.free { color: var(--ok); border-color: var(--ok); }
.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; }
.resa .cal-wrap { grid-template-columns: 1fr; background: transparent; padding: 0; row-gap: 28px; }
.resa .cal-cell:hover:not(:disabled) { background: var(--bg-2); }
.resa .cal-cell.selected { background: var(--bg-2); }
#timeline { position: relative; height: 40px; border: 1px solid 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); }
.status-msg.ok { border-color: var(--ok); color: var(--ok); background: var(--ok-bg); }
.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 1fr; gap: 9px 20px; font-size: 0.92rem; max-width: 30em; margin: 0 auto; }
.recap-rows span { color: rgba(255,255,255,0.6); }
.recap-rows strong { font-weight: 500; text-align: right; color: #fff; }
@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; }

/* ---------- 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 (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; }
  .nav { display: none; position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: center; gap: 0; background: #fff; border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 20px; }
  .nav.open { display: flex; }
  .nav a { padding: 12px 0; }
  .nav-toggle { display: block; }
  .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%; }
}

/* ---------- 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: 5mm; }
.pheader .pfox { width: 22mm; height: auto; margin: 0 auto 1.5mm; }
.pheader .pwm { width: 30mm; height: auto; margin: 0 auto; }
.pfooter { margin-top: auto; padding-top: 3mm; text-align: center; font-size: 6.5pt; letter-spacing: 0.25em; 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: 7.5pt; 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: 9.6pt; font-weight: 500; letter-spacing: 0.01em; text-transform: none; }
.ppage .item .p { font-size: 8.8pt; }
.ppage .item .d { font-size: 7.8pt; color: #000; line-height: 1.35; margin-top: 0.5mm; }
.ppage .note { font-size: 7pt; color: #000; margin: 1.5mm 0 0; }
@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; }
}