/* ============================================================
   LES NATURELLES - Centre d'amincissement et d'esthetique
   2 Rue Attoudri, bloc P, secteur 17, Hay Riad, Rabat
   Design system built strictly from the client's brand kit:
   Beige Doux #F7EDE7 / Rose Naturel #E0C5B8 / Taupe Elegant
   #C19A8B / Vert Naturel #5D6B5A / Noir Intemporel #2B2B2B.
   Playfair Display (titres + nav) | Montserrat (corps).
   One shared stylesheet for the five pages.
   ============================================================ */

:root{
  --beige:#F7EDE7;         /* Beige Doux, fond de page */
  --creme:#FCF7F4;         /* eclaircissement du beige, sections alternees */
  --rose:#E0C5B8;          /* Rose Naturel */
  --rose-veil:#F1E1D9;     /* rose eclairci, voiles et fonds doux */
  --taupe:#C19A8B;         /* Taupe Elegant */
  --vert:#5D6B5A;          /* Vert Naturel, accent principal */
  --vert-clair:#8A9686;    /* vert eclairci, filets et icones sur fond sombre */
  --noir:#2B2B2B;          /* Noir Intemporel */
  --rouge:#E2231A;         /* rouge de la croix suisse du logo, jamais du texte */

  --texte:#2B2B2B;
  --texte-doux:#6E6259;
  --page:var(--beige);

  --rule:rgba(43,43,43,.12);
  --rule-vert:rgba(93,107,90,.34);
  --rule-creme:rgba(252,247,244,.18);

  --display:"Playfair Display","Noto Serif Display",Georgia,serif;
  --sans:"Montserrat","Helvetica Neue",Arial,sans-serif;

  --maxw:1220px;
  --gutter:clamp(20px,5vw,60px);
  --radius:6px;
  --radius-sm:4px;
  --t-fast:.28s cubic-bezier(.22,.61,.36,1);
  --t:.6s cubic-bezier(.22,.61,.36,1);
}

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

