/* Le Salon, Hay Riad, Rabat
   Design system from the client's brand kit: black-dominant with ivoire panels,
   nude discs as the recurring device, soft gold as the only accent ink.
   Playfair Display for titles and nav, Montserrat for body, Allura for accroches.
   Shape lock: circles for marks and icon discs, square corners everywhere else. */

/* ---------------------------------------------------------------- tokens */
:root{
  --noir:#000000;        /* kit, fond dominant */
  --gris:#2B2B2B;        /* kit, surfaces sombres secondaires */
  --nude:#D4C3B1;        /* kit, disques, filets, plaques */
  --ivoire:#EDE7DF;      /* kit, panneaux clairs et texte sur noir */
  --dore:#C9A986;        /* kit, prix, accents, Allura */

  --encre:#141414;                      /* texte sur surface claire */
  --encre-doux:rgba(20,20,20,.66);
  --ivoire-doux:rgba(237,231,223,.7);
  --filet-clair:rgba(20,20,20,.14);
  --filet-sombre:rgba(237,231,223,.16);

  --display:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --script:"Allura","Playfair Display",cursive;

  --wrap:1180px;
  --nav-h:96px;
  --t-vite:.22s cubic-bezier(.22,.61,.36,1);
  --t-doux:.5s cubic-bezier(.22,.61,.36,1);
}

/* ------------------------------------------------------------------ base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--noir);color:var(--ivoire);
  font-family:var(--sans);font-weight:400;font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:transparent;border:0;color:inherit;cursor:pointer}
h1,h2,h3,h4,.h1,.h2,.h3{
  font-family:var(--display);font-weight:400;line-height:1.12;letter-spacing:.005em;margin:0;
}
.h1{font-size:clamp(2.35rem,6vw,4.5rem)}
.h2{font-size:clamp(1.85rem,3.4vw,2.85rem)}
.h3{font-family:var(--display);font-size:1.2rem;font-weight:500}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.wrap{width:min(var(--wrap),calc(100% - 48px));margin-inline:auto}
.lead{font-size:1.05rem;color:var(--ivoire-doux);max-width:58ch}
.sec--ivoire .lead,.sec--nude .lead{color:var(--encre-doux)}

.micro{
  font-family:var(--sans);font-weight:600;font-size:.71rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dore);margin:0 0 18px;
}
.accroche{
  font-family:var(--script);font-size:clamp(1.9rem,4vw,3rem);line-height:1.25;
  color:var(--dore);margin:0;
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* --------------------------------------------------------------- boutons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 28px;border:1px solid transparent;background:transparent;
  font-family:var(--sans);font-weight:600;font-size:.73rem;letter-spacing:.17em;
  text-transform:uppercase;white-space:nowrap;cursor:pointer;
  transition:background var(--t-vite),color var(--t-vite),border-color var(--t-vite);
}
.btn svg{width:17px;height:17px;flex:0 0 auto}
.btn--nude{background:var(--nude);color:var(--noir);border-color:var(--nude)}
.btn--nude:hover{background:var(--ivoire);border-color:var(--ivoire)}
.btn--creme{background:var(--ivoire);color:var(--noir);border-color:var(--ivoire)}
.btn--creme:hover{background:var(--nude);border-color:var(--nude)}
.btn--noir{background:var(--noir);color:var(--ivoire);border-color:var(--noir)}
.btn--noir:hover{background:var(--gris);border-color:var(--gris)}
.btn--ligne{border-color:rgba(20,20,20,.4);color:var(--encre)}
.btn--ligne:hover{background:var(--noir);border-color:var(--noir);color:var(--ivoire)}
.btn--ligne-creme{border-color:rgba(237,231,223,.45);color:var(--ivoire)}
.btn--ligne-creme:hover{background:var(--ivoire);border-color:var(--ivoire);color:var(--noir)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}

/* ------------------------------------------------------- le motif du kit */
/* The one-line face in its nude disc, the kit's own device. Used as the nav
   brand, as the section separator and as the icon plate. */
