/* The Beauty Loft, Rabat
   Design system. Colours, fonts and iconography come from the client's brand kit.
   Montserrat carries the structure, Allura is the signature script (the logo's own
   construction: roman + script + spaced caps).
   Nothing on this site is hidden on load: no opacity:0, no scroll reveal. */

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* kit */
  --rose-poudre: #FCE7EE;
  --rose-signature: #E91E63;
  --vieux-rose: #D4A6B8;
  --gris-clair: #C9C9C9;
  --anthracite: #6B6B6B;
  /* logo ink, sampled from the supplied PNG */
  --encre: #B02850;
  --encre-claire: #C86078;
  --bordeaux: #5C1730;

  --blanc: #FFFFFF;
  --creme: #FDF8FA;
  --filet: rgba(212, 166, 184, .42);
  --filet-fort: rgba(176, 40, 80, .18);

  --sans: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --script: "Allura", "Snell Roundhand", cursive;

  --wrap: 1240px;
  --gout: clamp(20px, 5vw, 56px);
  --section: clamp(72px, 9vw, 128px);
  --r-media: 2px;
}

*, *::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; transition-duration: .001ms !important; }
}

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

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

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

/* ------------------------------------------------------------ typography -- */
.h1, .h2, .h3 { margin: 0; color: var(--encre); font-weight: 300; letter-spacing: -.01em; }

.h1 { font-size: clamp(2.35rem, 5.6vw, 4.15rem); line-height: 1.08; }
.h2 { font-size: clamp(1.85rem, 3.5vw, 2.9rem); line-height: 1.16; }
.h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.25; }

/* the signature: one word of a heading set in the logo's script, same colour.
   line-height stays under 1 to keep the script optically level with the roman, but
   not so tight that a wrapped script phrase collides with itself. */
.scr { font-family: var(--script); font-weight: 400; font-size: 1.42em; line-height: .94; }

.label {
  margin: 0 0 18px;
  color: var(--encre-claire);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.label--centre { text-align: center; }

.lead { margin: 20px 0 0; font-size: 1.06rem; line-height: 1.8; max-width: 56ch; }
.p { margin: 16px 0 0; }
.p--large { max-width: 60ch; }

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

/* a small rose lozenge, the kit's circle motif reduced to a rule ornament */
.orn { display: block; width: 7px; height: 7px; border-radius: 50%; background: var(--vieux-rose); margin: 0 auto 18px; }

/* ---------------------------------------------------------------- boutons -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px; min-height: 50px;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent;
  font-family: var(--sans); font-size: .76rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  white-space: nowrap; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
/* a class that sets display beats the UA [hidden] rule, so the modal's step buttons
   would stay on screen at every step. Restore it explicitly. */
.btn[hidden], [hidden] { display: none !important; }
.btn:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; }
.btn--plein { background: var(--encre); color: var(--blanc); border-color: var(--encre); }
.btn--plein:hover { background: var(--rose-signature); border-color: var(--rose-signature); }
.btn--ligne { border-color: var(--encre); color: var(--encre); }
.btn--ligne:hover { background: var(--encre); color: var(--blanc); }
.btn--clair { background: var(--blanc); color: var(--encre); border-color: var(--blanc); }
.btn--clair:hover { background: var(--rose-poudre); border-color: var(--rose-poudre); }
.btn--ligne-clair { border-color: rgba(255, 255, 255, .7); color: var(--blanc); }
.btn--ligne-clair:hover { background: var(--blanc); color: var(--encre); }

.lienfleche {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 26px;
  color: var(--encre); font-size: .76rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
}
.lienfleche svg { width: 22px; height: 10px; transition: transform .25s ease; }
.lienfleche:hover svg { transform: translateX(6px); }

