/* Ayoub Hair Studio, Agdal et Hay Riad, Rabat
   Design system. Colours come from the client's kit, exactly:
   Noir Principal #1E1E1E, Gris Foncé #3A3A3A, Taupe Élégant #8B7E73,
   Beige Lumineux #D8D2C9, Ivoire Fond #F5F5F3. There is no gold in this kit,
   so there is none on the site.
   Playfair Display in spaced capitals is the lettering of their own stories
   ("LA GRILLE TARIFAIRE", "À PROPOS DU STUDIO"); Jost carries the text;
   Mrs Saint Delafield is the closest web script to their "à partir de" and to
   the Ayoub signature on the salon wall.
   The motif is the AH signature of the logo, written on load in three places
   only: the hero, the closing band and the booking modal.
   Square corners everywhere. Nothing on this site is hidden on load. */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* kit */
  --noir: #1E1E1E;
  --gris: #3A3A3A;
  --taupe: #8B7E73;
  --beige: #D8D2C9;
  --ivoire: #F5F5F3;
  /* derived, contrast measured */
  --blanc: #FBFBFA;
  --texte: #1E1E1E;           /* 15.9:1 on ivoire */
  --meta: #5F564D;            /* small text: 6.8:1 on ivoire, 4.9:1 on beige */
  --filet: rgba(30, 30, 30, .14);
  --filet-fort: rgba(30, 30, 30, .72);
  --filet-clair: rgba(245, 245, 243, .26);
  --beton: url("assets/photos/beton.webp");

  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif;
  --script: "Mrs Saint Delafield", "Snell Roundhand", cursive;

  --wrap: 1220px;
  --gout: clamp(20px, 5vw, 56px);
  --section: clamp(76px, 9vw, 128px);
  --nav-h: 84px;
  --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(--ivoire) var(--beton);
  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; }
blockquote, figure { margin: 0; }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }
.tel { white-space: nowrap; }

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

/* ------------------------------------------------------------ typography -- */
/* their stories set titles in a Didone, in capitals, widely spaced */
.h1, .h2, .h3 { margin: 0; font-family: var(--display); font-weight: 400; color: var(--noir); text-transform: uppercase; }
.h1 { font-size: clamp(2.1rem, 4.6vw, 3.9rem); line-height: 1.12; letter-spacing: .16em; }
.h2 { font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.25; letter-spacing: .16em; }
.h3 { font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.35; letter-spacing: .16em; }
.section--noir .h2 { color: var(--ivoire); }

/* the script overline: Mrs Saint Delafield is thin and small on its
   x-height, so it never goes under 2.6rem and never carries a sentence */
.scr { display: block; margin: 0 0 6px; font-family: var(--script); font-weight: 400; font-size: clamp(2.7rem, 3.8vw, 3.4rem); line-height: 1; color: var(--taupe); }
.section--noir .scr { color: var(--beige); }
.section--beige .scr { color: var(--meta); }

.lead { margin: 20px 0 0; font-size: 1.06rem; line-height: 1.8; max-width: 54ch; }
.p { margin: 14px 0 0; max-width: 58ch; }
.petit { font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }

.tete-sec { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: clamp(42px, 5vw, 64px); }
.tete-sec .h2 { max-width: 26ch; }
.tete-sec .lead { margin-left: auto; margin-right: auto; }
/* the short rule under a title, as on their story cards */
.tete-sec .h2::after { content: ""; display: block; width: 64px; height: 1px; margin: 22px auto 0; background: currentColor; opacity: .55; }

.num { font-family: var(--display); font-size: .92rem; letter-spacing: .1em; color: var(--meta); white-space: nowrap; }

