/* Gaïa Glow design system.
   Gaia is the earth; Glow is the light it gives back. The page is a petal
   ground — white warmed a breath toward rose — with deep fig-plum ink where
   the evening bands fall, orchid as the first voice, eucalyptus sage as the
   second, and a thin gold light kept only for the glow itself: halos, the
   thread that closes a band, the shimmer under a link.

   Two motifs, owned by nobody else on this shelf: the halo (a ring of light
   behind whatever matters most) and the leaf (photographs cut on a leaf's
   diagonal — two opposite corners drawn round, two kept). Buttons are petals:
   three soft corners and one kept, so every press lands on something grown,
   not stamped. */

:root {
  --petale: #faf6f7;       /* petal white with a breath of rose: the page ground */
  --petale-2: #f2e9ec;     /* a deeper petal, for the quiet bands */
  --card: #fffdfb;         /* a clean porcelain plate: cards and panels */
  --ink: #33222f;          /* fig-plum ink: headings and the night bands' seed */
  --ink-soft: #4d3a48;
  --para: #6b5a64;         /* the paragraph voice: plum-grey */
  --orchid: #a4658c;       /* orchid: the first voice */
  --orchid-deep: #8a4f74;  /* the same orchid where small type needs contrast */
  --orchid-ink: #7c4468;   /* prices at 15px on petal clear 4.5:1 here */
  --lueur: #e2b96a;        /* the glow: kept for halos, threads and shimmer */
  --lueur-deep: #96702a;   /* the same gold where type must read on petal */
  --sauge: #6f7f63;        /* eucalyptus sage: the second voice */
  --sauge-deep: #4f5e45;
  --nuit: #2a1c27;         /* the fig night: the signature band */
  --nuit-deep: #1e131c;    /* the deepest fig, under the footer */
  --zest: rgba(164, 101, 140, 0.08);
  --line: rgba(51, 34, 47, 0.16);
  --line-soft: rgba(51, 34, 47, 0.09);
  --on-dusk: #f7ede9;      /* what reads on the night bands */
  --on-dusk-dim: #c9b3c0;
  --dusk-line: rgba(247, 237, 233, 0.18);
  --dusk-line-soft: rgba(247, 237, 233, 0.1);
  --ok: #2f7a52;
  --err: #b3403a;

  /* The two linen bands (the services and the hours) sit a shade warmer than
     the page, like a pressed cloth laid over it. */
  --paper: #f6ede9;
  --paper-2: #eedfd8;
  --ink-on-paper: #33222f;
  --para-on-paper: #6b5a64;
  --gold-on-paper: #8a4f74;
  --rule-on-paper: rgba(51, 34, 47, 0.18);

  /* Light. One wash per band, each anchored somewhere different: orchid where
     the flowers are, one patch of gold where the glow gets in. */
  --sun-tr: radial-gradient(70% 55% at 88% 0%, rgba(164, 101, 140, 0.07), transparent 70%);
  --sun-tl: radial-gradient(70% 55% at 12% 0%, rgba(226, 185, 106, 0.12), transparent 70%);
  --sun-bc: radial-gradient(85% 60% at 50% 100%, rgba(226, 185, 106, 0.1), transparent 72%);
  --verde-tl: radial-gradient(70% 55% at 8% 0%, rgba(111, 127, 99, 0.08), transparent 70%);

  --display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sans: 'Albert Sans', 'Segoe UI', system-ui, sans-serif;
  /* Great Vibes is the hand on the vanity mirror: the hero line, the note on
     the programme strip, the note beside the hours. Never in running text. */
  --script: 'Great Vibes', 'Segoe Script', cursive;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* The gold thread: a hairline of light that closes the signature band and
     the footer, brightest in the middle, gone at the edges. */
  --fil: linear-gradient(90deg, transparent, rgba(226, 185, 106, 0.25) 18%,
      var(--lueur) 50%, rgba(226, 185, 106, 0.25) 82%, transparent);

  /* A row of eucalyptus leaves drawn as light, for the edge of a night band. */
  --sprig: no-repeat center / auto 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10'%3E%3Cg fill='%23e2b96a'%3E%3Cellipse cx='12' cy='5' rx='7' ry='2.6' transform='rotate(-18 12 5)'/%3E%3Cellipse cx='36' cy='5' rx='7' ry='2.6' transform='rotate(14 36 5)'/%3E%3Cellipse cx='60' cy='5' rx='7' ry='2.6' transform='rotate(-12 60 5)'/%3E%3Cellipse cx='84' cy='5' rx='7' ry='2.6' transform='rotate(16 84 5)'/%3E%3Cellipse cx='108' cy='5' rx='7' ry='2.6' transform='rotate(-15 108 5)'/%3E%3C/g%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--petale);
  color: var(--para);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--orchid); color: #fff; }

:focus-visible { outline: 2px solid var(--orchid-deep); outline-offset: 3px; }

/* ---------- Typography ---------- */
/* Headings are Cormorant in sentence case: tall, calm, close-set, the way a
   perfume house letters its own name. Nothing shouts; the glow does. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

/* The eyebrow states a fact about the house, never a mood word, and it rides
   a hairline that runs out to the end of the measure. The heading sits under
   it, left. The house alternates left and centred heads through the page so
   it never reads as a template. */
.kicker {
  display: flex; align-items: center; gap: 20px;
  font-family: var(--sans); font-weight: 600;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--orchid-deep); line-height: 1;
}
/* A bud of gold opens each eyebrow before the hairline runs out */
.kicker::before {
  content: ''; flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lueur);
  box-shadow: 0 0 0 3px rgba(226, 185, 106, 0.22);
}
.section-head.center .kicker::before { display: none; }
.kicker::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.section-head.center .kicker::before { content: ''; flex: 1; height: 1px; background: var(--line); }

.section-title {
  font-size: clamp(34px, 4.2vw, 58px);
  margin: 22px 0 0;
  letter-spacing: -0.01em;
  text-transform: none;
  font-weight: 600;
  max-width: 24ch;
}
/* The halo: a ring of light rises behind every centred title */
.section-head.center { position: relative; }
.section-head.center::before {
  content: ''; position: absolute; left: 50%; top: -34px; z-index: -1;
  width: 190px; height: 190px; transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 185, 106, 0.16) 0%, rgba(226, 185, 106, 0.07) 48%, transparent 70%);
  pointer-events: none;
}
.section-head.center .section-title { max-width: none; }
.section-sub { color: var(--para); max-width: 58ch; font-size: 16px; margin-top: 20px; }
.section-head.center .section-sub { max-width: 66ch; }

.serif { font-family: var(--display); }

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

/* The side rail: the address, set vertically down the left edge the way it is
   printed down the spine of the carte. Desktop only. */
.side-rail {
  position: fixed; left: 20px; top: 50%; z-index: 40;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--sans); font-weight: 600;
  font-size: 10.5px; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--ink-soft); opacity: 0.45;
  pointer-events: none;
}
@media (max-width: 1480px) { .side-rail { display: none; } }

/* ---------- Buttons ---------- */
/* A button is a petal: three corners drawn round, one kept, so every press
   lands on something grown rather than stamped. The solid one is orchid; on
   hover it deepens to fig and lifts on a breath of gold light. */
.btn {
  display: inline-block;
  position: relative;
  z-index: 0;
  padding: 16px 40px;
  border: 0;
  border-radius: 26px 26px 26px 5px;
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  font-size: 11.5px;
  font-weight: 600;
  text-align: center;
  transition: background 0.4s var(--ease), color 0.4s var(--ease),
    transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.btn:hover {
  background: var(--ink);
  color: var(--petale);
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(51, 34, 47, 0.22), 0 2px 10px rgba(226, 185, 106, 0.25);
}

.btn.solid { background: var(--orchid); color: #fff8f4; box-shadow: none; }
.btn.solid:hover {
  background: var(--nuit);
  color: var(--petale);
  box-shadow: 0 12px 30px rgba(30, 19, 28, 0.3), 0 2px 10px rgba(226, 185, 106, 0.3);
}

.btn.ghost {
  background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line);
}
.btn.ghost:hover { background: var(--ink); color: var(--petale); box-shadow: none; }

.btn:disabled { opacity: 0.45; pointer-events: none; }

.btn.danger { background: var(--err); color: #fff; box-shadow: none; }
.btn.danger:hover { background: var(--ink); color: var(--petale); }

/* ---------- The bands ---------- */
/* A daylight page divides itself with shadow, not gilt: a soft hairline
   between bands, and each light band carrying its own wash of light anchored
   somewhere different. Two bands are night-glaze blue, and they close under
   a strip of drawn tiles. */
section, footer { position: relative; }
section + section::before,
.formule::before, .programme-section::before, footer::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 18%, var(--line) 82%, transparent);
  z-index: 2;
}
.hero::before { display: none; }

#about { background-image: var(--sun-tr); }
#spaces { background-image: var(--verde-tl); }
.programme-section { background-image: var(--sun-bc); }
.gallery-section { background: var(--petale-2); }

/* ---------- Paper ---------- */
/* The carte and the hours are printed things, so they sit on the cream of
   the printed menu: a sheet warmed a shade past the page, watermarked with
   the faintest tile grid. Fixed, so the two printed bands read as one sheet
   running behind the page. */
section.paper {
  background-color: var(--paper);
  background-image:
    radial-gradient(100% 68% at 50% -8%, rgba(255, 255, 255, 0.6), transparent 68%),
    radial-gradient(60% 40% at 85% 100%, rgba(164, 101, 140, 0.05), transparent 70%);
  background-repeat: no-repeat;
  color: var(--para-on-paper);
}
.paper::before {
  background: linear-gradient(90deg, transparent, var(--rule-on-paper) 18%, var(--rule-on-paper) 82%, transparent) !important;
}
.paper .kicker { color: var(--gold-on-paper); }
.paper .kicker::before, .paper .kicker::after { background: var(--rule-on-paper); }
.paper .section-title, .paper h1, .paper h2, .paper h3 { color: var(--ink-on-paper); }
.paper .section-sub, .paper p { color: var(--para-on-paper); }