/* ---- typographie ---- */
h1,h2,h3,.h1,.h2,.h3,.hero__title,.rsv__h{
  font-family:var(--display);font-weight:500;line-height:1.14;letter-spacing:.004em;
  color:var(--texte);margin:0;
}
em,.it{font-style:italic;color:inherit}
.h1{font-size:clamp(2.1rem,5vw,3.4rem)}
.h2{font-size:clamp(1.8rem,3.5vw,2.8rem)}
.h3{font-size:clamp(1.22rem,2.2vw,1.6rem)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
h1 + p,h2 + p,h3 + p{margin-top:18px}
.lead{font-size:clamp(1rem,1.25vw,1.08rem);color:var(--texte-doux);max-width:58ch}
.eyebrow{
  font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--vert);margin:0 0 14px;display:flex;align-items:center;gap:12px;
}
.eyebrow::after{content:"";flex:0 0 42px;height:1px;background:var(--rule-vert)}
.eyebrow--center{justify-content:center}
.eyebrow--center::before{content:"";flex:0 0 42px;height:1px;background:var(--rule-vert)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.section{padding:clamp(64px,8vw,116px) 0}
.section--creme{background:var(--creme)}
.section--rose{background:var(--rose-veil)}
.section--tight{padding-top:clamp(44px,5vw,72px)}

/* ---- boutons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border:1px solid transparent;border-radius:var(--radius-sm);
  font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;cursor:pointer;white-space:nowrap;background:transparent;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),transform var(--t-fast);
}
.btn--primary{background:var(--noir);color:var(--beige);border-color:var(--noir)}
.btn--primary:hover{background:var(--vert);border-color:var(--vert)}
.btn--outline{border-color:var(--noir);color:var(--noir)}
.btn--outline:hover{background:var(--noir);color:var(--beige)}
.btn--light{border-color:rgba(252,247,244,.55);color:var(--creme)}
.btn--light:hover{background:var(--creme);color:var(--noir);border-color:var(--creme)}
.btn--vert{background:var(--vert);color:var(--creme);border-color:var(--vert)}
.btn--vert:hover{background:var(--noir);border-color:var(--noir)}
.btn:active{transform:translateY(1px)}

.linkarrow{
  display:inline-flex;align-items:center;gap:11px;font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--noir);
  transition:color var(--t-fast);
}
.linkarrow svg{width:22px;height:10px;transition:transform var(--t-fast)}
.linkarrow:hover{color:var(--vert)}
.linkarrow:hover svg{transform:translateX(6px)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:90;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  padding:16px var(--gutter);
  background:var(--beige);border-bottom:1px solid var(--rule);
  transition:background var(--t-fast),border-color var(--t-fast),padding var(--t-fast);
}
.nav--hero{background:transparent;border-bottom-color:transparent;padding-top:24px;padding-bottom:24px}
.nav--hero.scrolled{background:var(--beige);border-bottom-color:var(--rule);padding-top:14px;padding-bottom:14px}
.nav__brand{display:flex;align-items:center;position:relative;z-index:120}
.nav__logo{width:auto;height:42px;transition:height var(--t-fast)}
.nav__logo--creme{display:none}
.nav--hero .nav__logo--noir{display:none}
.nav--hero .nav__logo--creme{display:block}
.nav--hero.scrolled .nav__logo--noir{display:block}
.nav--hero.scrolled .nav__logo--creme{display:none}
.nav.scrolled .nav__logo{height:38px}

.nav__links{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.4vw,34px)}
.nav__links a{
  position:relative;font-family:var(--display);font-size:1rem;font-weight:500;
  letter-spacing:.02em;color:var(--noir);padding:4px 0;transition:color var(--t-fast);
}
.nav--hero .nav__links a{color:var(--creme)}
.nav--hero.scrolled .nav__links a{color:var(--noir)}
.nav__links a::after{
  content:"";position:absolute;left:0;right:100%;bottom:-1px;height:1.4px;
  background:var(--vert);transition:right var(--t-fast);
}
.nav--hero .nav__links a::after{background:var(--creme)}
.nav--hero.scrolled .nav__links a::after{background:var(--vert)}
.nav__links a:hover::after,.nav__links a.active::after{right:0}

.nav__end{display:flex;align-items:center;justify-content:flex-end;gap:14px;position:relative;z-index:120}
.nav__cta--menu{display:none}
.nav--hero .nav__cta--bar{background:transparent;color:var(--creme);border-color:rgba(252,247,244,.6)}
.nav--hero .nav__cta--bar:hover{background:var(--creme);color:var(--noir);border-color:var(--creme)}
.nav--hero.scrolled .nav__cta--bar{background:var(--noir);color:var(--beige);border-color:var(--noir)}
.nav--hero.scrolled .nav__cta--bar:hover{background:var(--vert);border-color:var(--vert)}

.nav__burger{
  display:none;width:44px;height:40px;border:0;background:transparent;cursor:pointer;
  padding:10px 8px;flex-direction:column;justify-content:space-between;
}
.nav__burger span{display:block;height:1.6px;width:100%;background:var(--noir);transition:transform var(--t-fast),opacity var(--t-fast),background var(--t-fast)}
.nav--hero .nav__burger span{background:var(--creme)}
.nav--hero.scrolled .nav__burger span,.nav.menu-open .nav__burger span{background:var(--noir)}
.nav.menu-open .nav__burger span:nth-child(1){transform:translateY(8.2px) rotate(45deg)}
.nav.menu-open .nav__burger span:nth-child(2){opacity:0}
.nav.menu-open .nav__burger span:nth-child(3){transform:translateY(-8.2px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;min-height:clamp(600px,88vh,880px);display:flex;align-items:flex-end;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:0}
.hero__media picture{position:absolute;inset:0;display:block}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.hero__veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,rgba(43,43,43,.74) 0%,rgba(43,43,43,.34) 42%,rgba(43,43,43,.12) 70%,rgba(43,43,43,.34) 100%);
}
.hero__inner{
  position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;
  padding:0 var(--gutter) clamp(94px,12vw,150px);
}
.hero__title{color:var(--creme);font-size:clamp(2.4rem,6vw,4.4rem);max-width:16ch}
.hero__sub{
  color:rgba(252,247,244,.9);max-width:52ch;margin:22px 0 0;
  font-size:clamp(1rem,1.3vw,1.12rem);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hero__cta .btn--primary{background:var(--creme);color:var(--noir);border-color:var(--creme)}
.hero__cta .btn--primary:hover{background:var(--vert);color:var(--creme);border-color:var(--vert)}

/* bandeau de faits, chevauche le bas du hero */
.factstrip{position:relative;z-index:5;margin-top:-72px}
.factstrip__row{
  background:var(--creme);border:1px solid var(--rule);border-radius:var(--radius);
  display:grid;grid-template-columns:repeat(3,1fr);
  box-shadow:0 30px 60px -44px rgba(43,43,43,.55);
}
.fact{display:flex;gap:14px;padding:26px clamp(18px,2.4vw,32px);border-right:1px solid var(--rule)}
.fact:last-child{border-right:0}
.fact__ic{flex:0 0 auto;width:22px;height:22px;color:var(--vert);margin-top:3px}
.fact__k{margin:0 0 3px;font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.fact__v{margin:0;font-size:.94rem;line-height:1.5}
.fact__v a:hover{color:var(--vert)}

/* ============================================================
   BANNIERE DE PAGE
   ============================================================ */
.pagehead{position:relative;min-height:clamp(360px,46vh,460px);display:flex;align-items:flex-end;overflow:hidden}
.pagehead__media{position:absolute;inset:0;z-index:0}
.pagehead__media img{width:100%;height:100%;object-fit:cover}
.pagehead__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(43,43,43,.76),rgba(43,43,43,.3) 68%,rgba(43,43,43,.42))}
.pagehead__inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter) clamp(44px,6vw,64px)}
.pagehead .eyebrow{color:var(--rose)}
.pagehead .eyebrow::after{background:var(--rule-creme)}
.pagehead h1{color:var(--creme);font-size:clamp(2.1rem,4.6vw,3.4rem)}
.pagehead p{color:rgba(252,247,244,.88);max-width:56ch;margin:16px 0 0}