.disque{
  display:grid;place-items:center;border-radius:50%;background:var(--nude);
  flex:0 0 auto;
}
.filet{
  display:flex;align-items:center;justify-content:center;gap:20px;margin:0 auto 26px;
}
.filet::before,.filet::after{
  content:"";height:1px;width:clamp(40px,9vw,96px);
  background:linear-gradient(90deg,transparent,var(--dore));
}
.filet::after{background:linear-gradient(90deg,var(--dore),transparent)}
.filet .disque{width:44px;height:44px}
.filet .disque img{width:26px}
.sec--ivoire .filet .disque,.sec--nude .filet .disque{background:var(--noir)}

/* -------------------------------------------------------------------- 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:24px;padding:0 clamp(20px,3vw,40px);height:var(--nav-h);
  background:transparent;border-bottom:1px solid transparent;
  transition:background var(--t-doux),height var(--t-doux),border-color var(--t-doux);
}
.nav--plaque,.nav.scrolled{
  background:rgba(0,0,0,.93);border-bottom-color:var(--filet-sombre);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
}
.nav.scrolled{height:78px}
.nav__brand{display:flex;align-items:center;gap:12px;position:relative;z-index:120}
.nav__brand img{height:clamp(42px,4.2vw,52px);width:auto;transition:height var(--t-doux)}
.nav.scrolled .nav__brand img{height:40px}
.nav__links{
  display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.4vw,34px);
  justify-self:center;
}
.nav__links a{
  position:relative;font-family:var(--display);font-size:1.01rem;color:var(--ivoire);
  padding:5px 1px;transition:color var(--t-vite);
}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--dore);transition:right var(--t-vite);
}
.nav__links a:hover::after,.nav__links a.active::after{right:0}
.nav__links a:hover,.nav__links a.active{color:var(--dore)}
.nav__end{display:flex;align-items:center;justify-content:flex-end;gap:14px;
  position:relative;z-index:120}
.nav__cta{padding:13px 22px}
.nav__cta--menu{display:none}
.nav__burger{
  display:none;position:relative;width:40px;height:32px;flex:0 0 auto;
}
.nav__burger span{
  position:absolute;left:6px;right:6px;height:1.5px;background:var(--ivoire);
  transition:transform var(--t-vite),opacity var(--t-vite);
}
.nav__burger span:nth-child(1){top:9px}
.nav__burger span:nth-child(2){top:15.5px}
.nav__burger span:nth-child(3){top:22px}

/* ------------------------------------------------------------------ hero */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--noir)}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__bg picture{position:absolute;inset:0;display:block}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:52% 50%}
.hero__voile{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.04) 30%,rgba(0,0,0,.26) 56%,rgba(0,0,0,.88) 100%),
    linear-gradient(90deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.24) 38%,rgba(0,0,0,0) 66%);
}
.hero__inner{position:relative;z-index:2;width:min(var(--wrap),calc(100% - 48px));
  margin-inline:auto;padding:calc(var(--nav-h) + 76px) 0 clamp(56px,8vh,96px)}
.hero__accroche{margin:0 0 14px}
.hero .h1{max-width:20ch;color:var(--ivoire)}
.hero__sous{margin:22px 0 32px;max-width:46ch;color:var(--ivoire);font-size:1.05rem}
.hero .btn-row{margin-top:4px}

/* ------------------------------------------------------- bandeau de faits */
.faits{background:var(--gris);border-top:1px solid var(--filet-sombre)}
.faits__grille{display:grid;grid-template-columns:repeat(3,1fr)}
.faits__t{
  display:flex;gap:16px;align-items:flex-start;padding:34px clamp(20px,3vw,40px);
  border-right:1px solid var(--filet-sombre);
}
.faits__t:last-child{border-right:0}
.faits__t .disque{width:42px;height:42px}
.faits__t svg{width:20px;height:20px;color:var(--noir)}
.faits__t p{margin:0;font-size:.95rem;color:var(--ivoire)}

/* -------------------------------------------------------------- sections */
.sec{padding:clamp(68px,9vw,118px) 0}
.sec--ivoire{background:var(--ivoire);color:var(--encre)}
.sec--nude{background:var(--nude);color:var(--encre)}
.sec--gris{background:var(--gris)}
.sec--ivoire .h1,.sec--ivoire .h2,.sec--ivoire .h3,
.sec--nude .h1,.sec--nude .h2,.sec--nude .h3{color:var(--encre)}
.sec--nude .micro{color:var(--gris)}
.sec__tete{max-width:60ch;margin-bottom:clamp(38px,5vw,58px)}
.sec__tete--centre{margin-inline:auto;text-align:center}
.sec__tete--centre .lead{margin-inline:auto}

