/* El Barrio Latino.
   Built from the house's own two things: the badge (a white disc ringed by
   tropical leaves in teal, cobalt and coral, with an Art Deco sunburst) and
   the room at night, dark and green under its neon sign. The grounds change
   the way a night does: jungle green, limewash, marigold for the happy hour,
   coral for the call to the house.

   Shrikhand for the dance-hall poster headlines, Gabarito for labels, the nav
   and prices, Epilogue for everything said plainly. */

:root {
  --selva: #0c3a33;        /* jungle night: the dark ground */
  --selva-2: #0f463d;      /* a step up */
  --selva-3: #145a4c;      /* leaf: cards on the dark */
  --turquesa: #1fb5a8;     /* the badge's teal */
  --turq-text: #6fe0d4;    /* teal that reads on the dark */
  --cobalto: #2456a6;      /* the badge's blue leaf */
  --coral: #f26a4b;        /* the badge's coral leaf */
  --coral-text: #ff9d84;   /* coral that reads on the dark */
  --sol: #f7b538;          /* the sunburst: marigold */
  --cal: #eef5f1;          /* limewash: the light ground */
  --cal-2: #dfece5;
  --ink: #0b2a25;          /* type on the light grounds */
  --ink-para: #33514b;
  --foam: #f3faf6;         /* type on the dark */
  --para: #b9d3cb;
  --line: rgba(31, 181, 168, 0.35);
  --line-soft: rgba(243, 250, 246, 0.14);
  --line-ink: rgba(11, 42, 37, 0.16);
  --sans: 'Epilogue', 'Segoe UI', system-ui, sans-serif;
  --display: 'Shrikhand', Georgia, serif;
  --deco: 'Gabarito', 'Epilogue', system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --leaf: 0 46% 0 46%;     /* the leaf crop: two opposite corners rounded */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--selva); }
body {
  background: var(--selva);
  color: var(--para);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--sol); color: var(--ink); }
:focus-visible { outline: 2px solid var(--sol); outline-offset: 3px; }

/* ---------- Typography ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; color: var(--foam); line-height: 1.08; }
.section-title { font-size: clamp(40px, 5.4vw, 76px); margin: 0 0 6px; text-wrap: balance; }
/* The line under a title: what the section is, in the badge's lettering */
.kicker { display: block; font-family: var(--deco); font-size: clamp(17px, 1.4vw, 20px); letter-spacing: 0.02em; color: var(--turq-text); margin-bottom: 22px; }
.section-head.center .kicker { text-align: center; }
.t-script { font-style: normal; color: inherit; }
.section-sub { color: var(--para); max-width: 560px; }

/* ---------- Layout ---------- */
.container { width: min(1200px, 90vw); margin: 0 auto; }
section { padding: clamp(92px, 10vw, 150px) 0; position: relative; }
.section-head { margin-bottom: clamp(36px, 4.6vw, 64px); }
.section-head.center { text-align: center; }
.section-head.center .section-sub { margin: 0 auto; }

