/* ============================================================================
   LAS PERLAS, institut de beauté, avenue Al Araar, Hay Riad, Rabat.
   Une seule feuille de style, écrite à la main, aucun framework.

   Direction artistique. Le kit est noir + or, mais deux instituts du domaine
   occupent déjà ce terrain : F Beauty est noir dominant, Casa de Chicas et
   Pristine sont ivoire + Playfair. La troisième position tenue ici est le
   SABLE : le fond de page est un sable chaud, le Brun Élégant du kit porte la
   structure, l'or reste un filet, et le noir n'apparaît que sur les plaques où
   la marque est nativement noire (nav scrollée, bandeau de faits, teaser
   tarifs, bande CTA, footer, aside de la modale). Le logo est or sur sombre,
   donc ces plaques sont le lieu naturel de la marque.

   Typographie. Le kit dit Playfair + Montserrat, c'est mot pour mot Casa de
   Chicas, Pristine, Dar Halawa et Blush. Italiana reprend les proportions
   réelles du lettrage LAS PERLAS (haute-contraste, étirées, empattements
   plats) et n'existe qu'en 400, donc un titre ne peut jamais partir en gras.
   Manrope au corps pour la même raison.

   Motif. L'arc de laurier du logo, redessiné en filet or. C'est le seul
   ornement du site, rien d'inventé à côté.
   ========================================================================= */

:root{
  /* palette du kit, hex exacts */
  --noir:#0B0B0B;            /* Noir Luxe */
  --or:#D4AF37;              /* Or Prestige */
  --sable:#C9B89B;           /* Beige Sable */
  --ivoire:#F2E6D9;          /* Ivoire Doux */
  --brun:#8B6F4E;            /* Brun Élégant */

  /* surfaces dérivées */
  --page:#FBF6EE;            /* sable clair, le sol du site */
  --noir-2:#141110;          /* panneau surélevé sur le noir */
  --noir-3:#060606;          /* footer, bas de la bande CTA */
  --or-clair:#E3C86A;        /* survols, filets sur fond noir */
  --encre:#2A2119;           /* texte courant sur clair */
  --encre-doux:#7A6A57;      /* texte secondaire sur clair */
  --creme:#F6EFE4;           /* texte sur noir */
  --creme-doux:#C4B7A3;      /* texte secondaire sur noir */

  --filet:rgba(139,111,78,.20);
  --filet-or:rgba(212,175,55,.40);
  --filet-creme:rgba(246,239,228,.14);

  --display:"Italiana",Georgia,"Times New Roman",serif;
  --sans:"Manrope",-apple-system,"Helvetica Neue",Arial,sans-serif;

  --maxw:1230px;
  --gutter:clamp(20px,5vw,60px);
  --nav-h:92px;
  --r:2px;                   /* verrou de forme : angles quasi vifs partout */
  --r-md:4px;
  --t:.32s cubic-bezier(.22,.61,.36,1);
  --t-slow:.7s cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--page);color:var(--encre);
  font-family:var(--sans);font-size:16.5px;font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;background:transparent;border:0;color:inherit}
:focus-visible{outline:2px solid var(--or);outline-offset:3px}

/* ---------- typographie ---------- */
h1,h2,h3,h4,.h1,.h2,.h3{
  font-family:var(--display);font-weight:400;margin:0;color:var(--encre);
  line-height:1.14;letter-spacing:.004em;
}
.h1{font-size:clamp(2.5rem,6.2vw,4.55rem);line-height:1.06}
.h2{font-size:clamp(2rem,4vw,3.1rem)}
.h3{font-size:clamp(1.3rem,2.3vw,1.65rem)}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1.02rem,1.35vw,1.13rem);color:var(--encre-doux);line-height:1.78;max-width:60ch}
.eyebrow{
  font-family:var(--sans);font-weight:600;font-size:.685rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--brun);margin:0 0 18px;
}
strong,b{font-weight:700}