/* ------------------------------------------------ les 8 icones du kit */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,34px)}
.svc__c{text-align:center}
.svc__c .disque{width:clamp(74px,8vw,92px);height:clamp(74px,8vw,92px);margin:0 auto 18px;
  transition:transform var(--t-doux)}
.svc__c .disque svg{width:38%;height:38%;color:var(--noir)}
.svc__c:hover .disque{transform:translateY(-5px)}
.svc__c h3{font-family:var(--sans);font-size:.73rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;margin:0 0 9px}
.svc__c p{font-size:.92rem;color:var(--ivoire-doux);margin:0}
.sec--ivoire .svc__c p,.sec--nude .svc__c p{color:var(--encre-doux)}
.sec--nude .svc__c .disque{background:var(--noir)}
.sec--nude .svc__c .disque svg{color:var(--nude)}

/* --------------------------------------------------------- bande photo */
.bande{position:relative;min-height:clamp(320px,42vw,470px);display:grid;
  place-items:center;overflow:hidden;text-align:center}
.bande img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.bande__voile{position:absolute;inset:0;z-index:1;background:rgba(0,0,0,.6)}
.bande__in{position:relative;z-index:2;padding:clamp(48px,7vw,76px) 24px;
  width:min(720px,100%)}
.bande__in .accroche{margin-bottom:16px}
.bande__in p{color:var(--ivoire);margin:0}

/* --------------------------------------------------- apercu des tarifs */
.apercu{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,72px);
  align-items:center}
.apercu__media{position:relative}
/* each frame matches its source ratio: forcing a portrait frame onto a square or
   landscape photo crops the subject out */
.apercu__media img{width:100%;aspect-ratio:3/4;object-fit:cover}
.apercu__media--carre img{aspect-ratio:1/1}
.apercu__media--45 img{aspect-ratio:4/5}
.apercu__media .disque{position:absolute;right:-24px;bottom:-24px;width:96px;height:96px}
.apercu__media .disque img{width:54px;aspect-ratio:auto}
.apercu .lead{margin-bottom:28px}
.ancres{list-style:none;margin:0 0 30px;padding:0}
.ancres li{display:flex;align-items:baseline;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--filet-clair)}
.ancres li:first-child{border-top:1px solid var(--filet-clair)}
.ancres span:first-child{font-size:.98rem}
.ancres .pointille{flex:1 1 auto;height:1px;
  background:repeating-linear-gradient(90deg,var(--filet-clair) 0 2px,transparent 2px 6px)}
.ancres .prix{font-family:var(--display);font-size:1.12rem;color:var(--dore);
  white-space:nowrap}
.sec .ancres li,.sec .ancres li:first-child{border-color:var(--filet-sombre)}
.sec .ancres .pointille{background:repeating-linear-gradient(90deg,var(--filet-sombre) 0 2px,transparent 2px 6px)}

/* ---------------------------------------------------------------- avis */
.avis{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.6vw,32px)}
.avis__c{border:1px solid var(--filet-sombre);padding:clamp(26px,3vw,38px);
  background:rgba(237,231,223,.03)}
.sec--ivoire .avis__c{border-color:var(--filet-clair);background:rgba(0,0,0,.02)}
.avis__c blockquote{margin:0 0 20px;font-family:var(--display);font-size:1.07rem;
  line-height:1.62;font-style:italic}
.avis__c figcaption{font-family:var(--sans);font-size:.71rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dore)}

/* --------------------------------------------- galerie liee a Instagram */
.ig__tete{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;
  justify-content:space-between;margin-bottom:30px}
.ig__handle{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);
  font-size:.76rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--dore);transition:color var(--t-vite)}
.ig__handle svg{width:19px;height:19px}
.ig__handle:hover{color:var(--ivoire)}
.ig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
.ig-p{position:relative;display:block;overflow:hidden;background:var(--gris)}
.ig-p img{width:100%;aspect-ratio:4/5;object-fit:cover;
  transition:transform 1s cubic-bezier(.22,.61,.36,1)}