/* ============================================================
   LE CENTRE (texte + media)
   ============================================================ */
.centre{display:grid;grid-template-columns:1.04fr .96fr;gap:clamp(34px,5vw,74px);align-items:center}
.centre__points{list-style:none;margin:30px 0 32px;padding:0;display:grid;gap:20px}
.centre__points li{display:flex;gap:15px}
.centre__points svg{flex:0 0 auto;width:26px;height:26px;color:var(--vert);margin-top:2px}
.centre__points b{display:block;font-weight:600;font-size:.95rem;margin-bottom:2px}
.centre__points p{margin:0;font-size:.92rem;color:var(--texte-doux);line-height:1.6}
.centre__media{position:relative}
.centre__frame{overflow:hidden;border-radius:var(--radius);background:var(--rose-veil);aspect-ratio:4/5}
.centre__frame img{width:100%;height:100%;object-fit:cover}
.centre__badge{
  position:absolute;left:-18px;bottom:32px;background:var(--vert);color:var(--creme);
  padding:16px 22px;border-radius:var(--radius-sm);text-align:center;box-shadow:0 20px 40px -26px rgba(43,43,43,.6);
}
.centre__badge b{display:block;font-family:var(--display);font-size:1.4rem;line-height:1}
.centre__badge span{display:block;margin-top:4px;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;opacity:.85}

/* ============================================================
   NOS UNIVERS (cartes photo)
   ============================================================ */
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(30px,4vw,48px)}
.sec-head__t{max-width:34ch}
.sec-head .lead{max-width:44ch}

.univers{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.uni{
  display:flex;flex-direction:column;background:var(--creme);border:1px solid var(--rule);
  border-radius:var(--radius);overflow:hidden;
  transition:transform var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast);
}
.uni:hover{transform:translateY(-6px);box-shadow:0 28px 50px -34px rgba(43,43,43,.45);border-color:var(--rule-vert)}
.uni__media{aspect-ratio:4/5;overflow:hidden;background:var(--rose-veil)}
.uni__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s cubic-bezier(.22,.61,.36,1)}
.uni:hover .uni__media img{transform:scale(1.06)}
.uni__body{padding:22px clamp(18px,2vw,24px) 24px;display:flex;flex-direction:column;flex:1}
.uni__ic{width:30px;height:30px;color:var(--vert);margin-bottom:12px}
.uni h3{font-size:1.24rem;margin-bottom:8px}
.uni p{font-size:.9rem;color:var(--texte-doux);line-height:1.6;margin:0 0 18px}
.uni__link{margin-top:auto;display:inline-flex;align-items:center;gap:9px;font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--vert)}
.uni__link svg{width:18px;height:9px;transition:transform var(--t-fast)}
.uni:hover .uni__link svg{transform:translateX(5px)}

