/* Bazar Bar Berat · concept by KERA Tech Solutions
   Rebuilt section by section on the Muchacha (muchachamontpellier.fr) system:
   same surfaces, grid, type scale, paper "gazette" stacks, record sleeve and motion tokens.
   Palette shifted to Bazar: deep teal (velvet chairs), honey (glowing onyx bar), amber neon, ember red. */

:root {
  --teal: #062B30;
  --honey: #E9C59D;
  --honey-2: #F3D7B8;
  --amber: #E5913F;
  --olive: #38453A;
  --forest: #1F2A22;
  --ember: #7A2414;
  --cream: #FBF1E4;
  --paper: #FBF1E4;
  --paper-ink: #241C16;
  --paper-line: rgba(36, 28, 22, .2);
  --stack-1: #F6E6D3;
  --stack-2: #EFD8BF;

  --font-display: "Playfair Display", "Playfair Display Fallback", Georgia, serif;
  --font-mark: "Gloock", "Playfair Display", Georgia, serif;
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-script: "Nothing You Could Do", "Segoe Script", cursive;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --display-tracking: .03em;
  --display-leading: .86;
  --title-size: clamp(3rem, 8.7vw, 125px);
  --quote-size: clamp(1.5rem, 2.4vw, 34px);
  --quote-leading: 1.3;
  --body-size: 14.5px;
  --body-leading: 1.62;
  --nav-size: 14px;
  --nav-tracking: .14em;
  --header-height: 68px;
  --frame-width: 1440px;
  --chapter-gap: clamp(96px, 16vw, 240px);
  --media-width: 270px;
  --media-aspect: 270 / 480;
  --media-overlap: -3.5%;
  --media-gap-below: calc(var(--chapter-gap) * .3);
  --card-radius: 14px;
  --box-radius: 6px;
  --card-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6);
  --image-shadow: 0 30px 70px -30px rgba(0, 0, 0, .5);
  --stack-shadow: 0 18px 50px -20px rgba(0, 0, 0, .7);
  --frame-line: rgba(233, 197, 157, .25);
  --hero-inset: 4px;
  --hero-radius: 16px;
  --reel-w: 100px;
  --reel-w-active: 120px;

  --gazette-width: 980px;
  --gazette-pad: clamp(28px, 5vw, 72px);
  --gazette-tilt: -1.1deg;
  --rule-gap: clamp(26px, 3.4vw, 48px);
  --sheet-pad: clamp(18px, 2.2vw, 36px);
  --sheet-title: clamp(26px, 3.2vw, 52px);
  --far-inset: 48px -17vw 58px -13vw;
  --near-inset: 22px -9vw 30px -6vw;
  --far-mix: 57%;
  --near-mix: 70%;
  --clip-width: 78px;
  --clip-top: -26px;
}

/* surfaces (same tonal map as the reference) */
[data-surface] { background: var(--s-bg); color: var(--s-ink); }
[data-surface="hero"]      { --s-bg: var(--teal);   --s-ink: #fff;           --s-display: #fff;        --s-muted: rgba(243, 215, 184, .82); --is-light: 0; }
[data-surface="primary"]   { --s-bg: var(--honey);  --s-ink: var(--teal);    --s-display: var(--teal); --s-muted: rgba(6, 43, 48, .72); --is-light: 1; }
[data-surface="card"]      { --s-bg: var(--olive);  --s-ink: var(--honey-2); --s-display: #fff;        --s-muted: rgba(243, 215, 184, .92); --is-light: 0;
  --gazette-tilt: -1.1deg; --near-tilt: 1.6deg; --near-shift: 12px 10px; --far-tilt: -3deg; --far-shift: -16px 20px; --clip-left: 13%; --clip-tilt: -7deg; --clip-top: -28px; }
[data-surface="carte"]     { --s-bg: var(--forest); --s-ink: var(--honey-2); --s-display: #fff;        --s-muted: rgba(243, 215, 184, .85); --is-light: 0; }
[data-surface="secondary"] { --s-bg: var(--teal);   --s-ink: var(--honey);   --s-display: #fff;        --s-muted: rgba(233, 197, 157, .85); --is-light: 0;
  --gazette-tilt: 1.5deg; --near-tilt: -2.4deg; --near-shift: -15px 13px; --far-tilt: 3.4deg; --far-shift: 19px 24px; --clip-left: 74%; --clip-tilt: 11deg; --clip-top: -24px; }
[data-surface="accent"]    { --s-bg: var(--ember);  --s-ink: #F6DCC4;        --s-display: #fff;        --s-muted: rgba(246, 220, 196, .88); --is-light: 0;
  --gazette-tilt: -1.6deg; --near-tilt: 2deg; --far-tilt: -3.2deg; }
[data-surface="light"]     { --s-bg: var(--cream);  --s-ink: var(--teal);    --s-display: var(--teal); --s-muted: rgba(6, 43, 48, .68); --is-light: 1; }
[data-surface="footer"]    { --s-bg: var(--teal);   --s-ink: var(--honey);   --s-display: #fff;        --s-muted: rgba(233, 197, 157, .58); --is-light: 0; }
.gazette[data-surface="primary"] { --s-ink: var(--teal); --s-muted: rgba(6, 43, 48, .74); }

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; scrollbar-color: var(--amber) var(--teal); }
body { margin: 0; background: var(--teal); color: #fff; font-family: var(--font-sans); font-size: 16px; line-height: 1.5; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, ul, figure, blockquote { margin: 0; padding: 0; }
ul { list-style: none; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 600; background: var(--cream); color: var(--teal); padding: 10px 16px; border-radius: 999px; font-weight: 600; transition: top .25s var(--ease); }
.skip:focus { top: 12px; }

.grain { position: absolute; inset: 0; pointer-events: none; background-image: url("../img/grain.webp"); background-size: 120px 120px; opacity: .07; mix-blend-mode: overlay; }
.media__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.44) 0%, rgba(0,0,0,.2) 26%, rgba(0,0,0,.26) 52%, rgba(0,0,0,.54) 80%, rgba(0,0,0,.76) 100%); }