.ig-p::after{content:"";position:absolute;inset:0;opacity:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.68));
  transition:opacity var(--t-doux)}
.ig-p__v{
  position:absolute;inset:0;z-index:2;display:flex;align-items:center;
  justify-content:center;gap:9px;opacity:0;transition:opacity var(--t-doux);
  font-family:var(--sans);font-size:.69rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--ivoire);
}
.ig-p__v svg{width:16px;height:16px}
.ig-p:hover img{transform:scale(1.055)}
.ig-p:hover::after,.ig-p:hover .ig-p__v{opacity:1}
.fin{margin-top:clamp(30px,4vw,46px);text-align:center}
.fin .btn-row{justify-content:center}

/* ------------------------------------------------------ tete de page */
.tete{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  min-height:clamp(340px,46vw,480px)}
.tete__bg{position:absolute;inset:0;z-index:0}
.tete__bg img{width:100%;height:100%;object-fit:cover}
.tete__voile{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.72),rgba(0,0,0,.26) 46%,rgba(0,0,0,.8))}
.tete__in{position:relative;z-index:2;width:min(var(--wrap),calc(100% - 48px));
  margin-inline:auto;padding:calc(var(--nav-h) + 56px) 0 clamp(40px,6vh,64px)}
.tete__in .h1{font-size:clamp(2.1rem,4.6vw,3.4rem);color:var(--ivoire)}
.tete__in p{margin:18px 0 0;max-width:52ch;color:var(--ivoire)}

/* ------------------------------------------------------ liste de prix */
/* Price lists live on the black sections: the kit's soft gold is the accent ink
   Jad wants on prices, and it only clears contrast on black (on ivoire it sits
   near 1.7:1). On a light section the price falls back to ink. */
.prix-grp{margin-bottom:clamp(44px,5.5vw,72px)}
.prix-grp:last-of-type{margin-bottom:0}
.prix-grp__tete{display:flex;align-items:center;gap:16px;margin-bottom:22px;
  padding-bottom:16px;border-bottom:1px solid var(--filet-sombre)}
.prix-grp__tete .disque{width:46px;height:46px}
.prix-grp__tete .disque svg{width:22px;height:22px;color:var(--noir)}
.prix-grp__tete h2{font-size:clamp(1.4rem,2.3vw,1.85rem)}
.prix-l{list-style:none;margin:0;padding:0;
  columns:2;column-gap:clamp(34px,5vw,70px)}
.prix-l li{display:flex;align-items:baseline;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--filet-sombre);break-inside:avoid}
.prix-l .nom{font-size:.97rem}
.prix-l .pointille{flex:1 1 auto;height:1px;min-width:16px;
  background:repeating-linear-gradient(90deg,var(--filet-sombre) 0 2px,transparent 2px 6px)}
.prix-l .prix{font-family:var(--display);font-size:1.08rem;color:var(--dore);
  white-space:nowrap}
.sec--ivoire .prix-grp__tete,.sec--ivoire .prix-l li{border-bottom-color:var(--filet-clair)}
.sec--ivoire .prix-l .pointille{
  background:repeating-linear-gradient(90deg,var(--filet-clair) 0 2px,transparent 2px 6px)}
.sec--ivoire .prix-l .prix{color:var(--noir)}

/* ------------------------------------------------ detail des prestations */
.grp__tete{display:flex;align-items:center;gap:16px;margin-bottom:20px;
  padding-bottom:15px;border-bottom:1px solid var(--filet-sombre)}
.grp__tete .disque{width:46px;height:46px}
.grp__tete .disque svg{width:22px;height:22px;color:var(--noir)}
.grp__tete h2,.grp__tete h3{font-family:var(--display);font-weight:400;
  font-size:clamp(1.3rem,2.1vw,1.7rem)}
.sec--ivoire .grp__tete,.sec--nude .grp__tete{border-bottom-color:var(--filet-clair)}
.sec--nude .grp__tete .disque{background:var(--noir)}
.sec--nude .grp__tete .disque svg{color:var(--nude)}
.det-l{list-style:none;margin:0;padding:0}
.det-l li{display:flex;gap:11px;padding:7px 0;font-size:.97rem}
.det-l li::before{content:"";flex:0 0 auto;width:14px;height:1px;
  background:var(--dore);margin-top:.85em}