/* ---------- motif laurier (l'arc du logo, en filet) ---------- */
.laurier{display:block;width:clamp(120px,15vw,180px);height:auto;color:var(--or);margin:0 auto 20px}
.laurier--l{margin-left:0}
.filet{display:block;width:100%;height:1px;border:0;margin:0;background:linear-gradient(90deg,transparent,var(--filet-or),transparent)}

/* ---------- structure ---------- */
.wrap{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}
.wrap--large{--maxw:1420px}
.sec{padding:clamp(66px,8.5vw,118px) 0;position:relative}
.sec--ivoire{background:var(--ivoire)}
.sec--noir{background:var(--noir);color:var(--creme)}
.sec--noir h2,.sec--noir h3,.sec--noir .h2,.sec--noir .h3{color:var(--creme)}
.sec--noir .lead{color:var(--creme-doux)}
.sec--noir .eyebrow{color:var(--or)}
.sec--tight{padding:clamp(48px,6vw,80px) 0}
.sec-head{max-width:640px;margin:0 0 clamp(34px,4.5vw,54px)}
.sec-head--c{margin-inline:auto;text-align:center}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--sans);font-weight:600;font-size:.735rem;letter-spacing:.17em;
  text-transform:uppercase;padding:16px 30px;border-radius:var(--r);
  background:transparent;border:1px solid transparent;cursor:pointer;
  transition:background var(--t),color var(--t),border-color var(--t);
  white-space:nowrap;
}
.btn--or{background:var(--noir);color:var(--or);border-color:var(--noir)}
.btn--or:hover{background:var(--brun);border-color:var(--brun);color:var(--page)}
.btn--ligne{border-color:var(--brun);color:var(--brun)}
.btn--ligne:hover{background:var(--brun);color:var(--page)}
.btn--creme{background:var(--creme);color:var(--noir);border-color:var(--creme)}
.btn--creme:hover{background:var(--or);border-color:var(--or);color:var(--noir)}
.btn--ligne-creme{border-color:var(--filet-creme);color:var(--creme)}
.btn--ligne-creme:hover{border-color:var(--or);color:var(--or)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px}
.lien{
  display:inline-flex;align-items:center;gap:11px;font-weight:600;font-size:.715rem;
  letter-spacing:.17em;text-transform:uppercase;color:var(--brun);
}
.lien svg{width:22px;height:9px;transition:transform var(--t)}
.lien:hover{color:var(--or)}
.lien:hover svg{transform:translateX(5px)}

/* ============================ NAV ======================================== */
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(6,6,6,.62),transparent);transition:opacity var(--t)}
.nav.scrolled::before,.nav--plaque::before{opacity:0}
.nav{
  position:fixed;inset:0 0 auto;z-index:90;height:var(--nav-h);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 var(--gutter);
  transition:background var(--t),height var(--t),border-color var(--t);
  border-bottom:1px solid transparent;
}
.nav.scrolled,.nav--plaque{background:var(--noir);height:76px;border-bottom-color:var(--filet-creme)}
.nav__brand{display:inline-flex;align-items:center;gap:13px;position:relative;z-index:120}
.nav__mark{width:auto;height:46px;transition:height var(--t)}
.nav.scrolled .nav__mark{height:40px}
.nav__word{display:flex;flex-direction:column;line-height:1}
.nav__word b{
  font-family:var(--display);font-weight:400;font-size:1.24rem;letter-spacing:.17em;
  color:var(--creme);
}
.nav__word span{
  font-family:var(--sans);font-weight:500;font-size:.505rem;letter-spacing:.34em;
  text-transform:uppercase;color:var(--or);margin-top:5px;
}
.nav__links{display:flex;align-items:center;justify-content:center;gap:clamp(20px,2.6vw,38px)}
.nav__links>a{
  font-family:var(--display);font-weight:400;font-size:.945rem;letter-spacing:.145em;
  text-transform:uppercase;color:var(--creme);padding:6px 0;position:relative;
  transition:color var(--t);
}
.nav__links>a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--or);transition:right var(--t);
}
.nav__links>a:hover{color:var(--or)}
.nav__links>a:hover::after,.nav__links>a.active::after{right:0}
.nav__links>a.active{color:var(--or)}
.nav__end{display:flex;align-items:center;justify-content:flex-end;gap:14px;position:relative;z-index:120}
.nav__cta{padding:13px 24px;font-size:.685rem}
/* le CTA dupliqué du menu mobile ne doit jamais doubler celui de la barre */
.nav__links .nav__cta--menu{display:none}
.nav__burger{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  flex-direction:column;gap:5px;cursor:pointer;
}
.nav__burger span{display:block;width:23px;height:1.5px;background:var(--creme);transition:transform var(--t),opacity var(--t)}
.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)}