/* ============================================================
   BANDE PHOTO PLEINE LARGEUR
   ============================================================ */
.bande{position:relative;overflow:hidden;min-height:clamp(380px,48vh,480px);display:flex;align-items:center}
.bande__media{position:absolute;inset:0;z-index:0}
.bande__media img{width:100%;height:100%;object-fit:cover}
.bande__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(43,43,43,.72),rgba(43,43,43,.46) 58%,rgba(43,43,43,.24))}
.bande__inner{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(50px,7vw,76px) var(--gutter);width:100%}
.bande__inner .eyebrow{color:var(--rose)}
.bande__inner .eyebrow::after{background:var(--rule-creme)}
.bande h2{color:var(--creme);max-width:20ch}
.bande p{color:rgba(252,247,244,.9);max-width:50ch;margin:18px 0 0}
.bande__cta{margin-top:30px;display:flex;flex-wrap:wrap;gap:14px}

/* ============================================================
   AVIS
   ============================================================ */
.avis{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px)}
.avis__c{background:var(--creme);border:1px solid var(--rule);border-radius:var(--radius);padding:28px 26px;display:flex;flex-direction:column}
.avis__q{width:26px;height:22px;color:var(--rose);margin-bottom:16px}
.avis__c p{font-size:.94rem;line-height:1.72;margin:0 0 20px}
.avis__n{margin-top:auto;font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)}

/* ============================================================
   GALERIE INSTAGRAM (chaque vignette ouvre sa publication)
   ============================================================ */
.ig__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-bottom:clamp(24px,3vw,36px)}
.ig__head .lead{margin:0;max-width:46ch}
.ig__handle{
  display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border:1px solid var(--rule);
  border-radius:999px;font-weight:600;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--noir);transition:border-color var(--t-fast),color var(--t-fast);
}
.ig__handle:hover{border-color:var(--vert);color:var(--vert)}
.ig__handle svg{width:18px;height:18px;flex:0 0 auto}
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.2vw,16px)}
.ig-post{position:relative;display:block;overflow:hidden;border-radius:var(--radius);background:var(--rose-veil);aspect-ratio:4/5}
.ig-post img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.ig-post::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(43,43,43,.58),transparent 58%);
  opacity:0;transition:opacity var(--t-fast);
}
.ig-post:hover img{transform:scale(1.05)}
.ig-post:hover::after{opacity:1}
.ig-post:focus-visible{outline:2px solid var(--vert);outline-offset:3px}
.ig-post__play{
  position:absolute;top:12px;right:12px;z-index:2;width:26px;height:26px;border-radius:50%;
  background:rgba(43,43,43,.55);display:flex;align-items:center;justify-content:center;
}
.ig-post__play svg{width:11px;height:11px;fill:#fff;display:block}
.ig-post__see{
  position:absolute;left:10px;right:10px;bottom:14px;z-index:2;text-align:center;
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--creme);
  opacity:0;transform:translateY(8px);transition:opacity var(--t-fast),transform var(--t-fast);
}
.ig-post:hover .ig-post__see{opacity:1;transform:none}
/* la tuile de fin, vers le compte */
.ig-post--more{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  background:var(--vert);color:var(--creme);text-align:center;padding:20px;
}
.ig-post--more svg{width:30px;height:30px}
.ig-post--more span{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;line-height:1.6}
.ig-post--more::after{display:none}
.ig-cta{margin-top:clamp(28px,4vw,44px);text-align:center}
/* sur ecran tactile il n'y a pas de survol : le libelle reste lisible */
@media (hover:none){
  .ig-post::after{opacity:1}
  .ig-post__see{opacity:1;transform:none}
}

/* ============================================================
   PRESTATIONS (listes editoriales)
   ============================================================ */
.presta{display:grid;gap:clamp(52px,6vw,86px)}
.presta__bloc{display:grid;gap:clamp(22px,3vw,34px)}
.presta__aside{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 clamp(24px,4vw,48px);
  align-items:end;padding-bottom:clamp(10px,1.6vw,18px);
}
.presta__ic{grid-column:1;width:34px;height:34px;color:var(--vert);margin-bottom:14px}
.presta__aside .eyebrow{grid-column:1;margin:0 0 6px;font-size:.64rem}
.presta__aside h2{grid-column:1;font-size:clamp(1.5rem,2.6vw,2rem)}
.presta__aside p{grid-column:1;margin:10px 0 0;font-size:.92rem;color:var(--texte-doux);max-width:62ch}
/* le bloc a toujours 4 elements de texte (icone, sur-titre, titre, intro) :
   on fait explicitement porter le bouton sur ces 4 rangees, car "-1" ne
   designe pas la derniere rangee quand toutes les rangees sont implicites. */
