/* Pink Lounge, Agdal, Rabat
   Design system. Colours come from the client's kit, exactly:
   Rose Fuchsia #E6007E, Rose Doux #FFB6D9, Nude Chic #F8D7E5,
   Blanc Pur #FFFFFF, Noir Classique #000000.
   Jost is the closest web cousin of the kit's geometric lettering
   (« L'ART DE LA BEAUTÉ »): nav, titles, text and buttons.
   Hurricane is the closest web script to the « Pink Lounge » of the logo:
   overlines, family titles, review names, the modal title, the hero line.
   The motif is the drapé, the ribbon of fine lines under the logo and in the
   kit's corner. It is drawn on load in three places only: the hero, the
   closing band and the booking modal.
   Pills for buttons, 18px on photos and cards, the kit's pink discs behind icons.
   Nothing on this site is hidden on load: no opacity:0, no scroll reveal. */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* kit */
  --fuchsia: #E6007E;
  --rose: #FFB6D9;
  --nude: #F8D7E5;
  --blanc: #FFFFFF;
  --noir: #000000;
  /* derived, contrast measured */
  --nude-clair: #FDF1F6;      /* a lighter step of the nude, for cards on nude */
  --fuchsia-fonce: #B80065;   /* hover only */
  --texte: #1A1216;           /* body text: 17.9:1 on white, 13.4:1 on nude */
  --meta: #6E4A5C;            /* small text: 7.5:1 on white, 5.7:1 on nude */
  --filet: rgba(26, 18, 22, .12);
  --filet-fort: rgba(26, 18, 22, .55);
  --filet-rose: rgba(230, 0, 126, .35);
  --filet-clair: rgba(255, 255, 255, .28);

  --sans: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --script: "Hurricane", "Snell Roundhand", cursive;

  --wrap: 1220px;
  --gout: clamp(20px, 5vw, 56px);
  --section: clamp(76px, 9vw, 124px);
  --nav-h: 96px;
  --r: 18px;
  --t: .3s ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 16.5px;
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; }
figure, blockquote { margin: 0; }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gout); }
.section { padding: var(--section) 0; }
.section--nude { background: var(--nude); }

/* ------------------------------------------------------------ typography -- */
.h1, .h2, .h3 { margin: 0; font-family: var(--sans); font-weight: 300; color: var(--noir); letter-spacing: -.012em; }
.h1 { font-size: clamp(2.8rem, 5.8vw, 4.8rem); line-height: 1.04; }
.h2 { font-size: clamp(2.1rem, 3.8vw, 3.2rem); line-height: 1.1; }
.h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.25; font-weight: 400; }

/* the logo's script as an overline: never small, never tracked, never a paragraph */
.scr { display: block; margin: 0 0 4px; font-family: var(--script); font-weight: 400; font-size: clamp(2.5rem, 3.6vw, 3.1rem); line-height: 1; color: var(--fuchsia); }

/* the kit's tracked capitals, for small labels only */
.cap { font-family: var(--sans); font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--meta); }

.lead { margin: 20px 0 0; font-size: 1.08rem; font-weight: 300; line-height: 1.8; max-width: 54ch; }
.p { margin: 14px 0 0; max-width: 56ch; }