/* ============================ HERO ======================================= */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.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;transform:scale(1.06);animation:kb 26s ease-out forwards}
@keyframes kb{from{transform:scale(1.06)}to{transform:scale(1.16)}}
.hero__voile{
  position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(180deg,rgba(11,11,11,.82) 0%,rgba(11,11,11,.42) 22%,rgba(11,11,11,.3) 46%,rgba(11,11,11,.62) 74%,rgba(11,11,11,.92) 100%),
    linear-gradient(90deg,rgba(43,33,20,.42) 0%,transparent 62%);
}
.hero__inner{position:relative;z-index:2;width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto;padding:0 0 clamp(60px,9vh,110px)}
.hero__laurier{width:clamp(168px,19vw,238px);height:auto;color:var(--or);opacity:0;transform:translateY(14px);animation:up .9s cubic-bezier(.22,.61,.36,1) .15s forwards}
.hero__t{color:var(--creme);max-width:19ch;margin:20px 0 0;text-wrap:balance}
.hero__t .mot{display:inline-block;overflow:hidden;vertical-align:bottom}
.hero__t .mot>span{display:inline-block;transform:translateY(110%);animation:mot .82s cubic-bezier(.22,.61,.36,1) forwards}
@keyframes mot{to{transform:translateY(0)}}
.hero__sub{color:var(--creme-doux);max-width:44ch;margin:22px 0 0;font-size:1.06rem;opacity:0;animation:up .8s cubic-bezier(.22,.61,.36,1) .78s forwards}
.hero__cta{margin-top:34px;opacity:0;animation:up .8s cubic-bezier(.22,.61,.36,1) .92s forwards}
@keyframes up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ---------- tête des pages intérieures (photo + voile, jamais un aplat) --- */
.tete{position:relative;min-height:clamp(330px,46vh,460px);display:flex;align-items:flex-end;overflow:hidden}
.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(11,11,11,.72) 0%,rgba(11,11,11,.34) 45%,rgba(11,11,11,.8) 100%)}
.tete__inner{position:relative;z-index:2;width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto;padding:0 0 clamp(38px,6vh,64px)}
.tete__inner .eyebrow{color:var(--or)}
.tete__inner .h1{color:var(--creme);font-size:clamp(2.2rem,5vw,3.6rem)}
.tete__inner p{color:var(--creme-doux);max-width:52ch;margin-top:16px}

/* ============================ BANDEAU DE FAITS =========================== */
.faits{background:var(--noir);color:var(--creme)}
.faits__row{
  width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.fait{display:flex;gap:16px;align-items:flex-start;padding:34px 30px 34px 0}
.fait+.fait{border-left:1px solid var(--filet-creme);padding-left:30px}
.fait svg{width:22px;height:22px;flex:none;color:var(--or);margin-top:3px}
.fait__k{
  font-size:.635rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--or);margin:0 0 6px;
}
.fait__v{margin:0;font-size:.95rem;color:var(--creme);line-height:1.55}
.fait__v a:hover{color:var(--or)}

/* ============================ CE QU'ON FAIT ============================== */
/* Liste éditoriale portée par les icônes du kit. Pas une grille de cartes
   photo : c'est exactement ce que font les deux autres instituts. */