/* buttons + links */
.btn { display: inline-block; border-radius: 999px; background: var(--teal); color: var(--cream); font-family: var(--font-display); font-weight: 400; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; padding: 16px 36px; line-height: 1.2; transition: opacity .25s var(--ease), transform .25s var(--ease), background-color .3s var(--ease), color .3s var(--ease); }
.btn:hover { opacity: .85; transform: translateY(-1px); }
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn--outline { background: transparent; color: var(--s-display); border: 1px solid currentColor; padding: 14px 28px; }
.btn--square { border-radius: 0; font-family: var(--font-sans); font-weight: 600; letter-spacing: 0; padding: 16px 24px; }
.btn--square:hover { background: var(--s-display); color: var(--s-bg); border-color: var(--s-display); opacity: 1; transform: none; }
.u { position: relative; }
.u::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); }
.u:hover::after, .u-host:hover .u::after, .u-host:focus-visible .u::after, .u[aria-current]::after { transform: scaleX(1); }
.nav-link { font-family: var(--font-sans); font-size: var(--nav-size); letter-spacing: var(--nav-tracking); font-weight: 500; text-transform: uppercase; }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 500; background: var(--honey); display: grid; place-items: center; pointer-events: none; }
.loader__mark { font-family: var(--font-mark); font-size: 104px; line-height: .8; color: var(--teal); }
.no-js .loader, .seen .loader, .rm .loader, .fallback .loader { display: none; }