.tete-sec { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: clamp(40px, 5vw, 62px); }
.tete-sec .h2 { max-width: 22ch; }
.tete-sec .lead { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- boutons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; min-height: 52px;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent;
  font-family: var(--sans); font-size: .76rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--t), color var(--t), border-color var(--t);
}
.btn:focus-visible { outline: 2px solid var(--fuchsia); outline-offset: 3px; }
.btn--rose { background: var(--fuchsia); border-color: var(--fuchsia); color: var(--blanc); }
.btn--rose:hover { background: var(--noir); border-color: var(--noir); }
.btn--noir { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.btn--noir:hover { background: var(--fuchsia); border-color: var(--fuchsia); }
.btn--ligne { border-color: var(--noir); color: var(--noir); }
.btn--ligne:hover { background: var(--noir); color: var(--blanc); }
.btn--blanc { background: var(--blanc); border-color: var(--blanc); color: var(--noir); }
.btn--blanc:hover { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.btn--ligne-clair { border-color: rgba(255, 255, 255, .85); color: var(--blanc); }
.btn--ligne-clair:hover { background: var(--blanc); color: var(--noir); }

.lienfleche {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 30px;
  color: var(--noir); font-size: .76rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  padding-bottom: 7px; border-bottom: 1px solid var(--noir);
  transition: border-color var(--t), color var(--t);
}
.lienfleche svg { display: block; width: 22px; height: 10px; transition: transform var(--t); }
.lienfleche:hover { border-color: var(--fuchsia); color: var(--fuchsia); }
.lienfleche:hover svg { transform: translateX(6px); }

/* ------------------------------------------------------------------- nav -- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 36px;
  padding: 12px var(--gout);
  background: linear-gradient(to bottom, rgba(20, 0, 10, .55), rgba(20, 0, 10, .2) 65%, rgba(20, 0, 10, 0));
  transition: background-color var(--t), box-shadow var(--t), padding var(--t);
}
.nav.scrolled { background: var(--blanc); box-shadow: 0 1px 0 var(--filet); padding-top: 8px; padding-bottom: 8px; }

.nav__brand { position: relative; z-index: 120; justify-self: start; display: block; line-height: 0; }
/* the badge is 1000x994: the height is set, the width follows, never both */
.nav__logo { width: auto; height: 74px; max-width: none; border-radius: 50%; box-shadow: 0 2px 14px rgba(0, 0, 0, .22); transition: height var(--t), box-shadow var(--t); }
.nav.scrolled .nav__logo { height: 60px; box-shadow: none; }

.nav__links { display: flex; align-items: center; gap: clamp(22px, 2.6vw, 42px); }
.nav__links a {
  font-family: var(--sans); font-size: .8rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  color: var(--noir); text-decoration: none;
  padding: 5px 0; border-bottom: 1px solid transparent; transition: border-color var(--t), color var(--t);
}
.nav__links a:hover, .nav__links a.active { border-bottom-color: var(--fuchsia); }

.nav__end { position: relative; z-index: 120; justify-self: end; display: flex; align-items: center; gap: 14px; }
.nav__cta { padding: 12px 24px; min-height: 46px; font-size: .7rem; }
.nav__links .nav__cta--menu { display: none; }

.nav__burger {
  display: none; width: 48px; height: 48px; padding: 0; background: transparent;
  border: 1px solid rgba(255, 255, 255, .7); border-radius: 50%; cursor: pointer;
}
.nav__burger span { display: block; width: 18px; height: 1.5px; margin: 4px auto; background: var(--blanc); transition: transform var(--t), opacity var(--t); }
.nav.scrolled .nav__burger, .nav.menu-open .nav__burger { border-color: var(--filet-fort); }
.nav.scrolled .nav__burger span, .nav.menu-open .nav__burger span { background: var(--noir); }
.nav.menu-open .nav__burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav.menu-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.menu-open .nav__burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (min-width: 1081px) {
  .nav:not(.scrolled) .nav__links a { color: var(--blanc); }
  .nav:not(.scrolled) .nav__links a:hover, .nav:not(.scrolled) .nav__links a.active { border-bottom-color: var(--rose); }
}

/* ------------------------------------------------------------- le drapé ---- */
/* the ribbon of lines under the logo. It is revealed left to right on the
   whole svg: a clip-path on an inner path makes Chrome drop the path. */
.drape { display: block; width: 100%; height: auto; overflow: visible; }
.drape-trace { animation: drape-trace 2.2s .3s cubic-bezier(.55, .1, .2, 1) both; }
@keyframes drape-trace { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  min-height: 640px; min-height: clamp(640px, 100vh, 1000px); min-height: clamp(640px, 100svh, 1000px);
  background: #3A1026 center / cover no-repeat;
}
.hero__media { position: absolute; inset: 0; }
.hero__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 56% at 50% 52%, rgba(30, 4, 18, .62), rgba(30, 4, 18, .32) 72%, rgba(30, 4, 18, .24)),
    linear-gradient(to top, rgba(30, 4, 18, .45), rgba(30, 4, 18, 0) 36%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: 980px; margin: 0 auto; padding: calc(var(--nav-h) + 24px) var(--gout) 76px; text-align: center; }
/* the kit's neon: white script with a fuchsia glow */
.hero__titre {
  margin: 0; font-family: var(--script); font-weight: 400; color: var(--blanc);
  font-size: clamp(4.4rem, 11vw, 9.2rem); line-height: .92; letter-spacing: 0;
  text-shadow: 0 0 2px rgba(255, 182, 217, .8), 0 0 20px rgba(230, 0, 126, .75), 0 0 46px rgba(230, 0, 126, .4), 0 3px 26px rgba(0, 0, 0, .35);
}
.hero__drape { width: min(620px, 86vw); margin: 6px auto 0; color: var(--rose);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent); }
.hero__drape .drape { height: 92px; }
.hero__sub { margin: 18px auto 0; max-width: 40ch; color: var(--blanc); font-size: 1.14rem; font-weight: 300; line-height: 1.7; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 34px; }