.univers{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,5vw,72px)}
.uni{display:flex;gap:20px;align-items:flex-start;padding:26px 0;border-top:1px solid var(--filet)}
.uni__ic{
  width:60px;height:60px;flex:none;border-radius:50%;background:var(--sable);
  display:inline-flex;align-items:center;justify-content:center;color:var(--noir);
  transition:background var(--t),color var(--t);
}
.uni__ic svg{width:30px;height:30px}
.uni:hover .uni__ic{background:var(--noir);color:var(--or)}
.uni__t{font-size:1.42rem;margin:0 0 4px}
.uni__d{margin:0;font-size:.945rem;color:var(--encre-doux);line-height:1.6}
.uni__p{
  margin:9px 0 0;font-family:var(--sans);font-weight:700;font-size:.75rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--or);
}

/* ============================ BANDE PHOTO ================================ */
.bande{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.bande__t{position:relative;overflow:hidden;background:var(--sable)}
.bande__t img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.bande__t:hover img{transform:scale(1.05)}
.bande__lg{
  position:absolute;left:0;right:0;bottom:0;padding:22px 22px 20px;
  background:linear-gradient(180deg,transparent,rgba(11,11,11,.82));
  color:var(--creme);font-family:var(--display);font-size:1.3rem;letter-spacing:.05em;
}

/* ============================ TEASER TARIFS ============================== */
.teaser{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(38px,5vw,76px);align-items:center}
.teaser__l{list-style:none;margin:0;padding:0}
.teaser__l li{
  display:flex;align-items:baseline;gap:14px;padding:14px 0;
  border-bottom:1px solid var(--filet-creme);
}
.teaser__l li:first-child{border-top:1px solid var(--filet-creme)}
.teaser__n{font-size:.98rem;color:var(--creme)}
.teaser__d{flex:1;border-bottom:1px dotted rgba(246,239,228,.22);transform:translateY(-4px)}
.teaser__p{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--or);white-space:nowrap;font-size:1.06rem}
.teaser__p small{font-size:.68rem;font-weight:700;letter-spacing:.12em;opacity:.85}

/* ============================ AVIS ======================================= */
.avis{columns:2;column-gap:clamp(22px,2.6vw,34px)}
.avis__c{
  break-inside:avoid;margin:0 0 clamp(22px,2.6vw,34px);padding:30px 30px 26px;
  background:var(--page);border:1px solid var(--filet);border-radius:var(--r-md);
}
.sec--ivoire .avis__c{background:#FBF7F1}
.avis__q{width:26px;height:26px;color:var(--or);margin-bottom:14px}
.avis__t{margin:0 0 16px;font-size:.965rem;line-height:1.72;color:var(--encre)}
.avis__n{
  margin:0;font-family:var(--sans);font-weight:700;font-size:.685rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brun);
}

/* ============================ INSTAGRAM ================================== */
.ig__head{display:flex;flex-wrap:wrap;gap:16px;align-items:baseline;justify-content:space-between;margin-bottom:28px}
.ig__handle{
  display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.775rem;
  letter-spacing:.1em;color:var(--brun);
}
.ig__handle svg{width:19px;height:19px}
.ig__handle:hover{color:var(--or)}
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px)}
.ig-grid--3{grid-template-columns:repeat(3,1fr)}
.ig-p{position:relative;display:block;overflow:hidden;background:var(--sable)}
.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;background:rgba(11,11,11,.42);
  opacity:0;transition:opacity var(--t);
}
.ig-p:hover img{transform:scale(1.06)}
.ig-p:hover::after{opacity:1}
.ig-p__v{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  color:var(--creme);font-weight:600;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;opacity:0;transition:opacity var(--t);
}
.ig-p:hover .ig-p__v{opacity:1}
.ig-cta{margin-top:clamp(26px,3.4vw,42px);text-align:center}

/* ============================ BANDE CTA ================================== */
.cta{
  position:relative;background:var(--noir);color:var(--creme);text-align:center;
  padding:clamp(70px,9vw,120px) 0;overflow:hidden;
}
.cta::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 120% at 50% 0%,rgba(212,175,55,.13),transparent 62%);
}
.cta .wrap{position:relative;z-index:1}
.cta .h2{color:var(--creme)}
.cta p{color:var(--creme-doux);max-width:56ch;margin:16px auto 0}
.cta .btn-row{justify-content:center;margin-top:32px}