/* ---------- header ---------- */
.hdr { position: fixed; inset: 0 0 auto; height: var(--header-height); z-index: 110; color: var(--hdr-ink, #fff); pointer-events: none; transition: color .35s var(--ease), filter .35s var(--ease); }
.hdr.is-media { filter: drop-shadow(0 1px 1px rgba(0,0,0,.6)) drop-shadow(0 0 9px rgba(0,0,0,.45)); }
.hdr__in { position: relative; margin-inline: auto; max-width: 98%; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-inline: 20px; }
.hdr__burger, .hdr__nav, .hdr__right, .hdr__right * { pointer-events: auto; }
.hdr__burger { display: flex; align-items: center; gap: 10px; }
.burger { display: flex; flex-direction: column; justify-content: space-between; width: 16px; height: 12px; }
.burger i { display: block; height: 1px; width: 100%; background: currentColor; transition: transform .5s var(--ease), opacity .3s; }
.panel-open .burger i:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.panel-open .burger i:nth-child(2) { opacity: 0; }
.panel-open .burger i:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
.hdr__burger-label { font-family: var(--font-sans); font-size: var(--nav-size); letter-spacing: var(--nav-tracking); font-weight: 500; text-transform: uppercase; }
.hdr__nav { display: none; gap: 32px; }
.hdr__slot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 118px; aspect-ratio: var(--wm-ratio, 3.6); pointer-events: none; }
.hdr__right { display: flex; align-items: center; gap: 22px; }
.lang { display: flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 12px; letter-spacing: .12em; font-weight: 500; }
.lang span { opacity: .5; }
.lang__b { opacity: .55; padding: 6px 2px; transition: opacity .3s var(--ease); }
.lang__b[aria-pressed="true"], .lang__b:hover { opacity: 1; }
@media (min-width: 640px) { .hdr__in { padding-inline: 32px; } }
@media (min-width: 1600px) { .hdr__burger { display: none; } .hdr__nav { display: flex; } }
@media (max-width: 639.98px) { .hdr__burger-label { display: none; } .hdr__slot { display: none; } .hdr__right { gap: 16px; } }

/* slide-in panel (reference: 700px navy panel, items stagger in from -18px) */
.panel { position: fixed; inset: 0; z-index: 95; visibility: hidden; transition: visibility 0s .62s; }
.panel-open .panel { visibility: visible; transition: visibility 0s 0s; }
.panel__veil { position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(233, 197, 157, .15); opacity: 0; transition: opacity .62s var(--ease); cursor: pointer; }
.panel-open .panel__veil { opacity: 1; }
.panel__box { position: absolute; inset: 0 auto 0 0; width: 100%; max-width: 700px; display: flex; flex-direction: column; justify-content: space-between; gap: 48px; overflow-y: auto; padding: calc(var(--header-height) + 32px) 32px 48px; transform: translate3d(-100%, 0, 0); transition: transform .62s var(--ease); --s-bg: var(--teal); }
.panel-open .panel__box { transform: none; }
.panel__mark { width: 64px; height: 64px; color: var(--honey-2); margin-bottom: 26px; }
.panel__label { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; opacity: .62; margin-bottom: 14px; }
.panel__list li, .panel__top > *, .panel__foot > * { opacity: 0; transform: translate3d(-18px, 0, 0); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.panel-open .panel__list li, .panel-open .panel__top > *, .panel-open .panel__foot > * { opacity: 1; transform: none; }
.panel__list li:nth-child(1) { transition-delay: .31s; } .panel__list li:nth-child(2) { transition-delay: .37s; } .panel__list li:nth-child(3) { transition-delay: .42s; } .panel__list li:nth-child(4) { transition-delay: .48s; }
.panel-open .panel__top > * { transition-delay: .26s; } .panel-open .panel__foot > * { transition-delay: .55s; }
.panel__link { display: inline-block; font-size: 40px; line-height: 1.2em; letter-spacing: -.03em; font-weight: 500; text-transform: uppercase; color: var(--honey-2); transition: color .3s var(--ease); }
.panel__link:hover { color: var(--amber); }
.panel__meta { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; opacity: .65; line-height: 1.7; margin-bottom: 24px; }
.panel__row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.panel .btn--outline { color: var(--honey-2); }
.panel .btn--square:hover { background: var(--honey-2); color: var(--teal); }
.lang--panel { font-size: 14px; }
@media (min-width: 640px) { .panel__box { padding-inline: 64px; padding-bottom: 64px; } }

/* the docked wordmark */
.wm { position: fixed; z-index: 105; top: 0; left: 0; display: block; overflow: hidden; color: var(--wm-ink, var(--honey-2)); transition: color .35s var(--ease), opacity .25s var(--ease); line-height: 0; }
.wm__in { display: block; font-family: var(--font-mark); font-weight: 400; line-height: .8; padding-top: .07em; white-space: nowrap; letter-spacing: -.01em; transform: translateY(115%); }
.wm.is-up .wm__in { transform: none; transition: transform 1.2s var(--ease) .1s; }
.no-js .wm, .fallback .wm { display: none; }
.wm-static { display: none; font-family: var(--font-mark); font-size: 24vw; line-height: .8; color: var(--honey-2); text-align: center; }
.no-js .wm-static, .fallback .wm-static { display: block; }

/* ---------- hero ---------- */
.hero-wrap { padding: var(--hero-inset); }
.hero { position: relative; overflow: hidden; min-height: calc(100svh - var(--hero-inset) * 2); border-radius: var(--hero-radius); isolation: isolate; }
.hero__media { position: absolute; inset: 0; }
.hero__slide { position: absolute; inset: 0; opacity: 0; overflow: hidden; transition: opacity .7s var(--ease); }
.hero__slide.is-active { opacity: 1; }
.hero__kb { position: absolute; inset: 0; transform: scale(1.03); }
.hero__kb img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.62); }
.frame-lines { position: absolute; inset: 0; pointer-events: none; display: grid; grid-template-columns: repeat(3, 1fr); }
.frame-lines i { border-left: .5px solid var(--frame-line); }
.frame-lines i:first-child { border-left: 0; }
.frame-lines i:nth-child(n+4) { display: none; }
@media (min-width: 1024px) { .frame-lines { grid-template-columns: repeat(5, 1fr); } .frame-lines i:nth-child(n+4) { display: block; } }
.hero__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 18%, rgba(0,0,0,.45) 45%, rgba(0,0,0,.72) 76%, rgba(0,0,0,.86) 100%); }
.hero__stack { position: absolute; inset: 0 56px; margin-inline: auto; max-width: 1600px; display: flex; flex-direction: column; justify-content: center; gap: clamp(24px, 3.4vh, 48px); pointer-events: none; z-index: 2; }
.hero__slot { width: 68%; max-width: 980px; margin-inline: auto; aspect-ratio: var(--wm-ratio, 3.6); }
.hero__eyebrow { text-align: center; font-family: var(--font-sans); font-weight: 500; text-transform: uppercase; letter-spacing: .14em; font-size: clamp(.85rem, .65rem + .75vw, 24px); color: var(--s-muted); }
.hero__reel { position: absolute; left: 0; right: 0; bottom: clamp(28px, 4vh, 56px); z-index: 3; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 110px, #000 calc(100% - 110px), transparent 100%); }
.hero__reel::-webkit-scrollbar { display: none; }
.reel { display: flex; justify-content: center; align-items: flex-end; gap: 10px; min-width: max-content; padding: 11px 110px; }
.reel__item { position: relative; display: block; width: var(--reel-w); height: var(--reel-w); border-radius: 8px; overflow: hidden; outline: 2px solid transparent; outline-offset: 3px; opacity: .72; filter: grayscale(.3) brightness(.9); transition: width .45s var(--ease), height .45s var(--ease), opacity .45s var(--ease), filter .45s var(--ease), outline-color .45s var(--ease), transform .45s var(--ease); }
.reel__item img { width: 100%; height: 100%; object-fit: cover; }
.reel__item[data-active="true"] { width: var(--reel-w-active); height: var(--reel-w-active); outline-color: var(--honey-2); opacity: 1; filter: none; }
.reel__item:hover, .reel__item:focus-visible { opacity: 1; filter: none; transform: translateY(-3px); }
.reel__item[data-active="true"]:hover { transform: none; }
.reel__item[data-active="true"]::after { content: ""; position: absolute; inset: 80% 0 0; background: linear-gradient(transparent, rgba(0,0,0,.6)); pointer-events: none; }
.reel__track { display: none; position: absolute; z-index: 1; left: 10px; right: 10px; bottom: 10px; height: 3px; border-radius: 999px; background: rgba(243, 215, 184, .3); overflow: hidden; }
.reel__item[data-active="true"] .reel__track { display: block; }
.reel__fill { display: block; width: 100%; height: 100%; background: var(--honey-2); transform: scaleX(0); transform-origin: 0 50%; }
@media (max-width: 767px) {
  :root { --reel-w: 60px; --reel-w-active: 60px; }
  .hero__stack { inset: 0 20px; }
  .hero__slot { width: 92%; }
  .hero__reel { -webkit-mask-image: none; mask-image: none; }
  .reel { padding-inline: 16px; }
  .reel li:nth-child(n+4) { display: none; }
  .reel__item[data-active="true"] .reel__track, .reel__item[data-active="true"]::after { display: none; }
}

/* ---------- intro / story band ---------- */
.intro { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(620px, 86vh, 960px); display: flex; flex-direction: column; justify-content: center; padding: 96px 24px; }
.ruler-line { position: absolute; top: 0; bottom: 0; width: .5px; background: var(--s-ink); opacity: .14; pointer-events: none; display: none; }
.ruler-line--start { left: calc(4px + (100% - 8px) * .2); }
.ruler-line--end { right: calc(4px + (100% - 8px) * .2); }
.ruler { position: absolute; top: 50%; translate: 0 -50%; display: none; flex-direction: column; gap: 40px; font-size: 11px; letter-spacing: .02em; color: var(--s-muted); font-weight: 500; line-height: 1; user-select: none; pointer-events: none; }
.ruler--start { left: calc(4px + (100% - 8px) * .2 - 34px); }
.ruler--end { right: calc(4px + (100% - 8px) * .2 - 34px); }
.ruler span { position: relative; min-width: 3rem; min-height: 1rem; text-align: center; opacity: .55; rotate: -90deg; }
.ruler--end span { rotate: 90deg; }
.ruler span:nth-child(odd) { font-family: var(--font-display); }
.ruler span:first-child, .ruler span:last-child { font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .08em; opacity: 1; }
.ruler span::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 4px; background: currentColor; opacity: .6; translate: -50% 50%; }
.ruler span:first-child::before, .ruler span:last-child::before { height: 9px; opacity: 1; }
@media (min-width: 1024px) { .ruler, .ruler-line { display: flex; } .ruler-line { display: block; } }
@media (min-width: 640px) { .intro { padding-block: 128px; } }
.intro__mark { display: flex; justify-content: center; margin-bottom: 24px; }
.intro__mark svg { height: clamp(72px, 12vh, 250px); width: auto; }
.quote { max-width: 800px; margin-inline: auto; text-align: center; font-family: var(--font-display); font-size: var(--quote-size); line-height: var(--quote-leading); letter-spacing: .01em; color: var(--s-ink); }
.intro__text { font-size: clamp(1.65rem, 2.7vw, 38px); color: #12100D; }
.mark-link { color: var(--teal); font-weight: 500; position: relative; }
.mark { position: relative; display: inline-block; }
.mark--underline { padding-inline: 3px; margin-inline: -3px; }
.mark--highlight { padding-inline: 3px; margin-inline: -3px; }
.mark__svg { position: absolute; left: 0; width: 100%; pointer-events: none; overflow: visible; transform-origin: 0 50%; }
.mark--underline .mark__svg { bottom: -.2em; height: .35em; }
.mark--highlight .mark__svg { top: .22em; height: .92em; z-index: -1; }
.intro__cta { margin-top: 40px; text-align: center; }
.intro__second { display: block; width: fit-content; margin: 26px auto 0; padding-bottom: 7px; border-bottom: 2px solid currentColor; font-family: var(--font-display); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--s-display); transition: opacity .25s var(--ease); }
.intro__second:hover { opacity: .78; }