/* the text rises into place; it is never transparent at any point */
.monte { animation: monte .9s cubic-bezier(.2, .7, .2, 1) both; }
.monte--2 { animation-delay: .12s; }
.monte--3 { animation-delay: .24s; }
@keyframes monte { from { transform: translateY(16px); } to { transform: none; } }

/* ------------------------------------------------------------- tete de page -- */
.tete { position: relative; min-height: 56vh; min-height: 56svh; display: flex; align-items: flex-end; overflow: hidden; background: #3A1026; }
.tete__media { position: absolute; inset: 0; }
.tete__media img { width: 100%; height: 100%; object-fit: cover; }
.tete::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(30, 4, 18, .74) 0%, rgba(30, 4, 18, .44) 42%, rgba(30, 4, 18, .06) 78%),
    linear-gradient(to bottom, rgba(20, 0, 10, .45), rgba(20, 0, 10, 0) 34%);
}
.tete__inner { position: relative; z-index: 2; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 150px var(--gout) clamp(46px, 5vw, 72px); }
.tete .scr { color: var(--rose); }
.tete .h1 { color: var(--blanc); max-width: 16ch; }
.tete__sub { margin: 16px 0 0; max-width: 50ch; color: var(--blanc); font-size: 1.08rem; font-weight: 300; text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }

/* ------------------------------------------------------------ bandeau faits -- */
.faits { background: var(--nude); }
.faits__row { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fait { display: flex; align-items: flex-start; gap: 14px; padding: 30px clamp(16px, 2.2vw, 30px); }
.fait + .fait { border-left: 1px solid var(--filet-rose); }
.fait svg { display: block; flex: none; width: 22px; height: 22px; color: var(--fuchsia); margin-top: 2px; }
.fait__k { margin: 0 0 3px; }
.fait__v { margin: 0; font-size: 1.04rem; line-height: 1.45; color: var(--noir); }
.fait__v a { text-decoration: none; }
.fait__v a:hover { color: var(--fuchsia-fonce); }

/* --------------------------------------------------------------- le salon -- */
.salon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(44px, 7vw, 110px); align-items: center; }
.salon__media { position: relative; justify-self: center; width: 100%; max-width: 440px; padding: 34px 34px 0 0; }
/* the logo's circle, in the kit's nude, behind the photo */
.salon__media::before { content: ""; position: absolute; right: 0; top: 0; width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--nude); }
.salon__photo { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r); }

/* -------------------------------------------------- index des prestations -- */
.index { border-top: 1px solid var(--filet-fort); }
.index__row {
  position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: clamp(16px, 2.6vw, 36px); align-items: center;
  padding: clamp(20px, 2.4vw, 28px) 0; border-bottom: 1px solid var(--filet); text-decoration: none; color: var(--noir);
  transition: padding-left .35s ease;
}
.index__row:hover { padding-left: 14px; }
/* the kit's service icons: a fuchsia line drawing on a pink disc */
.ico { display: flex; align-items: center; justify-content: center; flex: none; width: 72px; height: 72px; border-radius: 50%; background: var(--nude); }
.section--nude .ico { background: var(--blanc); }
.ico svg { display: block; width: 40px; height: 40px; color: var(--fuchsia); }
.index__nom { margin: 0; font-family: var(--sans); font-weight: 400; font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.2; }
.index__det { margin: 4px 0 0; color: var(--meta); font-size: .96rem; line-height: 1.55; max-width: 52ch; }
.index__prix { display: inline-flex; align-items: center; gap: 12px; font-size: 1.12rem; white-space: nowrap; }
.index__prix i { font-style: normal; font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--meta); }
.index__prix svg { display: block; width: 20px; height: 9px; transition: transform .3s ease; }
.index__row:hover .index__prix svg { transform: translateX(6px); }
.index__vue {
  position: absolute; right: 200px; top: 50%; width: 180px; height: 240px; transform: translateY(-50%) scale(.94); opacity: 0;
  pointer-events: none; border: 6px solid var(--blanc); border-radius: var(--r); box-shadow: 0 18px 44px rgba(60, 0, 30, .22); overflow: hidden;
  transition: opacity .35s ease, transform .35s ease;
}
.index__vue img { width: 100%; height: 100%; object-fit: cover; }
.index__row:hover .index__vue { opacity: 1; transform: translateY(-50%) scale(1); }
@media (hover: none) { .index__vue { display: none; } }
.index__pied { margin-top: 36px; text-align: center; }

