that just says "with". */
.bp-collab__title { display: flex; flex-direction: column; gap: 4px; }
.bp-collab__title .bp-eyebrow { font-weight: 400; line-height: 1.4; }
/* M7 · Pause control on the hero clip / seasonal canvas. */
.bp-hero__media-wrap { position: relative; }
.bp-hero__pause { position: absolute; right: 18px; bottom: 18px; z-index: 4; width: 44px; height: 44px; border-radius: var(--bp-radius-pill); border: 1px solid rgba(250,249,244,.7); background: rgba(37,26,23,.55); color: #FAF9F4; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; backdrop-filter: blur(4px); }
.bp-hero__pause svg { width: 18px; height: 18px; display: block; }
.bp-hero__pause .bp-hero__play-i, .bp-hero__pause[aria-pressed="true"] .bp-hero__pause-i { display: none; }
.bp-hero__pause[aria-pressed="true"] .bp-hero__play-i { display: block; }
/* 1.1.4: the ring was cream = the page background. Two-tone (ink ring, cream halo) so it reads on the clip and on the page. */
.bp-hero__pause:focus-visible { outline: 2px solid #251A17; outline-offset: -7px; }
@media (prefers-reduced-motion: reduce) { .bp-hero__pause { display: none; } }
/* H10 · Team portraits collapsed to 0×0 until the lazy image arrived (CLS 0.75 on mobile). */
.bp-team__media { width: 100%; }
/* M6 · required marker; L4 · 16px inputs so iOS does not zoom the page on focus. */
.bp-req { color: var(--bp-pink-text); text-decoration: none; font-weight: 600; letter-spacing: 0; }
.bp-form input[type="text"], .bp-form input[type="email"], .bp-form input[type="tel"], .bp-form input[type="date"], .bp-form input[type="number"], .bp-form select, .bp-form textarea,
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select { font-size: 16px; }
/* H14 · Print. The allergen table printed 646 of 1,452px with no hint that rows were missing. */
@media print {
.bp-header, .bp-drawer, .bp-footer, .cky-consent-container, .cky-btn-revisit-wrapper, .bp-skip, .bp-chips, .beurre-mobile-atc, .bp-hero__pause, canvas.bp-season { display: none !important; }
body { background: #fff; color: #000; }
.beurre-allergen-matrix-wrap { overflow: visible !important; max-height: none !important; border: 0; }
.beurre-allergen-matrix { width: 100%; font-size: 8.5pt; }
.beurre-allergen-matrix thead th, .beurre-allergen-matrix thead th:first-child, .beurre-allergen-matrix tbody .dish-cell.dish-head, .beurre-allergen-matrix tbody th { position: static; }
.beurre-allergen-matrix thead th { background: #fff !important; color: #000 !important; border-bottom: 1.5pt solid #000; }
tr, .bp-notice, .menu-item { break-inside: avoid; }
details > * { display: block !important; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; }
a[href^="mailto"]::after, a[href*="wa.me"]::after { content: ""; }
}
/* beurre-menu 1.6.1 prints dish names as | : give row headers the cell styling | had. */
.beurre-allergen-matrix tbody th { padding: 12px 8px; border-bottom: 1px solid var(--bp-border); background: var(--bp-bg); font-weight: 500; text-align: left; }
.beurre-allergen-matrix tbody tr:nth-child(even) th { background: var(--bp-bg-alt); }
.beurre-allergen-matrix-wrap:focus-visible { outline: 2px solid var(--bp-ink); outline-offset: 3px; }
/* Form result message: leave room for the sticky header when the redirect lands on #form-id. */
form.bp-form, .bp-form__msg { scroll-margin-top: 120px; }
/* The open drawer is a modal: CookieYes' box (z-index 9999999) sat on top of its lower buttons on a first visit. */
.bp-drawer[aria-hidden="false"] { z-index: 10000000; }
/* Hero: still image underneath (the LCP element), clip fades in over it once it is actually playing. */
.bp-hero__media { position: relative; }
.bp-arch .bp-hero__still { display: block; }
.bp-hero__media > video { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.bp-hero__media > video.is-ready { opacity: 1; }
.bp-allergen-key__icon { flex: none; width: 28px; height: 28px; display: block; }
.bp-allergen-key__icon svg { width: 100%; height: 100%; display: block; }
/* ======================================================================
1.1.0 — own cookie consent, self-hosted fonts, click-to-load map
====================================================================== */
@font-face { font-family: 'Lexend'; font-style: normal; font-weight: 300 600; font-display: swap; src: url(assets/fonts/lexend-latin-var.woff2) format('woff2'); }
@font-face { font-family: 'Work Sans'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(assets/fonts/work-sans-latin-var.woff2) format('woff2'); }
.bp-consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 9000; max-width: 440px; margin: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; background: var(--bp-white); color: var(--bp-body); border: 1px solid var(--bp-border); border-radius: var(--bp-radius-card); box-shadow: 0 12px 40px rgba(37,26,23,.18); font-size: 13px; line-height: 1.55; }
.bp-consent[hidden] { display: none; }
.bp-consent p { margin: 0; }
.bp-consent strong { display: block; font-family: var(--bp-font-head); font-weight: 500; font-size: 14px; color: var(--bp-ink); margin-bottom: 2px; }
.bp-consent a { text-decoration: underline; text-underline-offset: 3px; }
.bp-consent__actions { display: flex; gap: 8px; }
.bp-consent__actions .bp-btn { flex: 1; min-height: 44px; padding: 10px 16px; font-size: 13px; }
@media (min-width: 768px) { .bp-consent { left: 24px; right: auto; bottom: 24px; } }
.bp-footer__cookie { background: none; border: 0; padding: 0; font: inherit; color: #f0aab3; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.bp-footer__cookie:hover { color: var(--bp-gold); }
.bp-contact__map { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: repeating-linear-gradient(135deg, var(--bp-bg-alt) 0 12px, var(--bp-white) 12px 24px); }
.bp-contact__map.is-loaded { display: block; background: var(--bp-bg-alt); }
.bp-contact__map .bp-contact__small { margin: 0; }
@media print { .bp-consent { display: none !important; } }
/* ---------- 1.1.3 · hero pause control made discreet ----------
It has to exist (WCAG 2.2.2: the clip and the seasonal canvas auto-play for more than 5 s), but it read as a
video-player button stuck on the photo. Now: a 28px translucent dot with a 10px glyph, tucked into the corner,
inside the same 44px tap target. Full strength on hover / keyboard focus, and while paused (so "play" is findable). */
.bp-hero__pause { right: 6px; bottom: 6px; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
background: radial-gradient(circle, rgba(37,26,23,.42) 0 14px, transparent 14.5px); opacity: .75; transition: opacity .2s ease; }
.bp-hero__pause svg { width: 10px; height: 10px; }
.bp-hero__pause:hover, .bp-hero__pause:focus-visible, .bp-hero__pause[aria-pressed="true"] { opacity: 1; background: radial-gradient(circle, rgba(37,26,23,.7) 0 14px, transparent 14.5px); }
.bp-hero__pause:focus-visible { background: radial-gradient(circle, rgba(37,26,23,.7) 0 14px, transparent 14.5px 17px, #FAF9F4 17.5px 19.5px, transparent 20px); }
|