.det-l--2{columns:2;column-gap:clamp(28px,4vw,56px)}
.det-l--2 li{break-inside:avoid}
.grps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3.4vw,48px)}
.grps--2{grid-template-columns:repeat(2,1fr)}

.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,28px)}
.pack{border:1px solid var(--filet-sombre);padding:clamp(26px,3vw,36px);
  display:flex;flex-direction:column;gap:14px}
.pack h3{font-size:1.35rem}
.pack p{font-size:.93rem;color:var(--ivoire-doux);margin:0}
/* after .pack p, which is more specific than a lone class and was flattening it */
.pack p.pack__prix{font-family:var(--display);font-size:1.9rem;color:var(--dore);line-height:1.2}
.pack--sup{grid-column:1/-1;flex-direction:row;align-items:center;
  justify-content:space-between;flex-wrap:wrap;border-color:var(--filet-sombre)}
.pack--sup p{max-width:58ch}

/* ------------------------------------------------------------- contact */
.ct{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,4vw,60px);
  align-items:stretch}
.ct__liste{list-style:none;margin:0 0 30px;padding:0}
.ct__liste li{display:flex;gap:16px;padding:18px 0;
  border-bottom:1px solid var(--filet-sombre)}
.ct__liste li:first-child{border-top:1px solid var(--filet-sombre)}
.ct__liste .disque{width:40px;height:40px}
.ct__liste svg{width:19px;height:19px;color:var(--noir)}
.ct__liste h3{font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dore);margin:0 0 6px}
.ct__liste p,.ct__liste a{margin:0;font-size:.98rem;color:var(--ivoire)}
.ct__liste a:hover{color:var(--dore)}
.ct__carte{position:relative;min-height:420px}
.ct__carte iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.horaires{list-style:none;margin:0;padding:0}
.horaires li{display:flex;justify-content:space-between;gap:20px;padding:11px 0;
  border-bottom:1px solid var(--filet-sombre);font-size:.96rem}
.horaires li:last-child{border-bottom:0}
.horaires .j{color:var(--ivoire-doux)}
.horaires b{font-weight:500;font-family:var(--display);font-size:1.04rem}
.horaires li.auj .j{color:var(--dore)}

/* ---------------------------------------------------------- bandeau CTA */
.cta{background:var(--gris);text-align:center;
  padding:clamp(62px,8vw,104px) 0;border-top:1px solid var(--filet-sombre)}
.cta .h2{margin-bottom:18px}
.cta p{max-width:52ch;margin-inline:auto;color:var(--ivoire-doux)}
.cta .btn-row{justify-content:center;margin-top:32px}

/* --------------------------------------------------------------- footer */
.footer{background:var(--noir);border-top:1px solid var(--filet-sombre)}
.footer__haut{
  width:min(var(--wrap),calc(100% - 48px));margin-inline:auto;
  padding:clamp(52px,6vw,76px) 0;display:grid;
  grid-template-columns:1.25fr .75fr 1fr;gap:clamp(30px,4vw,56px);
}
.footer__logo{height:auto;width:clamp(170px,16vw,208px);margin-bottom:20px}
.footer__mot{font-size:.93rem;color:var(--ivoire-doux);max-width:34ch}
.footer ul{list-style:none;margin:0;padding:0}
.footer ul li{margin-bottom:11px;font-size:.94rem}
.footer a:hover{color:var(--dore)}
.footer__c li{display:flex;gap:11px;align-items:flex-start;color:var(--ivoire-doux)}
.footer__c svg{width:17px;height:17px;color:var(--dore);flex:0 0 auto;margin-top:4px}
.footer__soc{display:flex;gap:12px;margin-top:20px}
.footer__soc a{display:grid;place-items:center;width:40px;height:40px;
  border:1px solid var(--filet-sombre);transition:border-color var(--t-vite),color var(--t-vite)}