/* -------------------------------------------------------------- galerie ---- */
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.tuiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tuile { position: relative; display: block; overflow: hidden; border-radius: var(--r); background: var(--nude); text-decoration: none; color: var(--blanc); }
.tuile__m { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .7s ease; }
.tuile:hover .tuile__m { transform: scale(1.04); }
.tuile__badge { position: absolute; top: 12px; right: 12px; z-index: 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(255, 255, 255, .94); }
.tuile__badge svg { display: block; width: 11px; height: 11px; fill: var(--fuchsia); margin-left: 2px; }
.tuile__leg {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 48px 18px 14px;
  background: linear-gradient(to top, rgba(30, 4, 18, .78), rgba(30, 4, 18, 0));
  font-size: 1.04rem; line-height: 1.3;
}
.tuile__leg small { display: block; margin-top: 3px; font-size: .6rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--rose); }
.tuile:focus-visible { outline: 2px solid var(--fuchsia); outline-offset: 3px; }
.tuiles__pied { margin-top: 38px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 36px; }
.ig-compte { display: inline-flex; align-items: center; gap: 10px; font-size: .84rem; font-weight: 500; letter-spacing: .06em; text-decoration: none; }
.ig-compte svg { display: block; width: 19px; height: 19px; color: var(--fuchsia); }
.ig-compte:hover { color: var(--fuchsia-fonce); }

/* the player: their reels, loaded only when opened */
.lect { position: fixed; inset: 0; z-index: 150; display: flex; align-items: center; justify-content: center; padding: 24px;
  visibility: hidden; opacity: 0; transition: opacity .3s ease, visibility 0s linear .3s; }