/* hover preview card (reference: 240px paper card above the underlined words) */
.preview { position: fixed; z-index: 120; left: 0; top: 0; width: 240px; padding: 3px; border-radius: var(--card-radius); background: var(--paper); box-shadow: var(--card-shadow); pointer-events: none; opacity: 0; transform-origin: 50% 100%; display: none; }
.preview img { width: 100%; height: 300px; object-fit: cover; border-radius: 11px; }
@media (hover: hover) and (pointer: fine) { .preview { display: block; } }

/* ---------- hours ---------- */
.hours, .galerie { display: flex; flex-direction: column; align-items: center; gap: 88px; padding: 25px 0 100px; overflow-x: clip; }
@media (min-width: 640px) { .hours, .galerie { padding-top: 40px; } }
.band { width: 100%; height: 50px; display: flex; align-items: center; overflow: hidden; }
.marquee { display: flex; width: max-content; animation: marquee 39s linear infinite; }
.marquee__item { flex: none; display: flex; align-items: center; white-space: nowrap; padding-right: 1.6em; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.5rem, 2.6vw, 34px); line-height: 1; color: var(--s-display); letter-spacing: 0; }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
.hours__table { position: relative; width: min(1076px, 100% - 48px); display: flex; flex-direction: column; gap: 24px; }
.hours__row { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.hours__day, .hours__val { font-size: 16px; line-height: 18px; text-transform: uppercase; color: var(--s-ink); }
.hours__day { font-weight: 700; }
.doodle { position: absolute; z-index: 1; color: var(--amber); pointer-events: none; display: none; }
.doodle__txt { display: block; font-family: var(--font-script); font-size: 34px; line-height: 1.1; white-space: nowrap; }
.doodle--left { left: 150px; bottom: -42px; rotate: -5deg; }
.doodle--left .doodle__swash { width: 130px; margin: -2px 0 0 26px; }
.doodle--right { left: calc(50% + 230px); top: -46px; rotate: -6deg; display: none; }
.doodle--right .doodle__txt { margin-top: 18px; }
.doodle__flame { position: absolute; right: -50px; top: -18px; width: 44px; }
@media (min-width: 1024px) { .doodle { display: block; } .doodle--right { display: block; } }
.hours__cta { color: var(--teal); }

/* ---------- chapters (title + portrait) ---------- */
.chapter { overflow: hidden; padding-top: var(--chapter-gap); padding-bottom: var(--media-gap-below); }
.chapter__in, .privappel__cadre { position: relative; max-width: var(--frame-width); margin-inline: auto; padding-inline: 24px; }
.title { position: relative; z-index: 0; pointer-events: none; text-align: center; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; line-height: var(--display-leading); color: var(--s-display); }
.title__line { display: block; font-size: min(var(--title-size), 8.6vw); letter-spacing: var(--display-tracking); margin-right: calc(-1 * var(--display-tracking)); }
@media (max-width: 767px) { .title__line { font-size: min(var(--title-size), 13vw); } }
.media { position: relative; z-index: 10; width: var(--media-width); max-width: 62%; margin: var(--media-overlap) auto 0; overflow: hidden; box-shadow: var(--image-shadow); }
.media img { width: 100%; height: auto; aspect-ratio: var(--media-aspect); object-fit: cover; }

/* ---------- gazette paper stacks ---------- */
.story { position: relative; padding: 0 24px var(--chapter-gap); overflow-x: clip; }
.veins { position: absolute; left: 50%; width: 0; top: calc(-1 * (var(--media-gap-below) + 135px * 1.7778)); height: calc(var(--media-gap-below) + 135px * 1.7778 + 100% - var(--chapter-gap) + 180px); pointer-events: none; }
.veins::before, .veins::after { content: ""; position: absolute; top: 0; bottom: 0; border-left: .5px solid var(--frame-line); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 300px, #000 calc(100% - 200px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 300px, #000 calc(100% - 200px), transparent 100%); }
.veins::before { left: -285px; } .veins::after { left: 285px; }
.g-stack { position: relative; isolation: isolate; max-width: var(--gazette-width); margin-inline: auto; }
.g-sheet { position: absolute; display: flex; flex-direction: column; padding: var(--sheet-pad); border-radius: var(--box-radius); box-shadow: var(--stack-shadow); color: var(--paper-ink); overflow: hidden; pointer-events: none; }
.g-sheet--far { inset: var(--far-inset); background: color-mix(in oklab, var(--stack-2) var(--far-mix), var(--s-bg)); translate: var(--far-shift, 0 0); rotate: var(--far-tilt, 0deg); --ink: .26; }
.g-sheet--near { inset: var(--near-inset); background: color-mix(in oklab, var(--stack-1) var(--near-mix), var(--s-bg)); translate: var(--near-shift, 0 0); rotate: var(--near-tilt, 0deg); --ink: .4; }
.g-sheet__title { flex: none; font-family: var(--font-display); font-size: var(--sheet-title); line-height: var(--display-leading); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; opacity: var(--ink); }
.g-sheet--near .g-sheet__title { text-align: right; }
.g-sheet__rule { flex: none; height: 4px; margin-block: clamp(16px, 1.8vw, 28px); border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: var(--ink); }
.g-sheet__lines { flex: 1; min-height: 0; background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 13px); opacity: calc(var(--ink) * .55); }
.gazette { position: relative; z-index: 1; isolation: isolate; padding: var(--gazette-pad); border-radius: var(--box-radius); box-shadow: var(--card-shadow); rotate: var(--gazette-tilt); overflow: hidden; background: color-mix(in oklab, var(--honey) 88%, var(--amber)); color: var(--s-ink); }
.gazette .quote { color: var(--teal); }
.cite { margin-top: 18px; text-align: center; font-family: var(--font-sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--s-muted); }
.g-rule { height: 4px; margin-block: var(--rule-gap); border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: .4; }
.gazette__ill { display: flex; justify-content: center; margin-bottom: 48px; }
.ecusson { width: 240px; height: auto; }
.gazette__medal { width: 190px; height: 190px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.25)); }
.gazette__cols { display: grid; grid-template-columns: 1fr; row-gap: 40px; column-gap: 35px; }
.body { font-family: var(--font-sans); font-size: var(--body-size); line-height: var(--body-leading); color: var(--s-muted); }
.gazette__cols .body:nth-child(2) { display: none; }
@media (min-width: 640px) { .gazette__ill { margin-bottom: 64px; } }
@media (min-width: 768px) { .gazette__cols { grid-template-columns: 1fr 1fr; } .gazette__cols .body:nth-child(2) { display: block; } }
.gazette__clip { position: absolute; z-index: 2; left: var(--clip-left, 13%); top: var(--clip-top); width: var(--clip-width); height: var(--clip-width); rotate: var(--clip-tilt, -7deg); pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)) drop-shadow(2px 5px 7px rgba(0,0,0,.24)); }
.med-t { font-family: var(--font-display); letter-spacing: 3px; }
@media (max-width: 767px) {
  :root { --media-overlap: 10%; --media-gap-below: var(--chapter-gap); --clip-width: 62px; --clip-top: -20px; }
  .g-sheet, .veins { display: none; }
}