.paper .menu-tabs button { border-color: var(--rule-on-paper); color: var(--para-on-paper); }
.paper .menu-tabs button.active { background: var(--ink-on-paper); border-color: var(--ink-on-paper); color: var(--paper); }
.paper .cat-head { border-bottom-color: var(--rule-on-paper); }
.paper .menu-cat h3 { color: var(--ink-on-paper); }
.paper .menu-cat-sub { color: var(--gold-on-paper); }
.paper .menu-item .mi-name { color: var(--ink-on-paper); }
.paper .menu-item .mi-price { color: var(--gold-on-paper); }
.paper .menu-item .mi-dots { border-bottom-color: rgba(51, 34, 47, 0.26); }
.paper .menu-item-desc { color: var(--para-on-paper); opacity: 0.9; }
.paper .menu-item.mi-head { border-bottom-color: var(--rule-on-paper); }
.paper .mi-was { color: var(--para-on-paper); }
.paper .mi-deal { color: #2f7a52; }

.paper .hours-list li { border-bottom-color: var(--rule-on-paper); }
.paper .hours-list .day { color: var(--ink-on-paper); }
.paper .hours-list .day-note { color: var(--gold-on-paper); }
.paper .hours-list .dots { border-bottom-color: rgba(51, 34, 47, 0.24); }
.paper .hours-list .time { color: var(--para-on-paper); }
.paper .hours-list .closed { color: #9c3a34; }
.paper .contact-lines { color: var(--para-on-paper); }
.paper .contact-lines strong { color: var(--gold-on-paper); }
.paper .contact-lines a:hover { color: var(--ink-on-paper); }
.paper #map { border-color: var(--rule-on-paper); }
.paper #map .leaflet-tile-pane { filter: sepia(0.18) saturate(0.78) brightness(1.02) contrast(0.96); }
.paper #map .leaflet-control-attribution { background: rgba(246, 237, 233, 0.8); color: var(--para-on-paper); }
.paper #map .leaflet-control-attribution a { color: var(--gold-on-paper); }
.paper #map .leaflet-bar a { background: var(--paper); color: var(--ink-on-paper); border-bottom-color: var(--rule-on-paper); }

/* On canvas the button keeps its own ink */
.paper .btn { background: var(--ink-on-paper); color: var(--paper); }
.paper .btn::after { border-color: rgba(246, 237, 233, 0.4); }
.paper .btn:hover { background: var(--orchid-deep); color: #fff8f4; }
.paper .btn.solid { background: var(--orchid); color: #fff8f4; }
.paper .btn.solid::after { border-color: rgba(47, 40, 18, 0.4); }
.paper .btn.solid:hover { background: var(--ink-on-paper); color: var(--paper); }
.paper .btn.solid:hover::after { border-color: rgba(246, 237, 233, 0.4); }
.paper ::selection { background: var(--ink-on-paper); color: var(--paper); }

/* ---------- Nav ---------- */
/* Over the hero the bar is glass over the photograph; once the page scrolls
   it becomes the ivory of the page, and the type flips to ink. */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 60;
  padding: 20px 0;
  transition: background 0.5s, padding 0.5s, box-shadow 0.5s;
}
.nav.scrolled {
  background: rgba(250, 246, 247, 0.94);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  padding: 10px 0;
  box-shadow: 0 1px 0 var(--line-soft), 0 12px 34px rgba(45, 28, 40, 0.08);
}
.nav.menu-open, .nav.scrolled.menu-open { backdrop-filter: none; -webkit-backdrop-filter: none; background: transparent; box-shadow: none; }
.nav .container { width: min(1580px, 94vw); }
.nav-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 26px; }
.nav-logo { justify-self: start; grid-column: 1; grid-row: 1; display: flex; align-items: center; }
/* The mark sits transparent, straight on the bar. Over the hero photograph a
   soft shadow lifts it off the picture; once the bar turns ivory on scroll the
   shadow is dropped and the logo reads on its own. */
.nav-logo img {
  height: 60px; width: auto; flex: none;
  filter: drop-shadow(0 2px 10px rgba(18, 10, 16, 0.55));
  transition: height 0.4s var(--ease), filter 0.4s var(--ease);
}
.nav.scrolled .nav-logo img { height: 48px; filter: none; }
.nav-links { display: flex; gap: 26px; align-items: center; list-style: none; grid-column: 2; grid-row: 1; justify-content: center; }
.nav-right { display: flex; gap: 16px; 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(--sans);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: #f7ede9;
  opacity: 0.95;
  text-shadow: 0 1px 10px rgba(19, 11, 17, 0.6);
  transition: opacity 0.35s, color 0.35s;
  position: relative;
  padding: 8px 0;
  display: inline-block;
}
.nav.scrolled .nav-links a, .nav.scrolled .nav-right a { color: var(--ink); text-shadow: none; }
/* The glow in miniature: a stem of gold light grows under the word, with a
   single leaf at its end. */
.nav-links a::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 2px; height: 7px;
  background: no-repeat center / auto 100%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath d='M8 5h70' stroke='%23e2b96a' stroke-width='1.2' stroke-linecap='round'/%3E%3Cellipse cx='86' cy='4' rx='6' ry='2.4' transform='rotate(-22 86 4)' fill='%23e2b96a'/%3E%3C/svg%3E");
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s var(--ease);
}
.nav-links a:hover { opacity: 1; color: var(--orchid); }
.nav.scrolled .nav-links a:hover { color: var(--orchid-deep); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-links > li > a, .nav-right > li > a { white-space: nowrap; }
.nav-cta { border: 1.5px solid rgba(247, 237, 233, 0.6); padding: 10px 22px !important; border-radius: 10px; }
.nav-cta:hover { background: var(--orchid); border-color: var(--orchid); color: #fff8f4 !important; }
.nav.scrolled .nav-cta { border-color: var(--line); }
.nav.scrolled .nav-cta:hover { background: var(--orchid); border-color: var(--orchid); color: #fff8f4 !important; }
.nav-cta::after { display: none; }

/* Two-state switch with the knob sliding under the active language */
.lang-switch {
  position: relative; display: flex; padding: 3px;
  border: 1px solid rgba(247, 237, 233, 0.35); border-radius: 10px;
}
.nav.scrolled .lang-switch { border-color: var(--line-soft); }
.lang-switch::before {
  content: ''; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px);
  background: var(--orchid);
  border-radius: 7px;
  transition: transform 0.4s var(--ease);
}
.lang-switch.on-fr::before { transform: translateX(100%); }
.lang-switch button {
  position: relative; z-index: 1; background: transparent; border: 0; color: #f7ede9;
  font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; padding: 6px 14px;
  transition: color 0.35s;
}
.nav.scrolled .lang-switch button { color: var(--para); }
.lang-switch button.active, .nav.scrolled .lang-switch button.active { color: #fff8f4; }

.burger { display: none; background: none; border: 0; width: 30px; height: 20px; 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: #f7ede9; transition: 0.4s var(--ease); }
.nav.scrolled .burger span { background: var(--ink); }
.nav.menu-open .burger span { background: var(--ink); }
.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 9px; }
.burger span:nth-child(3) { top: 18px; }
.burger.open span:nth-child(1) { top: 9px; transform: rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { top: 9px; transform: rotate(-45deg); }

/* ---------- Hero ---------- */
.hero {
  height: 100svh; min-height: 660px;
  position: relative; display: grid; place-items: center;
  text-align: center; overflow: hidden; padding: 0;
}
.hero-bg { position: absolute; inset: 0; background: var(--nuit-deep); }
.hero-bg video, .hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg img.kb { animation: drift 30s var(--ease) infinite alternate; }
@keyframes drift { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.11) translateY(-1.5%); } }
/* Held light on purpose: the film is the room and it is the point of the
   hero. A pool of shade under the words, a vignette, and a blue foot the
   next band can arrive out of. */
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(50% 44% at 50% 48%, rgba(20, 11, 18, 0.62), rgba(20, 11, 18, 0.28) 62%, transparent 80%),
    linear-gradient(180deg, rgba(20, 11, 18, 0.42) 0%, rgba(20, 11, 18, 0.06) 40%, rgba(42, 28, 39, 0.52) 100%);
}
.hero-content { position: relative; z-index: 2; padding: 0 24px; }
/* The studio's line, written in the hand — the one script moment on the
   page, arriving out of a ring of light. One orchestrated arrival, then
   nothing. */
.hero-script {
  font-family: var(--script);
  font-size: clamp(52px, 8vw, 116px);
  color: #fdf6f0;
  font-weight: 400;
  text-transform: none;
  line-height: 1.12;
  letter-spacing: 0.01em;
  max-width: 16ch;
  margin: 0 auto;
  text-shadow: 0 4px 40px rgba(18, 10, 16, 0.7), 0 0 70px rgba(226, 185, 106, 0.35);
}
/* The halo: a ring of gold light behind the words, breathing slowly */
.hero-halo {
  position: absolute; z-index: 1; left: 50%; top: 50%;
  width: min(620px, 80vw); aspect-ratio: 1;
  transform: translate(-50%, -54%);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 52%, rgba(226, 185, 106, 0.13) 62%, rgba(226, 185, 106, 0.28) 67%, rgba(226, 185, 106, 0.11) 73%, transparent 82%);
  animation: haloBreathe 7s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes haloBreathe {
  from { opacity: 0.65; transform: translate(-50%, -54%) scale(0.97); }
  to { opacity: 1; transform: translate(-50%, -54%) scale(1.03); }
}
.hero-tag {
  margin-top: 26px;
  font-family: var(--sans);
  color: #ecc98b;
  text-shadow: 0 2px 22px rgba(18, 10, 16, 0.8);
  font-size: clamp(11.5px, 1.25vw, 14px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5em;
  text-indent: 0.5em;
}
.hero-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-top: 46px; }
/* On the dark hero an ink outline disappears; the ghost twin reads in cream */
.hero-actions .btn:not(.solid) {
  color: #f7ede9;
  box-shadow: inset 0 0 0 1.5px rgba(247, 237, 233, 0.55);
  text-shadow: 0 1px 8px rgba(18, 10, 16, 0.5);
}
.hero-actions .btn:not(.solid):hover {
  background: rgba(247, 237, 233, 0.94); color: var(--ink);
  text-shadow: none;
}

.hero-content > * { opacity: 0; transform: translateY(24px); animation: heroIn 1.3s var(--ease) forwards; }
.hero-content > .hero-script { transform: translateY(24px); animation: heroTitleIn 1.5s var(--ease) forwards; }
.hero-content > *:nth-child(2) { animation-delay: 0.22s; }
.hero-content > *:nth-child(3) { animation-delay: 0.44s; }
.hero-content > *:nth-child(4) { animation-delay: 0.62s; }
@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(26px); filter: blur(5px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes navItemIn { to { opacity: 1; transform: none; } }

/* The hours: the two facts people look for, morning and midnight */
.hero-hours {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin-top: 38px;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.36em; text-indent: 0.36em;
  color: #ecc98b;
  text-shadow: 0 2px 18px rgba(18, 10, 16, 0.85);
}
.hero-hours i { display: block; width: 54px; height: 1px; background: currentColor; opacity: 0.55; }
@media (max-width: 700px) { .hero-hours { margin-top: 28px; letter-spacing: 0.26em; text-indent: 0.26em; } }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-70px); transition: opacity 1.3s var(--ease), transform 1.3s var(--ease); }
.reveal-left.visible { opacity: 1; transform: none; }
.reveal[data-delay='1'], .reveal-left[data-delay='1'] { transition-delay: 0.12s; }
.reveal[data-delay='2'], .reveal-left[data-delay='2'] { transition-delay: 0.24s; }
.reveal[data-delay='3'], .reveal-left[data-delay='3'] { transition-delay: 0.36s; }

/* ---------- The frame ---------- */
/* Photographs are cut on the leaf's diagonal: two opposite corners drawn
   round, two kept. A plate of porcelain for a frame, lifted on a soft
   shadow. Hover turns the leaf a breath, it never draws on the picture. */
.img-frame {
  position: relative; overflow: hidden;
  border-radius: 230px 18px 230px 18px;
  border: 8px solid var(--card);
  box-shadow: 0 18px 44px rgba(45, 28, 40, 0.16);
  transition: transform 0.7s var(--ease), box-shadow 0.7s var(--ease);
}
.img-frame img { transition: transform 1.4s var(--ease); border-radius: 222px 12px 222px 12px; }
.img-frame:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(45, 28, 40, 0.22); }
.img-frame:hover img { transform: scale(1.05); }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 92px); align-items: center; }
.about-images { position: relative; padding-bottom: 92px; }
.about-images .img-main { width: 80%; }
.about-images .img-accent {
  position: absolute; right: 0; bottom: 0; width: 50%;
  transform: rotate(2.2deg);
  border-radius: 18px 190px 18px 190px;
  box-shadow: 0 30px 64px rgba(45, 28, 40, 0.26);
}
.about-images .img-accent img { border-radius: 12px 182px 12px 182px; }
.about-images .img-accent:hover { transform: rotate(0.6deg) translateY(-4px); }
.about-text p { color: var(--para); margin: 26px 0; font-size: 16.5px; }