.presta__aside p.presta__cta{grid-column:2;grid-row:1 / span 4;align-self:end;justify-self:end;margin:0;max-width:none}
.presta__list{
  list-style:none;margin:0;padding:0;border-top:1px solid var(--rule);
  columns:2;column-gap:clamp(28px,4vw,60px);
}
.presta__list li{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 18px;
  padding:15px 0;border-bottom:1px solid var(--rule);
}
.presta__n{font-family:var(--display);font-size:1.08rem;font-weight:500}
.presta__d{flex:1 1 100%;margin:2px 0 0;font-size:.88rem;color:var(--texte-doux);line-height:1.6}
.prix{font-size:.8rem;font-weight:600;letter-spacing:.08em;color:var(--vert);white-space:nowrap}
.presta__note{
  margin-top:clamp(36px,4vw,52px);padding:26px 28px;background:var(--creme);
  border:1px solid var(--rule);border-left:3px solid var(--vert);border-radius:var(--radius-sm);
}
.presta__note p{margin:0;font-size:.93rem;color:var(--texte-doux)}

/* ============================================================
   A PROPOS
   ============================================================ */
.recit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.6vw,70px);align-items:center}
.recit__frame{overflow:hidden;border-radius:var(--radius);background:var(--rose-veil)}
.recit__frame img{width:100%;height:100%;object-fit:cover}
.repere{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.repere__c{background:var(--creme);border:1px solid var(--rule);border-radius:var(--radius);padding:28px 26px}
.repere__c svg{width:30px;height:30px;color:var(--vert);margin-bottom:14px}
.repere__c h3{font-size:1.16rem;margin-bottom:8px}
.repere__c p{font-size:.9rem;color:var(--texte-doux);line-height:1.65;margin:0}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,4vw,60px);align-items:stretch}
.coord{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:24px}
.coord li{display:flex;gap:16px}
.coord svg{flex:0 0 auto;width:24px;height:24px;color:var(--vert);margin-top:3px}
.coord b{display:block;font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-bottom:4px}
.coord p{margin:0;font-size:.98rem;line-height:1.6}
.coord a:hover{color:var(--vert)}
.contact__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.mapbox{position:relative;min-height:420px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--rule)}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.horaires{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--rule)}
.horaires li{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--rule);font-size:.94rem}
.horaires span:last-child{color:var(--texte-doux);font-variant-numeric:tabular-nums}

/* ============================================================
   BANDE CTA + FOOTER
   ============================================================ */
.ctaband{background:var(--vert);color:var(--creme);padding:clamp(54px,7vw,86px) 0;text-align:center}
.ctaband h2{color:var(--creme);max-width:22ch;margin:0 auto}
.ctaband p{color:rgba(252,247,244,.84);max-width:52ch;margin:18px auto 0}
.ctaband__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}

.footer{background:var(--noir);color:rgba(252,247,244,.72);padding:clamp(54px,6vw,78px) 0 0}
.footer__top{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:clamp(30px,4vw,60px);padding-bottom:clamp(38px,4vw,54px)}
.footer__logo{height:56px;width:auto;margin-bottom:20px}
.footer__blurb{font-size:.92rem;line-height:1.7;max-width:38ch;margin:0}
.footer h4{font-family:var(--sans);font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--rose);margin:0 0 18px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.footer a{transition:color var(--t-fast)}
.footer a:hover{color:var(--creme)}
.footer__socials{display:flex;gap:12px;margin-top:20px}
.footer__socials a{
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--rule-creme);border-radius:50%;transition:transform var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.footer__socials a:hover{transform:translateY(-3px);border-color:var(--rose);color:var(--creme)}
.footer__socials svg{width:18px;height:18px}
.footer__bot{
  border-top:1px solid var(--rule-creme);padding:22px 0;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:space-between;gap:12px;font-size:.7rem;letter-spacing:.06em;
}
.footer__credit{text-transform:uppercase;letter-spacing:.14em;font-size:.64rem;text-decoration:none}
.footer__credit:hover{color:var(--creme)}