/* ---------------------------------------------------------------- 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: 0;
  background: transparent;
  font-family: var(--sans); font-size: .76rem; font-weight: 500;
  letter-spacing: .2em; 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(--taupe); outline-offset: 3px; }
.btn--noir { background: var(--noir); border-color: var(--noir); color: var(--ivoire); }
.btn--noir:hover { background: var(--gris); border-color: var(--gris); }
.btn--ligne { border-color: var(--noir); color: var(--noir); }
.btn--ligne:hover { background: var(--noir); color: var(--ivoire); }
.btn--clair { background: var(--ivoire); border-color: var(--ivoire); color: var(--noir); }
.btn--clair:hover { background: var(--beige); border-color: var(--beige); }
.btn--ligne-clair { border-color: rgba(245, 245, 243, .75); color: var(--ivoire); }
.btn--ligne-clair:hover { background: var(--ivoire); 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: .2em; 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(--taupe); color: var(--gris); }
.lienfleche:hover svg { transform: translateX(6px); }
.section--noir .lienfleche { color: var(--ivoire); border-color: var(--filet-clair); }
.section--noir .lienfleche:hover { border-color: var(--beige); color: var(--beige); }

/* ------------------------------------------------------------------- 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: 32px;
  padding: 18px var(--gout);
  background: linear-gradient(to bottom, rgba(20, 20, 20, .55), rgba(20, 20, 20, .2) 65%, rgba(20, 20, 20, 0));
  transition: background-color var(--t), box-shadow var(--t), padding var(--t);
}
.nav.scrolled { background: var(--ivoire); box-shadow: 0 1px 0 var(--filet); padding-top: 12px; padding-bottom: 12px; }

.nav__brand { position: relative; z-index: 120; justify-self: start; display: block; line-height: 0; }
/* AH mark alone, 2910x2250: the height is set and the width follows (72px at 56px) */
.nav__logo { width: auto; height: 56px; max-width: none; transition: height var(--t); }
.nav.scrolled .nav__logo { height: 44px; }
.nav__logo--noir { display: none; }
.nav__logo--clair { filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .35)); }
.nav.scrolled .nav__logo--clair, .nav.menu-open .nav__logo--clair { display: none; }
.nav.scrolled .nav__logo--noir, .nav.menu-open .nav__logo--noir { display: block; }

.nav__links { display: flex; align-items: center; gap: clamp(20px, 2.4vw, 38px); }
.nav__links a {
  font-family: var(--display); font-size: .8rem; letter-spacing: .2em; 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: currentColor; }

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

.nav__burger {
  display: none; width: 46px; height: 46px; padding: 0; background: transparent;
  border: 1px solid rgba(245, 245, 243, .6); border-radius: 0; cursor: pointer;
}
.nav__burger span { display: block; width: 18px; height: 1.5px; margin: 4px auto; background: var(--ivoire); 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(--ivoire); }
  .nav:not(.scrolled) .nav__cta--bar { background: transparent; border-color: rgba(245, 245, 243, .75); color: var(--ivoire); }
  .nav:not(.scrolled) .nav__cta--bar:hover { background: var(--ivoire); color: var(--noir); }
}

/* ------------------------------------------------------- the signature ---- */
/* the AH of the logo, revealed left to right like a pen stroke. The clip-path
   sits on the <img> itself: nothing observes it, it only runs on load. */
.signe { display: block; width: auto; max-width: none; }
.signe--ecrit { animation: ecrire 2s .2s cubic-bezier(.55, .08, .25, 1) both; }
@keyframes ecrire { from { clip-path: inset(-4% 100% -4% -4%); } to { clip-path: inset(-4% -4% -4% -4%); } }

/* ------------------------------------------------------------------ hero -- */
.hero {
  position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden;
  min-height: 640px; min-height: clamp(640px, 100vh, 1040px); min-height: clamp(640px, 100svh, 1040px);
  background: #262626 center / cover no-repeat;
}
.hero__media { position: absolute; inset: 0; }
.hero__media video, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media img.zoom { animation: zoomlent 22s ease-out both; }
@keyframes zoomlent { from { transform: scale(1.08); } to { transform: scale(1); } }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 56% at 50% 50%, rgba(18, 18, 18, .6), rgba(18, 18, 18, .34) 70%, rgba(18, 18, 18, .26)),
    linear-gradient(to top, rgba(18, 18, 18, .5), rgba(18, 18, 18, 0) 34%);
}
.hero__inner {
  position: relative; z-index: 2; width: 100%; max-width: 980px; margin: 0 auto;
  padding: calc(var(--nav-h) + 24px) var(--gout) 72px;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.hero__signe { height: clamp(150px, 22vw, 230px); filter: drop-shadow(0 2px 18px rgba(0, 0, 0, .35)); }
.hero__titre { margin-top: clamp(18px, 2.4vw, 28px); color: var(--ivoire); text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hero__titre small { display: block; margin-top: 12px; font-size: .36em; letter-spacing: .5em; }
.hero__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 40px; }

/* the text rises into place; it is never transparent at any point */
.monte { animation: monte .9s .9s cubic-bezier(.2, .7, .2, 1) both; }
.monte--2 { animation-delay: 1.05s; }
@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: #262626; }
.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(18, 18, 18, .76) 0%, rgba(18, 18, 18, .44) 44%, rgba(18, 18, 18, .08) 78%),
    linear-gradient(to bottom, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 32%);
}
.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(--beige); }
.tete .h1 { color: var(--ivoire); max-width: 18ch; }