.lect.is-open { visibility: visible; opacity: 1; transition: opacity .3s ease, visibility 0s; }
.lect__fond { position: fixed; inset: 0; background: rgba(20, 2, 12, .9); }
.lect__carte { position: relative; display: grid; grid-template-columns: auto minmax(0, 340px); grid-template-rows: minmax(0, 1fr);
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); background: var(--noir); border-radius: var(--r); overflow: hidden; }
.lect__media { position: relative; background: #000; height: min(calc(100vh - 50px), 760px); height: min(calc(100dvh - 50px), 760px); aspect-ratio: 9 / 16; min-height: 0; }
.lect__media video, .lect__media img { width: 100%; height: 100%; object-fit: contain; background: #000; }
.lect__info { min-height: 0; overflow-y: auto; padding: 58px 32px 30px; display: flex; flex-direction: column; color: var(--blanc); }
.lect__k { font-size: .64rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--rose); }
.lect__titre { margin: 4px 0 0; font-family: var(--script); font-size: 3.4rem; line-height: 1; }
.lect__lien { margin-top: 22px; align-self: flex-start; color: var(--blanc); border-color: var(--filet-clair); }
.lect__lien:hover { border-color: var(--rose); color: var(--rose); }
.lect__actions { margin-top: auto; padding-top: 30px; }
.lect__actions .btn { width: 100%; }
.lect__nav { display: flex; gap: 10px; margin-top: 12px; }
.lect__nav button { flex: 1; min-height: 44px; border: 1px solid var(--filet-clair); border-radius: 999px; background: transparent; color: var(--blanc); cursor: pointer;
  font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.lect__nav button:hover { border-color: var(--rose); color: var(--rose); }
.lect__x { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--filet-clair); border-radius: 50%;
  background: rgba(0, 0, 0, .55); color: var(--blanc); cursor: pointer; }
.lect__x svg { display: block; width: 16px; height: 16px; }
.lect__x:hover { border-color: var(--rose); color: var(--rose); }
body.lect-open { overflow: hidden; }

/* ------------------------------------------------------------------ avis --- */
.avis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.avi { display: flex; flex-direction: column; padding: 30px 28px 24px; border-radius: var(--r); background: var(--nude-clair); }
.avi__guil { display: block; width: 30px; height: 22px; color: var(--fuchsia); margin-bottom: 14px; }
.avi p { margin: 0 0 18px; font-size: 1rem; font-weight: 300; line-height: 1.7; }
.avi cite { margin-top: auto; font-family: var(--script); font-style: normal; font-size: 2.3rem; line-height: 1; color: var(--fuchsia); }

/* ------------------------------------------------------------ bande de fin --- */
.fin { position: relative; overflow: hidden; isolation: isolate; background: var(--fuchsia); color: var(--blanc); }
/* the kit's lines, crossing the band and bleeding off both edges */
.fin__drape { position: absolute; z-index: -1; left: -4%; right: -4%; bottom: -6%; color: var(--rose); opacity: .75;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.fin__drape .drape { height: clamp(150px, 20vw, 260px); }
.fin__drape--g { top: -8%; bottom: auto; rotate: 180deg; opacity: .4; }
.fin__in { max-width: 860px; margin: 0 auto; padding: clamp(78px, 9vw, 118px) var(--gout); text-align: center; }
.fin .scr { color: var(--blanc); }
.fin .h2 { color: var(--blanc); }
.fin .lead { margin-left: auto; margin-right: auto; color: var(--blanc); }
.fin .hero__cta { margin-top: 32px; }

/* ----------------------------------------------------------- prestations --- */
.sommaire { position: sticky; top: 76px; z-index: 40; background: var(--nude); }
.sommaire__in { max-width: var(--wrap); margin: 0 auto; padding: 12px var(--gout); display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.sommaire__in::-webkit-scrollbar { display: none; }
.sommaire a { flex: none; padding: 9px 18px; border: 1px solid var(--filet-rose); border-radius: 999px; background: var(--blanc); font-size: .82rem; font-weight: 500; letter-spacing: .04em; text-decoration: none; white-space: nowrap; transition: background-color var(--t), color var(--t), border-color var(--t); }
.sommaire a:hover { background: var(--fuchsia); border-color: var(--fuchsia); color: var(--blanc); }

.famille { scroll-margin-top: calc(var(--nav-h) + 50px); display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; padding: clamp(54px, 6vw, 84px) 0; border-top: 1px solid var(--filet); }
.famille:first-child { border-top: 0; padding-top: 0; }
.famille__aside { position: sticky; top: 160px; }
.famille__aside .ico { margin-bottom: 18px; }
.famille__titre { margin: 0; font-family: var(--script); font-weight: 400; font-size: clamp(3.2rem, 4.6vw, 4rem); line-height: .95; color: var(--fuchsia); }
.famille__aside p { margin: 12px 0 0; color: var(--meta); font-size: .96rem; line-height: 1.65; }
.famille__aside .btn { margin-top: 22px; }

.sous { margin: 34px 0 4px; }
.sous:first-child { margin-top: 0; }
.tarifs { list-style: none; margin: 0; padding: 0; }
.tarifs li { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 13px 0; border-bottom: 1px solid var(--filet); font-size: 1rem; }
.tarifs li small { display: block; color: var(--meta); font-size: .84rem; }
.tarifs__p { flex: none; font-weight: 500; color: var(--fuchsia); white-space: nowrap; }
.tarifs__p i { font-style: normal; font-weight: 400; font-size: .82rem; color: var(--meta); margin-right: 5px; }
.note { margin: 48px 0 0; color: var(--meta); font-size: .92rem; text-align: center; }

/* ---------------------------------------------------------------- à propos -- */
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.duo__texte .p:first-of-type { margin-top: 22px; }
.duo__media { position: relative; justify-self: center; width: 100%; max-width: 420px; padding: 0 0 34px 34px; }
.duo__media::before { content: ""; position: absolute; left: 0; bottom: 0; width: 78%; aspect-ratio: 1; border-radius: 50%; background: var(--nude); }
.duo__photo { position: relative; z-index: 1; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--r); }
.bref { margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--filet); }
.bref li { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--filet); font-size: .98rem; }
.bref .cap { padding-top: 4px; }