/* ============================================================
   MODALE DE RENDEZ-VOUS
   Architecture de defilement copiee mot pour mot de la regle
   booking-modal.md : les quatre declarations vont ensemble.
   ============================================================ */
.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(43,43,43,.58);backdrop-filter:blur(3px);opacity:0;transition:opacity var(--t-fast)}
.rsv.open .rsv__backdrop{opacity:1}
.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);
  background:var(--beige);border-radius:var(--radius);overflow:hidden;
  opacity:0;transform:translateY(16px) scale(.99);
  transition:opacity var(--t-fast),transform var(--t-fast);
}
.rsv.open .rsv__card{opacity:1;transform:none}
.rsv__aside{
  position:relative;min-height:0;overflow-y:auto;padding:34px 30px;
  background:var(--vert);color:var(--creme);display:flex;flex-direction:column;
}
.rsv__aside h2{color:var(--creme);font-size:1.7rem}
.rsv__aside p{font-size:.9rem;color:rgba(252,247,244,.84);margin-top:14px}
.rsv__steps{display:flex;gap:8px;margin-top:auto;padding-top:28px}
.rsv__steps i{flex:1;height:2px;background:rgba(252,247,244,.28);border-radius:2px;transition:background var(--t-fast)}
.rsv__steps i.on{background:var(--rose)}
.rsv__aside-logo{height:34px;width:auto;margin-bottom:22px}
.rsv__body{display:flex;flex-direction:column;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;padding:32px 30px 30px}
.rsv__body > *{flex-shrink:0}
.rsv__close{
  position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;border:1px solid var(--rule);
  border-radius:50%;background:var(--beige);color:var(--noir);cursor:pointer;display:flex;
  align-items:center;justify-content:center;transition:transform var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.rsv__close:hover{transform:rotate(90deg);background:var(--noir);color:var(--beige)}
.rsv__close svg{width:15px;height:15px}
.rsv__lab{display:block;font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin:0 0 12px}
.rsv__packs{display:grid;gap:8px;margin-bottom:26px}
.rsv__pack{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;width:100%;text-align:left;
  padding:13px 16px;border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--creme);
  cursor:pointer;font-size:.92rem;color:var(--texte);
  transition:background var(--t-fast),border-color var(--t-fast),padding-left var(--t-fast);
}
.rsv__pack:hover{background:var(--rose-veil);padding-left:22px}
.rsv__pack[aria-pressed="true"]{border-color:var(--vert);background:var(--rose-veil)}
.rsv__pack b{font-weight:500;font-family:var(--display);font-size:1rem}
.rsv__pack span{font-size:.74rem;font-weight:600;letter-spacing:.06em;color:var(--vert);white-space:nowrap}
.rsv__field{margin-bottom:24px}
.rsv__field input[type="date"]{
  -webkit-appearance:none;appearance:none;width:100%;min-height:48px;line-height:1.3;padding:0 14px;
  background:var(--creme);border:1px solid var(--rule);border-radius:var(--radius-sm);
  font-family:var(--sans);font-size:16px;color:var(--texte);
}
.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:8px}
.rsv__chip{
  padding:11px 18px;border:1px solid var(--rule);border-radius:999px;background:var(--creme);
  cursor:pointer;font-size:.74rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--texte);
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.rsv__chip:hover{border-color:var(--vert)}
.rsv__chip[aria-pressed="true"]{background:var(--vert);border-color:var(--vert);color:var(--creme)}
.rsv__chip:active{transform:scale(.96)}
.rsv__recap{
  margin:26px 0 0;padding:18px 20px;background:var(--creme);border:1px solid var(--rule);
  border-left:3px solid var(--vert);border-radius:var(--radius-sm);font-size:.9rem;
}
.rsv__recap b{display:block;font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-bottom:10px}
.rsv__recap p{margin:0 0 4px;line-height:1.6}
.rsv__hint{margin:22px 0 0;font-size:.84rem;color:var(--texte-doux)}
.rsv__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.rsv__actions .btn{flex:1 1 200px;min-width:0}
.rsv__note{margin:18px 0 0;font-size:.78rem;color:var(--texte-doux);line-height:1.6}

/* ============================================================
   REVEAL
   Regle permanente : aucun element porteur de texte ne demarre
   a opacity:0. Le reveal se fait en translation seule, donc une
   page reste entierement lisible meme si le JS ne tourne pas.
   ============================================================ */