/* À propos: their real wall, kept at its own resolution in a half-width frame */
.tete--duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: 0; background: var(--noir); }
.tete--duo::after { content: none; }
.tete--duo .tete__texte { display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--nav-h) + 90px) clamp(24px, 6vw, 90px) clamp(48px, 6vw, 84px); }
.tete--duo .h1 { max-width: 12ch; }
.tete--duo .tete__photo { position: relative; min-height: 560px; min-height: min(760px, 88vh); }
.tete--duo .tete__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.tete--duo .tete__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 26%); pointer-events: none; }

/* ------------------------------------------------------------ bandeau faits -- */
.faits { background: var(--noir); color: var(--ivoire); }
.faits__row { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); }
.fait { display: flex; align-items: flex-start; gap: 16px; padding: 30px clamp(18px, 2.4vw, 34px); }
.fait + .fait { border-left: 1px solid var(--filet-clair); }
.fait svg { display: block; flex: none; width: 22px; height: 22px; color: var(--beige); margin-top: 3px; }
.fait__k { margin: 0 0 5px; color: rgba(245, 245, 243, .7); font-size: .66rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.fait__v { margin: 0; font-family: var(--display); font-size: 1.08rem; line-height: 1.45; }
.fait__v a { text-decoration: none; }
.fait__v a:hover { color: var(--beige); }

/* -------------------------------------------------- index des prestations -- */
.index { border-top: 1px solid var(--filet-fort); }
.index__row {
  position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: clamp(14px, 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; }
.index__nom { margin: 0; }
.index__det { margin: 5px 0 0; color: var(--meta); font-size: .95rem; line-height: 1.55; max-width: 54ch; }
.index__prix { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--sans); font-size: 1.12rem; white-space: nowrap; }
.index__prix svg { display: block; align-self: center; width: 20px; height: 9px; margin-left: 6px; transition: transform .3s ease; }
.index__row:hover .index__prix svg { transform: translateX(6px); }
.index__vue {
  position: absolute; right: 230px; top: 50%; width: 176px; height: 234px; transform: translateY(-50%) scale(.94); opacity: 0;
  pointer-events: none; border: 6px solid var(--blanc); box-shadow: 0 18px 44px rgba(0, 0, 0, .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; }

/* "à partir de" and "dhs" in script, as on their own price card */
.ap { font-family: var(--script); font-style: normal; font-size: 1.7em; line-height: .5; color: var(--taupe); letter-spacing: 0; }
.ap--dh { font-size: 1.55em; margin-left: 2px; }

/* ---------------------------------------------------------------- Ayoub ---- */
.ayoub { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.ayoub__photo { position: relative; width: 100%; max-width: 500px; padding: 0 0 26px 26px; }
.ayoub__photo::before { content: ""; position: absolute; left: 0; bottom: 0; width: 70%; height: 70%; border-left: 1px solid rgba(216, 210, 201, .5); border-bottom: 1px solid rgba(216, 210, 201, .5); }
.ayoub__photo img { position: relative; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.ayoub__sig { display: block; margin: 0; font-family: var(--script); font-weight: 400; font-size: clamp(5.4rem, 9vw, 8rem); line-height: .8; color: var(--ivoire); }
.ayoub__titre { margin: 18px 0 0; color: var(--beige); }
.ayoub__texte { margin: 26px 0 0; max-width: 46ch; color: rgba(245, 245, 243, .9); font-size: 1.04rem; }
.ayoub__cit { margin: 30px 0 0; padding: 24px 0 0; border-top: 1px solid var(--filet-clair); max-width: 48ch; }
.ayoub__cit p { margin: 0; font-family: var(--display); font-style: italic; font-size: clamp(1.12rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--ivoire); }
.ayoub__cit figcaption { margin-top: 12px; color: rgba(245, 245, 243, .7); font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.ayoub__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* -------------------------------------------------------------- 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; background: var(--beige); text-decoration: none; color: var(--ivoire); }
.tuile__m { display: block; width: 100%; height: auto; 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: 30px; height: 30px; border-radius: 50%; background: rgba(245, 245, 243, .92); }
.tuile__badge svg { display: block; width: 11px; height: 11px; fill: var(--noir); margin-left: 2px; }
.tuile__leg {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 46px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), rgba(0, 0, 0, 0));
  font-family: var(--display); font-size: .86rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.35;
}
.tuile__leg small { display: block; margin-top: 4px; font-family: var(--sans); font-size: .6rem; font-weight: 500; letter-spacing: .22em; color: rgba(245, 245, 243, .8); }
.tuile:focus-visible { outline: 2px solid var(--taupe); 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: .08em; text-decoration: none; }
.ig-compte svg { display: block; width: 19px; height: 19px; }
.ig-compte:hover { color: var(--taupe); }
.bande-titre { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--filet-fort); }
.bande-titre .h3 { margin: 0; }
.bande-titre span { color: var(--meta); font-size: .92rem; }
.bande + .bande { margin-top: clamp(60px, 7vw, 96px); }

/* the player: a longer cut of their reel, 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(12, 12, 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: 1px solid var(--filet-clair); }
.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: 56px 32px 30px; display: flex; flex-direction: column; color: var(--ivoire); }
.lect__k { font-size: .64rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--beige); }
.lect__titre { margin: 12px 0 0; font-family: var(--display); font-size: 1.35rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }
.lect__lien { margin-top: 22px; align-self: flex-start; color: var(--ivoire); border-color: var(--filet-clair); }
.lect__lien:hover { border-color: var(--beige); color: var(--beige); }
.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); background: transparent; color: var(--ivoire); cursor: pointer;
  font-size: .68rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.lect__nav button:hover { border-color: var(--beige); color: var(--beige); }
.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);
  background: rgba(0, 0, 0, .55); color: var(--ivoire); cursor: pointer; }
.lect__x svg { display: block; width: 16px; height: 16px; }
.lect__x:hover { border-color: var(--beige); color: var(--beige); }
body.lect-open { overflow: hidden; }

/* ------------------------------------------------------------------ avis -- */
.avis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(26px, 3.4vw, 52px); }
.avis__item { padding: 30px 0; border-top: 1px solid var(--filet-fort); }
.avis__item p { margin: 0; font-family: var(--display); font-style: italic; font-size: 1.1rem; line-height: 1.6; color: var(--noir); }
.avis__item figcaption { margin-top: 16px; color: var(--meta); font-size: .68rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }

/* ------------------------------------------------------------ CTA de fin --- */
.fin { background: var(--gris); color: var(--ivoire); }
.fin__in { max-width: 860px; margin: 0 auto; padding: clamp(74px, 8vw, 112px) var(--gout); display: flex; flex-direction: column; align-items: center; text-align: center; }
.fin__signe { height: clamp(96px, 12vw, 132px); margin-bottom: 26px; }
.fin .h2 { color: var(--ivoire); }
.fin .lead { margin-left: auto; margin-right: auto; color: rgba(245, 245, 243, .92); }
.fin .hero__cta { margin-top: 32px; }
.fin__tels { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; margin: 30px 0 0; padding: 0; list-style: none; font-size: .95rem; color: rgba(245, 245, 243, .88); }
.fin__tels b { font-weight: 500; letter-spacing: .2em; text-transform: uppercase; font-size: .66rem; margin-right: 10px; color: var(--beige); }
.fin__tels a { text-decoration: none; }
.fin__tels a:hover { color: var(--beige); }

/* ----------------------------------------------------------- prestations --- */
.sommaire { position: sticky; top: 58px; z-index: 40; background: var(--blanc); border-bottom: 1px solid var(--filet); }
.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: 8px 16px; border: 1px solid var(--filet); font-family: var(--display); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: background-color var(--t), border-color var(--t); }
.sommaire a:hover { background: var(--ivoire); border-color: var(--noir); }

/* their card: a Didone title in spaced capitals, lines in spaced sans
   capitals, the price on the right with "à partir de" in script */