/* ------------------------------------------------------------------- nav -- */
.nav {
  position: sticky; top: 0; z-index: 90;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 20px;
  padding: 16px var(--gout);
  background: var(--blanc);
  border-bottom: 1px solid var(--filet);
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
/* over the hero photo: transparent, on a soft white scrim. Their interiors are all
   bright white, so a cream logo would be invisible: the full-colour logo stays. */
.nav--hero {
  position: fixed; left: 0; right: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, .92), rgba(255, 255, 255, .58) 55%, rgba(255, 255, 255, 0));
  border-bottom-color: transparent;
}
.nav--hero.scrolled { background: var(--blanc); border-bottom-color: var(--filet); box-shadow: 0 1px 24px rgba(92, 23, 48, .07); }

.nav__brand { position: relative; z-index: 120; display: inline-flex; justify-self: start; }
.nav__logo { width: auto; height: 52px; }

.nav__links { display: flex; align-items: center; gap: clamp(18px, 2.2vw, 34px); }
.nav__links a {
  color: var(--encre); font-size: .715rem; font-weight: 500;
  letter-spacing: .19em; text-transform: uppercase; text-decoration: none;
  padding: 6px 0; border-bottom: 1px solid transparent;
  transition: border-color .25s ease, color .25s ease;
}
.nav__links a:hover { border-bottom-color: var(--encre); }
.nav__links a.active { border-bottom-color: var(--encre); }

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

.nav__burger {
  display: none; width: 46px; height: 46px; padding: 0;
  background: transparent; border: 1px solid var(--filet); border-radius: 50%;
  cursor: pointer;
}
.nav__burger span { display: block; width: 17px; height: 1.5px; margin: 4px auto; background: var(--encre); transition: transform .3s ease, opacity .25s ease; }
.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); }

/* ------------------------------------------------------------------ hero -- */
.hero { position: relative; min-height: clamp(600px, 88vh, 900px); display: flex; align-items: flex-end; overflow: hidden; }
.hero__media { position: absolute; inset: 0; }
.hero__media picture { position: absolute; inset: 0; display: block; }
.hero__media img {
  width: 100%; height: 100%; object-fit: cover; object-position: 52% 48%;
  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.075); } }
@media (prefers-reduced-motion: reduce) { .hero__media img { animation: none; } }

/* Two scrims instead of one flat wash. Their interiors are bright white, so washing
   the whole frame killed the neon sign, which is the hero's actual subject. The
   bottom gradient seats the copy, the left one guarantees its contrast, and the
   centre-right of the photo stays untouched. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .92) 12%, rgba(255, 255, 255, .7) 24%, rgba(255, 255, 255, .2) 38%, rgba(255, 255, 255, 0) 50%),
    linear-gradient(to right, rgba(255, 255, 255, .9) 0%, rgba(255, 255, 255, .74) 18%, rgba(255, 255, 255, .3) 38%, rgba(255, 255, 255, 0) 56%);
}
@media (max-width: 860px) {
  .hero::after {
    background: linear-gradient(to top, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .93) 18%, rgba(255, 255, 255, .74) 32%, rgba(255, 255, 255, .26) 46%, rgba(255, 255, 255, 0) 60%);
  }
}
.hero__inner { position: relative; z-index: 2; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gout) clamp(56px, 7vw, 92px); }
.hero__titre { max-width: 15ch; }
.hero__sub { margin: 22px 0 0; max-width: 46ch; color: var(--anthracite); font-size: 1.06rem; line-height: 1.75; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* -------------------------------------------------------------- bandeau ---- */
.faits { background: var(--rose-poudre); border-bottom: 1px solid rgba(176, 40, 80, .1); }
.faits__row { display: grid; grid-template-columns: repeat(3, 1fr); }
.fait { display: flex; align-items: flex-start; gap: 14px; padding: 26px clamp(16px, 2.4vw, 34px); }
.fait + .fait { border-left: 1px solid rgba(176, 40, 80, .13); }
.fait svg { flex: none; width: 21px; height: 21px; color: var(--encre); margin-top: 3px; }
.fait__k { margin: 0 0 2px; color: var(--encre-claire); font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.fait__v { margin: 0; color: var(--anthracite); font-size: .93rem; line-height: 1.55; }
.fait__v a { text-decoration: none; }
.fait__v a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- le loft ----- */
.loft { display: grid; grid-template-columns: .88fr 1.12fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
.loft__media { position: relative; }
.loft__media img { width: 100%; border-radius: var(--r-media); }
.loft__niveaux { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 22px; }
.loft__niveaux li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.loft__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--rose-poudre); color: var(--encre);
  font-size: .68rem; font-weight: 600; letter-spacing: .1em;
}
.loft__niveaux b { display: block; color: var(--encre); font-size: .95rem; font-weight: 600; }
.loft__niveaux p { margin: 4px 0 0; font-size: .95rem; line-height: 1.65; }