/* record sleeve (reference "pochette" + vinyl that slides out on scroll) */
.story--sleeve .g-stack { --dos-shift: 18px 13px; }
.gazette--sleeve { border-radius: 0; box-shadow: 24px 30px 50px -24px rgba(0,0,0,.7), var(--card-shadow); background: color-mix(in oklab, var(--honey) 88%, var(--amber)); }
.gazette--sleeve::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(36,28,22,.13); border-right: 0; pointer-events: none; }
.gazette--sleeve::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 30px; pointer-events: none; background: linear-gradient(to left, rgba(255,250,238,.35) 0 1px, rgba(26,26,24,.28) 1px 3px, rgba(26,26,24,.09) 34%, rgba(26,26,24,0) 100%); }
.sleeve__back { position: absolute; inset: 0; background: color-mix(in oklab, var(--stack-2) 64%, var(--s-bg)); translate: var(--dos-shift); rotate: calc(var(--gazette-tilt) + .7deg); box-shadow: inset 0 0 0 1px var(--paper-line), 0 20px 44px -20px rgba(0,0,0,.75); pointer-events: none; }
.sleeve__face { display: flex; align-items: center; gap: 16px; margin-bottom: clamp(22px, 2.6vw, 38px); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--teal); opacity: .6; }
.sleeve__face::after { content: ""; flex: 1; border-top: 1px solid currentColor; }
.sleeve__ref { margin-top: clamp(30px, 3.2vw, 46px); padding-top: 12px; border-top: 1px solid var(--paper-line); font-size: 11px; letter-spacing: .26em; text-align: right; text-transform: uppercase; color: var(--teal); opacity: .6; }
.disc { position: absolute; top: 3%; bottom: 3%; right: 0; aspect-ratio: 1; border-radius: 50%; pointer-events: none; will-change: transform; backface-visibility: hidden;
  --p: var(--disc-p, 1);
  transform: translateX(calc(9% + 13% * var(--p))) rotate(-6deg);
  background:
    radial-gradient(circle at 50% 50%, var(--s-bg) 0 1.8%, transparent calc(1.8% + .3%)),
    radial-gradient(circle at 50% 50%, var(--amber) 0 22%, transparent calc(22% + .3%)),
    conic-gradient(from 198deg, transparent 0, rgba(255,255,255,.13) 7%, transparent 17%, transparent 50%, rgba(255,255,255,.13) 57%, transparent 67%, transparent 100%),
    radial-gradient(circle at 50% 50%, transparent 0 calc(100% - 2.4%), #060C0A calc(100% - 2.4%) 100%),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.075) 0 2px, transparent 2px 46px),
    repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.13) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 50%, #101A16 0 58%, #060C0A 100%);
  box-shadow: 0 2px 6px rgba(0,0,0,.6), 18px 26px 44px -18px rgba(0,0,0,.7); }