/* ---------- Menu ---------- */
.menu-section { background: var(--petale); }
.menu-tabs { display: flex; justify-content: center; gap: 10px; margin-bottom: 46px; }
.menu-tabs button {
  background: transparent; border: 1.5px solid var(--line); color: var(--para);
  border-radius: 22px 22px 22px 5px;
  padding: 13px 40px;
  font-family: var(--sans); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em; text-indent: 0.18em; font-size: 12px;
  transition: 0.4s var(--ease);
}
.menu-tabs button.active { border-color: var(--ink); color: var(--petale); background: var(--ink); }
.menu-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(38px, 4vw, 64px) clamp(44px, 6vw, 96px); align-items: start; }
@media (min-width: 1500px) { .menu-cols { grid-template-columns: repeat(3, 1fr); } }
/* min-width:0 stops a long, un-wrapping dish name from forcing its 1fr track
   wider than the container and blowing the whole grid past the page edge. */
.menu-cat { break-inside: avoid; min-width: 0; }
/* The carte's headings, set the way the printed carte sets them: the name in
   the slab over its column, the note under it in the hand, one rule closing
   the block. */
.cat-head {
  text-align: center;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.menu-cat h3 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
}
.menu-cat-sub {
  font-family: var(--display);
  font-style: italic;
  color: var(--orchid-deep);
  font-size: 15.5px;
  line-height: 1.4;
  margin: 6px 0 0;
}
.menu-item { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
/* Names wrap when they must: some dishes carry a gloss ("Khlii tagine with
   eggs · cured beef") that is far too long to hold on one line in a column. */
.menu-item .mi-name { font-family: var(--display); font-size: 16.5px; font-weight: 500; color: var(--ink); white-space: normal; overflow-wrap: anywhere; }
.menu-item .mi-dots { flex: 1; min-width: 18px; border-bottom: 1px dotted rgba(107, 90, 100, 0.4); transform: translateY(-5px); }
.menu-item .mi-price { font-family: var(--display); font-style: italic; color: var(--orchid-ink); font-size: 15.5px; white-space: nowrap; }
.menu-item-desc { color: var(--para); opacity: 0.82; font-size: 13.5px; margin: -4px 0 8px; max-width: 88%; }
.menu-actions { text-align: center; margin-top: 50px; }
.menu-page { padding-top: clamp(46px, 5vw, 76px); }
.menu-page .promo-notice { margin-bottom: 24px; }

/* Sold by the glass and by the bottle: one row, two price columns */
/* px, not em: the header row's font is smaller than the price rows', and an
   em width would give the two different columns. */
.menu-cat.two-way .mi-price { width: 132px; text-align: right; }
.menu-cat.two-way .mi-price.alt { width: 132px; }
.menu-item.mi-head .mi-price { white-space: nowrap; letter-spacing: 0.08em; }
.menu-item.mi-head { padding: 0 0 5px; border-bottom: 1px solid var(--line-soft); margin-bottom: 5px; }
.menu-item.mi-head .mi-price {
  font-family: var(--sans); font-weight: 600; font-style: normal;
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--para); opacity: 0.75;
}

/* ---------- The signature band ---------- */
/* The night bloom: the one band on the page that goes full fig, because the
   rituals are the studio's signature and night is when the glow shows. A
   thread of gold light closes its top edge, an orchid bloom opens in one
   corner, and the list sits on a plate of porcelain. */
.formule {
  background:
    radial-gradient(90% 80% at 85% 8%, rgba(226, 185, 106, 0.14), transparent 58%),
    radial-gradient(75% 85% at 8% 100%, rgba(164, 101, 140, 0.38), transparent 68%),
    linear-gradient(112deg, #46293c 0%, #35202f 46%, #241722 100%);
}
.formule::before {
  height: 1px;
  background: var(--fil) !important;
  top: -1px;
}
/* A row of drawn leaves under the thread, only on this band */
.formule::after {
  content: ''; position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  width: 120px; height: 10px; opacity: 0.8;
  background: var(--sprig);
}
.formule .kicker { color: var(--lueur); }
.formule .kicker::before { box-shadow: 0 0 0 3px rgba(226, 185, 106, 0.18); }
.formule .kicker::after { background: rgba(247, 237, 233, 0.25); }
.formule .section-title { color: #fdf6f0; }
.formule-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 7vw, 100px); align-items: center; }
.formule-copy .section-title { margin-bottom: 0; font-size: clamp(34px, 3.7vw, 54px); }
.formule-copy > p { color: rgba(247, 237, 233, 0.85); margin-bottom: 26px; max-width: 44ch; }
.formule-time {
  font-family: var(--script); font-size: 34px;
  color: var(--lueur); margin: 18px 0 !important;
}
.formule-copy .btn { margin-top: 8px; background: var(--orchid); color: #fff8f4; box-shadow: none; }
.formule-copy .btn:hover { background: var(--card); color: var(--ink); }
/* The board: an ivory tile with the glaze line inside it */
.formule-list {
  position: relative;
  background: var(--card);
  border-radius: 26px 26px 26px 6px;
  box-shadow: 0 26px 60px rgba(18, 10, 16, 0.45);
  padding: clamp(30px, 3.4vw, 46px) clamp(26px, 3vw, 42px);
}
.formule-list::after {
  content: ''; position: absolute; inset: 9px; pointer-events: none;
  border: 1px solid rgba(164, 101, 140, 0.3);
  border-radius: 20px 20px 20px 4px;
}
.fm-row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; }
.fm-name { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--ink); }
.fm-dots { flex: 1; border-bottom: 1px dotted rgba(107, 90, 100, 0.38); transform: translateY(-4px); }
.fm-price { font-family: var(--display); font-style: italic; font-size: 16px; color: var(--orchid-ink); white-space: nowrap; }
.formule-list .menu-item-desc { color: var(--para); }
@media (max-width: 900px) { .formule-inner { grid-template-columns: 1fr; } }

/* ---------- La semaine ---------- */
/* Seven days, read straight off the opening hours the owner keeps in the
   panel. A tide table more than a bill: the hours hold steady and the note
   under each day is the thing worth coming for. */
.programme-section { background: var(--petale); }
.programme-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--line-soft); border-right: 0;
  border-radius: 16px; overflow: hidden;
  background: var(--card);
  box-shadow: 0 16px 44px rgba(45, 28, 40, 0.08);
}
.prog-day {
  position: relative;
  border-right: 1px solid var(--line-soft);
  padding: 30px 18px 34px;
  text-align: center;
  transition: background 0.5s var(--ease);
}
.prog-day:hover { background: var(--zest); }
.prog-day.today { background: rgba(164, 101, 140, 0.08); }
.prog-day.today::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--orchid);
}
.prog-name {
  display: block; font-family: var(--sans); font-weight: 600; font-size: 11.5px;
  text-transform: uppercase; letter-spacing: 0.18em; text-indent: 0.18em;
  color: var(--ink);
}
.prog-hours { display: block; font-size: 12.5px; color: var(--para); opacity: 0.75; margin-top: 8px; letter-spacing: 0.06em; }
.prog-note {
  display: block; font-family: var(--script); font-size: 27px; line-height: 1.25;
  color: var(--orchid-deep); margin-top: 16px; min-height: 40px;
}
.prog-note:empty::before { content: '·'; opacity: 0.3; }
.prog-day.shut .prog-hours { color: var(--err); opacity: 0.9; }
@media (max-width: 1100px) { .programme-grid { grid-template-columns: repeat(4, 1fr); border-bottom: 0; } .prog-day { border-bottom: 1px solid var(--line-soft); } }
@media (max-width: 620px) { .programme-grid { grid-template-columns: repeat(2, 1fr); } .prog-note { font-size: 24px; } }

/* ---------- Spaces ---------- */
.spaces-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
/* Each room is a leaf, and the middle one turns the other way, the way
   leaves alternate on a stem. */
.space-card {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4.2;
  border-radius: 150px 18px 150px 18px;
  box-shadow: 0 16px 40px rgba(45, 28, 40, 0.14);
}
.space-card[data-delay='1'] { border-radius: 18px 150px 18px 150px; }
.space-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.space-card:hover img { transform: scale(1.07); }
.space-card::before {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, transparent 48%, rgba(33, 20, 30, 0.88));
}
.space-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 28px; z-index: 4;
  text-align: center;
  font-family: var(--sans); font-weight: 600;
  font-size: 13px; letter-spacing: 0.22em; text-indent: 0.22em; text-transform: uppercase; color: #f7ede9;
  text-shadow: 0 1px 12px rgba(18, 10, 16, 0.6);
}
.space-card figcaption small:empty { display: none; }
.space-card figcaption small {
  display: block;
  font-family: var(--script); font-weight: 400;
  font-size: 22px; letter-spacing: 0.02em; text-indent: 0; text-transform: none;
  color: #ecc98b; margin-top: 7px; line-height: 1.4;
}