/* --------------------------------------------------------------- contact --- */
.contact { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(36px, 5vw, 72px); align-items: stretch; }
.contact__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.contact__liste li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.contact__liste svg { display: block; flex: none; width: 22px; height: 22px; color: var(--fuchsia); margin-top: 4px; }
.contact__k { margin: 0 0 3px; }
.contact__v { margin: 0; font-size: 1.02rem; line-height: 1.6; }
.contact__v a { text-decoration: none; }
.contact__v a:hover { color: var(--fuchsia-fonce); }
.tel { white-space: nowrap; }
.contact__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.horaires { list-style: none; margin: 4px 0 0; padding: 0; max-width: 340px; }
.horaires li { display: flex; justify-content: space-between; gap: 20px; padding: 6px 0; border-bottom: 1px solid var(--filet); font-size: .96rem; }
.carte-map { position: relative; min-height: 480px; overflow: hidden; border-radius: var(--r); background: var(--nude); }
.carte-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------- footer ---- */
.pied { background: var(--noir); color: rgba(255, 255, 255, .8); }
.pied__haut { max-width: var(--wrap); margin: 0 auto; padding: clamp(62px, 7vw, 92px) var(--gout) clamp(40px, 4vw, 56px); display: grid; grid-template-columns: 1fr .8fr 1.2fr; gap: clamp(34px, 4vw, 64px); }
/* 1000x994: the height is set, the width follows */
.pied__logo { width: auto; height: 170px; max-width: none; border-radius: 50%; }
.pied__h { margin: 0 0 14px; color: var(--rose); font-family: var(--script); font-size: 2.3rem; font-weight: 400; line-height: 1; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pied a { color: rgba(255, 255, 255, .82); text-decoration: none; font-size: .96rem; }
.pied a:hover { color: var(--rose); }
.pied__contact li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: .96rem; line-height: 1.55; }
.pied__contact svg { display: block; flex: none; width: 18px; height: 18px; color: var(--fuchsia); margin-top: 4px; }
.pied__bas { border-top: 1px solid rgba(230, 0, 126, .45); }
.pied__bas-in { max-width: var(--wrap); margin: 0 auto; padding: 22px var(--gout); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .84rem; }
.pied__bas a { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.pied__bas a:hover { text-decoration: none; color: var(--rose); }

/* ================================================== modale de réservation ==
   Scroll architecture from .claude/rules/booking-modal.md §1, verbatim. Only the
   colours, radius, fonts and the layout of the aside belong to this site.     */
.rsv { position: fixed; inset: 0; z-index: 140; display: flex; align-items: flex-start; justify-content: center;
  padding: 24px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  visibility: hidden; opacity: 0; transition: opacity .25s ease, visibility .25s ease; }
.rsv.is-open { visibility: visible; opacity: 1; }
.rsv__backdrop { position: fixed; inset: 0; background: rgba(30, 4, 18, .68); }
.rsv__card { position: relative; display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr);
  width: min(980px, calc(100vw - 40px)); margin: auto;
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  overflow: hidden; background: var(--blanc); border-radius: 24px; box-shadow: 0 30px 90px rgba(40, 0, 20, .4); }
.rsv__aside { min-height: 0; overflow-y: auto; position: relative; isolation: isolate; background: var(--nude); color: var(--noir); padding: 34px 30px 30px; display: flex; flex-direction: column; }
.rsv__body { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; padding: 36px 34px 30px; }
.rsv__body > * { flex-shrink: 0; }

.rsv__close { position: absolute; top: 12px; right: 12px; z-index: 3; width: 42px; height: 42px; border: 1px solid var(--filet); border-radius: 50%; background: var(--blanc); font-size: 1.6rem; line-height: 1; color: var(--noir); cursor: pointer; }
.rsv__close:hover { background: var(--nude); }
.rsv__close:focus { outline: none; }
.rsv__close:focus-visible { outline: 2px solid var(--fuchsia); outline-offset: 2px; }
.rsv__tete { display: flex; align-items: center; gap: 14px; }
.rsv__mark { width: 70px; height: auto; border-radius: 50%; flex: none; }
.rsv__h { margin: 0; font-family: var(--script); font-weight: 400; font-size: 3.2rem; line-height: .95; color: var(--fuchsia); }
/* the drapé closes the column at the bottom, bleeding off both sides */
.rsv__drape { margin: auto -30px -30px; padding-top: 24px; color: var(--fuchsia);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent); mask-image: linear-gradient(to right, transparent, #000 16%, #000 84%, transparent); }
.rsv__drape .drape { height: 170px; }
.rsv.is-open .rsv__drape .drape { animation: drape-trace 1.6s .15s cubic-bezier(.55, .1, .2, 1) both; }
.rsv__intro { margin: 22px 0 18px; font-size: .95rem; line-height: 1.6; }
/* the live ticket of what has been picked */
.rsv__ticket { padding: 18px 18px 14px; border-radius: 16px; background: var(--blanc); }
.rsv__ticket-k { margin: 0 0 8px; }
.rsv__ticket ul { list-style: none; margin: 0; padding: 0; max-height: 170px; overflow-y: auto; }
.rsv__ticket li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px dashed var(--filet); font-size: .9rem; line-height: 1.35; }
.rsv__ticket li span:last-child { white-space: nowrap; color: var(--fuchsia); font-weight: 500; }
.rsv__ticket .rsv__vide { color: var(--meta); border: 0; }
.rsv__ticket-tot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 10px; font-weight: 500; }
.rsv__steps { display: flex; gap: 8px; margin-top: 16px; }
.rsv__steps i { display: block; flex: 1; height: 3px; border-radius: 3px; background: rgba(230, 0, 126, .22); transition: background var(--t); }
.rsv__steps i.on { background: var(--fuchsia); }