@media (max-width: 767px) {
  .story--sleeve { padding-top: 56px; }
  .story--sleeve .g-stack { --dos-shift: 0 0; }
  .disc { width: 62%; top: 0; bottom: auto; left: 50%; right: auto; transform: translate(-50%, calc(-1 * (0% + 24% * var(--p) * 3))) rotate(-6deg); }
  .gazette--sleeve::before { border-top: 0; border-right: 1px solid rgba(36,28,22,.13); }
  .gazette--sleeve::after { width: auto; height: 30px; inset: 0 0 auto; background: linear-gradient(to bottom, rgba(255,250,238,.35) 0 1px, rgba(26,26,24,.28) 1px 3px, rgba(26,26,24,.09) 34%, rgba(26,26,24,0) 100%); }
}

/* ---------- la carte / the menu poster ---------- */
.carte { display: flex; flex-direction: column; align-items: center; padding-block: var(--chapter-gap); overflow-x: clip; --k: 1; }
.carte__title { width: 100%; max-width: var(--frame-width); padding-inline: 24px; }
.carte__row { width: 100%; max-width: 1200px; margin-top: -2.4%; display: flex; flex-direction: column; align-items: center; }
.carte__card { width: 100%; max-width: 528px; display: flex; flex-direction: column; align-items: center; gap: 48px; }
.poster-box { display: block; width: 100%; max-width: calc(341px * var(--k)); transition: rotate .3s var(--ease), scale .3s var(--ease); }
@media (hover: hover) { .carte__card:hover .poster-box { rotate: -3deg; scale: 1.1; } .carte__card:hover .carte__btn { background: var(--s-display); color: var(--s-bg); border-color: var(--s-display); translate: 0 calc(.1 * 460px * var(--k) / 2); } }
.carte__card:focus-visible .poster-box { rotate: -3deg; scale: 1.1; }
.poster-pile { position: relative; display: block; }
.poster-sheet { position: absolute; inset: 0; z-index: 0; background: var(--paper); border: 1px solid var(--paper-line); box-shadow: 0 1px 2px rgba(0,0,0,.16); }
.poster-sheet.-f1 { rotate: .8deg; translate: 2px 3px; } .poster-sheet.-f2 { rotate: -1.3deg; translate: 5px 5px; } .poster-sheet.-f3 { rotate: 1.9deg; translate: 7px 9px; } .poster-sheet.-f4 { rotate: -2.6deg; translate: 10px 12px; }
.poster { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: calc(460px * var(--k)); padding: calc(14px * var(--k)); background: var(--paper); color: var(--paper-ink); box-shadow: var(--card-shadow); }
.poster__head { display: block; width: 100%; height: calc(164px * var(--k)); overflow: hidden; filter: saturate(1.06) contrast(1.02); }
.poster__head img { width: 100%; height: 100%; object-fit: cover; }
.poster__lines { display: flex; flex-direction: column; align-items: center; gap: calc(10px * var(--k)); width: 100%; }
.poster__mark { font-family: var(--font-mark); font-size: calc(30px * var(--k)); line-height: .9; color: var(--teal); }
.poster__filets { display: flex; flex-direction: column; gap: calc(10px * var(--k)); width: 100%; }
.poster__filets i { display: block; height: 1px; background: var(--paper-line); }
.poster__filets i:last-child { align-self: center; width: 62%; margin-top: 6px; }
.poster__foot { display: flex; flex-direction: column; align-items: center; width: 100%; text-align: center; color: var(--paper-ink); }
.poster__word { font-family: var(--font-display); font-size: calc(80px * var(--k)); letter-spacing: -.01em; text-transform: uppercase; font-weight: 400; line-height: .82; }
.poster__addr { margin-top: calc(20px * var(--k)); font-size: calc(10px * var(--k)); letter-spacing: .08em; text-transform: uppercase; opacity: .78; line-height: 1.3; }
.carte__btn { color: var(--s-display); transition: background-color .3s var(--ease), color .3s var(--ease), translate .3s var(--ease); }
@media (max-width: 639.98px) { .carte { --k: .88; } }