/* ============================ FOOTER ===================================== */
.footer{background:var(--noir-3);color:var(--creme-doux);padding-top:clamp(56px,7vw,84px)}
.footer__top{
  width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto;
  display:grid;grid-template-columns:1.25fr .8fr 1.1fr;gap:clamp(30px,4vw,60px);
  padding-bottom:clamp(40px,5vw,60px);
}
.footer__logo{height:auto;width:clamp(160px,17vw,208px)}
.footer__tag{margin:20px 0 0;font-size:.9rem;color:var(--creme-doux);max-width:34ch}
.footer h4{
  font-family:var(--sans);font-weight:700;font-size:.655rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--or);margin:0 0 18px;
}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer a:hover{color:var(--or)}
.footer__c li{display:flex;gap:11px;align-items:flex-start;font-size:.9rem;line-height:1.55}
.footer__c svg{width:17px;height:17px;flex:none;color:var(--or);margin-top:3px}
.footer__soc{display:flex;gap:12px;margin-top:20px}
.footer__soc a{
  width:40px;height:40px;border:1px solid var(--filet-creme);border-radius:50%;
  display:grid;place-items:center;transition:border-color var(--t),color var(--t);
}
.footer__soc a:hover{border-color:var(--or);color:var(--or)}
.footer__soc svg{width:18px;height:18px}
.footer__bas{border-top:1px solid var(--filet-creme)}
.footer__bas-in{
  width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  padding:22px 0;font-size:.755rem;
}
.footer__bas a{text-transform:uppercase;letter-spacing:.15em;text-decoration:none;font-size:.68rem}

/* ============================ TARIFS ===================================== */
.carte{columns:2;column-gap:clamp(40px,5.5vw,86px)}
.grp{break-inside:avoid;margin-bottom:clamp(34px,4vw,52px)}
.grp__h{display:flex;align-items:center;gap:15px;margin-bottom:6px}
.grp__ic{
  width:50px;height:50px;flex:none;border-radius:50%;background:var(--sable);
  display:inline-flex;align-items:center;justify-content:center;color:var(--noir);
}
.grp__ic svg{width:26px;height:26px}
.grp__t{font-size:1.55rem;margin:0}
.grp__l{list-style:none;margin:14px 0 0;padding:0}
.grp__l li{display:flex;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--filet)}
.grp__n{font-size:.94rem;color:var(--encre)}
.grp__d{flex:1;border-bottom:1px dotted var(--filet);transform:translateY(-4px)}
.grp__p{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--or);white-space:nowrap;font-size:.98rem}
.grp__p small{font-size:.66rem;font-weight:700;letter-spacing:.12em;opacity:.85}
.grp__cta{margin-top:16px}
.note{
  margin-top:clamp(30px,4vw,46px);padding:22px 26px;background:var(--ivoire);
  border-left:2px solid var(--or);font-size:.9rem;color:var(--encre-doux);
}

/* ============================ PRESTATIONS ================================ */
.presta{display:grid;grid-template-columns:1fr;gap:clamp(46px,6vw,76px)}
.presta__b{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(30px,4.5vw,64px);align-items:center}
.presta__b:nth-child(even) .presta__media{order:2}
.presta__media{position:relative;overflow:hidden;background:var(--sable);align-self:center}
.presta__media img{width:100%;aspect-ratio:4/5;object-fit:cover}
.presta__txt .grp__h{margin-bottom:14px}
.presta__pts{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.presta__pts li{display:flex;gap:11px;align-items:flex-start;font-size:.94rem;color:var(--encre-doux)}
.presta__pts svg{width:15px;height:15px;flex:none;color:var(--or);margin-top:6px}
.presta__cta{margin-top:26px}

/* ============================ CONTACT ==================================== */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,4.5vw,64px);align-items:stretch}
.contact__carte{position:relative;min-height:460px;height:100%;background:var(--sable);border-radius:var(--r-md);overflow:hidden}
.contact__carte iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.infos{list-style:none;margin:0 0 30px;padding:0;display:grid;gap:22px}
.infos li{display:flex;gap:15px;align-items:flex-start}
.infos svg{width:21px;height:21px;flex:none;color:var(--or);margin-top:4px}
.infos__k{
  font-size:.635rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brun);margin:0 0 5px;
}
.infos__v{margin:0;font-size:.98rem;line-height:1.6}
.infos__v a:hover{color:var(--or)}