.grille { columns: 2; column-gap: clamp(40px, 6vw, 110px); }
.famille { scroll-margin-top: calc(var(--nav-h) + 70px); padding: 0 0 clamp(44px, 5vw, 64px); break-inside: avoid; }
.famille__tete { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--filet-fort); }
.famille__titre { margin: 0; }
.famille__tete .num { flex: none; }
.tarifs { list-style: none; margin: 0; padding: 0; }
.tarifs li { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; padding: 11px 0; border-bottom: 1px solid var(--filet); }
.tarifs__n { font-size: .8rem; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; }
.tarifs__p { flex: none; font-size: 1.02rem; white-space: nowrap; text-align: right; }
.famille__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 0 0 5px; border: 0; border-bottom: 1px solid var(--filet-fort); background: none; cursor: pointer;
  color: var(--noir); font-size: .7rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.famille__cta svg { display: block; width: 20px; height: 9px; transition: transform var(--t); }
.famille__cta:hover svg { transform: translateX(5px); }
.grille__signe { display: flex; justify-content: center; margin-top: clamp(56px, 7vw, 90px); }
.grille__signe img { height: 86px; width: auto; opacity: .85; }

/* ---------------------------------------------------------------- à propos -- */
.histoire { max-width: 760px; margin: 0 auto; text-align: center; }
.histoire p { margin: 0 0 22px; font-size: 1.08rem; line-height: 1.95; }
.histoire p:last-child { margin-bottom: 0; }
.histoire__signe { display: flex; justify-content: center; margin-top: 44px; }
.histoire__signe img { height: 74px; width: auto; }
.duo-photos { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 26px); }
.duo-photos img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* --------------------------------------------------------------- contact --- */
.salons { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px, 3vw, 40px); }
.salon { display: flex; flex-direction: column; background: var(--blanc); border: 1px solid var(--filet); }
.salon__txt { padding: clamp(26px, 3vw, 38px); }
.salon__txt .h3 { margin: 0; }
.salon__txt .scr { font-size: 2.8rem; }
.salon__adr { margin: 14px 0 0; font-size: 1rem; line-height: 1.6; }
.salon__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.salon__cta .btn { padding: 13px 22px; min-height: 48px; }
.carte-map { position: relative; margin-top: auto; min-height: 340px; background: var(--beige); }
.carte-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.coord { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); margin-top: clamp(40px, 5vw, 64px); padding-top: clamp(34px, 4vw, 48px); border-top: 1px solid var(--filet-fort); }
.coord__k { margin: 0 0 10px; }
.coord__v { margin: 0; font-size: 1rem; line-height: 1.65; }
.coord__v a { text-decoration: none; border-bottom: 1px solid var(--filet); }
.coord__v a:hover { border-color: var(--noir); }
.horaires { list-style: none; margin: 0; padding: 0; max-width: 320px; }
.horaires li { display: flex; justify-content: space-between; gap: 20px; padding: 4px 0; border-bottom: 1px solid var(--filet); font-size: .95rem; }