/* full cocktail list: a dialog when JS runs (reference "choix" paper card) */
.carte-dialog { position: relative; z-index: 1; background: var(--forest); padding: 0 16px 80px; }
.js .carte-dialog { position: fixed; inset: 0; z-index: 150; padding: 0; background: none; display: grid; place-items: center; visibility: hidden; transition: visibility 0s .42s; }
.js .carte-dialog.is-open { visibility: visible; transition: visibility 0s 0s; }
.carte-dialog__veil { display: none; }
.js .carte-dialog__veil { display: block; position: absolute; inset: 0; width: 100%; height: 100%; background: rgba(6, 43, 48, .62); opacity: 0; transition: opacity .42s var(--ease); cursor: pointer; }
.js .carte-dialog.is-open .carte-dialog__veil { opacity: 1; }
.carte-dialog__card { position: relative; width: min(1180px, 100%); margin-inline: auto; background: var(--paper); color: var(--paper-ink); border-radius: var(--card-radius); padding: clamp(30px, 4.2vw, 60px) clamp(18px, 4vw, 60px); box-shadow: 0 40px 90px -30px rgba(0,0,0,.55); }
.js .carte-dialog__card { width: min(1180px, 100% - 2 * clamp(14px, 3.4vw, 40px)); max-height: calc(100svh - 2 * clamp(14px, 3.4vw, 40px)); overflow-y: auto; overscroll-behavior: contain; opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity .42s var(--ease), transform .42s var(--ease); }
.js .carte-dialog.is-open .carte-dialog__card { opacity: 1; transform: none; }
.carte-dialog__close { display: none; }
.js .carte-dialog__close { display: grid; place-items: center; position: sticky; top: 0; margin: -10px -10px 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--teal); color: var(--cream); z-index: 2; }
.carte-dialog__close span, .carte-dialog__close span::after { display: block; width: 13px; height: 1.5px; background: currentColor; rotate: 45deg; }
.carte-dialog__close span::after { content: ""; rotate: 90deg; }
.carte-dialog__mark { width: 64px; height: 64px; margin: 0 auto 18px; }
.js .carte-dialog__mark { margin-top: -30px; }
.carte-dialog__title { text-align: center; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; font-size: clamp(30px, 4vw, 56px); line-height: .95; color: var(--teal); }
.carte-dialog__note { max-width: 560px; margin: 14px auto 0; text-align: center; font-size: 13px; line-height: 1.55; color: rgba(36,28,22,.7); }
.filet { display: flex; align-items: center; gap: 12px; margin: clamp(24px, 3.4vw, 40px) 0; color: var(--amber); }
.filet i { flex: 1; height: 1px; background: currentColor; opacity: .7; }
.filet b { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.carte-dialog__groups { columns: 1; column-gap: 48px; }
@media (min-width: 720px) { .carte-dialog__groups { columns: 2; } }
@media (min-width: 1080px) { .carte-dialog__groups { columns: 3; } }
.carte-group { break-inside: avoid-column; margin-bottom: 30px; }
.carte-group__label { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ember); padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--paper-line); }
.carte-group__label::before { content: "/ "; }
.carte-item { break-inside: avoid; padding: 6px 0; }
.carte-item__row { display: flex; align-items: baseline; gap: 8px; }
.carte-item__name { font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; letter-spacing: .04em; color: var(--teal); }
.carte-item__dots { flex: 1; min-width: 12px; border-bottom: 1px dotted rgba(36,28,22,.35); translate: 0 -3px; }
.carte-item__price { font-family: var(--font-display); font-size: 16px; color: var(--teal); }
.carte-item__price::after { content: " L"; font-size: 11px; letter-spacing: .06em; opacity: .7; }
.carte-item__price--na::after { content: ""; }
.carte-item__ing { font-family: var(--font-display); font-style: italic; font-size: 13.5px; line-height: 1.35; color: rgba(36,28,22,.66); margin-top: 1px; }
.carte-dialog__foot { margin-top: 26px; text-align: center; }

/* ---------- gallery ---------- */
.galerie { gap: 50px; padding-bottom: 100px; }
.motif { gap: .3em; text-transform: none; line-height: 1.4; }
.motif__mark { font-family: var(--font-mark); font-size: 1.12em; line-height: 1; translate: 0 -.04em; }
.galerie__cadre { width: 120%; margin-inline: -10%; }
@media (min-width: 1920px) { .galerie__cadre { width: 110%; margin-inline: -5%; } }
.carrousel { width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; --vis: 5; --gap: 32px; }
.carrousel::-webkit-scrollbar { display: none; }
.carrousel[data-grab] { cursor: grabbing; user-select: none; }
.piste { display: flex; align-items: flex-start; gap: var(--gap); width: 100%; }
.tirage { --w: calc((100% - (var(--vis) - 1) * var(--gap)) / var(--vis)); flex: none; display: flex; width: var(--w); aspect-ratio: 328 / 400; padding: calc(var(--w) * .0671) calc(var(--w) * .0488) calc(var(--w) * .0976); background: var(--paper); border-radius: var(--box-radius); box-shadow: 0 14px 34px -20px rgba(0,0,0,.4); }
.tirage img { width: 100%; height: 100%; min-height: 0; object-fit: cover; pointer-events: none; user-select: none; -webkit-user-drag: none; }
@media (max-width: 1199.98px) { .carrousel { --vis: 4; } }
@media (max-width: 899.98px) { .carrousel { --vis: 3; } }
@media (max-width: 639.98px) { .carrousel { --vis: 1.5; --gap: 20px; } .galerie { gap: 30px; padding-bottom: 80px; } }

/* ---------- by day (privatisation call) ---------- */
.privappel { display: flex; flex-direction: column; align-items: center; gap: 56px; padding-block: var(--chapter-gap); overflow-x: clip; }
.privappel__cadre { width: 100%; }
.privappel__media { margin-top: var(--media-overlap); }
.privappel__text { width: 100%; max-width: 760px; margin-inline: auto; padding-inline: 24px; text-align: center; font-family: var(--font-display); font-size: clamp(1.35rem, 2.1vw, 29px); line-height: 1.45; color: var(--s-ink); }