.footer__soc a:hover{border-color:var(--dore);color:var(--dore)}
.footer__soc svg{width:19px;height:19px}
.footer__bas{border-top:1px solid var(--filet-sombre)}
.footer__bas-in{
  width:min(var(--wrap),calc(100% - 48px));margin-inline:auto;padding:22px 0;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-size:.7rem;letter-spacing:.11em;color:rgba(237,231,223,.5);
}
.footer__bas-in a{text-transform:uppercase;text-decoration:none;letter-spacing:.17em}
.footer__bas-in a:hover{color:var(--dore)}

/* --------------------------------------- modale de reservation (.rsv) */
/* Scroll architecture copied verbatim from .claude/rules/booking-modal.md:
   overlay scrolls as the safety net, the card is capped to the dynamic viewport,
   both grid children get min-height:0 and the body's children must not shrink. */
.rsv{position:fixed;inset:0;z-index:140;display:none;align-items:flex-start;
  justify-content:center;padding:24px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch}
.rsv.ouvert{display:flex}
.rsv__backdrop{position:fixed;inset:0;background:rgba(0,0,0,.88)}
.rsv__card{position:relative;display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:minmax(0,1fr);
  width:min(940px,calc(100vw - 40px));margin:auto;
  max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);
  overflow:hidden;background:var(--ivoire);color:var(--encre)}
.rsv__aside{min-height:0;overflow-y:auto;position:relative;background:var(--noir);
  padding:clamp(28px,3vw,40px);display:flex;flex-direction:column;justify-content:space-between}
.rsv__aside-bg{position:absolute;inset:0;z-index:0;opacity:.3}
.rsv__aside-bg img{width:100%;height:100%;object-fit:cover}
.rsv__aside-in{position:relative;z-index:1}
.rsv__aside .disque{width:52px;height:52px;margin-bottom:22px}
.rsv__aside .disque img{width:30px}
.rsv__aside h2{color:var(--ivoire);font-size:1.6rem;margin-bottom:14px}
.rsv__aside p{color:var(--ivoire-doux);font-size:.92rem}
.rsv__note{position:relative;z-index:1;margin-top:26px;font-size:.78rem;
  color:rgba(237,231,223,.55);line-height:1.6}
.rsv__body{display:flex;flex-direction:column;overflow-y:auto;min-height:0;
  -webkit-overflow-scrolling:touch;padding:clamp(26px,3vw,38px)}
.rsv__body > *{flex-shrink:0}
.rsv__fermer{position:absolute;top:14px;right:14px;z-index:5;width:40px;height:40px;
  display:grid;place-items:center;color:var(--encre)}
.rsv__fermer svg{width:20px;height:20px}
.rsv__steps{display:flex;gap:7px;margin-bottom:24px}
.rsv__steps i{width:34px;height:2px;background:rgba(20,20,20,.16);display:block}
.rsv__steps i.on{background:var(--dore)}
.rsv__step{display:none}
.rsv__step.on{display:block}
.rsv__step h3{font-size:1.32rem;margin-bottom:6px}
.rsv__hint{font-size:.86rem;color:var(--encre-doux);margin-bottom:22px}
.rsv__cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.rsv__cat{padding:9px 16px;border:1px solid var(--filet-clair);font-size:.72rem;
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  transition:background var(--t-vite),border-color var(--t-vite),color var(--t-vite)}
.rsv__cat[aria-pressed="true"]{background:var(--noir);border-color:var(--noir);color:var(--ivoire)}
.rsv__packs{max-height:300px;overflow-y:auto;border-top:1px solid var(--filet-clair)}
.rsv__pack{display:flex;width:100%;align-items:baseline;gap:12px;text-align:left;
  padding:13px 4px;border-bottom:1px solid var(--filet-clair);
  transition:background var(--t-vite)}
.rsv__pack:hover{background:rgba(212,195,177,.3)}
.rsv__pack[aria-pressed="true"]{background:var(--nude)}
.rsv__pack .nom{font-size:.95rem}
.rsv__pack .pointille{flex:1 1 auto;height:1px;min-width:14px;
  background:repeating-linear-gradient(90deg,var(--filet-clair) 0 2px,transparent 2px 6px)}