/* ---------- Gallery ---------- */
/* Six pictures set like a wall of glazed tiles: the lead takes four cells,
   the rest one each, and the gaps read as grout. */
.gal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: calc((min(1200px, 90vw) - 28px) / 3 * 0.625);
  gap: 14px;
}
.gal-grid figure {
  position: relative; overflow: hidden; margin: 0; cursor: zoom-in;
  border-radius: 5px;
  box-shadow: 0 10px 30px rgba(45, 28, 40, 0.12);
}
.gal-grid figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gal-grid img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 1.2s var(--ease), filter 0.6s var(--ease);
}
.gal-grid figure:hover img { transform: scale(1.05); filter: saturate(1.08) brightness(1.04); }
@media (max-width: 760px) {
  .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: calc(45vw * 0.625); gap: 10px; }
  .gal-grid figure:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}

.lightbox {
  position: fixed; inset: 0; z-index: 90; background: rgba(26, 15, 23, 0.97);
  display: grid; place-items: center; opacity: 0; pointer-events: none; transition: opacity 0.4s;
}
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 90vw; max-height: 86vh; object-fit: contain; border-radius: 8px; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6); }
.lightbox button {
  position: absolute; background: none; border: 1.5px solid var(--dusk-line); color: var(--on-dusk);
  border-radius: 12px;
  width: 48px; height: 48px; font-size: 18px; transition: 0.35s; display: grid; place-items: center;
}
.lightbox button:hover { border-color: var(--orchid); color: var(--orchid); }
.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 / contact / map ---------- */
.info-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(40px, 5vw, 80px); align-items: stretch; }
.info-grid.no-map { grid-template-columns: 1fr; max-width: 640px; }
.hours-list { list-style: none; margin-top: 8px; }
.hours-list li { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line-soft); font-size: 15px; }
.hours-list .day-col { min-width: 160px; display: flex; flex-direction: column; gap: 3px; }
.hours-list .day { font-family: var(--sans); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; text-indent: 0.16em; font-size: 11.5px; color: var(--ink); }
.hours-list .day-note { font-family: var(--script); font-size: 22px; line-height: 1.2; color: var(--orchid-deep); }
.hours-list .dots { flex: 1; border-bottom: 1px dotted rgba(107, 90, 100, 0.32); transform: translateY(-4px); }
.hours-list .time { color: var(--ink-soft); letter-spacing: 0.06em; }
.hours-list .closed { color: var(--err); font-family: var(--display); font-style: italic; }
.contact-lines { margin-top: 30px; display: grid; gap: 12px; color: var(--para); font-size: 15px; }
.contact-lines a:hover { color: var(--orchid-deep); }
.contact-lines strong { color: var(--orchid-deep); font-weight: 500; }
#map { min-height: 440px; height: 100%; border: 1px solid var(--line); border-radius: 16px; z-index: 1; }
#map .leaflet-tile-pane { filter: sepia(0.14) saturate(0.85) brightness(1.02) contrast(0.97); }
#map .leaflet-control-attribution { background: rgba(250, 246, 247, 0.8); color: var(--para); }
#map .leaflet-control-attribution a { color: var(--orchid-deep); }
#map .leaflet-bar a { background: var(--card); color: var(--ink); border-bottom-color: var(--line); }
#map .leaflet-bar a:hover { background: var(--petale-2); color: var(--orchid-deep); }
.map-pin { position: relative; width: 22px; height: 22px; }
.map-pin::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--orchid); border: 3px solid var(--card);
  box-shadow: 0 2px 12px rgba(45, 28, 40, 0.4);
}
.map-pin::after {
  content: ''; position: absolute; inset: -12px; border-radius: 50%;
  border: 2px solid var(--orchid);
  animation: pin-pulse 2.4s 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: var(--card); color: var(--ink); border-radius: 10px; }
.leaflet-popup-content a { color: var(--orchid-deep); font-weight: 500; }

/* ---------- Reservation ---------- */
/* The room after dark: the photograph under a night-glaze veil, and the form
   on a plate of ivory in the middle of it. */
.reserve-section {
  background:
    linear-gradient(rgba(26, 15, 23, 0.8), rgba(22, 13, 20, 0.88)),
    url('../images/space-restaurant.jpg') center/cover fixed;
}
.reserve-panel {
  position: relative;
  max-width: 780px; margin: 0 auto;
  background: var(--card);
  border-radius: 28px 28px 28px 8px;
  color: var(--para);
  box-shadow: 0 34px 90px rgba(15, 9, 14, 0.5);
  padding: clamp(36px, 5vw, 68px);
}
.reserve-panel::after {
  content: ''; position: absolute; inset: 11px; pointer-events: none;
  border: 1px solid rgba(164, 101, 140, 0.22);
  border-radius: 22px 22px 22px 5px;
}
.reserve-panel > * { position: relative; z-index: 1; }
.reserve-panel .kicker { color: var(--orchid-deep); }
.reserve-panel .kicker::before, .reserve-panel .kicker::after { background: var(--line); }
.reserve-panel .section-title { color: var(--ink); }
.reserve-panel .section-sub, .reserve-panel .form-note { color: var(--para); }
.reserve-panel .prefill-note { color: var(--orchid-deep); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 38px; }
.form-field { display: grid; gap: 9px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-family: var(--sans); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; color: var(--orchid-deep); }
.form-field input, .form-field select {
  background: var(--petale);
  border: 1.5px solid var(--line-soft);
  color: var(--ink);
  padding: 15px 16px;
  font-family: var(--sans); font-size: 15px; font-weight: 400; letter-spacing: 0.02em;
  transition: border-color 0.35s;
  width: 100%; border-radius: 10px; appearance: none;
}
.form-field input:focus, .form-field select:focus { outline: none; border-color: var(--orchid); }
.form-field input::placeholder { color: rgba(107, 90, 100, 0.5); }
.form-field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--orchid-deep) 50%), linear-gradient(135deg, var(--orchid-deep) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%;
  background-size: 5px 5px; background-repeat: no-repeat;
}
.form-field select option { background: var(--card); color: var(--ink); }
.form-field input[type='date'], .form-field input[type='time'] { color-scheme: light; }
.phone-row { display: grid; grid-template-columns: 136px 1fr; gap: 10px; }
.form-note { color: var(--para); opacity: 0.85; font-size: 13px; margin-top: 20px; text-align: center; }
.form-submit { margin-top: 34px; text-align: center; }
.form-msg { margin-top: 20px; text-align: center; font-size: 14px; display: none; }
.form-msg.ok { display: block; color: var(--ok); }
.form-msg.err { display: block; color: var(--err); }
.field-note { display: block; margin-top: 7px; font-size: 12.5px; color: rgba(107, 90, 100, 0.7); letter-spacing: 0.02em; }
.prefill-note { color: var(--orchid-deep); font-size: 13px; margin-top: 12px; }

/* ---------- Footer ---------- */
/* The glazed night the evening ends on, closed under the tile strip. */
footer {
  background:
    radial-gradient(80% 70% at 12% 0%, rgba(164, 101, 140, 0.28), transparent 66%),
    var(--nuit-deep);
  color: var(--on-dusk-dim);
  padding: 90px 0 34px;
}
footer::before {
  height: 1px;
  background: var(--fil);
}
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 46px; margin-bottom: 54px; }
.footer-grid h4 {
  font-family: var(--sans); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.22em; text-indent: 0.22em;
  margin-bottom: 20px; color: var(--orchid);
}
.footer-grid p, .footer-grid a, .footer-grid li { color: var(--on-dusk-dim); font-size: 15.5px; line-height: 1.7; list-style: none; }
.footer-grid a:hover { color: var(--orchid); }
.footer-grid ul { display: grid; gap: 12px; }
.footer-logo {
  height: 62px; width: auto; margin-bottom: 20px;
  /* Transparent on the deep teal; a faint light halo keeps the darker part of
     the wordmark from sinking into the ground. */
  filter: drop-shadow(0 0 1px rgba(247, 237, 233, 0.55)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}
.socials { display: flex; gap: 14px; margin-top: 26px; }
/* The mark is the button. No frame, no tint, no filter: these are the
   official logos and they are recognised by their colour. */
.socials a {
  width: 46px; height: 46px; display: block; border-radius: 10px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.socials a img { width: 100%; height: 100%; object-fit: contain; display: block; }
.socials a:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); }
.footer-bottom {
  border-top: 1px solid var(--dusk-line-soft); padding-top: 28px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--on-dusk-dim); opacity: 0.9; font-size: 13.5px; letter-spacing: 0.05em;
}
.footer-bottom a:hover { color: var(--orchid); }