/* ============================ MODALE DE RENDEZ-VOUS ====================== */
/* Architecture de défilement reprise verbatim de .claude/rules/booking-modal.md.
   Ne pas « améliorer » ces déclarations : quatre sites ont livré la même modale
   inscrollable pour les avoir réécrites à la main. */
.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;
  background:rgba(6,6,6,.72);opacity:0;transition:opacity var(--t);
}
.rsv.open{opacity:1}
.rsv[hidden]{display:none}
.rsv__backdrop{position:fixed;inset:0;z-index:0}
.rsv__card{
  position:relative;z-index:1;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(--page);border-radius:var(--r-md);
  transform:translateY(14px);transition:transform var(--t);
}
.rsv.open .rsv__card{transform:translateY(0)}
.rsv__aside{
  min-height:0;overflow-y:auto;position:relative;background:var(--noir);color:var(--creme);
  padding:34px 30px;display:flex;flex-direction:column;justify-content:space-between;gap:26px;
}
.rsv__aside::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 50% 0%,rgba(212,175,55,.16),transparent 65%);
}
.rsv__aside>*{position:relative;z-index:1}
.rsv__mark{width:auto;height:64px;margin-bottom:20px}
.rsv__eyebrow{font-size:.63rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:var(--or);margin:0 0 10px}
.rsv__h{font-family:var(--display);font-weight:400;font-size:1.85rem;line-height:1.16;color:var(--creme);margin:0}
.rsv__aside-sub{margin:14px 0 0;font-size:.87rem;color:var(--creme-doux);line-height:1.62}
.rsv__steps{display:flex;gap:7px;margin-top:22px}
.rsv__steps i{width:30px;height:2px;background:var(--filet-creme);transition:background var(--t)}
.rsv__steps i.on{background:var(--or)}
.rsv__total{border-top:1px solid var(--filet-creme);padding-top:18px}
.rsv__total-k{font-size:.6rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--creme-doux)}
.rsv__total-v{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--or);white-space:nowrap;font-size:1.9rem;line-height:1.2;margin-top:4px}
.rsv__total-v small{font-size:.7rem;font-weight:700;letter-spacing:.12em;opacity:.85}

.rsv__body{display:flex;flex-direction:column;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;padding:34px 32px}
.rsv__body>*{flex-shrink:0}
.rsv__close{
  position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;
  display:grid;place-items:center;cursor:pointer;color:var(--encre);
  background:var(--page);border-radius:50%;
}
.rsv__close svg{width:15px;height:15px}
.rsv__close:hover{color:var(--or)}
.rsv__label{
  font-size:.635rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brun);margin:24px 0 12px;
}
.rsv__packs{max-height:266px;overflow-y:auto;border:1px solid var(--filet);border-radius:var(--r-md);padding:6px}
.rsv__packs .rsv__label{margin:14px 0 6px;padding-left:10px}
.rsv__packs .rsv__label:first-child{margin-top:6px}
.rsv__pack{
  display:flex;align-items:baseline;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:10px 12px;border-radius:var(--r);transition:background var(--t);
}
.rsv__pack:hover{background:var(--ivoire)}
.rsv__pack[aria-pressed="true"]{background:var(--noir)}
.rsv__pack[aria-pressed="true"] .rsv__pack-name{color:var(--creme)}
.rsv__pack-name{flex:1;font-size:.9rem;color:var(--encre)}
.rsv__pack-price{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--or);white-space:nowrap;font-size:.92rem}
.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(--encre);background:var(--ivoire);border:1px solid var(--filet);border-radius:var(--r);
}
.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:10px}
.rsv__chip{
  padding:12px 20px;border:1px solid var(--filet);border-radius:var(--r);cursor:pointer;
  font-size:.8rem;font-weight:600;letter-spacing:.05em;color:var(--encre);
  transition:background var(--t),color var(--t),border-color var(--t);
}
.rsv__chip:hover{border-color:var(--brun)}
.rsv__chip[aria-pressed="true"]{background:var(--noir);border-color:var(--noir);color:var(--or)}
.rsv__sum{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-top:26px;padding-top:16px;border-top:1px solid var(--filet)}
.rsv__sum-k{font-size:.635rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--brun)}
.rsv__sum-v{font-family:var(--sans);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--or);white-space:nowrap;font-size:1.16rem}
.rsv__hint{margin:10px 0 0;font-size:.83rem;color:var(--encre-doux)}
.rsv__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.rsv__actions .btn{flex:1 1 200px;min-width:0}
.rsv__ic{width:18px;height:18px}
.rsv__note{margin:16px 0 0;font-size:.78rem;color:var(--encre-doux);line-height:1.6}