.rsv__pack .prix{font-family:var(--display);font-size:1.04rem;white-space:nowrap}
.rsv__champ{margin-bottom:20px}
.rsv__champ label{display:block;font-family:var(--sans);font-size:.67rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--encre-doux);margin-bottom:9px}
/* iOS paints no placeholder in an empty date input, so give it a real surface,
   an explicit min-height (appearance:none strips the widget's own) and 16px type
   so focus does not zoom the page. */
.rsv__champ input[type="date"]{
  -webkit-appearance:none;appearance:none;width:100%;min-height:50px;
  padding:0 14px;font-family:var(--sans);font-size:16px;line-height:1.3;
  color:var(--encre);background:#fff;border:1px solid var(--filet-clair);border-radius:0}
.rsv__champ input[type="date"]::-webkit-date-and-time-value{text-align:left;margin:0}
.rsv__champ input[type="date"]::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
.rsv__chips{display:flex;flex-wrap:wrap;gap:9px}
.rsv__chip{flex:1 1 30%;padding:14px 10px;border:1px solid var(--filet-clair);
  font-size:.73rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  transition:background var(--t-vite),border-color var(--t-vite),color var(--t-vite)}
.rsv__chip[aria-pressed="true"]{background:var(--noir);border-color:var(--noir);color:var(--ivoire)}
.rsv__recap{background:var(--nude);padding:22px 24px;margin-bottom:22px}
.rsv__recap dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:9px 18px}
.rsv__recap dt{font-size:.67rem;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(20,20,20,.6)}
.rsv__recap dd{margin:0;font-family:var(--display);font-size:1.02rem;text-align:right}
.rsv__dire{border:1px solid var(--filet-clair);padding:20px 22px;margin-bottom:22px}
.rsv__dire h4{font-family:var(--sans);font-size:.67rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--encre-doux);margin:0 0 12px}
.rsv__dire p{margin:0;font-size:.95rem;line-height:1.75}
.rsv__pieds{display:flex;flex-wrap:wrap;gap:12px;margin-top:auto;padding-top:24px}
.rsv__pieds .btn{flex:1 1 150px;min-width:0;padding-left:18px;padding-right:18px}
.rsv__pieds .btn--retour{flex:1 1 130px}
/* the primary action takes its own row: three buttons abreast clipped its label
   at the 1280 card width */
.rsv__pieds #rsv-wa{order:-1;flex:1 1 100%}

/* -------------------------------------------------- mouvement (au chargement) */
/* No scroll-reveal on this build. A reveal hides content until script says
   otherwise, and on this site it shipped a page with no readable text. The
   rulebook's own line applies: none is better than a forced effect. The
   [data-reveal] attributes are left in the markup, inert, so the effect can be
   reintroduced deliberately later.

   The motion that remains is CSS-only and runs on load, so it has no scroll or
   script dependency and no state in which content stays hidden: the resting
   state of every element is visible, and the keyframe is what dips it.
   Durations and delays are literal, never var(): a variable holding
   "duration + curve" inside an animation shorthand makes three time values and
   the whole rule is dropped in silence. */
   Deliberately transform-only: an opacity keyframe with fill-mode both leaves the
   element on its `from` frame when the animation never starts (a backgrounded tab
   is enough), which is the same permanently-invisible text this build already
   shipped once. A transform that does not run just means no zoom. */
@keyframes kenburns{from{transform:scale(1.06)}to{transform:scale(1)}}

.hero__bg img{animation:kenburns 14s cubic-bezier(.33,.1,.35,1) both}
.tete__bg img{animation:kenburns 16s cubic-bezier(.33,.1,.35,1) both}