/* -------------------------------------------------- index des prestations -- */
.index { border-top: 1px solid var(--filet); }
.index__row {
  position: relative;
  display: grid; grid-template-columns: 64px 1fr auto; gap: clamp(18px, 3vw, 40px);
  align-items: center;
  padding: clamp(24px, 3vw, 34px) 0;
  border-bottom: 1px solid var(--filet);
  text-decoration: none;
  transition: padding-left .35s ease;
}
.index__row:hover { padding-left: 14px; }
.ico { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 50%; background: var(--rose-poudre); flex: none; }
.ico svg { width: 36px; height: 36px; color: var(--encre); }
.index__nom { margin: 0; color: var(--encre); font-size: clamp(1.2rem, 2.1vw, 1.62rem); font-weight: 300; }
.index__det { margin: 5px 0 0; font-size: .95rem; line-height: 1.6; max-width: 54ch; }
.index__go { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.index__go svg { width: 20px; height: 9px; transition: transform .3s ease; }
.index__row:hover .index__go svg { transform: translateX(6px); }
.index__vue { position: absolute; right: 190px; top: 50%; width: 168px; height: 210px; transform: translateY(-50%) scale(.96); opacity: 0; pointer-events: none; border-radius: var(--r-media); 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; } }

/* ------------------------------------------------------------ split photo -- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 74px); align-items: center; }
.split--inverse .split__media { order: 2; }
.split__media img { width: 100%; border-radius: var(--r-media); }
.split__liste { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.split__liste li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: .97rem; line-height: 1.6; }
.split__liste svg { flex: none; width: 17px; height: 17px; color: var(--encre-claire); margin-top: 5px; }

/* ------------------------------------------------------------ bande photo -- */
.bande { position: relative; min-height: clamp(360px, 46vw, 520px); display: flex; align-items: center; overflow: hidden; }
.bande__media { position: absolute; inset: 0; }
.bande__media img { width: 100%; height: 100%; object-fit: cover; }
.bande::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(92, 23, 48, .78) 0%, rgba(92, 23, 48, .56) 46%, rgba(92, 23, 48, .22) 100%); }
.bande__inner { position: relative; z-index: 2; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: clamp(48px, 6vw, 76px) var(--gout); }
.bande__inner .h2, .bande .label { color: var(--blanc); }
.bande .label { color: rgba(255, 255, 255, .78); }
.bande__txt { max-width: 48ch; margin: 20px 0 0; color: rgba(255, 255, 255, .92); font-size: 1.02rem; line-height: 1.78; }
.bande__cta { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 14px; }

/* ----------------------------------------------------------------- avis ---- */
.avis { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.avis__c { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r-media); padding: clamp(26px, 3vw, 36px); }
.avis__q { width: 26px; height: 26px; color: var(--vieux-rose); margin-bottom: 14px; }
.avis__t { margin: 0; font-size: .96rem; line-height: 1.75; }
.avis__n { margin: 18px 0 0; color: var(--encre); font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }

/* ------------------------------------------------------------ instagram ---- */
.ig { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 18px); }
.ig__t { position: relative; display: block; overflow: hidden; border-radius: var(--r-media); background: var(--rose-poudre); }
.ig__t img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.ig--strip .ig__t { aspect-ratio: 4 / 5; }
.ig__t:hover img { transform: scale(1.05); }
.ig__voir {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 16px 14px;
  background: linear-gradient(to top, rgba(92, 23, 48, .8), rgba(92, 23, 48, 0));
  color: var(--blanc); font-size: .63rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  text-align: center;
}
.ig__play { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .9); display: grid; place-items: center; }
.ig__play svg { width: 13px; height: 13px; fill: var(--encre); }
.ig__pied { margin-top: 34px; text-align: center; }

/* mosaic gallery: every photo keeps its own ratio, nothing is cropped */
.mosaique { columns: 3; column-gap: clamp(12px, 1.6vw, 20px); }
.mosaique .ig__t { break-inside: avoid; margin-bottom: clamp(12px, 1.6vw, 20px); }

.ig__compte { display: inline-flex; align-items: center; gap: 10px; color: var(--encre); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-decoration: none; }
.ig__compte svg { width: 19px; height: 19px; }
.ig__compte:hover { color: var(--rose-signature); }

/* --------------------------------------------------------- tete de page ---- */
.tete { position: relative; min-height: clamp(300px, 38vw, 420px); display: flex; align-items: flex-end; overflow: hidden; }
.tete__media { position: absolute; inset: 0; }
.tete__media img { width: 100%; height: 100%; object-fit: cover; }
.tete::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(255, 255, 255, .95) 6%, rgba(255, 255, 255, .6) 38%, rgba(255, 255, 255, .1) 72%); }
.tete__inner { position: relative; z-index: 2; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gout) clamp(34px, 4vw, 56px); }
.tete__sub { margin: 16px 0 0; max-width: 56ch; font-size: 1.02rem; }

/* ----------------------------------------------------------- prestations --- */
.groupe + .groupe { margin-top: clamp(52px, 6vw, 86px); padding-top: clamp(52px, 6vw, 86px); border-top: 1px solid var(--filet); }
.groupe__head { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; }
.groupe__titre { margin: 0; color: var(--encre); font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 300; }
.groupe__corps { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(30px, 4vw, 62px); align-items: start; margin-top: 30px; }
.groupe__media img { width: 100%; border-radius: var(--r-media); }
.carte { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 34px; }
.carte li { break-inside: avoid; padding: 11px 0; border-bottom: 1px solid var(--filet); font-size: .96rem; }
.groupe__pied { margin-top: 28px; }

/* -------------------------------------------------------------- contact ---- */
.contact { display: grid; grid-template-columns: .92fr 1.08fr; gap: clamp(32px, 4vw, 64px); align-items: stretch; }
.contact__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.contact__liste li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; }
.contact__liste svg { flex: none; width: 21px; height: 21px; color: var(--encre); margin-top: 4px; }
.contact__k { margin: 0 0 3px; color: var(--encre-claire); font-size: .64rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.contact__v { margin: 0; font-size: .99rem; line-height: 1.6; }
.contact__v a { text-decoration: none; }
.contact__v a:hover { text-decoration: underline; }
.contact__cta { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 34px; }
.contact__repere { margin-top: 34px; }
.contact__repere img { width: 100%; max-width: 380px; border-radius: var(--r-media); }
.contact__repere figcaption { margin-top: 10px; font-size: .82rem; color: var(--anthracite); }
.carte-map { position: relative; min-height: 420px; border-radius: var(--r-media); overflow: hidden; background: var(--rose-poudre); }
.carte-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.horaires { list-style: none; margin: 0; padding: 0; max-width: 380px; }
.horaires li { display: flex; justify-content: space-between; gap: 20px; padding: 10px 0; border-bottom: 1px solid var(--filet); font-size: .95rem; }
.horaires li span:first-child { color: var(--encre); }
.horaires .ferme { color: var(--vieux-rose); }

/* --------------------------------------------------------------- footer ---- */
.pied { background: var(--bordeaux); color: rgba(255, 255, 255, .74); }
.pied__haut { max-width: var(--wrap); margin: 0 auto; padding: clamp(56px, 6vw, 84px) var(--gout) clamp(38px, 4vw, 54px); display: grid; grid-template-columns: 1.3fr .8fr 1fr; gap: clamp(32px, 4vw, 64px); }
.pied__logo { width: auto; height: 58px; }
.pied__sign { margin: 18px 0 0; color: var(--vieux-rose); font-family: var(--script); font-size: 1.65rem; line-height: 1.3; }
.pied h4 { margin: 0 0 18px; color: var(--blanc); font-size: .66rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.pied a { color: rgba(255, 255, 255, .74); text-decoration: none; font-size: .92rem; }
.pied a:hover { color: var(--blanc); }
.pied__contact li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: .92rem; line-height: 1.55; }
.pied__contact svg { flex: none; width: 17px; height: 17px; color: var(--vieux-rose); margin-top: 4px; }
.pied__soc { display: flex; gap: 12px; margin-top: 22px; }
.pied__soc a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, .26); border-radius: 50%; }
.pied__soc svg { width: 18px; height: 18px; }
.pied__soc a:hover { background: rgba(255, 255, 255, .12); }
.pied__bas { border-top: 1px solid rgba(255, 255, 255, .16); }
.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: .76rem; }
.pied__bas a { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }

/* ================================================== modale de reservation ==
   Scroll architecture from .claude/rules/booking-modal.md, verbatim. The four
   declarations below (overflow on the overlay, minmax(0,1fr) tracks, min-height:0
   on both grid children, flex-shrink:0 on the body's children) must stay together:
   remove any one and the card clips instead of scrolling.                    */
.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;
}
.rsv[hidden] { display: none; }
.rsv__backdrop { position: fixed; inset: 0; background: rgba(92, 23, 48, .48); border: 0; padding: 0; cursor: pointer; }

.rsv__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  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: var(--r-media);
  box-shadow: 0 30px 90px rgba(92, 23, 48, .3);
}
.rsv__aside { position: relative; min-height: 0; overflow-y: auto; background: var(--rose-poudre); }
.rsv__aside img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rsv__aside-in { position: relative; z-index: 2; padding: clamp(28px, 3vw, 40px); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(to top, rgba(92, 23, 48, .84), rgba(92, 23, 48, .3) 62%, rgba(92, 23, 48, .12)); }
.rsv__aside-in p { margin: 0; color: rgba(255, 255, 255, .88); font-size: .92rem; line-height: 1.65; }
.rsv__aside-t { margin: 0 0 10px !important; color: var(--blanc) !important; font-family: var(--script); font-size: 2.4rem; line-height: 1; }

.rsv__body { display: flex; flex-direction: column; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; padding: clamp(24px, 3vw, 38px); }
.rsv__body > * { flex-shrink: 0; }

.rsv__fermer { position: absolute; top: 12px; right: 12px; z-index: 4; width: 40px; height: 40px; display: grid; place-items: center; background: var(--blanc); border: 1px solid var(--filet); border-radius: 50%; cursor: pointer; }
.rsv__fermer svg { width: 15px; height: 15px; color: var(--encre); }

.rsv__steps { display: flex; gap: 7px; margin-bottom: 18px; }
.rsv__steps i { width: 30px; height: 2px; background: var(--filet); border-radius: 2px; }
.rsv__steps i.on { background: var(--encre); }
.rsv__titre { margin: 0; color: var(--encre); font-size: 1.42rem; font-weight: 300; }
.rsv__hint { margin: 7px 0 22px; font-size: .88rem; }