.rsv__lbl { display: block; margin: 0 0 12px; color: var(--meta); font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
/* one family at a time, chosen from the pills */
.rsv__onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.rsv__onglets::-webkit-scrollbar { display: none; }
.rsv__onglet { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 16px; border: 1px solid var(--filet-rose); border-radius: 999px; background: var(--blanc);
  font-family: var(--sans); font-size: .86rem; color: var(--noir); cursor: pointer; transition: background-color var(--t), color var(--t), border-color var(--t); }
.rsv__onglet[aria-selected="true"] { background: var(--noir); border-color: var(--noir); color: var(--blanc); }
.rsv__onglet b { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--fuchsia); color: var(--blanc); font-size: .7rem; font-weight: 500; }
.rsv__packs { display: block; border-top: 1px solid var(--filet-fort); max-height: 300px; overflow-y: auto; }
.rsv__pack { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%;
  padding: 12px 10px 12px 4px; background: transparent; border: 0; border-bottom: 1px solid var(--filet); text-align: left; cursor: pointer;
  font-family: var(--sans); color: var(--texte); transition: background-color var(--t); }
.rsv__pack:hover { background: var(--nude-clair); }
.rsv__box { display: block; position: relative; width: 20px; height: 20px; border: 1px solid rgba(0, 0, 0, .4); border-radius: 50%; transition: background-color var(--t), border-color var(--t); }
.rsv__pack[aria-pressed="true"] { background: var(--nude-clair); }
.rsv__pack[aria-pressed="true"] .rsv__box { background: var(--fuchsia); border-color: var(--fuchsia); }
.rsv__pack[aria-pressed="true"] .rsv__box::after { content: ""; position: absolute; left: 6px; top: 3px; width: 5px; height: 9px; border: solid var(--blanc); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.rsv__pack-n { font-size: .96rem; line-height: 1.35; }
.rsv__pack-n small { display: block; margin-top: 2px; font-size: .8rem; color: var(--meta); }
.rsv__pack-p { font-size: .94rem; font-weight: 500; white-space: nowrap; text-align: right; color: var(--fuchsia); }
.rsv__compte { margin: 12px 0 22px; font-size: .88rem; color: var(--meta); }

.rsv__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 18px; margin-bottom: 20px; }
.rsv__field label { display: block; margin: 0 0 9px; color: var(--meta); font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.rsv__field input[type="date"] { -webkit-appearance: none; appearance: none; width: 100%;
  min-height: 48px; line-height: 1.3; padding: 0 16px; font-family: var(--sans); font-size: 16px; color: var(--noir);
  background: var(--nude-clair); border: 1px solid var(--filet-rose); border-radius: 999px; }
.rsv__field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.rsv__field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.rsv__ferme { margin: 7px 0 0 4px; font-size: .8rem; color: var(--meta); }
.rsv__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rsv__chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; padding: 4px 14px; border: 1px solid var(--filet-rose); border-radius: 16px; background: var(--nude-clair);
  font-family: var(--sans); font-size: .9rem; line-height: 1.2; color: var(--noir); cursor: pointer; transition: background-color var(--t), color var(--t), border-color var(--t); }
.rsv__chip small { font-size: .72rem; color: var(--meta); }
.rsv__chip[aria-pressed="true"] { background: var(--fuchsia); border-color: var(--fuchsia); color: var(--blanc); }
.rsv__chip[aria-pressed="true"] small { color: var(--blanc); }