/* The grounds */
.lime { background: var(--cal); color: var(--ink-para); }
.lime h1, .lime h2, .lime h3 { color: var(--ink); }
.lime .kicker { color: #0f7f75; }
.lime .section-sub { color: var(--ink-para); }
.selva { background: var(--selva); }
.sol { background: var(--sol); color: var(--ink); }
.sol h2, .sol h3 { color: var(--ink); }
.sol .kicker { color: #7a4a00; }
.coral { background: var(--coral); color: #2a0d06; }
.coral h2 { color: #fff4ee; }
.coral .kicker { color: #3b1206; }

/* ---------- Buttons: outlined pills ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 30px; min-height: 50px;
  border: 1.5px solid var(--turquesa); border-radius: 999px;
  color: var(--foam); background: transparent;
  font-family: var(--deco); font-size: 17px; letter-spacing: 0.03em;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn:hover { background: var(--turquesa); color: var(--ink); }
.btn.solid { background: var(--coral); border-color: var(--coral); color: #2a0d06; }
.btn.solid:hover { background: #ff8165; border-color: #ff8165; }
.btn.ghost { border-color: rgba(243, 250, 246, 0.55); }
.btn.ghost:hover { background: var(--foam); color: var(--ink); border-color: var(--foam); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.lime .btn, .sol .btn { color: var(--ink); border-color: var(--ink); }
.lime .btn:hover, .sol .btn:hover { background: var(--ink); color: var(--cal); }
.lime .btn.solid { background: var(--coral); border-color: var(--coral); color: #2a0d06; }
.lime .btn.solid:hover { background: #e2593b; border-color: #e2593b; }
.coral .btn { color: #2a0d06; border-color: #2a0d06; }
.coral .btn:hover { background: #2a0d06; color: #fff4ee; }
.coral .btn.solid { background: var(--selva); border-color: var(--selva); color: var(--foam); }
.coral .btn.solid:hover { background: #082a25; }
.inline-link { color: var(--turq-text); border-bottom: 1px solid var(--line); transition: border-color 0.3s; }
.inline-link:hover { border-bottom-color: var(--turq-text); }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 60; padding: 16px 0; transition: background 0.45s, padding 0.45s, box-shadow 0.45s; }
.nav.scrolled {
  background: rgba(12, 58, 51, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 9px 0; box-shadow: 0 1px 0 var(--line-soft);
}
.nav.menu-open, .nav.scrolled.menu-open { backdrop-filter: none; background: transparent; box-shadow: none; }
.nav .container { width: min(1560px, 94vw); }
.nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; }
.nav-logo { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: 12px; }
.nav-logo img { width: 44px; height: 44px; transition: width 0.35s var(--ease), height 0.35s var(--ease); }
.nav.scrolled .nav-logo img { width: 36px; height: 36px; }
.nav-logo span { font-family: var(--deco); font-size: 19px; letter-spacing: 0.06em; color: var(--foam); white-space: nowrap; }
.nav-links { display: flex; gap: 24px; align-items: center; justify-content: center; list-style: none; grid-column: 2; grid-row: 1; }
.nav-right { display: flex; gap: 12px; align-items: center; justify-content: flex-end; grid-column: 3; grid-row: 1; list-style: none; }
.nav-links a, .nav-right a { font-family: var(--deco); font-size: 16px; letter-spacing: 0.03em; color: var(--foam); position: relative; padding: 6px 0; transition: color 0.3s; }
.nav-links > li > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 1.5px; background: var(--sol);
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
.nav-links > li > a:hover::after { transform: scaleX(1); }
.nav-links > li > a, .nav-right > li > a { white-space: nowrap; }
.nav-cta { border: 1.5px solid var(--coral); border-radius: 999px; padding: 8px 20px !important; }
.nav-cta:hover { background: var(--coral); color: #2a0d06 !important; }

.lang-switch { position: relative; display: flex; padding: 3px; border: 1px solid var(--line-soft); border-radius: 999px; }
.lang-switch::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--turquesa); border-radius: 999px; transition: transform 0.35s var(--ease);
}
/* FR is the first button here, so the knob sits left for French */
.lang-switch:not(.on-fr)::before { transform: translateX(100%); }
.lang-switch button {
  position: relative; z-index: 1; background: transparent; border: 0; color: var(--para);
  font-family: var(--deco); font-size: 13px; letter-spacing: 0.08em; padding: 6px 13px; border-radius: 999px; transition: color 0.3s;
}
.lang-switch button.active { color: var(--ink); }

.burger { display: none; background: none; border: 0; width: 30px; height: 22px; position: relative; z-index: 70; justify-self: end; grid-column: 3; grid-row: 1; }
.burger span { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--foam); transition: 0.35s var(--ease); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 10px; width: 64%; background: var(--sol); }
.burger span:nth-child(3) { top: 20px; }
.burger.open span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* The booking pill that follows the reader past the hero */
.book-float {
  position: fixed; right: clamp(16px, 2.4vw, 34px); bottom: clamp(16px, 2.4vw, 30px); z-index: 55;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px 11px 16px; border-radius: 999px;
  background: var(--coral); color: #2a0d06;
  font-family: var(--deco); font-size: 16px; letter-spacing: 0.03em;
  box-shadow: 0 12px 30px rgba(6, 30, 26, 0.35);
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), background 0.3s;
}
.book-float.on { opacity: 1; transform: none; pointer-events: auto; }
.book-float:hover { background: #ff8165; }
.bf-sun { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* ---------- Hero ---------- */
.hero { min-height: 100svh; position: relative; overflow: hidden; padding: 0; display: grid; align-items: center; }
.hero-bg { position: absolute; inset: 0; background: var(--selva); }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg img.kb { animation: kenburns 24s var(--ease) infinite alternate; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
/* The dance floor seen through the jungle: green multiplied over the film,
   the text side kept dark, the bottom sinking into the page */
.hero-bg::before { content: ''; position: absolute; inset: 0; z-index: 1; background: #0c4a40; mix-blend-mode: multiply; opacity: 0.2; }
.hero-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(90deg, rgba(8, 40, 35, 0.86), rgba(8, 40, 35, 0.32) 52%, rgba(8, 40, 35, 0.06)),
    linear-gradient(180deg, rgba(8, 40, 35, 0.6), transparent 24%, transparent 66%, var(--selva));
}
.hero-inner {
  position: relative; z-index: 3; width: min(1280px, 90vw); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(30px, 5vw, 80px); align-items: center;
  padding: 120px 0 140px;
}
.hero-content { display: grid; justify-items: start; }
.hero-mark { width: clamp(150px, 15vw, 210px); height: auto; margin-bottom: 26px; }
.hero-script {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(46px, 6.6vw, 104px); line-height: 0.98; color: var(--foam);
  text-wrap: balance; max-width: 11ch;
}
.hero-tag {
  margin-top: 22px; font-family: var(--deco); font-weight: 400;
  font-size: clamp(19px, 1.7vw, 25px); line-height: 1.3; letter-spacing: 0.03em; color: var(--sol);
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 36px; }

/* The one orchestrated entrance: mark, line, place, buttons; the badge
   turns in from the side as the sunburst opens behind it */
.hero-content > * { opacity: 0; animation: heroIn 1.1s var(--ease) forwards; }
.hero-content > *:nth-child(1) { animation-delay: 0.1s; }
.hero-content > *:nth-child(2) { animation-delay: 0.35s; animation-name: heroWord; animation-duration: 1.3s; }
.hero-content > *:nth-child(3) { animation-delay: 0.75s; }
.hero-content > *:nth-child(4) { animation-delay: 0.95s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes heroWord { from { opacity: 0; transform: translateY(28px) rotate(-2deg); } to { opacity: 1; transform: none; } }

.hero-niche { justify-self: center; width: min(400px, 100%); display: grid; justify-items: center; gap: 20px; }
.niche-badge { position: relative; width: 100%; aspect-ratio: 1; }
.niche-sun {
  position: absolute; inset: -19%; width: 138%; height: 138%; max-width: none; opacity: 0;
  animation: sunOpen 1.8s var(--ease) 0.5s forwards;
}
@keyframes sunOpen { from { opacity: 0; transform: scale(0.72) rotate(-24deg); } to { opacity: 0.8; transform: none; } }
/* The film sits where the badge's white disc was: 80% of the ring */
.niche-film {
  position: absolute; inset: 9.85%; border-radius: 50%; overflow: hidden; background: var(--selva-2);
  opacity: 0; animation: heroIn 1.2s var(--ease) 1s forwards;
}
.niche-film video, .niche-film img { width: 100%; height: 100%; object-fit: cover; }
.niche-ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  filter: drop-shadow(0 18px 40px rgba(4, 22, 19, 0.55));
  opacity: 0; animation: ringIn 1.5s var(--ease) 0.6s forwards;
}
@keyframes ringIn { from { opacity: 0; transform: rotate(-80deg) scale(0.86); } to { opacity: 1; transform: none; } }
.niche-cap { display: grid; justify-items: center; gap: 4px; text-align: center; opacity: 0; animation: heroIn 1s var(--ease) 1.4s forwards; }
.niche-cap small { font-family: var(--deco); font-size: 16px; letter-spacing: 0.04em; color: var(--para); }
.open-sign { display: inline-flex; align-items: center; gap: 9px; font-family: var(--deco); font-size: 17px; letter-spacing: 0.02em; color: var(--foam); }
.open-sign i { width: 10px; height: 10px; border-radius: 50%; background: #6e8a83; flex: none; }
.open-sign.is-open i { background: #4ef0a0; box-shadow: 0 0 0 4px rgba(78, 240, 160, 0.18); animation: blink 2.4s ease-in-out infinite; }
@keyframes blink { 50% { box-shadow: 0 0 0 7px rgba(78, 240, 160, 0.05); } }

.hero-foot {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(30px, 5vh, 56px);
  width: min(1280px, 90vw); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--deco); font-size: 16px; letter-spacing: 0.03em; color: var(--para);
}
.hero-hours { display: inline-flex; align-items: center; gap: 14px; }
.hero-hours b { font-family: var(--display); font-weight: 400; font-size: 24px; color: var(--foam); }
.hero-hours i { display: block; width: 56px; height: 2px; border-radius: 2px; background: var(--sol); }
.hero-scroll { display: inline-flex; align-items: center; gap: 10px; }
.hero-scroll::after { content: ''; width: 1.5px; height: 34px; background: linear-gradient(var(--sol), transparent); }
/* On a wide but short screen the width-based sizes overflow the window: the
   whole hero, promo strip included, has to fit in one screen */
@media (min-width: 1025px) {
  .hero-inner { padding: calc(var(--promo-h, 0px) + clamp(80px, 11vh, 120px)) 0 clamp(84px, 12vh, 140px); }
  .hero-mark { width: clamp(100px, min(15vw, 17vh), 210px); margin-bottom: clamp(10px, 2.2vh, 26px); }
  .hero-script { font-size: clamp(42px, min(6.6vw, 9.6vh), 104px); }
  .hero-tag { margin-top: clamp(10px, 2vh, 22px); font-size: clamp(17px, min(1.7vw, 2.6vh), 25px); }
  .hero-actions { margin-top: clamp(16px, 3.4vh, 36px); }
  .hero-niche { width: min(400px, 100%, 44vh); gap: clamp(10px, 2vh, 20px); }
}

/* ---------- Reveal: a soft rise, no more ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transition: opacity 0.9s var(--ease); }
.reveal-left.visible { opacity: 1; }
.reveal[data-delay='1'] { transition-delay: 0.1s; }
.reveal[data-delay='2'] { transition-delay: 0.2s; }
.reveal[data-delay='3'] { transition-delay: 0.3s; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(44px, 7vw, 110px); align-items: center; }
.about-images { position: relative; padding: 0 0 70px; }
.about-main { width: 78%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--leaf); }
.about-main img, .about-second img { width: 100%; height: 100%; object-fit: cover; }
.about-second {
  position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: 46% 0 46% 0; border: 6px solid var(--cal);
}
.about-text p { color: var(--ink-para); margin: 0 0 22px; max-width: 54ch; }
.about-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line-ink); margin-top: 8px; }
.about-facts > div { padding: 16px 0; border-bottom: 1px solid var(--line-ink); }
.about-facts > div:nth-child(odd) { padding-right: 18px; }
.about-facts dt { font-family: var(--display); font-size: 21px; color: var(--ink); line-height: 1.2; }
.about-facts dd { font-size: 15.5px; color: var(--ink-para); }

/* ---------- Happy hour: marigold ---------- */
.afterwork { overflow: hidden; }
.afterwork-inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
.hh-sign { font-family: var(--display); font-size: clamp(64px, 9.4vw, 140px); line-height: 0.92; color: var(--ink); margin-bottom: 8px; }
.afterwork-copy .kicker { color: #6b4100; }
.afterwork-time { font-family: var(--deco); font-size: clamp(26px, 2.6vw, 34px); color: var(--ink); line-height: 1.2; }
.hh-count { font-family: var(--deco); font-size: 18px; color: #6b4100; min-height: 1.6em; margin-bottom: 14px; }
.afterwork-copy p:not(.afterwork-time):not(.hh-count) { color: #3d2a05; margin-bottom: 26px; max-width: 44ch; }
.afterwork-list { position: relative; padding: clamp(34px, 4vw, 56px); background: var(--selva); color: var(--para); border-radius: 120px 24px 120px 24px; }
.aw-tapas-time { font-family: var(--deco); font-size: 19px; color: var(--sol); }
.aw-tapas-title { font-family: var(--display); font-size: clamp(40px, 4.4vw, 62px); line-height: 1; color: var(--foam); margin: 6px 0 14px; }
.aw-tapas-text { max-width: 34ch; }
.aw-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.aw-row + .aw-row { border-top: 1px solid var(--line-soft); }
.aw-name { color: var(--foam); }
.aw-dots { flex: 1; border-bottom: 1px dashed rgba(247, 181, 56, 0.35); transform: translateY(-5px); }
.aw-price { font-family: var(--deco); font-size: 18px; color: var(--sol); white-space: nowrap; }
.aw-head { font-family: var(--deco); font-size: 17px; color: var(--sol); margin: 22px 0 4px; }

/* ---------- The carte ---------- */
.menu-split { display: grid; grid-template-columns: minmax(260px, 0.7fr) 1.7fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.menu-aside { position: sticky; top: 110px; }
.menu-aside .section-sub { margin-bottom: 26px; }
.menu-tabs { display: flex; gap: 8px; margin-bottom: 26px; }
.menu-page .menu-tabs { justify-content: center; margin-bottom: 18px; }
.menu-tabs button {
  background: transparent; border: 1.5px solid var(--ink); color: var(--ink); border-radius: 999px;
  padding: 10px 26px; font-family: var(--deco); font-size: 16px; letter-spacing: 0.03em; transition: 0.3s;
}
.menu-tabs button:hover { background: rgba(11, 42, 37, 0.07); }
.menu-tabs button.active { color: var(--cal); background: var(--ink); }
.menu-panel { background: #fff; border-radius: 28px; padding: clamp(28px, 4vw, 54px); box-shadow: 0 0 0 1px var(--line-ink); }
.menu-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 3vw, 46px) clamp(32px, 4vw, 60px); align-items: start; }
@media (min-width: 1500px) {
  .menu-page .menu-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .menu-page .menu-item .mi-name { white-space: normal; }
}
.menu-cat h3 { font-family: var(--display); font-size: 27px; line-height: 1.12; color: var(--ink); margin-bottom: 8px; }
.menu-cat h3::after { content: ''; display: block; width: 46px; height: 3px; border-radius: 3px; margin-top: 8px; background: var(--coral); }
.menu-cat:nth-child(3n+2) h3::after { background: var(--turquesa); }
.menu-cat:nth-child(3n) h3::after { background: var(--cobalto); }
.menu-cat-sub { font-family: var(--deco); font-size: 15px; color: #0f7f75; margin: 0 0 8px; }
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 5px 0; }
/* A long name wraps rather than push its price out of the card */
.menu-item .mi-name { color: var(--ink); min-width: 0; overflow-wrap: break-word; }
.menu-item .mi-dots { flex: 1; min-width: 6px; border-bottom: 1.5px dotted rgba(11, 42, 37, 0.28); transform: translateY(-5px); }
.menu-item .mi-price { flex: none; font-family: var(--deco); color: var(--cobalto); font-size: 17px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.menu-item-desc { color: var(--ink-para); font-size: 14px; margin: -2px 0 6px; max-width: 90%; }
.menu-actions { margin-top: 6px; }
.menu-page .menu-actions { text-align: center; margin-top: 44px; }
.menu-cat.multi { --pc: 66px; }
.menu-cat.multi .mi-price { width: var(--pc); flex: none; text-align: right; }
.menu-cat.multi.cols-3, .menu-cat.multi.cols-4 { --pc: 52px; }
.menu-cat.flat-price .mi-name { white-space: normal; }
.menu-item.mi-head { padding: 0 0 4px; border-bottom: 1px solid var(--line-ink); margin-bottom: 4px; }
.menu-item.mi-head .mi-price { font-family: var(--sans); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-para); line-height: 1.25; white-space: normal; }

.btn.wa-btn { background: #25d366; border-color: #25d366; color: #06301a; }
.btn.wa-btn:hover { background: #1fb457; border-color: #1fb457; color: #06301a; }
.btn.wa-btn.busy { opacity: .6; pointer-events: none; }
.btn.wa-btn svg { width: 19px; height: 19px; fill: currentColor; flex: none; }

.carte-lang { display: flex; justify-content: center; margin: 10px 0 clamp(30px, 3vw, 46px); }
.carte-lang button {
  background: transparent; border: 0; cursor: pointer; font-family: var(--deco); font-size: 16px;
  padding: 10px 16px; min-height: 44px; color: var(--ink-para);
  border-bottom: 2px solid transparent; transition: color .3s var(--ease), border-color .3s var(--ease);
}
.carte-lang button + button { border-left: 1px solid var(--line-ink); }
.carte-lang button:hover { color: var(--ink); }
.carte-lang button.active { color: var(--ink); border-bottom-color: var(--coral); }
.menu-page .promo-notice { margin-bottom: 22px; }

/* ---------- The stage: a set list ---------- */
.live-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.live-copy p:not(.kicker) { max-width: 52ch; margin-bottom: 18px; }
.setlist { list-style: none; counter-reset: song; border-top: 1px solid var(--line-soft); }
.setlist li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; padding: 16px 4px; border-bottom: 1px solid var(--line-soft); }
.setlist b { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 3vw, 42px); line-height: 1.1; color: var(--foam); }
.setlist li:nth-child(3n+1) b { color: var(--coral-text); }
.setlist li:nth-child(3n+2) b { color: var(--turq-text); }
.setlist li:nth-child(3n) b { color: var(--sol); }
.setlist span { font-family: var(--deco); font-size: 16px; color: var(--para); text-align: right; }

/* ---------- The vibe ---------- */
.vibe { overflow: hidden; padding-top: 0; }
.vibe-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 30px; }
/* Under the rail: the Instagram link on the left, the arrows on the right */
.vibe-foot { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 14px; }
.vibe-nav { display: flex; gap: 12px; flex: none; }
.vibe-nav button { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--coral); border: 0; color: #2a0d06; transition: background 0.3s var(--ease), opacity 0.3s var(--ease); }
.vibe-nav button:hover { background: #ff8165; }
.vibe-nav button:disabled { opacity: 0.3; cursor: default; }
.vibe-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.vibe-rail {
  position: relative; display: flex; gap: clamp(14px, 1.6vw, 22px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 10px max(5vw, calc((100vw - 1200px) / 2)) 20px;
}
.vibe-rail::-webkit-scrollbar { display: none; }
.vibe-card {
  position: relative; flex: 0 0 auto; width: clamp(210px, 20vw, 270px); aspect-ratio: 9 / 16;
  padding: 0; border: 0; background: var(--selva-2); overflow: hidden; cursor: zoom-in; scroll-snap-align: center;
  border-radius: 22px;
}
.vibe-card:nth-child(even) { border-radius: 110px 110px 22px 22px; }
.vibe-card video, .vibe-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vibe-card video { opacity: 0; transition: opacity 0.6s; }
.vibe-card.playing video { opacity: 1; }
.vibe-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(6, 30, 26, 0.92)); pointer-events: none; }
.vibe-label { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; text-align: left; font-family: var(--display); font-size: 23px; line-height: 1.1; color: var(--foam); }
/* Four bars that move only while the clip itself is playing */
.vibe-eq { position: absolute; top: 16px; left: 18px; z-index: 2; display: flex; gap: 3px; align-items: flex-end; height: 16px; opacity: 0; transition: opacity 0.4s; }
.vibe-eq i { width: 3px; height: 30%; border-radius: 2px; background: var(--sol); }
.vibe-card.playing .vibe-eq { opacity: 1; }
.vibe-card.playing .vibe-eq i { animation: eq 0.9s ease-in-out infinite alternate; }
.vibe-card.playing .vibe-eq i:nth-child(2) { animation-duration: 0.7s; animation-delay: -0.3s; }
.vibe-card.playing .vibe-eq i:nth-child(3) { animation-duration: 1.1s; animation-delay: -0.5s; }
.vibe-card.playing .vibe-eq i:nth-child(4) { animation-duration: 0.8s; animation-delay: -0.2s; }
@keyframes eq { from { height: 20%; } to { height: 100%; } }
.vibe-card:focus-visible { outline: 2px solid var(--sol); outline-offset: 3px; }
.vibe-note { font-size: 15px; }
.vibe-note a { color: var(--turq-text); border-bottom: 1px solid var(--line); }

.lightbox .lb-video { max-width: 90vw; max-height: 86vh; max-height: 86dvh; background: #000; border-radius: 16px; }
.lightbox .hidden { display: none !important; }
.lightbox.lb-single .lb-prev, .lightbox.lb-single .lb-next { display: none; }

/* ---------- Corners of the room ---------- */
.spaces-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 26px); }
.space-card { display: grid; gap: 14px; }
.space-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 20px; }
.space-card:nth-child(odd) img { border-radius: 120px 120px 20px 20px; }
.space-card figcaption span { display: block; font-family: var(--display); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; color: var(--ink); }
.space-card figcaption small:empty { display: none; }
.space-card figcaption small { display: block; font-family: var(--deco); font-size: 16px; color: var(--ink-para); margin-top: 4px; }

/* ---------- Gallery: leaf-cut ---------- */
.gal-grid { display: grid; grid-auto-flow: dense; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 17vw, 230px); gap: clamp(12px, 1.6vw, 22px); }
.gal-tile { position: relative; border: 0; padding: 0; overflow: hidden; cursor: zoom-in; background: var(--selva-2); border-radius: var(--leaf); transition: border-radius 0.8s var(--ease); }
.gal-tile:nth-child(even) { border-radius: 46% 0 46% 0; }
.gal-tile:hover { border-radius: 24px; }
.gal-tile img { width: 100%; height: 100%; object-fit: cover; }
.gal-1, .gal-6 { grid-column: span 2; }
.gal-2, .gal-4 { grid-row: span 2; }
@media (max-width: 760px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44vw; gap: 12px; }
  .gal-1, .gal-6 { grid-column: span 2; }
}

/* ---------- Welcome pop-up ---------- */
.welcome-pop {
  position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; padding: 24px;
  background: rgba(6, 30, 26, 0.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease);
}
.welcome-pop.open { opacity: 1; pointer-events: auto; }
.welcome-pop-card { position: relative; width: min(760px, 100%); background: var(--selva-2); border: 1.5px solid var(--turquesa); border-radius: 26px; padding: 12px 12px 26px; transform: translateY(14px); transition: transform 0.35s var(--ease); }
.welcome-pop.open .welcome-pop-card { transform: none; }
.welcome-pop-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: 16px; }
.welcome-pop-cta { display: flex; width: max-content; margin: 22px auto 4px; }
.welcome-pop-close { position: absolute; top: -16px; right: -16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: var(--selva); border: 1.5px solid var(--turquesa); color: var(--foam); font-size: 22px; line-height: 1; display: grid; place-items: center; transition: background 0.3s; }
.welcome-pop-close:hover { background: var(--coral); }
@media (max-width: 560px) { .welcome-pop { padding: 18px; } .welcome-pop-close { top: -10px; right: -10px; } }

.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(5, 24, 21, 0.96); display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 90vw; max-height: 86vh; max-height: 86dvh; object-fit: contain; border-radius: 12px; }
.lightbox button { position: absolute; background: rgba(12, 58, 51, 0.6); border: 1.5px solid var(--line); border-radius: 50%; color: var(--foam); width: 50px; height: 50px; font-size: 18px; transition: 0.3s; display: grid; place-items: center; }
.lightbox button:hover { border-color: var(--sol); }
.lb-close { top: 26px; right: 26px; }
.lb-prev { left: 26px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 26px; top: 50%; transform: translateY(-50%); }

/* ---------- Hours and map ---------- */
.info-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(40px, 5vw, 84px); align-items: stretch; }
.info-grid.no-map { grid-template-columns: 1fr; max-width: 620px; }
.clock-row { display: flex; align-items: center; gap: 22px; margin-bottom: 18px; }
/* The day drawn as a dial: the open hours as an arc, the hand on Rabat time */
.hours-ring { width: 120px; height: 120px; flex: none; }
.hr-track { fill: none; stroke: var(--cal-2); stroke-width: 14; }
.hr-open { fill: none; stroke: var(--turquesa); stroke-width: 14; stroke-linecap: round; }
.hr-ticks line { stroke: var(--ink-para); stroke-width: 2; opacity: 0.4; }
.hr-ticks text { font-family: var(--deco); font-size: 15px; fill: var(--ink-para); text-anchor: middle; dominant-baseline: middle; }
.hr-needle { stroke: var(--coral); stroke-width: 4; stroke-linecap: round; transform-origin: 100px 100px; }
.hr-hub { fill: var(--ink); }
.info-open { margin: 0; }
.lime .open-sign { color: var(--ink); }
.lime .open-sign.is-open i { background: #12a86a; box-shadow: 0 0 0 4px rgba(18, 168, 106, 0.18); }
.hours-list { list-style: none; }
.hours-list li { display: flex; align-items: baseline; gap: 12px; padding: 11px 6px; border-bottom: 1px solid var(--line-ink); font-size: 15.5px; }
.hours-list li.today { background: rgba(31, 181, 168, 0.12); border-radius: 10px; }
.hours-list .day-col { min-width: 150px; display: flex; flex-direction: column; }
.hours-list .day { font-family: var(--deco); font-size: 19px; color: var(--ink); }
.hours-list .day-note { font-size: 14px; color: #0f7f75; line-height: 1.3; }
.hours-list .dots { flex: 1; border-bottom: 1.5px dotted var(--line-ink); transform: translateY(-5px); }
.hours-list .time { color: var(--ink); font-variant-numeric: tabular-nums; }
.hours-list .closed { color: #b23a1f; font-family: var(--deco); }
.contact-lines { margin-top: 28px; display: grid; gap: 10px; color: var(--ink-para); font-size: 15.5px; }
.contact-lines > div { display: grid; grid-template-columns: 110px 1fr; align-items: baseline; }
.contact-lines strong { font-family: var(--deco); font-weight: 400; font-size: 16px; color: #0f7f75; }
.contact-lines a:hover { color: var(--coral); }
.access-note { margin-top: 22px; font-size: 15px; color: var(--ink-para); max-width: 46ch; }
.map-wrap { border-radius: 28px; overflow: hidden; min-height: 440px; isolation: isolate; position: relative; box-shadow: 0 0 0 1px var(--line-ink); }
#map { min-height: 440px; height: 100%; z-index: 1; }
#map .leaflet-tile-pane { filter: saturate(0.6) hue-rotate(-12deg) contrast(0.96); }
.map-pin { position: relative; width: 24px; height: 24px; }
.map-pin::before { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--coral); border: 3px solid #fff; box-shadow: 0 4px 12px rgba(11, 42, 37, 0.35); }
.map-pin::after { content: ''; position: absolute; inset: -12px; border-radius: 50%; border: 2px solid var(--coral); animation: pin-pulse 2.2s ease-out infinite; }
@keyframes pin-pulse { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(1.3); opacity: 0; } }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #fff; color: var(--ink); }
.leaflet-popup-content a { color: #0f7f75; font-weight: 600; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.faq-list { border-top: 1px solid var(--line-soft); }
.faq-list details { border-bottom: 1px solid var(--line-soft); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 18px; padding: 20px 2px; font-family: var(--deco); font-size: clamp(19px, 1.6vw, 22px); color: var(--foam); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; font-family: var(--display); font-size: 26px; line-height: 1; color: var(--sol); transition: transform 0.3s var(--ease); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding: 0 2px 22px; max-width: 62ch; }
.faq-list details a { color: var(--turq-text); border-bottom: 1px solid var(--line); }

/* ---------- Contact: coral ---------- */
.contact-inner { text-align: center; max-width: 1080px; margin: 0 auto; }
.contact-band .section-title { font-size: clamp(42px, 5.4vw, 76px); }
.contact-lead { color: #3b1206; max-width: 600px; margin: 0 auto 44px; }
.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); border-top: 1px solid rgba(42, 13, 6, 0.25); border-bottom: 1px solid rgba(42, 13, 6, 0.25); margin-bottom: 40px; }
.contact-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 16px; text-align: center; transition: background .4s var(--ease); }
.contact-card + .contact-card { border-left: 1px solid rgba(42, 13, 6, 0.18); }
a.contact-card:hover { background: rgba(255, 244, 238, 0.16); }
.cc-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--selva); }
.cc-icon svg { width: 17px; height: 17px; fill: var(--sol); }
.cc-body { display: grid; gap: 2px; min-width: 0; }
.cc-body small { font-family: var(--deco); font-size: 16px; color: #3b1206; }
.cc-body b { font-weight: 500; font-size: 16px; color: #1e0803; overflow-wrap: break-word; }
.contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.contact-band .socials { justify-content: center; }
@media (max-width: 720px) {
  .contact-cards { grid-template-columns: minmax(0, 1fr); }
  .contact-card + .contact-card { border-left: 0; border-top: 1px solid rgba(42, 13, 6, 0.18); }
  .contact-actions .btn { width: 100%; }
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 26px; margin-top: 30px; position: relative; }
.form-field { display: grid; gap: 4px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-family: var(--deco); font-size: 16px; color: #0f7f75; }
.form-field input, .form-field select {
  background: var(--cal); border: 1.5px solid transparent; border-radius: 12px;
  color: var(--ink); padding: 12px 13px; font-family: var(--sans); font-size: 16px;
  transition: border-color 0.3s, background 0.3s; width: 100%; appearance: none;
}
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--turquesa); background: #fff; }
.form-field input::placeholder { color: rgba(11, 42, 37, 0.4); }
.form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 55%, calc(100% - 13px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.form-field select option { background: #fff; color: var(--ink); }
.form-field input[type='date'] { color-scheme: light; }
.phone-row { display: grid; grid-template-columns: 126px 1fr; gap: 12px; }
.form-note { color: var(--ink-para); font-size: 14px; margin-top: 18px; text-align: center; }
.form-submit { margin-top: 32px; text-align: center; }
.form-msg { margin-top: 18px; text-align: center; font-size: 15px; display: none; }
.form-msg.ok { display: block; color: #0c7a4c; }
.form-msg.err { display: block; color: #b23a1f; }
.field-note { display: block; margin-top: 6px; font-size: 13px; color: var(--ink-para); }

/* ---------- Footer ---------- */
footer { background: var(--selva); padding: clamp(90px, 9vw, 130px) 0 34px; position: relative; border-top: 1px solid var(--line-soft); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 44px; margin-bottom: 40px; }
.footer-grid h4 { font-family: var(--deco); font-weight: 400; font-size: 19px; margin-bottom: 16px; color: var(--sol); }
.footer-grid p, .footer-grid a, .footer-grid li { color: var(--para); font-size: 15px; list-style: none; }
.footer-grid p { max-width: 40ch; }
.footer-grid a:hover { color: var(--turq-text); }
.footer-grid ul { display: grid; gap: 8px; }
.footer-logo { width: 130px; height: auto; margin-bottom: 20px; }
.socials { display: flex; gap: 14px; margin-top: 22px; }
/* The brand marks in their own colours, never filtered */
.socials a { width: 42px; height: 42px; display: block; border-radius: 11px; overflow: hidden; transition: transform 0.3s var(--ease); }
.socials a img { width: 100%; height: 100%; object-fit: contain; display: block; }
.socials a:hover { transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid var(--line-soft); padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--para); font-size: 13.5px; }
.footer-bottom a:hover { color: var(--turq-text); }

/* ---------- Sub-pages ---------- */
.page-hero { height: 52vh; min-height: 380px; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; padding: calc(var(--promo-h, 0px) + 76px) 0 0; }
.page-hero .hero-bg::after { background: linear-gradient(180deg, rgba(8, 40, 35, 0.72) 0%, rgba(8, 40, 35, 0.45) 45%, var(--selva) 100%); }
.hero-video { display: block; }
@media (prefers-reduced-motion: reduce), (max-width: 720px) {
  .hero-video { display: none; }
  .page-hero .hero-bg { background: url('../images/menu-bg.jpg') center / cover no-repeat; }
}
/* The title is a full phrase ("La carte d'El Barrio Latino"), not one word */
.page-hero h1 { font-size: clamp(34px, 4.4vw, 64px); line-height: 1.05; max-width: 18ch; margin: 0 auto; text-wrap: balance; position: relative; z-index: 3; }
.page-hero .kicker { position: relative; z-index: 3; margin: 6px 0 0; }
.page-hero > div:last-child { position: relative; z-index: 3; }
.menu-page.lime { padding-bottom: clamp(100px, 10vw, 140px); }
.legal { max-width: 800px; margin: 0 auto; }
.legal h2 { font-size: 30px; margin: 44px 0 14px; color: var(--foam); }
.legal p, .legal li { color: var(--para); font-size: 16px; margin-bottom: 12px; }
.legal ul { padding-left: 20px; }

/* Intent pages (/musique-live-rabat and the others), rendered by the server */
.intent-hero { position: relative; min-height: 64vh; display: grid; align-items: end; padding: 150px 0 70px; overflow: hidden; }
.intent-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.intent-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 40, 35, 0.55), rgba(8, 40, 35, 0.35) 40%, var(--selva)); }
.intent-hero .container { position: relative; z-index: 2; }
.intent-hero h1 { font-size: clamp(42px, 6.4vw, 92px); max-width: 15ch; text-wrap: balance; }
.intent-lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--foam); max-width: 60ch; margin-top: 18px; }
.crumbs { font-family: var(--deco); font-size: 15px; color: var(--para); margin-bottom: 18px; }
.crumbs a { color: var(--turq-text); }
.intent-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr); gap: clamp(40px, 6vw, 90px); align-items: start; }
.intent-body article h2 { font-size: clamp(30px, 3.4vw, 44px); margin: 46px 0 14px; }
.intent-body article h2:first-child { margin-top: 0; }
.intent-body article p { max-width: 64ch; margin-bottom: 16px; }
.intent-body article ul { margin: 0 0 18px 20px; }
.intent-body article li { margin-bottom: 6px; }
.intent-body article a { color: var(--turq-text); border-bottom: 1px solid var(--line); }
.intent-card { position: sticky; top: 110px; background: var(--selva-2); border-radius: 26px; padding: 30px; border: 1px solid var(--line-soft); }
.intent-card h2 { font-size: 28px; margin-bottom: 14px; }
.intent-card dl { display: grid; gap: 12px; margin-bottom: 22px; }
.intent-card dt { font-family: var(--deco); color: var(--sol); font-size: 16px; }
.intent-card dd { color: var(--foam); font-size: 15.5px; }
.intent-card .btn { width: 100%; margin-top: 10px; }
.intent-carte { background: #fff; color: var(--ink); border-radius: 24px; padding: clamp(24px, 3vw, 38px); margin: 10px 0 26px; }
.intent-carte .menu-cols { grid-template-columns: 1fr; }
.intent-faq { margin-top: 30px; }

.toast { position: fixed; bottom: 30px; left: 50%; transform: translate(-50%, 20px); background: var(--selva-2); border: 1.5px solid var(--turquesa); border-radius: 999px; color: var(--foam); padding: 13px 28px; font-size: 15px; z-index: 100; opacity: 0; pointer-events: none; transition: 0.4s var(--ease); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .spaces-grid { grid-template-columns: repeat(2, 1fr); }
  .menu-split, .live-grid, .faq-grid, .intent-body { grid-template-columns: 1fr; }
  .menu-aside, .intent-card { position: static; }
  .menu-cols { grid-template-columns: 1fr; }
  .hero-inner { grid-template-columns: 1fr; padding: 110px 0 150px; }
  .hero-niche { width: min(230px, 62vw); order: -1; justify-self: start; gap: 12px; }
  .niche-cap small { display: none; }
}
@media (max-width: 1260px) {
  .nav-links {
    position: fixed; inset: 0; height: 100svh; background: var(--selva);
    flex-direction: column; justify-content: center; align-items: center; gap: 16px;
    clip-path: circle(0% at calc(100% - 46px) 46px); visibility: hidden;
    transition: clip-path 0.6s var(--ease), visibility 0s 0.6s;
    grid-column: auto; grid-row: auto; z-index: 65; list-style: none;
  }
  .nav-links.open { clip-path: circle(150% at calc(100% - 46px) 46px); visibility: visible; transition: clip-path 0.6s var(--ease); }
  .nav-links > li > a { font-family: var(--display); font-size: 34px; letter-spacing: 0; display: inline-block; color: var(--foam); }
  .nav-links > li > a::after { display: none; }
  .nav-links > li > a:hover { color: var(--sol); }
  .nav-links .mobile-only a { font-family: var(--deco); font-size: 18px; }
  .nav-links li { width: 100%; text-align: center; opacity: 0; transform: translateY(14px); }
  .nav-links .lang-switch { display: inline-flex; }
  .nav-links.open li { animation: navItemIn 0.5s var(--ease) forwards; }
  .nav-links.open li:nth-child(1) { animation-delay: 0.08s; }
  .nav-links.open li:nth-child(2) { animation-delay: 0.12s; }
  .nav-links.open li:nth-child(3) { animation-delay: 0.16s; }
  .nav-links.open li:nth-child(4) { animation-delay: 0.2s; }
  .nav-links.open li:nth-child(5) { animation-delay: 0.24s; }
  .nav-links.open li:nth-child(6) { animation-delay: 0.28s; }
  .nav-links.open li:nth-child(n+7) { animation-delay: 0.32s; }
  .nav-right { display: none; }
  .nav-links .mobile-only { display: block; }
  .burger { display: block; }
  .nav-simple .nav-links { position: static; height: auto; background: none; clip-path: none; visibility: visible; flex-direction: row; gap: 18px; z-index: auto; }
  .nav-simple .nav-links li { opacity: 1; transform: none; }
  .nav-simple .nav-links a { font-family: var(--deco); font-size: 15px; }
}
@keyframes navItemIn { to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
  .about-grid, .info-grid, .afterwork-inner { grid-template-columns: 1fr; }
  .about-images { max-width: 520px; margin: 0 auto; width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .map-wrap, #map { min-height: 340px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
}
@media (min-width: 901px) { .nav-links .mobile-only { display: none; } }
@media (max-width: 700px) {
  .hero-foot { justify-content: center; }
  .hero-where, .hero-scroll { display: none; }
  .hero-bg::after { background: linear-gradient(180deg, rgba(8, 40, 35, 0.55), rgba(8, 40, 35, 0.3) 35%, rgba(8, 40, 35, 0.68) 75%, var(--selva)); }
  .hero-mark { display: none; }
  .about-facts { grid-template-columns: 1fr; }
  .about-facts > div:nth-child(odd) { padding-right: 0; }
  .setlist li { grid-template-columns: 1fr; gap: 0; }
  .setlist span { text-align: left; }
  .clock-row { gap: 16px; }
  .hours-ring { width: 96px; height: 96px; }
}
@media (max-width: 560px) {
  .spaces-grid { gap: 14px; }
  .space-card figcaption span { font-size: 22px; }
  .hero-actions .btn { width: 100%; }
  .menu-item { flex-wrap: nowrap; align-items: baseline; }
  .menu-item .mi-name { white-space: normal; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
  .menu-item .mi-dots { flex: 0 1 14px; min-width: 0; }
  .menu-item .mi-price { flex: none; }
  .menu-cat.multi { --pc: 50px; }
  .menu-cat.multi .mi-price { font-size: 15px; }
  .menu-cat.multi .mi-head .mi-price { font-size: 9.5px; letter-spacing: 0; }
  .menu-panel { padding: 24px 16px; border-radius: 22px; }
  .vibe-card { width: 62vw; }
  .phone-row { grid-template-columns: 104px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .reveal-left { opacity: 1; transform: none; }
  .hero-content > *, .niche-film, .niche-ring, .niche-cap { opacity: 1; }
  .niche-sun { opacity: 0.8; }
  .kb { animation: none; }
  .hero video { display: none; }
}

/* ---------- Account (sign in, sign up, member area) ---------- */
.nav-auth { background: transparent; color: var(--foam) !important; border: 1.5px solid var(--line-soft); border-radius: 999px; padding: 8px 18px !important; transition: background .3s, color .3s, border-color .3s; }
.nav-auth:hover { border-color: var(--turquesa); color: var(--turq-text) !important; }
.nav-auth.signed-in { border-color: var(--line); }
.page-account { background: var(--selva); }
.page-account::before { content: ''; position: fixed; inset: 0; z-index: -2; background: url('/images/account-bg.jpg') center/cover no-repeat; }
.page-account::after { content: ''; position: fixed; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 40, 35, .78), rgba(8, 40, 35, .88) 55%, rgba(8, 40, 35, .96)); }
.page-account .nav { background: rgba(12, 58, 51, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-soft); padding: 9px 0; }
.page-account .nav-logo img { width: 36px; height: 36px; }
.account-main { padding: 96px 0 36px; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; }
.account-main > .container { width: 100%; }
.page-account footer { background: rgba(8, 40, 35, .6); padding-top: 40px; }
.account-main section { padding: 0; }
.auth-wrap { display: flex; justify-content: center; width: 100%; }
.auth-card { width: min(560px, 100%); background: rgba(15, 70, 61, 0.94); border: 1px solid var(--line); border-radius: 26px; padding: 30px 32px; text-align: center; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.auth-logo { display: block; width: 110px; height: auto; margin: 4px auto 14px; }
.auth-card .section-title { font-size: 34px; margin-bottom: 4px; }
.auth-sub { color: var(--para); font-size: 14px; line-height: 21px; margin-bottom: 12px; }
.auth-form { display: grid; gap: 6px; text-align: left; }
#signupForm { grid-template-columns: 1fr 1fr; column-gap: 14px; }
#signupForm .full { grid-column: 1 / -1; }
.auth-form label { font-family: var(--deco); font-size: 15px; color: var(--para); margin-top: 6px; }
.auth-form input, .auth-form select { width: 100%; background: rgba(6, 30, 26, 0.6); border: 1px solid var(--line-soft); border-radius: 12px; padding: 11px 13px; color: var(--foam); font-family: var(--sans); font-size: 15px; }
.auth-form input:focus, .auth-form select:focus { outline: none; border-color: var(--turquesa); box-shadow: 0 0 0 3px rgba(31, 181, 168, 0.2); }
.auth-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--turq-text) 50%), linear-gradient(135deg, var(--turq-text) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.auth-form select option { background: var(--selva); color: var(--foam); }
.auth-form .btn { margin-top: 14px; width: 100%; }
.auth-form .btn.ghost { margin-top: 8px; }
.auth-hint { font-size: 12px; color: var(--para); opacity: 0.8; line-height: 17px; margin-top: 4px; }
.gender-row { display: flex; gap: 8px; }
.gender-row button { flex: 1; background: rgba(6, 30, 26, 0.6); border: 1px solid var(--line-soft); border-radius: 12px; color: var(--para); padding: 9px 6px; font-size: 13.5px; transition: .25s; }
.gender-row button:hover { border-color: var(--turquesa); }
.gender-row button.active { border-color: var(--turquesa); background: rgba(31, 181, 168, 0.16); color: var(--turq-text); }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-msg { font-size: 13.5px; min-height: 18px; margin-top: 8px; text-align: center; grid-column: 1 / -1; }
.auth-msg.err { color: var(--coral-text); }
.auth-msg.ok { color: #8fe3b8; }
.auth-switch { font-size: 14px; color: var(--para); text-align: center; margin-top: 10px; grid-column: 1 / -1; }
.auth-switch a { color: var(--turq-text); text-decoration: underline; }
.pending-title { font-family: var(--display); font-size: 26px; margin-bottom: 8px; color: var(--foam); }
.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 26px 0 40px; }
.member-card { background: rgba(15, 70, 61, .94); border: 1px solid var(--line); border-radius: 22px; padding: 26px; }
.member-card h3 { font-size: 24px; margin-bottom: 6px; }
.member-card .btn { margin-top: 14px; width: 100%; }
.member-card .muted { color: var(--para); font-size: 14.5px; }
.fidelity-card { background: linear-gradient(140deg, rgba(31, 181, 168, 0.25), var(--selva-2) 70%); border-color: var(--turquesa); }
.fidelity-card b { font-family: var(--display); font-size: 54px; font-weight: 400; color: #fff; line-height: 1; }
.fidelity-card p { color: var(--para); font-size: 13.5px; margin-top: 10px; line-height: 20px; }
.fidelity-card.off b { color: var(--para); opacity: 0.6; }
.member-heading { font-family: var(--display); font-size: 26px; margin-bottom: 16px; color: var(--foam); }
.res-list { display: grid; gap: 12px; }
.res-card { display: flex; align-items: center; gap: 18px; background: rgba(15, 70, 61, .94); border: 1px solid var(--line-soft); border-radius: 18px; padding: 16px 20px; }
.res-when { display: grid; min-width: 88px; }
.res-when b { font-family: var(--deco); font-weight: 400; font-size: 20px; color: var(--sol); }
.res-when span { font-size: 12.5px; color: var(--para); }
.res-meta { display: grid; flex: 1; }
.res-meta b { font-size: 14.5px; font-weight: 600; color: var(--foam); }
.res-meta span { font-size: 12.5px; color: var(--para); }
.res-badge { font-family: var(--deco); font-size: 14px; padding: 5px 12px; border-radius: 999px; border: 1px solid; }
.res-badge.pending { color: var(--sol); border-color: rgba(247, 181, 56, 0.6); }
.res-badge.confirmed { color: #8fe3b8; border-color: rgba(143, 227, 184, 0.5); }
.res-badge.cancelled { color: var(--coral-text); border-color: rgba(255, 157, 132, 0.5); }
.prefill-note { color: var(--turq-text); font-size: 13.5px; margin-top: 10px; }
.hidden { display: none !important; }
@media (max-width: 720px) {
  .account-main { padding: 110px 0 50px; min-height: auto; }
  .nav-auth { padding: 8px 14px !important; font-size: 13px; }
  .auth-card { padding: 24px 18px; }
  #signupForm { grid-template-columns: 1fr; }
  .res-card { flex-wrap: wrap; gap: 10px; }
  .res-when { min-width: 70px; }
}
@media (max-height: 900px) { .account-main { align-items: flex-start; padding-top: 88px; } }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 46px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; line-height: 0; padding: 9px 11px; color: var(--para); opacity: .8; transition: color .2s, opacity .2s; }
.pw-eye svg { width: 21px; height: 21px; fill: currentColor; display: block; }
.pw-eye .eye-shut { display: none; }
.pw-eye.on { color: var(--turq-text); opacity: 1; }
.pw-eye.on .eye-open { display: none; }
.pw-eye.on .eye-shut { display: block; }
.pw-eye:hover { color: var(--foam); opacity: 1; }
.auth-form label.stay-row { display: flex; align-items: center; gap: 9px; margin-top: 12px; font-family: var(--sans); font-size: 13.5px; color: var(--para); cursor: pointer; }
.stay-row input { width: 16px; height: 16px; accent-color: var(--turquesa); cursor: pointer; }
.stay-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.stay-line .stay-row { margin-top: 12px; }
.forgot-link { margin-top: 12px; font-size: 13.5px; color: var(--turq-text); text-decoration: underline; white-space: nowrap; }
.birthday-note { font-size: 12.5px; color: var(--turq-text); margin-top: 10px; text-align: center; background: rgba(31, 181, 168, 0.1); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; }

/* ---------- Members' deal prices ---------- */
.mi-was { color: var(--ink-para); opacity: 0.6; margin-right: 8px; font-size: 0.9em; }
.mi-deal { color: #0c7a4c; font-weight: 600; }
.nav-deals { color: #8fe3b8 !important; }
.deals-main { align-items: flex-start; padding-top: 118px; }
.deals-main .section-head { margin-bottom: 30px; }
.deals-empty { background: rgba(15, 70, 61, .94); border: 1px solid var(--line); border-radius: 22px; padding: 40px 30px; text-align: center; color: var(--para); max-width: 560px; margin: 0 auto; }
.deals-empty .contact-actions { margin-top: 22px; margin-bottom: 0; }
.deal-group { margin-bottom: 40px; }
.deal-group h2 { font-size: 30px; margin-bottom: 16px; }
.deal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.deal-card { position: relative; display: flex; gap: 14px; align-items: center; background: rgba(15, 70, 61, .94); border: 1px solid rgba(143, 227, 184, .35); border-radius: 18px; padding: 14px; transition: transform .3s var(--ease), border-color .3s var(--ease); }
.deal-card:hover { transform: translateY(-3px); border-color: #8fe3b8; }
.deal-card img { width: 74px; height: 74px; border-radius: 12px; object-fit: cover; flex: none; }
.deal-body { min-width: 0; flex: 1; }
.deal-body h3 { font-size: 19px; margin-bottom: 2px; }
.deal-body p { color: var(--para); font-size: 12.5px; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.deal-prices { display: flex; align-items: baseline; gap: 10px; }
.deal-prices s { color: var(--para); opacity: .55; font-size: 13px; }
.deal-prices b { color: #8fe3b8; font-size: 17px; font-weight: 600; }
.deal-badge { position: absolute; top: 12px; right: 12px; background: rgba(143, 227, 184, .16); color: #8fe3b8; border-radius: 999px; padding: 4px 10px; font-size: 11.5px; }

/* ---------- Delete account ---------- */
.del-card { max-width: 640px; text-align: left; }
.del-card .section-title { text-align: center; }
.del-card .auth-sub { text-align: center; margin-bottom: 26px; }
.del-block { margin-bottom: 26px; }
.del-block h2 { font-family: var(--deco); font-size: 18px; color: var(--sol); margin-bottom: 10px; }
.del-list { list-style: none; display: grid; gap: 8px; }
.del-list li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.55; color: var(--para); }
.del-list li::before { content: ''; position: absolute; left: 2px; top: 10px; width: 8px; height: 2px; border-radius: 2px; background: var(--turquesa); }
.del-note { font-size: 13.5px; color: var(--para); margin-top: 12px; line-height: 1.6; }
.del-or { margin-top: 20px; }
.del-card .btn { width: 100%; margin-top: 12px; text-align: center; }
.btn.danger { background: #a3301a; border-color: #a3301a; color: #fff; }
.btn.danger:hover { background: transparent; border-color: var(--coral-text); color: var(--coral-text); }

/* ---------- Reservation time picker ---------- */
.timepick { position: relative; }
.timepick-btn { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--cal); border: 1.5px solid transparent; border-radius: 12px; color: rgba(11, 42, 37, 0.6); padding: 12px 13px; font-family: var(--sans); font-size: 16px; text-align: left; transition: border-color 0.3s, color 0.3s, background 0.3s; }
.timepick-btn:hover, .timepick-btn.open { border-color: var(--turquesa); background: #fff; }
.timepick-btn.chosen { color: var(--ink); }
.timepick-btn .tp-caret { width: 0; height: 0; flex: none; margin-left: auto; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--ink); transition: transform 0.25s var(--ease); }
.timepick-btn.open .tp-caret { transform: rotate(180deg); }
.timepick-btn svg { width: 16px; height: 16px; fill: #0f7f75; flex: none; }
.timepick-panel { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); max-height: 232px; overflow-y: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; background: #fff; border: 1px solid var(--line-ink); border-radius: 16px; box-shadow: 0 18px 40px rgba(11, 42, 37, 0.18); }
.timepick-panel[hidden] { display: none; }
.timepick-slot { background: var(--cal); border: 1px solid transparent; color: var(--ink); border-radius: 999px; padding: 9px 4px; font-family: var(--sans); font-size: 14px; font-variant-numeric: tabular-nums; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.timepick-slot:hover { background: rgba(31, 181, 168, 0.18); }
.timepick-slot.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.timepick-panel::-webkit-scrollbar { width: 6px; }
.timepick-panel::-webkit-scrollbar-thumb { background: var(--line-ink); border-radius: 3px; }
@media (max-width: 720px) { .timepick-panel { grid-template-columns: repeat(4, 1fr); max-height: 200px; } }

/* ---------- Boot cover ---------- */
.page-boot { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--selva); transition: opacity .25s ease; }
.page-boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { position: relative; width: 120px; height: 120px; display: grid; place-items: center; }
.boot-mark img { width: 84px; height: auto; }
.boot-ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(31, 181, 168, 0.18); border-top-color: var(--sol); animation: bootSpin .9s linear infinite; }
@keyframes bootSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-ring { animation-duration: 2.4s; } }

/* ---------- Marketing ---------- */
/* Announcement strip above the fixed nav, which promo.js pushes down by the
   measured height. Two identical sets slide exactly half the track. */
.promo-banner { position: fixed; inset: 0 0 auto 0; z-index: 70; background: var(--sol); overflow: hidden; padding: 9px 0; }
.promo-track { display: flex; width: max-content; animation-name: promo-scroll; animation-timing-function: linear; animation-iteration-count: infinite; will-change: transform; }
.promo-banner:hover .promo-track { animation-play-state: paused; }
.promo-banner-text { flex: none; white-space: nowrap; padding-right: 5rem; color: var(--ink); font-family: var(--deco); font-size: 17px; text-decoration: none; }
a.promo-banner-text:hover { color: var(--cobalto); }
@keyframes promo-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .promo-track { animation: none; } }
@media (max-width: 860px) { .promo-banner { padding: 8px 14px; } .promo-banner-text { font-size: 15px; } }
.promo-notice { display: block; margin: 0 auto 26px; max-width: 640px; background: var(--sol); color: var(--ink); font-family: var(--deco); border-radius: 999px; padding: 11px 26px; text-align: center; font-size: 17px; }
.promo-notice.hidden { display: none; }

/* ==========================================================================
   Phones: iPhone and Android
   ========================================================================== */
/* iOS zooms the page when a focused field is under 16px and never zooms back */
@media (max-width: 860px) { input, select, textarea { font-size: 16px !important; } }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, summary, [role="button"] { -webkit-tap-highlight-color: rgba(31, 181, 168, 0.2); }
@media (max-width: 1260px) {
  .burger { width: 48px; height: 48px; }
  .burger span { left: 50%; width: 30px; transform: translateX(-50%); }
  .burger span:nth-child(2) { width: 20px; }
  .burger span:nth-child(1) { top: calc(50% - 10px); }
  .burger span:nth-child(2) { top: 50%; }
  .burger span:nth-child(3) { top: calc(50% + 10px); }
  .burger.open span:nth-child(1) { top: 50%; transform: translateX(-50%) rotate(45deg); }
  .burger.open span:nth-child(3) { top: 50%; transform: translateX(-50%) rotate(-45deg); }
}
@media (max-width: 900px) {
  .menu-tabs button { min-height: 44px; }
  .leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
}
@media (max-width: 720px) {
  .footer-grid ul a, .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; line-height: 1.25; }
  .footer-grid ul { gap: 0; }
  .footer-bottom { row-gap: 4px; }
  .contact-lines a { display: inline-flex; align-items: center; min-height: 40px; }
  .auth-switch a, .forgot-link { display: inline-block; padding: 11px 4px; }
  .stay-line { flex-wrap: wrap; row-gap: 2px; }
  .pw-eye { width: 44px; height: 44px; }
  .stay-row { min-height: 44px; }
  .stay-row input { width: 20px; height: 20px; }
  .leaflet-popup-content a { display: inline-block; padding: 8px 0; }
  .leaflet-popup-close-button { width: 32px !important; height: 32px !important; }
  .contact-lines { gap: 4px; }
}

/* ---------- Online booking switched off in the panel ----------
   Every invitation to book comes down with the form. Set by js/booking.js. */
.bookings-off #reserve,
.bookings-off #bookFloat,
.bookings-off a[href="#reserve"],
.bookings-off a[href="/#reserve"] { display: none !important; }
.bookings-off li:has(> a[href="#reserve"]),
.bookings-off li:has(> a[href="/#reserve"]) { display: none !important; }

/* ---------- 404 and the legal pages ---------- */
.lost { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 40px 0; }
.lost-logo { width: min(240px, 60vw); height: auto; margin: 0 auto 30px; }
.lost-sub { margin: 0 auto 34px; }
.legal-page { padding-top: 160px; }

/* ---------- Guest accounts closed (the default) ----------
   Until the owner opens accounts in the panel, nothing on the site invites a
   guest to sign in or up, and member deals are not offered. js/booking.js
   adds .accounts-on to reveal them. */
html:not(.accounts-on) #navAccount,
html:not(.accounts-on) #navSignup,
html:not(.accounts-on) .nav-deals-item,
html:not(.accounts-on) li:has(> a[href="/account"]),
html:not(.accounts-on) li:has(> a[href^="/account?"]),
html:not(.accounts-on) li:has(> #navAccount),
html:not(.accounts-on) li:has(> #navSignup) { display: none !important; }
html:not(.accounts-on) a.btn[href^="/account"],
html:not(.accounts-on) #delSignedOut > p[data-i18n="del.signInFirst"] { display: none !important; }

/* The carte page's footnote and the intent card's list of sibling pages */
.carte-note { max-width: 70ch; margin: 30px auto 0; text-align: center; font-size: 15px; color: var(--ink-para); }
.carte-note a { color: #0f7f75; border-bottom: 1px solid currentColor; }
.intent-links { list-style: none; display: grid; gap: 4px; }
.intent-links a { color: var(--turq-text); }

/* ---------- Section photographs ----------
   Each picture sits under a tint of its own section's colour: dense where the
   text is, lighter where the picture can show, and fading into the next
   section so the grounds still join. */
.live-section {
  background:
    linear-gradient(180deg, var(--selva) 0%, transparent 16%, transparent 78%, var(--selva) 100%),
    linear-gradient(90deg, rgba(8, 40, 35, 0.95) 0%, rgba(8, 40, 35, 0.78) 42%, rgba(8, 40, 35, 0.62) 62%, rgba(8, 40, 35, 0.86) 100%),
    url('/images/bg-stage.jpg') center 40% / cover no-repeat,
    var(--selva);
}
.contact-band {
  background:
    linear-gradient(180deg, rgba(242, 106, 75, 0.9), rgba(242, 106, 75, 0.8) 50%, rgba(242, 106, 75, 0.92)),
    url('/images/bg-contact.jpg') center / cover no-repeat,
    var(--coral);
}
footer {
  background:
    linear-gradient(180deg, var(--selva) 0%, rgba(12, 58, 51, 0.7) 30%, rgba(12, 58, 51, 0.86) 100%),
    url('/images/bg-leaves.jpg') center 30% / cover no-repeat,
    var(--selva);
}
.contact-cards { background: rgba(255, 244, 238, 0.08); }
@media (max-width: 760px) {
  .live-section {
    background:
      linear-gradient(180deg, var(--selva) 0%, rgba(8, 40, 35, 0.86) 14%, rgba(8, 40, 35, 0.8) 60%, var(--selva) 100%),
      url('/images/bg-stage-m.jpg') center / cover no-repeat,
      var(--selva);
  }
  .contact-band {
    background:
      linear-gradient(180deg, rgba(242, 106, 75, 0.9), rgba(242, 106, 75, 0.84)),
      url('/images/bg-contact-m.jpg') center / cover no-repeat,
      var(--coral);
  }
  footer {
    background:
      linear-gradient(180deg, var(--selva) 0%, rgba(12, 58, 51, 0.76) 25%, rgba(12, 58, 51, 0.88) 100%),
      url('/images/bg-leaves-m.jpg') center / cover no-repeat,
      var(--selva);
  }
}
/* The account pages keep their own photo behind a plain footer */
.page-account footer { background: rgba(8, 40, 35, .6); }

/* The carte on narrow screens: the grid may shrink below its widest row,
   names take what the price columns leave and wrap, and the columns keep a
   fixed width so every price sits under its heading */
@media (max-width: 1024px) { .menu-cols { grid-template-columns: minmax(0, 1fr); } }
.menu-cat.multi .menu-item .mi-name { flex: 1 1 0; min-width: 0; white-space: normal; overflow-wrap: break-word; }
.menu-cat.multi .menu-item .mi-dots { flex: 0 1 18px; min-width: 0; }
@media (max-width: 560px) {
  .menu-cat.multi { --pc: 58px; }
  .menu-cat.multi .menu-item .mi-dots { display: none; }
  .menu-cat.multi .menu-item.mi-head .mi-name { flex: 1 1 0; }
}

/* The full carte: rows whose titles line up, where a cell may stack short
   categories under one another (js/menu-page.js, HMenu.pack) instead of
   leaving a hole beside a long one. Columns match menu-page.js. */
.menu-page .menu-cols { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .menu-page .menu-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1500px) { .menu-page .menu-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.menu-stack > .menu-cat + .menu-cat { margin-top: clamp(30px, 3vw, 44px); }

/* Gabarito at medium weight where it carries the interface */
.nav-links a, .nav-right a, .nav-logo span, .btn, .book-float, .kicker, .hero-tag, .menu-tabs button,
.menu-item .mi-price, .aw-price, .footer-grid h4, .faq-list summary, .lang-switch button, .carte-lang button { font-weight: 500; }

/* Pictures on the carte: a small rounded square before the name, the same
   slot left empty on rows without one so names stay aligned */
.menu-cat.with-pics .menu-item:not(.mi-head) { align-items: center; padding: 6px 0; }
.menu-cat.with-pics .menu-item:not(.mi-head) .mi-dots { transform: none; }
.mi-pic { width: 48px; height: 48px; flex: none; margin-right: 4px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--cal-2); cursor: zoom-in; }
.mi-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s var(--ease); }
.mi-pic:hover img { transform: scale(1.08); }
.mi-pic.empty { background: transparent; cursor: default; }
.mi-head .mi-pic.empty { height: 1px; }
.menu-cat.with-pics .menu-item-desc { margin-left: 62px; margin-top: -4px; }
.pic-zoom { position: fixed; inset: 0; z-index: 140; display: grid; place-items: center; align-content: center; gap: 14px; padding: 24px; background: rgba(5, 24, 21, 0.92); cursor: zoom-out; }
.pic-zoom img { width: min(560px, 90vw); height: auto; border-radius: 20px; }
.pic-zoom p { font-family: var(--deco); font-weight: 500; font-size: 19px; color: var(--foam); text-align: center; }
@media (max-width: 560px) { .mi-pic { width: 42px; height: 42px; border-radius: 12px; } .menu-cat.with-pics .menu-item-desc { margin-left: 56px; } }
.pic-zoom p.pic-credit { font-family: var(--sans); font-weight: 400; font-size: 12px; opacity: 0.7; margin-top: -6px; }
.pic-zoom p.pic-credit a { color: inherit; text-decoration: underline; }

/* Carte density, with pictures. A name only ever breaks between words
   ("Beefeate / r" read as a typo), and the columns get the width a picture
   plus one or two prices need, so ordinary names stay on one line. */
.menu-item .mi-name, .menu-cat.multi .menu-item .mi-name { overflow-wrap: normal; word-break: normal; }
.menu-item { font-size: 16px; }
.mi-pic { width: 44px; height: 44px; border-radius: 13px; margin-right: 2px; }
.menu-cat.with-pics .menu-item-desc { margin-left: 56px; }
.menu-cat.multi { --pc: 58px; }
.menu-cat.multi .menu-item .mi-dots { flex: 0 1 12px; }
/* Home: the carte takes more of the section; the full carte widens on large screens */
@media (min-width: 1025px) {
  .menu-section:not(.menu-page) > .container { width: min(1380px, 92vw); }
  .menu-split { grid-template-columns: minmax(240px, 0.55fr) 1.85fr; gap: clamp(32px, 4vw, 64px); }
  .menu-split .menu-panel { padding: clamp(28px, 3vw, 42px); }
}
@media (min-width: 1500px) { .menu-page > .container { width: min(1500px, 92vw); } }
@media (max-width: 560px) {
  .mi-pic { width: 40px; height: 40px; border-radius: 12px; }
  .menu-cat.with-pics .menu-item-desc { margin-left: 50px; }
  .menu-item { gap: 8px; }
}
/* The home preview: two columns only where each can hold a picture, a name
   and its prices on one line */
@media (max-width: 1299px) { .menu-section:not(.menu-page) .menu-cols { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .menu-item { font-size: 15px; }
  .menu-item .mi-dots, .menu-cat.multi .menu-item .mi-dots { display: none; }
  .menu-cat.multi { --pc: 50px; }
}

/* ---------- Reservation: the card, after L'Artiste ---------- */
.reserve-section {
  padding: clamp(56px, 7vw, 96px) 0;
  background:
    radial-gradient(80% 60% at 85% 0%, rgba(31, 181, 168, 0.16), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(242, 106, 75, 0.12), transparent 70%),
    var(--selva);
}
.rsv-grid {
  width: min(1480px, 94vw);
  display: grid; gap: 28px; align-items: stretch;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
}
.rsv-card {
  --c-ink: var(--ink);
  --c-mute: #5d7a73;
  --c-line: rgba(11, 42, 37, 0.14);
  --c-bx: #0f7f75;
  --c-bx-dark: var(--selva);
  --c-field: #f1f6f3;
  min-width: 0; background: #fff; color: var(--c-ink);
  border-radius: 24px; padding: clamp(22px, 3vw, 38px);
  box-shadow: 0 34px 80px -34px rgba(2, 18, 15, 0.75);
}
.rsv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.rsv-card .rsv-kicker {
  margin: 0; font-family: var(--deco); font-size: 13px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--coral); line-height: 1;
}
.rsv-card .rsv-title { margin: 10px 0 0; color: var(--c-ink); font-size: clamp(30px, 3.2vw, 44px); line-height: 1.05; }
.rsv-card .rsv-sub { margin-top: 8px; max-width: none; font-size: 15px; line-height: 1.55; color: var(--c-mute); }
.rsv-card .prefill-note { color: var(--c-bx); margin-top: 6px; }

.rsv-lbl, .rsv-fl > span, .rsv-fl > label > span {
  display: block; font-family: var(--deco); font-size: 14px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--c-ink); padding: 0; margin: 0 0 7px;
}

/* Party size */
.rsv-guests { display: flex; flex-direction: column; align-items: flex-end; }
.rsv-guests .rsv-lbl { margin-bottom: 6px; }
.rsv-step {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px;
  border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-field);
}
.rsv-step button {
  width: 36px; height: 36px; border-radius: 50%; border: 0;
  background: #fff; color: var(--c-bx); font-size: 20px; line-height: 1;
  box-shadow: 0 0 0 1px var(--c-line); transition: background 0.25s, color 0.25s;
}
.rsv-step button:hover:not(:disabled) { background: var(--c-bx); color: #fff; }
.rsv-step button:disabled { opacity: 0.35; cursor: not-allowed; }
.rsv-step output {
  min-width: 112px; text-align: center; font-family: var(--deco); font-size: 15px; font-weight: 600;
  color: var(--c-ink); font-variant-numeric: tabular-nums;
}

/* Fields */
.rsv-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 16px; margin-top: 22px; }
.rsv-full { grid-column: 1 / -1; }
.rsv-fl { display: flex; flex-direction: column; min-width: 0; }
.rsv-fl.hidden { display: none; }
.rsv-in {
  width: 100%; height: 48px; padding: 0 14px;
  border: 1px solid var(--c-line); border-radius: 12px;
  background: var(--c-field); color: var(--c-ink);
  font-family: var(--sans); font-size: 15px; font-weight: 400;
  color-scheme: light; outline: none; transition: border-color 0.25s, background 0.25s;
}
.rsv-in::placeholder { color: rgba(51, 81, 75, 0.55); font-size: 14px; }
.rsv-in:focus { border-color: var(--turquesa); background: #fff; }
textarea.rsv-in { height: auto; min-height: 74px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.rsv-tel { position: relative; display: flex; gap: 8px; }
.rsv-flag-btn {
  flex: none; width: 112px; display: inline-flex; align-items: center; gap: 8px;
  padding: 0 12px; cursor: pointer; font-variant-numeric: tabular-nums; text-align: left;
}
.rsv-flag-btn::after {
  content: ''; margin-left: auto; width: 6px; height: 6px;
  border-right: 1.5px solid var(--c-bx); border-bottom: 1.5px solid var(--c-bx);
  transform: translateY(-2px) rotate(45deg);
}
.rsv-flag-btn[aria-expanded='true'] { border-color: var(--turquesa); background: #fff; }
.rsv-tel img { flex: none; width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }
.rsv-flag-pop {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(320px, 100%);
  padding: 8px; background: #fff; border: 1px solid var(--c-line); border-radius: 16px;
  box-shadow: 0 24px 50px -24px rgba(2, 18, 15, 0.55);
}
.rsv-flag-pop[hidden] { display: none; }
.rsv-flag-search {
  width: 100%; height: 40px; margin-bottom: 6px; padding: 0 12px;
  border: 1px solid var(--c-line); border-radius: 10px; background: var(--c-field);
  color: var(--c-ink); font-family: var(--sans); font-size: 14px; outline: none;
}
.rsv-flag-search:focus { border-color: var(--turquesa); }
.rsv-flag-pop ul { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow-y: auto; scrollbar-width: thin; }
.rsv-flag-pop li {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px; font-size: 14px; color: var(--c-ink); cursor: pointer;
}
.rsv-flag-pop li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rsv-flag-pop li b { font-weight: 500; color: var(--c-mute); font-variant-numeric: tabular-nums; }
.rsv-flag-pop li:hover, .rsv-flag-pop li.active { background: rgba(31, 181, 168, 0.12); }
.rsv-flag-pop li[aria-selected='true'] { font-weight: 600; }
.rsv-flag-pop li[hidden] { display: none; }
.rsv-tel input { flex: 1; min-width: 0; }

/* Day and hour */
.rsv-when { border: 0; padding: 0; margin: 20px 0 0; min-width: 0; }
.rsv-days {
  display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px;
  scrollbar-width: thin; scrollbar-color: var(--c-line) transparent; scroll-snap-type: x proximity;
}
.rsv-days button {
  flex: none; width: 66px; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 9px 4px; border: 1px solid var(--c-line); border-radius: 16px;
  background: var(--c-field); color: var(--c-ink); font-family: var(--sans);
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.rsv-days small { font-size: 11px; color: var(--c-mute); text-transform: capitalize; line-height: 1.3; white-space: nowrap; }
.rsv-days b { font-family: var(--deco); font-size: 22px; font-weight: 600; line-height: 1.15; }
.rsv-days button:hover:not(:disabled) { border-color: var(--turquesa); }
.rsv-days button[aria-pressed='true'] { background: var(--selva); border-color: var(--selva); color: #fff; }
.rsv-days button[aria-pressed='true'] small { color: rgba(255, 255, 255, 0.8); }
.rsv-days button:disabled { opacity: 0.4; cursor: not-allowed; }
.rsv-slots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rsv-slots:empty { display: none; }
.rsv-slots button {
  padding: 8px 15px; border: 1px solid var(--c-line); border-radius: 999px;
  background: #fff; color: var(--c-ink); font-family: var(--sans); font-size: 14px; font-variant-numeric: tabular-nums;
  transition: border-color 0.25s, background 0.25s, color 0.25s;
}
.rsv-slots button:hover { border-color: var(--turquesa); }
.rsv-slots button[aria-pressed='true'] { background: var(--selva); border-color: var(--selva); color: #fff; }
.rsv-hint { margin-top: 10px; font-size: 13.5px; color: var(--c-mute); }
.rsv-hint.warn { color: #b23a1f; font-weight: 600; }
.rsv-hint.done { color: var(--c-bx); font-weight: 600; }
.rsv-msg { margin-top: 16px; }

/* Footer: the promise on the left, the action on the right */
.rsv-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--c-line);
}
.rsv-card .form-note { margin: 0; text-align: left; font-size: 13.5px; line-height: 1.5; color: var(--c-mute); max-width: 46ch; }
.rsv-send { flex: none; }
.rsv-card .btn.solid { padding: 15px 30px; }
.rsv-card .btn.wa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; }
.rsv-card .form-msg { text-align: left; margin-top: 14px; }

/* Beside the form */
.rsv-aside { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.rsv-aside-title { font-family: var(--display); font-size: 27px; color: var(--foam); line-height: 1.2; }
.rsv-tiles { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rsv-tile {
  display: flex; align-items: flex-start; gap: 12px; height: 100%;
  padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 16px;
  background: rgba(243, 250, 246, 0.05); color: var(--foam);
  transition: border-color 0.3s, background 0.3s;
}
a.rsv-tile:hover { border-color: var(--turquesa); background: rgba(31, 181, 168, 0.1); }
.rsv-tile-ic { flex: none; width: 18px; margin-top: 3px; }
.rsv-tile-ic svg { width: 18px; height: 18px; fill: var(--turq-text); }
.rsv-tile > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.rsv-tile small { font-family: var(--deco); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--para); }
.rsv-tile b { margin-top: 3px; font-size: 14.5px; font-weight: 500; line-height: 1.4; color: var(--foam); overflow-wrap: anywhere; }
/* The photo only fills what the form leaves: absolutely placed, so its own
   height never stretches the row and leaves the card with space under it */
.rsv-photo { position: relative; flex: 1 1 0; min-height: 150px; margin: 0; border-radius: 20px; overflow: hidden; }
.rsv-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 980px) {
  .rsv-grid { grid-template-columns: 1fr; }
  .rsv-photo { display: none; }
}
@media (max-width: 600px) {
  .rsv-fields { grid-template-columns: 1fr; }
  .rsv-head { align-items: flex-start; }
  .rsv-guests { align-items: flex-start; }
  .rsv-foot { flex-direction: column; align-items: stretch; }
  .rsv-send .btn { width: 100%; }
  .rsv-tiles { grid-template-columns: 1fr; }
}

/* ---------- Le carnet du bar (blog) ---------- */
.blog-hero { min-height: 58vh; }
.blog-hero h1 { max-width: 18ch; }
.blog-meta { margin-top: 18px; font-family: var(--deco); font-size: 15px; color: var(--sol); }
.recipe-card { background: #fff; color: var(--ink); border-radius: 24px; padding: clamp(22px, 3vw, 36px); margin: 0 0 40px; }
.intent-body article .recipe-card h2 { color: var(--ink); margin: 0 0 14px; font-size: clamp(26px, 2.6vw, 34px); }
.recipe-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px !important; padding: 0; }
.recipe-meta li { margin: 0 !important; padding: 8px 14px; border-radius: 14px; background: var(--cal); display: grid; }
.recipe-meta small { font-family: var(--deco); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #0f7f75; }
.recipe-meta b { font-family: var(--deco); font-weight: 600; font-size: 15px; color: var(--ink); }
.recipe-cols { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; }
.recipe-cols h3 { font-family: var(--deco); font-weight: 600; font-size: 18px; color: var(--coral); margin-bottom: 10px; }
.intent-body article .recipe-cols ul, .intent-body article .recipe-cols ol { margin: 0 0 0 20px; color: var(--ink-para); }
.recipe-cols li { margin-bottom: 8px; line-height: 1.5; }
.recipe-cols ol li::marker { font-family: var(--deco); font-weight: 700; color: var(--coral); }
.bar-box { margin: 40px 0 10px; padding: clamp(22px, 3vw, 32px); border-radius: 24px; border: 1px solid var(--line); background: rgba(31, 181, 168, 0.08); }
.intent-body article .bar-box h2 { margin-top: 0; font-size: clamp(26px, 2.6vw, 34px); }
.bar-items { list-style: none; margin: 4px 0 14px !important; padding: 0; display: grid; gap: 2px; }
.bar-items li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); margin: 0 !important; }
.bar-items b { font-family: var(--deco); color: var(--sol); white-space: nowrap; }
.bar-links { font-family: var(--deco); margin: 0 !important; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; margin: 18px 0 10px; }
.blog-grid-index { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; }
.blog-card { display: grid; border-radius: 22px; overflow: hidden; background: var(--selva-2); border: 1px solid var(--line-soft); transition: border-color 0.3s, transform 0.3s var(--ease); }
.intent-body article a.blog-card { border-bottom: 1px solid var(--line-soft); color: inherit; }
.blog-card:hover { border-color: var(--turquesa); transform: translateY(-3px); }
.blog-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.blog-card-txt { display: grid; gap: 6px; padding: 16px 18px 18px; }
.blog-card-txt b { font-family: var(--display); font-weight: 400; font-size: 22px; color: var(--foam); line-height: 1.15; }
.blog-card-txt small { font-size: 14px; line-height: 1.5; color: var(--para); }
.blog-card-txt em { font-style: normal; font-family: var(--deco); font-size: 14px; color: var(--turq-text); margin-top: 4px; }
.blog-moderation { margin-top: 30px; font-size: 13px; color: var(--para); opacity: 0.8; }
.blog-aside-lead { color: var(--para); font-size: 15px; margin-bottom: 18px; }
.blog-index-foot { margin-top: 34px; color: var(--para); }
.blog-index-foot a { color: var(--turq-text); border-bottom: 1px solid var(--line); }
@media (max-width: 720px) {
  .recipe-cols { grid-template-columns: 1fr; gap: 18px; }
  .blog-hero { min-height: 52vh; }
}