/* ---------------------------------------------------------- responsive */
@media (max-width:1100px){
  .svc{grid-template-columns:repeat(2,1fr);gap:34px 22px}
  .footer__haut{grid-template-columns:1fr 1fr}
}
@media (max-width:1020px){
  :root{--nav-h:76px}
  .nav.scrolled{height:68px}
  .nav{grid-template-columns:1fr auto}
  .nav__burger{display:block}
  .nav__cta--barre{display:none}
  .nav__cta--menu{display:inline-flex;margin-top:12px}
  .nav__links{
    position:fixed;top:0;left:0;width:100vw;height:100dvh;z-index:100;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:26px;background:var(--noir);
    opacity:0;visibility:hidden;transition:opacity var(--t-vite),visibility var(--t-vite);
  }
  .nav__links.nav-open{opacity:1;visibility:visible;justify-self:stretch}
  .nav__links a{font-size:1.5rem}
  /* the header carries a backdrop-filter when scrolled, which would make it the
     containing block for the fixed menu and collapse it to the header strip */
  .nav.menu-open{-webkit-backdrop-filter:none;backdrop-filter:none;background:transparent;
    border-bottom-color:transparent}
  .nav.menu-open .nav__burger span:nth-child(1){transform:translateY(6.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(-6.5px) rotate(-45deg)}
  .apercu,.ct{grid-template-columns:1fr}
  .apercu__media{order:-1;max-width:460px}
  .apercu__media .disque{right:-16px;bottom:-16px;width:78px;height:78px}
  .packs{grid-template-columns:repeat(2,1fr)}
  .grps{grid-template-columns:repeat(2,1fr)}
  .pack--sup{flex-direction:column;align-items:flex-start}
  .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:26px 26px 22px}
  .rsv__aside .disque{width:44px;height:44px;margin-bottom:14px}
  .rsv__note{display:none}
}
@media (max-width:860px){
  .faits__grille{grid-template-columns:1fr}
  .faits__t{border-right:0;border-bottom:1px solid var(--filet-sombre);padding:24px 0}
  .faits__t:last-child{border-bottom:0}
  .faits .wrap{width:min(var(--wrap),calc(100% - 40px))}
  .hero{min-height:min(88vh,720px)}
  .hero__bg img{object-position:38% 46%}
  .avis{grid-template-columns:1fr}
  .prix-l{columns:1}
}
@media (max-width:680px){
  .wrap,.hero__inner,.tete__in,.footer__haut,.footer__bas-in{
    width:min(var(--wrap),calc(100% - 36px))}
  .sec{padding:58px 0}
  .svc{grid-template-columns:repeat(2,1fr);gap:28px 16px}
  .svc__c p{display:none}
  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .packs,.footer__haut,.grps,.grps--2{grid-template-columns:1fr}
  .det-l--2{columns:1}
  .btn{padding:14px 22px;font-size:.7rem}
  .btn-row .btn{flex:1 1 100%}
  .hero__sous{font-size:1rem}
  .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__pieds{flex-direction:column}
  .rsv__pieds .btn{flex:1 1 auto;width:100%}
  .rsv__recap dd{font-size:.96rem}
  .ct__carte{min-height:320px}
}
@media (max-width:420px){
  .footer__bas-in{font-size:.66rem}
  .horaires li{font-size:.9rem}
}

/* touch: hover-only affordances must stay reachable */
@media (hover:none){
  .ig-p::after{opacity:1;background:linear-gradient(180deg,transparent 56%,rgba(0,0,0,.66))}
  .ig-p__v{opacity:1;align-items:flex-end;padding-bottom:14px}
  .ig-p:hover img,.svc__c:hover .disque{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* --------------------------- contraste sur les panneaux clairs */
/* #C9A986 sits at ~1.8:1 on #EDE7DF, so on ivoire the accent ink becomes the
   kit's gris or noir. Gold remains the accent on every dark surface. */
.sec--ivoire .micro{color:var(--gris)}
.sec--ivoire .ig__handle{color:var(--noir)}
.sec--ivoire .ig__handle:hover{color:var(--gris)}
.sec--ivoire .pack{border-color:var(--filet-clair)}
.sec--ivoire .pack p{color:var(--encre-doux)}
.sec--ivoire .pack p.pack__prix{color:var(--noir)}
.sec--ivoire .avis__c figcaption{color:var(--gris)}
.sec--ivoire .horaires li{border-bottom-color:var(--filet-clair)}
.sec--ivoire .horaires .j{color:var(--encre-doux)}
.sec--nude .micro{color:var(--gris)}
.sec--nude .det-l li::before{background:var(--noir)}

/* the factstrip labels are labels, not headings: as <h3> before any <h2> they
   broke the document heading order */
.faits__lab{font-family:var(--sans);font-size:.69rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dore);margin:0 0 7px}
.footer .footer__t{font-family:var(--sans);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dore);margin:0 0 18px}