[data-reveal]{transform:translate3d(0,26px,0);transition:transform var(--t);will-change:transform}
[data-reveal].in{transform:none;will-change:auto}
[data-d="1"]{transition-delay:.08s}
[data-d="2"]{transition-delay:.16s}
[data-d="3"]{transition-delay:.24s}
[data-d="4"]{transition-delay:.32s}
[data-d="5"]{transition-delay:.4s}
.hero [data-hero]{opacity:0;transform:translateY(28px);animation:heroIn 1s cubic-bezier(.22,.61,.36,1) forwards}
.hero [data-hero="1"]{animation-delay:.12s}
.hero [data-hero="2"]{animation-delay:.26s}
.hero [data-hero="3"]{animation-delay:.4s}
.hero [data-hero="4"]{animation-delay:.54s}
.hero [data-hero="5"]{animation-delay:.68s}
@keyframes heroIn{to{opacity:1;transform:none}}
.reveal-img{overflow:hidden}
.reveal-img img{transform:scale(1.06);transition:transform 1.6s cubic-bezier(.22,.61,.36,1)}
.reveal-img.in img{transform:none}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal].in,.hero [data-hero]{opacity:1;transform:none;animation:none;transition:none}
  .reveal-img img{transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1020px){
  .nav{grid-template-columns:auto 1fr;padding:14px var(--gutter)}
  .nav__links{
    position:fixed;top:0;left:0;width:100vw;height:100dvh;z-index:100;
    flex-direction:column;align-items:center;justify-content:center;gap:26px;
    background:var(--beige);transform:translateX(100%);transition:transform .34s cubic-bezier(.22,.61,.36,1);
  }
  .nav__links.nav-open{transform:none}
  .nav--hero .nav__links a,.nav--hero.scrolled .nav__links a{color:var(--noir)}
  .nav--hero .nav__links a::after{background:var(--vert)}
  .nav__links a{font-size:1.6rem}
  .nav__cta--bar{display:none}
  .nav__links .nav__cta--menu{display:inline-flex;margin-top:10px;background:var(--noir);color:var(--beige);border-color:var(--noir);font-size:.72rem}
  .nav__links .nav__cta--menu:hover{background:var(--vert);border-color:var(--vert)}
  .nav__burger{display:flex}
  .nav.menu-open{background:var(--beige);border-bottom-color:transparent}
  .nav.menu-open .nav__logo--noir{display:block}
  .nav.menu-open .nav__logo--creme{display:none}

  .univers{grid-template-columns:repeat(2,1fr)}
  .avis{grid-template-columns:repeat(2,1fr)}
  .ig-grid{grid-template-columns:repeat(3,1fr)}
  .centre,.recit,.contact{grid-template-columns:1fr}
  .centre__badge{left:auto;right:18px;bottom:18px}
  .presta__bloc{grid-template-columns:1fr}
  .presta__bloc:nth-child(even) .presta__aside{order:0}
  .footer__top{grid-template-columns:1fr 1fr}
  .repere{grid-template-columns:1fr}
  .mapbox{min-height:340px}
  .presta__list{columns:1}
  .presta__aside{grid-template-columns:auto minmax(0,1fr)}
  .presta__aside p.presta__cta{grid-column:1;grid-row:auto;justify-self:start;margin-top:14px}

  .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}
  .rsv__steps{margin-top:22px;padding-top:0}
}

@media (max-width:680px){
  .hero{min-height:clamp(560px,86vh,760px)}
  .hero__inner{padding-bottom:clamp(110px,20vw,150px)}
  .factstrip{margin-top:-86px}
  .factstrip__row{grid-template-columns:1fr}
  .fact{border-right:0;border-bottom:1px solid var(--rule)}
  .fact:last-child{border-bottom:0}
  .univers{grid-template-columns:1fr}
  .avis{grid-template-columns:1fr}
  .ig-grid{grid-template-columns:repeat(2,1fr)}
  .ig__head{flex-direction:column;align-items:flex-start}
  .sec-head{flex-direction:column;align-items:flex-start}
  .footer__top{grid-template-columns:1fr}
  .footer__bot{flex-direction:column;align-items:flex-start}
  .btn{padding:14px 24px;font-size:.68rem}

  .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;border-radius:0}
  .rsv__packs{max-height:none}
  .rsv__body{padding:26px 22px 28px}
}