/* ============================ RÉVÉLATIONS ================================ */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .78s cubic-bezier(.22,.61,.36,1),transform .78s cubic-bezier(.22,.61,.36,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-d="1"]{transition-delay:.09s}
[data-reveal][data-d="2"]{transition-delay:.18s}
[data-reveal][data-d="3"]{transition-delay:.27s}
[data-reveal][data-d="4"]{transition-delay:.36s}

/* ============================ RESPONSIVE ================================= */
@media (max-width:1020px){
  :root{--nav-h:76px}
  .nav{height:var(--nav-h);grid-template-columns:auto 1fr}
  .nav.scrolled{height:68px}
  .nav__burger{display:flex}
  .nav__links{
    position:fixed;top:0;left:0;width:100vw;height:100dvh;
    background:var(--noir);flex-direction:column;justify-content:center;gap:6px;
    transform:translateX(100%);transition:transform .42s cubic-bezier(.22,.61,.36,1);
    padding:var(--nav-h) 26px 40px;overflow-y:auto;
  }
  .nav__links.nav-open{transform:translateX(0)}
  .nav__links>a{font-size:1.65rem;padding:13px 0}
  .nav__links>a::after{display:none}
  .nav__links .nav__cta--menu{display:inline-flex;margin-top:26px}
  .nav__cta--barre{display:none}
  .teaser,.contact,.presta__b{grid-template-columns:1fr}
  .presta__b:nth-child(even) .presta__media{order:0}
  .carte{columns:1}
  .ig-grid{grid-template-columns:repeat(3,1fr)}
  .footer__top{grid-template-columns:1fr 1fr}
  .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 24px;gap:18px}
  .rsv__mark{height:50px;margin-bottom:12px}
  .rsv__total{display:none}
}
@media (max-width:760px){
  body{font-size:16px}
  .univers{grid-template-columns:1fr}
  .bande{grid-template-columns:1fr}
  .bande__t img{aspect-ratio:3/2}
  .avis{columns:1}
  .faits__row{grid-template-columns:1fr}
  .fait{padding:22px 0}
  .fait+.fait{border-left:0;border-top:1px solid var(--filet-creme);padding-left:0}
  .ig-grid,.ig-grid--3{grid-template-columns:repeat(2,1fr)}
  .footer__top{grid-template-columns:1fr;gap:36px}
  .hero{min-height:88vh;min-height:88svh}
  .hero__t{max-width:100%}
  .btn{width:100%}
  .btn-row{flex-direction:column;align-items:stretch}
  .nav__word b{font-size:1.06rem}
}
@media (max-width:680px){
  .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}   /* une seule surface de défilement sur un téléphone */
  .rsv__body{padding:26px 22px 34px}
  .rsv__actions .btn{flex:1 1 100%}
}
@media (hover:none){
  .ig-p::after,.ig-p__v{opacity:1}
  .ig-p::after{background:linear-gradient(180deg,transparent 55%,rgba(11,11,11,.6))}
  .ig-p__v{align-items:end;padding-bottom:14px}
  .bande__t:hover img,.ig-p:hover img{transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  .hero__bg img{animation:none;transform:none}
  .hero__t .mot>span,.hero__laurier,.hero__sub,.hero__cta{opacity:1;transform:none;animation:none}
}
@media print{.nav,.rsv,.cta{display:none}}