.rsv__recap { margin: 0 0 16px; padding: 14px 16px; background: var(--nude-clair); border-left: 3px solid var(--fuchsia); border-radius: 0 12px 12px 0; font-size: .93rem; line-height: 1.55; }
.rsv__recap b { font-weight: 500; }
.rsv__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; border-top: 1px solid var(--filet-fort); border-bottom: 1px solid var(--filet); }
.rsv__total span:first-child { color: var(--meta); font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.rsv__total span:last-child { font-size: 1.35rem; font-weight: 500; color: var(--noir); }
.rsv__hint { margin: 12px 0 18px; min-height: 1.4em; font-size: .9rem; color: var(--meta); }
.rsv__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.rsv__actions .btn { flex: 1 1 200px; min-width: 0; }
.rsv__actions .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.rsv__note { margin: 18px 0 0; font-size: .86rem; color: var(--meta); }
body.rsv-open { overflow: hidden; }

/* ------------------------------------------------------------ responsive --- */
@media (max-width: 1080px) {
  /* two tracks once the links leave the flow, or the burger lands mid-bar */
  .nav { grid-template-columns: 1fr auto; }
  .nav__cta--bar { display: none; }
  .nav__links .nav__cta--menu { display: inline-flex; margin-top: 14px; }
  .nav__burger { display: block; }
  .nav__links {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh;
    flex-direction: column; justify-content: center; gap: 26px;
    background: var(--blanc);
    transform: translateX(100%); visibility: hidden;
    transition: transform .35s ease, visibility .35s ease; z-index: 100;
  }
  .nav__links.nav-open { transform: translateX(0); visibility: visible; }
  .nav__links a { font-size: 1.05rem; color: var(--noir); }
  .nav.menu-open { background: var(--blanc); box-shadow: none; }
  .nav.menu-open .nav__logo { box-shadow: none; }

  .salon, .contact, .duo { grid-template-columns: 1fr; }
  .index__vue { display: none; }
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .avis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faits__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fait:nth-child(3) { border-left: 0; }
  .fait:nth-child(n+3) { border-top: 1px solid var(--filet-rose); }
  .pied__haut { grid-template-columns: 1fr 1fr; }
  .famille { grid-template-columns: 1fr; }
  .famille__aside { position: static; display: grid; grid-template-columns: auto 1fr; gap: 0 22px; align-items: center; }
  .famille__aside .ico { grid-row: span 2; margin: 0; }
  .famille__aside p, .famille__aside .btn { grid-column: 1 / -1; }
  .famille__aside .btn { justify-self: start; }
  .lect { padding: 0; align-items: stretch; }
  .lect__carte { grid-template-columns: 1fr; grid-template-rows: auto auto; width: 100vw; max-height: none; min-height: 100vh; min-height: 100dvh; margin: 0; border-radius: 0; overflow-y: auto; }
  .lect__media { height: auto; width: 100%; max-height: 72vh; max-height: 72dvh; aspect-ratio: 9 / 16; margin: 0 auto; }
  .lect__info { padding: 22px 22px 32px; overflow: visible; }
}

@media (max-width: 1020px) {
  .rsv__card { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
  .rsv__aside { padding: 14px 64px 12px 20px; overflow: visible; }
  .rsv__mark { width: 46px; }
  .rsv__h { font-size: 2.5rem; }
  .rsv__drape, .rsv__intro, .rsv__ticket { display: none; }
  .rsv__onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .rsv__steps { margin-top: 10px; }
  .rsv__body { padding: 22px 24px 26px; }
}

@media (max-width: 860px) {
  .index__row { grid-template-columns: 56px minmax(0, 1fr); gap: 4px 16px; }
  .index__row .ico { grid-row: span 2; width: 56px; height: 56px; }
  .index__row .ico svg { width: 32px; height: 32px; }
  .index__prix { grid-column: 2; }
  .salon__media, .duo__media { max-width: 380px; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  :root { --nav-h: 80px; }
  .nav__logo, .nav.scrolled .nav__logo { height: 58px; }
  .hero__inner { padding-top: calc(var(--nav-h) + 30px); }
  .hero__titre { font-size: clamp(3.9rem, 17vw, 5.2rem); }
  .hero__drape .drape { height: 52px; }
  .hero__sub { font-size: 1.04rem; }
  .faits__row { grid-template-columns: 1fr; }
  .fait { padding: 18px var(--gout); }
  .fait + .fait { border-left: 0; border-top: 1px solid var(--filet-rose); }
  .avis { grid-template-columns: 1fr; }
  .salon__media { padding: 22px 22px 0 0; }
  .duo__media { padding: 0 0 22px 22px; }
  .pied__haut { grid-template-columns: 1fr; }
  .pied__logo { height: 150px; }
  .sommaire { top: 74px; }
  .carte-map { min-height: 360px; }
  .bref li { grid-template-columns: 1fr; gap: 2px; }

  .rsv { padding: 0; }
  .rsv__card { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); width: 100vw; margin: 0; border-radius: 0;
    height: 100vh; max-height: 100vh; height: 100dvh; max-height: 100dvh; }
  .rsv__packs { max-height: none; }
  .rsv__grid { grid-template-columns: 1fr; }
  .rsv__actions { flex-direction: column; }
  .rsv__actions .btn { flex: 0 0 auto; width: 100%; }
  .rsv__body { padding: 18px 18px 28px; }
}

@media (max-width: 420px) {
  .hero__cta .btn, .contact__cta .btn, .fin .btn { flex: 1 1 100%; }
  .nav__logo, .nav.scrolled .nav__logo { height: 54px; }
  .tuile__leg { padding: 34px 12px 10px; font-size: .95rem; }
}