/* ---------- Subpages ---------- */
.page-hero { height: 50vh; min-height: 380px; display: grid; place-items: center; text-align: center; position: relative; overflow: hidden; padding: 0; }
.page-hero .hero-bg img { animation: none; }
.page-hero .hero-bg::after {
  background: linear-gradient(180deg, rgba(20, 11, 18, 0.6) 0%, rgba(20, 11, 18, 0.42) 45%, rgba(42, 28, 39, 0.75) 100%);
}
.hero-video { display: block; }
.page-hero .hero-video { filter: blur(3px) saturate(0.98); transform: scale(1.05); }
@media (prefers-reduced-motion: reduce), (max-width: 720px) {
  .hero-video { display: none; }
  .page-hero .hero-bg { background: url('../images/menu-hero-poster.jpg') center / cover no-repeat; }
}
.page-hero h1 { font-size: clamp(34px, 5vw, 60px); position: relative; z-index: 2; letter-spacing: 0.05em; text-transform: uppercase; color: #f7ede9; text-shadow: 0 6px 40px rgba(18, 10, 16, 0.6); }
.page-hero .kicker { position: relative; z-index: 2; color: #ecc98b; }
.page-hero .kicker::after, .page-hero .kicker::before { background: rgba(247, 237, 233, 0.3); }
.legal { max-width: 820px; margin: 0 auto; }
.legal h1 { letter-spacing: -0.01em; }
.legal h2 { font-family: var(--sans); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.26em; text-indent: 0.26em; margin: 48px 0 16px; color: var(--orchid-deep); font-weight: 600; }
.legal p, .legal li { color: var(--para); font-size: 15px; margin-bottom: 12px; }
.legal ul { padding-left: 20px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; top: 0; left: 50%; z-index: 120;
  transform: translate(-50%, -130%);
  display: flex; align-items: center; gap: 14px;
  width: min(620px, calc(100vw - 32px));
  margin-top: 16px; padding: 16px 22px;
  border-radius: 14px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(45, 28, 40, 0.3);
  font-size: 14.5px; font-weight: 400; line-height: 1.5;
  transition: transform .55s var(--ease), opacity .4s var(--ease);
  opacity: 0;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast::before {
  content: ''; flex: none; width: 4px; align-self: stretch; border-radius: 2px;
  background: var(--ok);
}
.toast.err::before { background: var(--err); }
.toast .toast-close {
  margin-left: auto; flex: none; background: none; border: 0; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--para); padding: 0 2px;
}
.toast .toast-close:hover { color: var(--ink); }
@media (max-width: 560px) { .toast { font-size: 13.5px; padding: 14px 16px; } }

/* ---------- Account ---------- */
.nav-auth {
  border: 1.5px solid rgba(247, 237, 233, 0.5); border-radius: 10px;
  padding: 10px 20px !important; letter-spacing: 0.18em; text-indent: 0.18em;
  transition: background .35s, color .35s, border-color .35s;
}
.nav.scrolled .nav-auth { border-color: var(--line); }
.nav-auth::after { display: none; }
.nav-auth:hover { background: var(--orchid); border-color: var(--orchid); color: #fff8f4 !important; }
.nav-auth.signed-in { border-color: var(--orchid); color: var(--orchid) !important; }
.nav.scrolled .nav-auth.signed-in { color: var(--orchid-deep) !important; border-color: var(--orchid-deep); }
.nav-auth.signed-in:hover { background: var(--orchid); border-color: var(--orchid); color: #fff8f4 !important; }

.page-account { background: var(--nuit-deep); }
.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(24, 14, 22, .66), rgba(24, 14, 22, .8) 55%, rgba(19, 11, 17, .92));
}
.page-account .nav {
  background: rgba(250, 246, 247, 0.95); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--line-soft); padding: 10px 0;
}
.page-account .nav .nav-links a, .page-account .nav .nav-right a { color: var(--ink); text-shadow: none; }
.page-account .nav .lang-switch { border-color: var(--line-soft); }
.page-account .nav .lang-switch button { color: var(--para); }
.page-account .nav .lang-switch button.active { color: #fff8f4; }
.page-account .nav .nav-auth { border-color: var(--line); }
.page-account .nav .burger span { background: var(--ink); }
.page-account .nav-logo img { height: 46px; filter: none; }
.account-main { padding: 96px 0 36px; min-height: 100vh; box-sizing: border-box; display: flex; align-items: center; }
.account-main > .container { width: 100%; }
.account-main section { padding: 0; }
.page-account footer { border-top: 1px solid var(--dusk-line-soft); background: rgba(19, 11, 17, .6); }
.page-account footer::before { display: none; }

.auth-wrap { display: flex; justify-content: center; width: 100%; }
.auth-card {
  position: relative;
  width: min(580px, 100%); background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 22px; padding: 34px 36px; text-align: center;
  box-shadow: 0 34px 80px rgba(15, 9, 14, 0.45);
}
.auth-card::after { content: ''; position: absolute; inset: 9px; pointer-events: none; border: 1px solid rgba(164, 101, 140, 0.16); border-radius: 18px 18px 18px 5px; }
.auth-card > * { position: relative; z-index: 1; }
.auth-logo { width: 150px; height: auto; margin: 0 auto 10px; display: block; }
.auth-card .section-title { font-size: 27px; margin: 0 0 6px; }
.auth-sub { color: var(--para); font-size: 13px; line-height: 20px; margin-bottom: 16px; }
.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(--sans); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--orchid-deep); margin-top: 8px;
}
.auth-form input {
  width: 100%; background: var(--petale); border: 1.5px solid var(--line-soft);
  border-radius: 10px; padding: 12px 13px; color: var(--ink);
  font-family: var(--sans); font-size: 14.5px;
}
.auth-form input:focus { outline: none; border-color: var(--orchid); }
.auth-form .btn { margin-top: 16px; width: 100%; }
.auth-form .btn.ghost { margin-top: 8px; }
.auth-hint { font-size: 10.5px; color: var(--para); opacity: 0.8; line-height: 16px; margin-top: 4px; }
.gender-row { display: flex; gap: 8px; }
.gender-row button {
  flex: 1; background: var(--petale); border: 1.5px solid var(--line-soft); border-radius: 10px;
  color: var(--para); padding: 10px 6px; font-size: 13px; font-family: var(--sans); transition: .3s;
}
.gender-row button:hover { border-color: var(--orchid); }
.gender-row button.active { border-color: var(--orchid); background: var(--zest); color: var(--orchid-deep); }
.auth-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-msg { font-size: 13px; min-height: 18px; margin-top: 8px; text-align: center; grid-column: 1 / -1; }
.auth-msg.err { color: var(--err); }
.auth-msg.ok { color: var(--ok); }
.auth-switch { font-size: 13px; color: var(--para); text-align: center; margin-top: 12px; grid-column: 1 / -1; }
.auth-switch a { color: var(--orchid-deep); text-decoration: underline; }
.pending-title { font-family: var(--display); font-size: 24px; font-weight: 600; margin-bottom: 8px; color: var(--ink); }

.auth-form select {
  width: 100%; background: var(--petale); border: 1.5px solid var(--line-soft);
  border-radius: 10px; padding: 12px 13px; color: var(--ink);
  font-family: var(--sans); font-size: 14.5px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--orchid-deep) 50%),
                    linear-gradient(135deg, var(--orchid-deep) 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:focus { outline: none; border-color: var(--orchid); }
.auth-form select option { background: var(--card); color: var(--ink); }

.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 .25s, opacity .25s;
}
.pw-eye svg { width: 21px; height: 21px; fill: currentColor; display: block; }
.pw-eye .eye-shut { display: none; }
.pw-eye.on { color: var(--orchid-deep); opacity: 1; }
.pw-eye.on .eye-open { display: none; }
.pw-eye.on .eye-shut { display: block; }
.pw-eye:hover { color: var(--ink); opacity: 1; }

.auth-form label.stay-row {
  display: flex; align-items: center; gap: 9px; margin-top: 12px;
  font-family: var(--sans); font-size: 13px; text-transform: none; letter-spacing: 0.01em;
  color: var(--para); cursor: pointer;
}
.stay-row input { width: 16px; height: 16px; accent-color: var(--orchid); 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: 13px; color: var(--orchid-deep); text-decoration: underline; white-space: nowrap; }
.forgot-link:hover { color: var(--ink); }
.birthday-note {
  font-size: 12px; color: var(--orchid-deep); margin-top: 10px; text-align: center;
  background: var(--zest); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 12px;
}

.member-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin: 28px 0 42px; }
.member-card {
  background: var(--card);
  border: 1px solid var(--line-soft); border-radius: 18px; padding: 28px;
  box-shadow: 0 20px 50px rgba(15, 9, 14, 0.35);
}
.member-card h3 { font-family: var(--display); font-size: 21px; font-weight: 600; margin-bottom: 8px; }
.member-card .btn { margin-top: 16px; width: 100%; text-align: center; }
.member-card .muted { color: var(--para); font-size: 14px; }