/* --------------------------------------------------------------- footer ---- */
.pied { background: var(--noir); color: rgba(245, 245, 243, .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 .75fr 1fr 1fr; gap: clamp(30px, 4vw, 60px); }
/* stacked lockup, 2910x2835: the height is set, the width follows */
.pied__logo { width: auto; height: 150px; max-width: none; }
.pied__h { margin: 0 0 18px; color: var(--ivoire); font-family: var(--display); font-size: .82rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied a { color: rgba(245, 245, 243, .8); text-decoration: none; font-size: .95rem; }
.pied a:hover { color: var(--ivoire); text-decoration: underline; text-underline-offset: 4px; }
.pied__contact li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: .95rem; line-height: 1.55; }
.pied__contact svg { display: block; flex: none; width: 17px; height: 17px; color: var(--beige); margin-top: 4px; }
.pied__bas { border-top: 1px solid var(--filet-clair); }
.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: .82rem; }
.pied__bas a { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.pied__bas a:hover { text-decoration: none; color: var(--beige); }

/* ================================================== modale de réservation ==
   Scroll architecture from .claude/rules/booking-modal.md §1, verbatim. Only the
   colours, radius and fonts 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(12, 12, 12, .7); }
.rsv__card { position: relative; display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); grid-template-rows: minmax(0, 1fr);
  width: min(960px, calc(100vw - 40px)); margin: auto;
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  overflow: hidden; background: var(--blanc); border-radius: 0; box-shadow: 0 30px 90px rgba(0, 0, 0, .35); }
.rsv__aside { min-height: 0; overflow-y: auto; position: relative; isolation: isolate; background: var(--noir); color: var(--ivoire); padding: 40px 34px; display: flex; flex-direction: column; }
.rsv__aside-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.rsv__aside::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(18, 18, 18, .92), rgba(18, 18, 18, .6) 60%, rgba(18, 18, 18, .35)); }
.rsv__body { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; padding: 38px 36px 30px; }
.rsv__body > * { flex-shrink: 0; }

.rsv__close { position: absolute; top: 10px; right: 10px; z-index: 3; width: 42px; height: 42px; border: 1px solid var(--filet); background: var(--blanc); font-size: 1.7rem; line-height: 1; color: var(--noir); cursor: pointer; border-radius: 0; }
.rsv__close:hover { background: var(--beige); }
.rsv__signe { align-self: flex-start; height: 92px; margin: 0 0 auto; }
.rsv__aside .rsv__h { margin: 26px 0 14px; font-family: var(--script); font-size: 3.6rem; line-height: 1; color: var(--ivoire); white-space: nowrap; }
.rsv__aside p { margin: 0 0 14px; font-size: .94rem; line-height: 1.6; color: rgba(245, 245, 243, .92); }
.rsv__steps { display: flex; gap: 8px; margin-top: 6px; }
.rsv__steps i { display: block; width: 32px; height: 2px; background: rgba(245, 245, 243, .3); transition: background var(--t); }
.rsv__steps i.on { background: var(--ivoire); }

.rsv__lbl { display: block; margin: 0 0 12px; color: var(--meta); font-size: .68rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.rsv__salons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 26px; }
.rsv__salon { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--filet-fort); background: var(--ivoire); color: var(--noir); text-align: left; cursor: pointer; border-radius: 0; transition: background-color var(--t), color var(--t); }
.rsv__salon b { font-family: var(--display); font-weight: 400; font-size: .92rem; letter-spacing: .16em; text-transform: uppercase; }
.rsv__salon span { font-size: .84rem; color: var(--meta); line-height: 1.35; }
.rsv__salon[aria-pressed="true"] { background: var(--noir); border-color: var(--noir); color: var(--ivoire); }
.rsv__salon[aria-pressed="true"] span { color: rgba(245, 245, 243, .8); }

.rsv__packs { display: block; border-top: 1px solid var(--filet-fort); max-height: 330px; overflow-y: auto; }
.rsv__grp { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 6px 11px 2px; background: transparent; border: 0; border-bottom: 1px solid var(--filet); cursor: pointer; text-align: left; color: var(--noir); }
.rsv__grp-t { flex: 1 1 auto; font-family: var(--display); font-size: .86rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; }
.rsv__grp-n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; background: var(--noir); color: var(--ivoire); font-family: var(--sans); font-size: .76rem; font-weight: 500; }
.rsv__grp-c { flex: none; width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform var(--t); }
.rsv__grp[aria-expanded="true"] .rsv__grp-c { transform: translateY(2px) rotate(-135deg); }
.rsv__grp:hover .rsv__grp-t { color: var(--taupe); }
.rsv__pack { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%;
  padding: 11px 10px 11px 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(--ivoire); }
.rsv__box { display: block; position: relative; width: 18px; height: 18px; border: 1px solid rgba(30, 30, 30, .45); transition: background-color var(--t), border-color var(--t); }
.rsv__pack[aria-pressed="true"] { background: var(--ivoire); }
.rsv__pack[aria-pressed="true"] .rsv__box { background: var(--noir); border-color: var(--noir); }
.rsv__pack[aria-pressed="true"] .rsv__box::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid var(--ivoire); 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 { color: var(--meta); font-size: .82rem; }
.rsv__pack-p { font-size: .94rem; white-space: nowrap; text-align: right; }
.rsv__pack-p i { font-style: normal; color: var(--meta); font-size: .82rem; margin-right: 3px; }
.rsv__compte { margin: 12px 0 20px; font-size: .88rem; color: var(--meta); }

.rsv__avec { display: flex; align-items: center; gap: 14px; width: 100%; margin: 0 0 22px; padding: 12px 14px; border: 1px solid var(--filet-fort); background: var(--ivoire); color: var(--noir); text-align: left; cursor: pointer; border-radius: 0; }
.rsv__avec .rsv__box { flex: none; }
.rsv__avec[aria-pressed="true"] .rsv__box { background: var(--noir); border-color: var(--noir); }
.rsv__avec[aria-pressed="true"] .rsv__box::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid var(--ivoire); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }
.rsv__avec-t { font-size: .95rem; line-height: 1.4; }
.rsv__avec-t em { font-family: var(--script); font-style: normal; font-size: 2rem; line-height: .6; margin: 0 3px; }

.rsv__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); 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 14px; font-family: var(--sans); font-size: 16px; color: var(--noir);
  background: var(--ivoire); border: 1px solid var(--filet-fort); border-radius: 0; }
.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__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rsv__chip { min-height: 48px; padding: 0 14px; border: 1px solid var(--filet-fort); background: var(--ivoire); border-radius: 0;
  font-family: var(--sans); font-size: .92rem; color: var(--noir); cursor: pointer; transition: background-color var(--t), color var(--t), border-color var(--t); }
.rsv__chip[aria-pressed="true"] { background: var(--noir); border-color: var(--noir); color: var(--ivoire); }

.rsv__recap { margin: 0 0 16px; padding: 14px 16px; background: var(--ivoire); border-left: 2px solid var(--noir); font-size: .94rem; line-height: 1.6; }
.rsv__recap b { font-weight: 500; }
.rsv__recap small { display: block; margin-bottom: 6px; color: var(--meta); font-size: .66rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.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.3rem; }
.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__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(--ivoire);
    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.15rem; color: var(--noir); }
  .nav.menu-open { background: var(--ivoire); box-shadow: none; }

  .ayoub { grid-template-columns: 1fr; }
  .ayoub__photo { max-width: 460px; }
  .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: 1fr 1fr; }
  .pied__haut { grid-template-columns: 1fr 1fr; }
  .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: 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 60px 14px 22px; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 16px; overflow: visible; }
  .rsv__aside p:not(.rsv__h), .rsv__aside-img { display: none; }
  .rsv__signe { height: 44px; margin: 0; }
  .rsv__aside .rsv__h { margin: 0; font-size: 2.6rem; }
  .rsv__steps { width: 100%; margin-top: 4px; }
  .rsv__body { padding: 24px 24px 26px; }
}

@media (max-width: 860px) {
  .grille { columns: 1; }
  .salons, .coord { grid-template-columns: 1fr; }
  .index__row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .index__row .num { display: none; }
  .tete--duo { grid-template-columns: 1fr; }
  .tete--duo .tete__photo { order: -1; min-height: 0; height: 64vh; height: 64svh; }
  .tete--duo .tete__texte { padding: 44px var(--gout) 50px; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  :root { --nav-h: 70px; }
  .nav { padding: 14px var(--gout); }
  .nav.scrolled { padding-top: 10px; padding-bottom: 10px; }
  .nav__logo, .nav.scrolled .nav__logo { height: 42px; }
  /* the hero sits under the fixed bar: one full visible screen, never 76% of it */
  .hero { min-height: 100vh; min-height: 100svh; }
  .hero__inner { padding-top: calc(var(--nav-h) + 20px); }
  .hero__signe { height: 150px; }
  .hero__titre { font-size: clamp(1.7rem, 8.4vw, 2.2rem); letter-spacing: .12em; }
  .faits__row { grid-template-columns: 1fr; }
  .fait { padding: 20px var(--gout); }
  .fait + .fait { border-left: 0; border-top: 1px solid var(--filet-clair); }
  .avis { grid-template-columns: 1fr; }
  .pied__haut { grid-template-columns: 1fr; }
  .pied__logo { height: 130px; }
  .sommaire { top: 50px; }
  .carte-map { min-height: 280px; }
  .duo-photos { grid-template-columns: 1fr 1fr; gap: 10px; }
  .bande-titre { flex-direction: column; gap: 4px; }

  .rsv { padding: 0; }
  .rsv__card { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); width: 100vw; margin: 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: 20px 20px 28px; }
}

@media (max-width: 420px) {
  .hero__cta .btn, .fin .btn, .ayoub__cta .btn { flex: 1 1 100%; }
  .hero__signe { height: 132px; }
  .tuile__leg { padding: 34px 12px 10px; font-size: .74rem; }
  .rsv__salons { grid-template-columns: 1fr; }
}
.pied .pied__commun { margin-top: 30px; }