.rsv__label { margin: 20px 0 9px; color: var(--encre-claire); font-size: .62rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.rsv__label:first-of-type { margin-top: 0; }
.rsv__packs { display: grid; gap: 7px; }
.rsv__pack {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
  padding: 13px 17px; min-height: 48px;
  background: var(--creme); border: 1px solid var(--filet); border-radius: 999px;
  font-family: var(--sans); font-size: .92rem; color: var(--anthracite); text-align: left; cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.rsv__pack:hover { border-color: var(--encre-claire); }
.rsv__pack[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.rsv__pack-note { font-size: .76rem; opacity: .72; }

.rsv__field { margin-bottom: 18px; }
.rsv__field label { display: block; margin-bottom: 9px; color: var(--encre-claire); font-size: .62rem; font-weight: 600; 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 15px;
  background: var(--creme); border: 1px solid var(--filet); border-radius: 999px;
  font-family: var(--sans); font-size: 16px; color: var(--anthracite);
}
.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: 9px; }
.rsv__chip {
  padding: 12px 22px; min-height: 46px;
  background: var(--creme); border: 1px solid var(--filet); border-radius: 999px;
  font-family: var(--sans); font-size: .85rem; color: var(--anthracite); cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.rsv__chip:hover { border-color: var(--encre-claire); }
.rsv__chip[aria-pressed="true"] { background: var(--encre); border-color: var(--encre); color: var(--blanc); }

.rsv__recap { margin: 0 0 22px; padding: 22px 24px; background: var(--rose-poudre); border-radius: var(--r-media); list-style: none; display: grid; gap: 11px; }
.rsv__recap li { display: flex; justify-content: space-between; gap: 18px; font-size: .92rem; }
.rsv__recap b { color: var(--encre); font-weight: 600; text-align: right; }

.rsv__actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: auto; padding-top: 26px; }
.rsv__actions .btn { flex: 1 1 190px; min-width: 0; }
.rsv__note { margin: 16px 0 0; font-size: .8rem; line-height: 1.6; }

/* ------------------------------------------------------------ responsive --- */
@media (max-width: 1080px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav__cta--bar { display: none; }
  .nav__cta--menu { display: inline-flex; margin-top: 10px; }
  .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: .92rem; letter-spacing: .22em; }
  /* a backdrop-filter on the header would make it the containing block and collapse
     the full-screen menu to the header strip, so none is used here at all. */
  .nav.menu-open { background: var(--blanc); border-bottom-color: transparent; }

  .loft, .split, .groupe__corps, .contact { grid-template-columns: 1fr; }
  .split--inverse .split__media { order: 0; }
  .avis { grid-template-columns: repeat(2, 1fr); }
  .index__vue { display: none; }
  .pied__haut { grid-template-columns: 1fr 1fr; }
}

@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 { min-height: 150px; max-height: 180px; }
  .rsv__aside-in { justify-content: flex-end; }
  .rsv__aside-t { font-size: 1.9rem; }
}

@media (max-width: 860px) {
  .hero { min-height: clamp(560px, 82vh, 760px); }
  .faits__row { grid-template-columns: 1fr; }
  .fait + .fait { border-left: 0; border-top: 1px solid rgba(176, 40, 80, .13); }
  .ig { grid-template-columns: repeat(2, 1fr); }
  .mosaique { columns: 2; }
  .carte { columns: 1; }
  .index__row { grid-template-columns: 48px 1fr; }
  .index__go { grid-column: 2; margin-top: 8px; }
  .ico { width: 48px; height: 48px; }
  .ico svg { width: 25px; height: 25px; }
}

@media (max-width: 680px) {
  body { font-size: 16px; }
  .nav__logo { height: 40px; }
  /* keep the script phrase on its own line instead of letting it wrap mid-signature */
  .hero__titre .scr, .tete__inner .h1 .scr { display: block; }
  .h1 { font-size: clamp(2.1rem, 8.4vw, 2.7rem); line-height: 1.14; }
  .hero__titre { max-width: 20ch; }
  .avis { grid-template-columns: 1fr; }
  .pied__haut { grid-template-columns: 1fr; }
  .contact__repere img { max-width: 100%; }

  .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__actions { flex-direction: column; }
  .rsv__actions .btn { flex: 1 1 auto; }
}

@media (max-width: 420px) {
  .hero__cta .btn, .contact__cta .btn { flex: 1 1 100%; }
}