/* ---------- footer ---------- */
.sitefoot { position: relative; isolation: isolate; overflow: hidden; padding-top: 200px; }
.sitefoot__veins { position: absolute; z-index: 1; left: 20px; right: 20px; top: 50px; height: calc(300px + clamp(360px, 44vh, 540px)); grid-template-columns: repeat(3, 1fr); -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 104px, #000 calc(100% - 104px), transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 104px, #000 calc(100% - 104px), transparent 100%); }
.sitefoot__inner { position: relative; z-index: 2; max-width: 1600px; margin-inline: auto; padding-inline: 20px; display: flex; flex-direction: column; gap: 200px; }
.call { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(360px, 44vh, 540px); padding: clamp(32px, 5vw, 72px); border-radius: var(--card-radius); display: flex; align-items: center; justify-content: center; }
.call__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.call__scrim { background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.58) 45%, rgba(0,0,0,.62) 70%, rgba(0,0,0,.78) 100%); }
.call__body { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 30px; text-align: center; }
.call__eyebrow { margin-bottom: -25px; font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); }
.call__stars { color: var(--amber); }
.call__title { max-width: 620px; font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 52px); line-height: 1.1; color: #fff; text-wrap: balance; }
.call .btn--outline { color: #fff; }
.call .btn--outline:hover { background: #fff; color: var(--teal); opacity: 1; }
.sf-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .sf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .sf-cell--wide { grid-column: span 2; } }
.sf-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; min-width: 0; padding: 26px; }
.sf-brand { display: flex; align-items: center; gap: 14px; }
.sf-logo { width: 48px; height: 48px; color: var(--amber); flex: none; }
.sf-brand__name { font-size: 20px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2em; text-transform: uppercase; color: var(--s-ink); }
.sf-address { font-family: var(--font-display); font-size: 20px; line-height: 1.3; color: var(--s-ink); }
.sf-list, .sf-hours, .sf-nav { display: flex; flex-direction: column; width: 100%; }
.sf-contact { gap: 6px; font-size: 18px; font-weight: 500; letter-spacing: -.01em; text-transform: uppercase; }
.sf-facts { font-size: 14px; line-height: 1.7; color: var(--s-muted); letter-spacing: .02em; }
.sf-label { font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--s-muted); }
.sf-hours { gap: 6px; font-size: 20px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2em; text-transform: uppercase; }
.sf-hours li { display: flex; align-items: baseline; gap: 12px; }
.sf-day { font-family: var(--font-display); text-transform: none; letter-spacing: 0; font-weight: 400; }
.sf-leader { flex: 1; min-width: 16px; height: 1px; background: rgba(233,197,157,.3); transform: translateY(-.35em); }
.sf-nav { gap: 6px; font-size: 20px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2em; text-transform: uppercase; }
.sf-link { color: inherit; transition: opacity .35s var(--ease); }
.sf-link:hover { opacity: .6; }
.sf-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; margin-top: 56px; padding: 24px 0 0; border-top: 2px solid rgba(233,197,157,.22); font-size: 15px; color: var(--s-muted); }
.sf-socials { display: flex; flex-wrap: wrap; gap: 28px; text-transform: uppercase; letter-spacing: .08em; font-weight: 500; }
.sf-kera { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(233,197,157,.4); }
.sf-word { margin-top: 56px; color: var(--amber); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 25%, rgba(0,0,0,.55) 68%, rgba(0,0,0,.12) 88%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 25%, rgba(0,0,0,.55) 68%, rgba(0,0,0,.12) 88%, transparent 100%); text-align: center; overflow: hidden; height: calc(var(--sfw, 25vw) * .62); }
.sf-word__trace { display: inline-block; font-family: var(--font-mark); font-size: var(--sfw, 25vw); line-height: .8; letter-spacing: -.01em; }
@media (max-width: 767px) { .sitefoot { padding-top: 120px; } .sitefoot__inner { gap: 110px; padding-inline: 8px; } .sf-cell { padding: 18px; } .sitefoot__veins { left: 8px; right: 8px; } }

/* ---------- WhatsApp float + concept toast ---------- */
.wa { position: fixed; right: clamp(18px, 3vw, 34px); bottom: clamp(18px, 3vw, 34px); z-index: 100; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: #25D366; color: #fff; box-shadow: 0 10px 30px -8px rgba(0,0,0,.45); transition: transform .35s var(--ease), opacity .35s var(--ease), visibility .35s; }
.wa svg { width: 58%; }
.wa:hover { transform: translateY(-2px) scale(1.04); }
.wa.is-hidden { opacity: 0; visibility: hidden; transform: scale(.9); }
.toast { position: fixed; left: clamp(12px, 2vw, 24px); bottom: clamp(12px, 2vw, 24px); z-index: 130; max-width: min(380px, calc(100vw - 100px)); display: flex; align-items: flex-start; gap: 12px; padding: 14px 14px 14px 18px; border-radius: 12px; background: var(--cream); color: var(--teal); box-shadow: 0 18px 40px -16px rgba(0,0,0,.5); font-size: 13px; line-height: 1.45; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.toast.is-in { opacity: 1; transform: none; }
.toast__x { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 18px; line-height: 1; background: rgba(6,43,48,.08); }
.toast__x:hover { background: rgba(6,43,48,.16); }

/* ---------- reveal states (only hidden while JS is running) ---------- */
.js:not(.fallback):not(.rm) [data-rise]:not(.is-in), .js:not(.fallback):not(.rm) [data-fade]:not(.is-in) { opacity: 0; }
.js:not(.fallback):not(.rm) [data-rise]:not(.is-in) { transform: translateY(28px); }
.js:not(.fallback):not(.rm) [data-clip]:not(.is-in) { clip-path: inset(100% 0 0 0); }
.js:not(.fallback):not(.rm) [data-split]:not(.is-split) { opacity: 0; }
.js:not(.fallback):not(.rm) [data-hero-reel] { opacity: 0; transform: translateY(28px); }

@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
  .wm__in { transform: none !important; }
  .hero__kb { transform: none !important; }
  * { scroll-behavior: auto !important; }
}
.panel-open .wm { opacity: 0; visibility: hidden; }
/* if scripts fail, the cocktail list falls back to a plain section */
.fallback .carte-dialog { position: relative; inset: auto; visibility: visible; display: block; padding: 0 16px 80px; background: var(--forest); }
.fallback .carte-dialog__card { opacity: 1; transform: none; max-height: none; overflow: visible; }
.fallback .carte-dialog__veil, .fallback .carte-dialog__close { display: none; }