.fidelity-card { background: linear-gradient(140deg, var(--lueur), #d9a516 62%, #8a6a08); border: 0; }
.fidelity-card .kicker { display: block; margin-bottom: 8px; color: #5c4a10; }
.fidelity-card b { font-family: var(--display); font-size: 56px; font-weight: 600; color: #3a2b12; line-height: 1; }
.fidelity-card p { color: #4a3d13; font-size: 13px; margin-top: 12px; line-height: 20px; }
.fidelity-card.off b { color: #4a3d13; opacity: 0.6; }

.member-heading { font-family: var(--display); font-size: 24px; font-weight: 600; margin-bottom: 18px; color: #f7ede9; }
.res-list { display: grid; gap: 12px; }
.res-card {
  display: flex; align-items: center; gap: 18px; background: var(--card);
  border: 1px solid var(--line-soft); border-radius: 16px; padding: 17px 22px;
  box-shadow: 0 14px 36px rgba(15, 9, 14, 0.3);
}
.res-when { display: grid; min-width: 92px; }
.res-when b { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--orchid-deep); }
.res-when span { font-size: 12px; color: var(--para); opacity: 0.8; }
.res-meta { display: grid; flex: 1; }
.res-meta b { font-size: 14px; font-weight: 500; color: var(--ink); }
.res-meta span { font-size: 12px; color: var(--para); opacity: 0.7; }
.res-badge { font-family: var(--sans); font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em; text-indent: 0.14em; text-transform: uppercase; padding: 6px 13px; border-radius: 999px; border: 1.5px solid; }
.res-badge.pending { color: var(--orchid-deep); border-color: rgba(164, 101, 140, 0.5); }
.res-badge.confirmed { color: var(--ok); border-color: rgba(47, 122, 82, 0.5); }
.res-badge.cancelled { color: var(--err); border-color: rgba(179, 64, 58, 0.5); }

.hidden { display: none !important; }

/* ---------- Contact band ---------- */
/* The bar at night: the photograph under a night-glaze veil, one warm lamp
   of warm gold in the middle of it. */
.contact-band {
  position: relative; padding: 100px 0; overflow: hidden;
  background: url('/images/contact-bg.jpg') center/cover no-repeat fixed;
}
.contact-band::before {
  content: ''; position: absolute; inset: 0;
  /* height and z-index are load-bearing: the generic band divider sets every
     section's ::before to a 1px hairline at z-index 2, and without these the
     veil either collapses to that line or paints over the band's own type. */
  height: auto;
  z-index: 0;
  background: linear-gradient(180deg, rgba(24, 14, 22, .84), rgba(150, 112, 42, .45) 55%, rgba(24, 14, 22, .88));
}
.contact-band > .container { position: relative; z-index: 1; }
.contact-inner { text-align: center; max-width: 1080px; margin: 0 auto; }
.contact-inner .kicker { color: #ecc98b; }
.contact-inner .kicker::before, .contact-inner .kicker::after { background: rgba(247, 237, 233, 0.28); }
.contact-inner .section-title { font-size: clamp(36px, 4.8vw, 56px); color: #f7ede9; }
.contact-lead { color: rgba(247, 237, 233, 0.85); max-width: 620px; margin: 24px auto 44px; line-height: 27px; }

.contact-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(238px, 1fr)); gap: 14px; margin-bottom: 40px; }
.contact-card {
  display: flex; align-items: center; gap: 15px; text-align: left; text-decoration: none;
  background: rgba(250, 246, 247, 0.94); border: 0; border-radius: 16px;
  padding: 19px 21px;
  box-shadow: 0 14px 38px rgba(15, 9, 14, 0.35);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
a.contact-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(15, 9, 14, 0.45); }
.cc-icon {
  width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center;
  background: var(--zest); border: 1px solid rgba(164, 101, 140, 0.24);
}
.cc-icon svg { width: 16px; height: 16px; fill: var(--orchid-deep); }
.cc-body { display: grid; gap: 3px; min-width: 0; }
.cc-body small { font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orchid-deep); }
.cc-body b { font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }

.contact-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 32px; }
.contact-band .btn.ghost { color: #f7ede9; box-shadow: inset 0 0 0 1.5px rgba(247, 237, 233, 0.45); }
.contact-band .btn.ghost:hover { background: var(--card); color: var(--ink); box-shadow: none; }
.contact-band .socials { justify-content: center; }

/* ---------- Deals ---------- */
.deals-main { align-items: flex-start; padding-top: 120px; }
.deals-main .section-head { margin-bottom: 32px; }
.deals-main .section-head .section-title { color: #f7ede9; }
.deals-main .section-head .section-sub { color: rgba(247, 237, 233, 0.8); }
.deals-empty {
  background: var(--card); border: 1px solid var(--line-soft); border-radius: 18px;
  padding: 44px 32px; text-align: center; color: var(--para); max-width: 580px; margin: 0 auto;
  box-shadow: 0 20px 50px rgba(15, 9, 14, 0.35);
}
.deals-empty .contact-actions { margin-top: 24px; margin-bottom: 0; }
.deal-group { margin-bottom: 42px; }
.deal-group h2 { font-family: var(--sans); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.26em; text-indent: 0.26em; color: #ecc98b; font-weight: 600; margin-bottom: 18px; }
.deal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.deal-card {
  position: relative; display: flex; gap: 15px; align-items: center;
  background: var(--card); border: 1px solid rgba(164, 101, 140, .2); border-radius: 16px;
  padding: 15px;
  box-shadow: 0 14px 36px rgba(15, 9, 14, 0.3);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.deal-card:hover { transform: translateY(-3px); box-shadow: 0 22px 48px rgba(15, 9, 14, 0.4); }
.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-family: var(--display); font-size: 18px; font-weight: 600; margin-bottom: 3px; }
.deal-body p { color: var(--para); font-size: 12px; opacity: .8; margin-bottom: 7px;
  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 { font-family: var(--display); color: var(--orchid-deep); font-size: 18px; font-weight: 600; }
.deal-badge {
  position: absolute; top: 12px; right: 12px; background: var(--zest);
  color: var(--orchid-deep); border-radius: 999px; padding: 4px 11px;
  font-family: var(--sans); font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
}
.mi-was { color: var(--para); opacity: 0.55; margin-right: 10px; font-size: 0.92em; }
.mi-deal { color: var(--ok); font-weight: 500; font-style: normal; }
.nav-deals { color: var(--orchid) !important; }
.nav.scrolled .nav-deals { color: var(--orchid-deep) !important; }

/* ---------- Delete account ---------- */
.del-card { max-width: 660px; text-align: left; }
.del-card .section-title { text-align: center; }
.del-card .auth-sub { text-align: center; margin-bottom: 28px; }
.del-block { margin-bottom: 28px; }
.del-block h2 {
  font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; text-indent: 0.18em;
  color: var(--orchid-deep); margin-bottom: 12px; font-weight: 600;
}
.del-list { list-style: none; display: grid; gap: 9px; }
.del-list li { position: relative; padding-left: 20px; font-size: 14px; line-height: 1.6; color: var(--para); }
.del-list li::before { content: ''; position: absolute; left: 0; top: 10px; width: 7px; height: 2px; border-radius: 2px; background: var(--orchid); }
.del-note { font-size: 13px; color: var(--para); margin-top: 14px; line-height: 1.6; }
.del-or { margin-top: 22px; }
.del-app { border-top: 1px solid var(--line-soft); padding-top: 18px; margin-top: 24px; opacity: 0.85; }
.del-card .btn { width: 100%; margin-top: 12px; text-align: center; }

/* ---------- Time picker ---------- */
.timepick { position: relative; }
.timepick-btn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  background: var(--petale); border: 1.5px solid var(--line-soft); color: var(--para);
  padding: 15px 16px; font-family: var(--sans); font-size: 15px; font-weight: 400;
  letter-spacing: 0.02em; text-align: left; border-radius: 10px;
  transition: border-color 0.35s, color 0.35s;
}
.timepick-btn:hover, .timepick-btn.open { border-color: var(--orchid); }
.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(--orchid-deep);
  transition: transform 0.3s var(--ease);
}
.timepick-btn.open .tp-caret { transform: rotate(180deg); }
.timepick-btn svg { width: 16px; height: 16px; fill: var(--orchid-deep); flex: none; }
.timepick-panel {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 236px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 20px 46px rgba(45, 28, 40, 0.25);
}
.timepick-panel[hidden] { display: none; }
.timepick-slot {
  background: var(--petale); border: 1.5px solid transparent; color: var(--para);
  padding: 10px 4px; font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.04em;
  border-radius: 8px;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.timepick-slot:hover { background: var(--zest); color: var(--ink); border-color: var(--orchid); }
.timepick-slot.on { background: var(--ink); color: var(--petale); border-color: var(--ink); }
.timepick-panel::-webkit-scrollbar { width: 6px; }
.timepick-panel::-webkit-scrollbar-thumb { background: var(--line); 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(--petale); transition: opacity .3s ease;
}
.page-boot.gone { opacity: 0; pointer-events: none; }
.boot-mark { position: relative; width: 130px; height: 130px; display: grid; place-items: center; }
.boot-mark img { width: 86px; height: auto; }
.boot-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--line-soft); border-top-color: var(--lueur);
  animation: bootSpin 1s linear infinite;
}
@keyframes bootSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .boot-ring { animation-duration: 2.6s; } }

/* ---------- Marketing ---------- */
.promo-banner {
  position: fixed; inset: 0 0 auto 0; z-index: 70;
  background: var(--sauge-deep);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  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: #f4efe6; font-weight: 600;
  font-family: var(--sans); font-size: 13.5px; letter-spacing: 0.14em; text-decoration: none;
  text-transform: uppercase;
}
a.promo-banner-text:hover { color: #ecc98b; }
@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 { font-size: 13px; padding: 8px 14px; } }

.promo-notice {
  display: block; margin: 0 auto 28px; max-width: 660px;
  background: var(--sauge-deep); color: #f4efe6; font-weight: 600;
  border-radius: 12px; padding: 12px 28px;
  font-family: var(--sans); text-align: center; font-size: 13.5px; letter-spacing: 0.12em; text-transform: uppercase;
}
.promo-notice.hidden { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .spaces-grid { grid-template-columns: repeat(3, 1fr); }
  .menu-cols { grid-template-columns: 1fr; }
}
/* Six links plus the switch, the booking button and two account links do not
   fit a laptop bar. Below this the whole lot moves into the burger panel. */
@media (max-width: 1400px) {
  .nav-logo img { height: 48px; }
  .nav.scrolled .nav-logo img { height: 42px; }
  .nav-links {
    position: fixed; inset: 0; height: 100svh;
    background: var(--petale);
    flex-direction: column; justify-content: center; align-items: center; gap: 24px;
    /* clip-path rather than translateX: a translated full-screen panel widens
       the layout viewport and lets the page pan sideways on phones */
    clip-path: inset(0 0 0 100%);
    visibility: hidden;
    transition: clip-path 0.55s var(--ease), visibility 0s 0.55s;
    grid-column: auto; grid-row: auto; z-index: 65; list-style: none;
  }
  .nav-links.open { clip-path: inset(0); visibility: visible; transition: clip-path 0.55s var(--ease); }
  .nav-links a { font-size: 18px; letter-spacing: 0.3em; text-indent: 0.3em; color: var(--ink); text-shadow: none; }
  .nav-links .nav-cta { border: 1.5px solid var(--orchid); padding: 14px 30px !important; color: var(--orchid-deep); }
  .nav-links li { width: 100%; text-align: center; opacity: 0; transform: translateY(14px); }
  .nav-links .lang-switch { display: inline-flex; border-color: var(--line); }
  .nav-links .lang-switch button { color: var(--para); }
  .nav-links .lang-switch button.active { color: #fff8f4; }
  .nav-links.open li { animation: navItemIn 0.55s var(--ease) forwards; }
  .nav-links.open li:nth-child(1) { animation-delay: 0.08s; }
  .nav-links.open li:nth-child(2) { animation-delay: 0.14s; }
  .nav-links.open li:nth-child(3) { animation-delay: 0.2s; }
  .nav-links.open li:nth-child(4) { animation-delay: 0.26s; }
  .nav-links.open li:nth-child(5) { animation-delay: 0.32s; }
  .nav-links.open li:nth-child(6) { animation-delay: 0.38s; }
  .nav-links.open li:nth-child(7) { animation-delay: 0.44s; }
  .nav-links.open li:nth-child(8) { animation-delay: 0.5s; }
  .nav-right { display: none; }
  .nav-links .mobile-only { display: block; }
  .burger { display: block; }
  .nav-simple .nav-links {
    position: static; height: auto; background: none;
    flex-direction: row; clip-path: none; visibility: visible; gap: 18px; z-index: auto;
  }
  .nav-simple .nav-links li { opacity: 1; transform: none; }
  .nav-simple .nav-links a { font-size: 11px; letter-spacing: 0.18em; text-indent: 0.18em; }
}
@media (max-width: 900px) {
  .about-grid, .info-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  #map { min-height: 340px; }
  .footer-grid { grid-template-columns: 1fr; gap: 34px; }
  /* iOS ignores background-attachment: fixed; keep these bands readable */
  #menu.menu-section, .reserve-section, .contact-band, body { background-attachment: scroll; }
  section.paper { background-attachment: scroll, scroll; }
}
@media (min-width: 901px) { .nav-links .mobile-only { display: none; } }
@media (max-width: 560px) {
  .spaces-grid { grid-template-columns: 1fr; }
  .space-card { aspect-ratio: 16 / 11; }
  .hero-actions .btn { width: 100%; text-align: center; }
  .hero-tag { letter-spacing: 0.34em; text-indent: 0.34em; }
  .menu-item { flex-wrap: wrap; }
  .menu-item .mi-name { white-space: normal; max-width: 75%; }
  .menu-item .mi-dots { min-width: 20px; }
  .menu-cat.two-way .menu-item { flex-wrap: nowrap; align-items: baseline; }
  .menu-cat.two-way .mi-name { min-width: 0; max-width: none; flex: 1 1 auto; }
  .menu-cat.two-way .mi-dots { flex: 0 1 18px; min-width: 0; }
  .menu-cat.two-way .mi-price { flex: none; width: 82px; }
  .menu-cat.two-way .mi-price.alt { width: 82px; }
  .menu-cat.two-way .mi-head .mi-price { font-size: 8.5px; letter-spacing: 0.06em; }
}
@media (max-width: 720px) {
  .account-main { padding: 110px 0 50px; min-height: auto; }
  .nav-auth { padding: 8px 14px !important; font-size: 11px; }
  .auth-card { padding: 26px 20px; }
  #signupForm { grid-template-columns: 1fr; }
  .res-card { flex-wrap: wrap; gap: 10px; }
  .res-when { min-width: 70px; }
  .contact-band { padding: 72px 0; }
  .contact-cards { grid-template-columns: minmax(0, 1fr); }
  .contact-actions .btn { width: 100%; }
}
/* On a short screen, centring a tall card pushes it below the fold */
@media (max-height: 900px) { .account-main { align-items: flex-start; padding-top: 88px; } }

/* Someone who asked their system for less motion gets the content, not the
   choreography. Without this the page reads as blank until it animates in. */
@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 > * { opacity: 1; transform: none; }
  .hero video { display: none; }
}

/* ---------- The reserve badge ---------- */
/* Booking within reach at any depth of the page. The wording turns; the arch
   in the middle does not, which is the whole trick. The plate behind it is
   not decoration: the page runs light bands against night ones, and the
   badge crosses both. */
.reserve-badge {
  position: fixed; left: 34px; bottom: 34px; z-index: 55;
  width: 112px; height: 112px; display: grid; place-items: center;
}
.reserve-badge::before {
  content: ''; position: absolute; inset: 6px; border-radius: 50%;
  background: rgba(255, 253, 251, 0.92); border: 1px solid var(--line-soft);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 12px 34px rgba(45, 28, 40, 0.2);
}
.reserve-badge svg { position: absolute; inset: 0; animation: spin 14s linear infinite; }
.reserve-badge svg text {
  fill: var(--orchid-deep); font-family: var(--sans); font-weight: 600;
  font-size: 8.2px; letter-spacing: 0.3em; text-transform: uppercase;
}
.reserve-badge .badge-center { position: relative; display: grid; place-items: center; transition: transform 0.5s var(--ease); }
.reserve-badge .badge-center img { width: 58px; height: auto; }
.reserve-badge:hover .badge-center { transform: scale(1.09); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .reserve-badge svg { animation: none; }
}

@media (max-width: 1024px) {
  .reserve-badge { display: none; }
}

/* ---------- Booking switched off ---------- */
.bookings-off .reserve-section,
.bookings-off .nav-cta,
.bookings-off .reserve-badge,
.bookings-off a[href$="#reserve"],
.bookings-off li:has(> a[href$="#reserve"]) { display: none !important; }

.bookings-off .contact-actions .btn.ghost { margin: 0 auto; }

/* ---------- The carte's own language ---------- */
.carte-lang {
  display: flex; justify-content: center; gap: 0;
  margin: -26px 0 44px;
}
.carte-lang button {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 8px 16px; color: var(--para); opacity: .75;
  border-bottom: 2px solid transparent;
  transition: color .3s var(--ease), opacity .3s var(--ease), border-color .3s var(--ease);
}
.carte-lang button + button { border-left: 1px solid var(--line-soft); }
.carte-lang button:hover { opacity: 1; color: var(--ink); }
.carte-lang button.active { opacity: 1; color: var(--orchid-deep); border-bottom-color: var(--orchid); }
.paper .carte-lang button { color: var(--para-on-paper); }
.paper .carte-lang button + button { border-left-color: var(--rule-on-paper); }
.paper .carte-lang button:hover { color: var(--ink-on-paper); }
.paper .carte-lang button.active { color: var(--gold-on-paper); border-bottom-color: var(--gold-on-paper); }
@media (max-width: 560px) {
  .carte-lang { margin: -18px 0 32px; }
  .carte-lang button { padding: 8px 11px; font-size: 11px; letter-spacing: .1em; }
}

/* ---------- Booking taken on WhatsApp ---------- */
/* The same form, but the request leaves as a message. The button carries
   WhatsApp green rather than the house cobalt, because a guest recognises it
   before he reads it. */
.reserve-panel .btn.wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  background: #1fa855;
  color: #ffffff;
  text-decoration: none;
  text-indent: 0;
}

.reserve-panel .btn.wa-btn::after { border-color: rgba(255, 255, 255, 0.45); }

.reserve-panel .btn.wa-btn:hover,
.reserve-panel .btn.wa-btn:focus-visible { background: #157a3c; color: #fff; }

.reserve-panel .btn.wa-btn svg {
  width: 1.2em;
  height: 1.2em;
  fill: currentColor;
  flex: none;
  transition: fill 0.45s var(--ease);
}

/* Left clickable on purpose: the click handler names the missing field, which
   is more use than a button that cannot be pressed and does not say why. */
.reserve-panel .btn.wa-btn.incomplete { opacity: .5; }

/* ---------- The reels ---------- */
/* The studio's own Instagram films, right under the hero: a strip of
   phone-shaped cards cut like the leaf frames, quiet until tapped. */
.reels-section { background: var(--petale); padding-bottom: clamp(60px, 7vw, 100px); }
.reels-wrap { position: relative; }
.reels-track {
  display: flex; gap: 18px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 8px max(calc((100vw - 1200px) / 2), 5vw) 26px;
  scrollbar-width: none;
}
.reels-track::-webkit-scrollbar { display: none; }
.reel-card {
  position: relative; flex: none;
  width: clamp(200px, 22vw, 262px); aspect-ratio: 9 / 16;
  margin: 0; overflow: hidden;
  border-radius: 84px 16px 84px 16px;
  background: var(--nuit);
  box-shadow: 0 16px 40px rgba(45, 28, 40, 0.16);
  scroll-snap-align: center;
  cursor: pointer;
}
/* Leaves alternate on the stem here too */
.reel-card:nth-child(even) { border-radius: 16px 84px 16px 84px; }
.reel-card video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The play mark: a disc of petal light with the orchid triangle, floating in
   the middle of the card. It melts away while the film plays and returns on
   hover, so pausing is always within reach. */
.reel-toggle {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border: 0; border-radius: 50%;
  background: rgba(255, 253, 251, 0.9);
  box-shadow: 0 6px 24px rgba(30, 19, 28, 0.35), 0 0 0 6px rgba(226, 185, 106, 0.25);
  display: grid; place-items: center; cursor: pointer;
  transition: transform 0.35s var(--ease), opacity 0.35s var(--ease), background 0.35s;
}
.reel-toggle svg { width: 24px; height: 24px; fill: var(--orchid-deep); }
.reel-toggle .ic-pause { display: none; }
.reel-card.playing .reel-toggle { opacity: 0; }
.reel-card.playing:hover .reel-toggle { opacity: 1; background: rgba(255, 253, 251, 0.82); }
.reel-card.playing .reel-toggle .ic-play { display: none; }
.reel-card.playing .reel-toggle .ic-pause { display: block; }
.reel-toggle:hover { transform: translate(-50%, -50%) scale(1.08); }
.reels-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 46px; height: 46px; border: 0; border-radius: 50% 50% 50% 6px;
  font-size: 20px; line-height: 1; color: #fff8f4;
  cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(45, 28, 40, 0.2);
  transition: background 0.3s, transform 0.3s var(--ease);
}
/* Two colours on purpose: sage walks back, orchid walks on */
.reels-nav.prev { left: max(calc((100vw - 1300px) / 2), 10px); background: var(--sauge); }
.reels-nav.prev:hover { background: var(--sauge-deep); }
.reels-nav.next { right: max(calc((100vw - 1300px) / 2), 10px); border-radius: 50% 50% 6px 50%; background: var(--orchid); }
.reels-nav.next:hover { background: var(--orchid-deep); }
.reels-follow { text-align: center; margin-top: 6px; }
.reels-follow a {
  font-family: var(--script); font-size: 26px; color: var(--orchid-deep);
  transition: color 0.3s;
}
.reels-follow a:hover { color: var(--lueur-deep); }
@media (max-width: 700px) {
  .reel-card { width: 66vw; }
  .reels-nav { display: none; }
}

/* ---------- Picking services off the card ---------- */
/* The + that books a service: a small petal beside the price. Once picked it
   turns orchid and shows its check. */
.mi-add {
  flex: none; margin-left: 9px; vertical-align: middle;
  width: 24px; height: 24px; border: 1.5px solid var(--orchid-deep);
  border-radius: 50% 50% 50% 4px;
  background: transparent; color: var(--orchid-deep);
  font-size: 15px; line-height: 1; cursor: pointer;
  display: inline-grid; place-items: center;
  transition: background 0.25s, color 0.25s, transform 0.25s var(--ease);
}
.mi-add::before { content: '+'; font-weight: 600; margin-top: -1px; }
.mi-add:hover { transform: scale(1.12); }
.mi-add.on { background: var(--orchid-deep); color: #fff8f4; }
.mi-add.on::before { content: '✓'; font-size: 12px; }
.menu-item .mi-price { display: inline-flex; align-items: center; }
.menu-cat.two-way .mi-price { justify-content: flex-end; }

/* The basket bar: fixed to the foot of the services page, fig night over the
   petal page, always saying where the visitor stands. */
.cart-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(30, 19, 28, 0.96);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 1px solid rgba(226, 185, 106, 0.35);
  padding: 12px 0;
}
.cart-bar-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cart-state { color: var(--on-dusk); font-size: 14px; }
.cart-total { color: var(--lueur); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; }
.cart-bar .btn { margin-left: auto; padding: 13px 30px; }
.cart-bar .btn.disabled { opacity: 0.45; pointer-events: none; }
/* The bar must never cover the last services */
.menu-page { padding-bottom: 140px; }
@media (max-width: 560px) {
  .cart-bar-inner { gap: 8px; }
  .cart-state, .cart-total { font-size: 12.5px; }
  .cart-bar .btn { padding: 12px 20px; width: 100%; }
}

/* ---------- Chosen services in the booking panel ---------- */
.rsv-services { margin-top: 30px; }
.rsv-empty {
  text-align: center; background: var(--petale);
  border: 1px solid var(--line-soft); border-radius: 22px 22px 22px 5px;
  padding: 30px 26px;
}
.rsv-empty b { display: block; font-family: var(--display); font-size: 22px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.rsv-empty p { font-size: 14px; margin-bottom: 18px; }
/* The rule made visible: no services, no fields */
#reserveForm.no-services .form-grid,
#reserveForm.no-services .form-submit,
#reserveForm.no-services .form-note { display: none; }
.rsv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.rsv-head b { font-family: var(--display); font-size: 20px; font-weight: 600; color: var(--ink); }
.rsv-more { font-size: 13px; font-weight: 600; color: var(--orchid-deep); }
.rsv-more:hover { color: var(--ink); }
.rsv-row { display: flex; align-items: baseline; gap: 10px; padding: 7px 0; }
.rsv-name { font-family: var(--display); font-size: 16.5px; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.rsv-dots { flex: 1; min-width: 18px; border-bottom: 1px dotted rgba(107, 90, 100, 0.4); transform: translateY(-5px); }
.rsv-price { font-family: var(--display); font-style: italic; color: var(--orchid-ink); font-size: 15.5px; white-space: nowrap; }
.rsv-del {
  flex: none; align-self: center; width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: transparent; color: var(--para); font-size: 12px; cursor: pointer;
  display: grid; place-items: center; transition: background 0.25s, color 0.25s;
}
.rsv-del:hover { background: rgba(179, 64, 58, 0.12); color: var(--err); }
.rsv-total {
  display: flex; justify-content: space-between; gap: 12px;
  border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px;
}
.rsv-total b { font-family: var(--display); font-size: 18px; color: var(--ink); }
.rsv-total b:last-child { color: var(--orchid-deep); }
.rsv-note { font-size: 12px; color: var(--para); opacity: 0.75; margin-top: 6px; }


/* ---------- Nav dropdowns ---------- */
/* Each family in the bar opens on its services: name left, price right, and
   the door to the whole family at the foot. Hover on a mouse, focus on a
   keyboard; on the phone the family link itself is the way in. */
.nav-links li { position: relative; }
.nav-links li.has-drop > a {
  padding-right: 16px;
  background: no-repeat right center / 8px 5px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23e2b96a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.nav-drop {
  position: absolute; left: 50%; top: 100%; transform: translateX(-50%) translateY(8px);
  min-width: 300px; padding: 14px 10px 10px;
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 18px 18px 18px 4px;
  box-shadow: 0 24px 60px rgba(45, 28, 40, 0.18);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0s 0.3s;
  z-index: 70;
}
.nav-drop::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 12px; }
.nav-links li.has-drop:hover > .nav-drop,
.nav-links li.has-drop:focus-within > .nav-drop {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.nav-drop-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 18px;
  padding: 9px 14px; border-radius: 10px;
  font-family: var(--sans); font-size: 13px; font-weight: 500;
  color: var(--ink) !important; text-shadow: none !important;
  text-transform: none !important; letter-spacing: 0.01em !important; text-indent: 0 !important;
  transition: background 0.25s;
}
.nav-drop-link span { flex: 1 1 auto; min-width: 0; padding-right: 10px; }
.nav-drop-link b { flex: none; margin-left: auto; color: var(--orchid-deep); font-weight: 600; white-space: nowrap; font-size: 12px; }
.nav-drop-link:hover { background: var(--zest); }
.nav-drop-all {
  display: block; margin: 6px 6px 2px; padding: 10px 14px; text-align: center;
  border-top: 1px solid var(--line-soft);
  font-family: var(--sans) !important; font-size: 11px !important; font-weight: 600;
  letter-spacing: 0.16em !important; text-transform: uppercase !important;
  color: var(--orchid-deep) !important; text-shadow: none !important;
}
.nav-drop-all:hover { color: var(--ink) !important; }
/* The gold-stem underline belongs to the bar links, not the menu inside */
.nav-drop a::after { display: none !important; }
/* Inside the burger panel the dropdowns stand aside: each family link leads
   to its own page, which is the same list with pictures. */
@media (max-width: 1400px) { .nav-drop { display: none; } .nav-links li.has-drop > a { background: none; padding-right: 0; } }

/* ---------- The four families, home page ---------- */
.families-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.family-card {
  position: relative; overflow: hidden; aspect-ratio: 3 / 4;
  border-radius: 110px 16px 110px 16px;
  box-shadow: 0 16px 40px rgba(45, 28, 40, 0.14);
  display: block;
}
.family-card:nth-child(even) { border-radius: 16px 110px 16px 110px; }
.family-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.family-card:hover img { transform: scale(1.06); }
.fc-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(33, 20, 30, 0.9));
  transition: background 0.4s;
}
.fc-body {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 20px 24px;
  text-align: center; color: #f7ede9;
}
.fc-body b { display: block; font-family: var(--display); font-size: 27px; font-weight: 600; }
.fc-body small { display: block; font-size: 12.5px; color: #d9c4d0; margin-top: 5px; line-height: 1.45; }
.fc-body i {
  display: inline-block; margin-top: 12px; font-style: normal;
  font-family: var(--sans); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--lueur);
  border-bottom: 1px solid rgba(226, 185, 106, 0.5); padding-bottom: 3px;
  transition: color 0.3s, border-color 0.3s;
}
.family-card:hover .fc-body i { color: #fff8f4; border-color: #fff8f4; }
@media (max-width: 1024px) { .families-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .families-grid { grid-template-columns: 1fr; } .family-card { aspect-ratio: 4 / 3; } }

/* ---------- Family pages ---------- */
.fam-hero .hero-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(2px); transform: scale(1.05); }
.fam-page { padding-top: clamp(46px, 5vw, 76px); background: var(--petale); }
.fam-note { text-align: center; max-width: 60ch; margin: 0 auto 40px; color: var(--para); font-size: 15px; }
.svc-block { margin-bottom: clamp(48px, 6vw, 80px); }
.svc-block .section-head { margin-bottom: 28px; }
.svc-block .section-title { font-size: clamp(26px, 3vw, 38px); }
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.svc-card {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 20px 20px 20px 5px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(45, 28, 40, 0.08);
  display: flex; flex-direction: column;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 20px 46px rgba(45, 28, 40, 0.14); }
.svc-pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.svc-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.svc-card:hover .svc-pic img { transform: scale(1.05); }
.svc-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.svc-body h3 { font-family: var(--display); font-size: 19px; font-weight: 600; line-height: 1.25; }
.svc-body h3 a { color: var(--ink); }
.svc-body h3 a:hover { color: var(--orchid-deep); }
.svc-body p { font-size: 13px; color: var(--para); margin-top: 6px; }
.svc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; }
.svc-price { font-family: var(--display); font-style: italic; font-size: 17px; color: var(--orchid-ink); }
.svc-add {
  border: 1.5px solid var(--orchid-deep); background: transparent; color: var(--orchid-deep);
  border-radius: 18px 18px 18px 4px; padding: 8px 16px;
  font-family: var(--sans); font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  transition: background 0.25s, color 0.25s;
}
.svc-add:hover { background: var(--zest); }
.svc-add.on { background: var(--orchid-deep); color: #fff8f4; }
@media (max-width: 1024px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- Service page ---------- */
.svc-page { padding: 140px 0 140px; background: var(--petale); }
.svc-crumbs { font-size: 12.5px; letter-spacing: 0.06em; color: var(--para); margin-bottom: 26px; }
.svc-crumbs a { color: var(--orchid-deep); font-weight: 600; }
.svc-crumbs a:hover { color: var(--ink); }
.svc-detail { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(34px, 5vw, 70px); align-items: center; }
.svc-detail-pic { margin: 0; overflow: hidden; border-radius: 180px 18px 180px 18px; box-shadow: 0 22px 54px rgba(45, 28, 40, 0.18); aspect-ratio: 4 / 4.6; }
.svc-detail-pic img { width: 100%; height: 100%; object-fit: cover; }
.svc-detail-body .section-title { margin-top: 16px; }
.svc-detail-price { margin: 18px 0 10px; display: flex; align-items: baseline; gap: 14px; }
.svc-detail-price b { font-family: var(--display); font-style: italic; font-size: 32px; color: var(--orchid-deep); }
.svc-detail-price s { color: var(--para); opacity: 0.6; font-size: 18px; }
.svc-detail-desc { color: var(--para); font-size: 16px; max-width: 52ch; }
.svc-points { list-style: none; margin: 22px 0 28px; display: grid; gap: 9px; }
.svc-points li { position: relative; padding-left: 22px; font-size: 14px; color: var(--para); }
.svc-points li::before {
  content: ''; position: absolute; left: 0; top: 7px; width: 8px; height: 8px;
  border-radius: 50%; background: var(--lueur); box-shadow: 0 0 0 3px rgba(226, 185, 106, 0.22);
}
.svc-detail-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.svc-detail-actions .btn.solid.added { background: var(--sauge-deep); }
.svc-related-wrap { margin-top: clamp(60px, 8vw, 100px); }
@media (max-width: 900px) { .svc-detail { grid-template-columns: 1fr; } .svc-detail-pic { max-width: 420px; } }

/* ---------- About page ---------- */
.about-page { background: var(--petale); }
.about2-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.about2-lead { font-family: var(--display); font-size: 24px; line-height: 1.4; color: var(--ink); margin-bottom: 22px; }
.about2-text p { margin-bottom: 18px; font-size: 16px; }
.about2-pics { display: grid; gap: 22px; }
.about2-pics .img-frame.alt { border-radius: 18px 190px 18px 190px; width: 82%; justify-self: end; }
.about2-pics .img-frame.alt img { border-radius: 12px 182px 12px 182px; }
.about2-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.value-card {
  background: var(--card); border: 1px solid var(--line-soft);
  border-radius: 22px 22px 22px 5px; padding: 26px 24px;
  box-shadow: 0 12px 32px rgba(45, 28, 40, 0.08);
}
.value-card b { display: block; font-family: var(--display); font-size: 21px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.value-card p { font-size: 14px; color: var(--para); }
@media (max-width: 900px) { .about2-grid, .about2-values { grid-template-columns: 1fr; } }

/* ---------- The floating WhatsApp button ---------- */
/* Fixed to the lower right of every page, in WhatsApp's own green with the
   official mark: recognised before it is read. */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 85;
  display: flex; align-items: center; gap: 10px;
  background: #25d366; color: #ffffff;
  border-radius: 999px; padding: 13px 20px 13px 15px;
  font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
  box-shadow: 0 10px 30px rgba(18, 82, 47, 0.4);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s;
}
.wa-float:hover { transform: translateY(-3px); background: #1fbd5b; box-shadow: 0 16px 38px rgba(18, 82, 47, 0.48); }
.wa-float svg { width: 24px; height: 24px; fill: currentColor; flex: none; }
/* Above the basket bar wherever the bar exists */
body:has(.cart-bar) .wa-float { bottom: 86px; }
@media (max-width: 560px) {
  .wa-float span { display: none; }
  .wa-float { padding: 13px; }
  body:has(.cart-bar) .wa-float { bottom: 130px; }
}

/* More links than before need their entrance in the burger panel */
@media (max-width: 1400px) {
  .nav-links.open li:nth-child(9) { animation-delay: 0.54s; }
  .nav-links.open li:nth-child(10) { animation-delay: 0.58s; }
  .nav-links.open li:nth-child(11) { animation-delay: 0.62s; }
  .nav-links.open li:nth-child(12) { animation-delay: 0.66s; }
}