/* ============================================================
   Masha Nail's Bar, Agdal Rabat
   Feuille unique partagee par les 5 pages.
   Direction : noir profond + ivoire, le champagne reste un filet.
   Elle vient du kit client : le sceau circulaire est argent sur fond
   noir (avatar Instagram, plaque du salon), donc le site est mene par
   le noir et l'ivoire, et l'or ne sert que le sceau, les survols et
   un filet par bloc. Aucun bouton, aucun titre, aucun prix en dore.
   ============================================================ */

:root{
  --noir:#0F0E0D;
  --noir-doux:#1A1817;
  --ivoire:#F5F0EA;
  --creme:#FFFCF8;
  --champagne:#C9A96A;
  --encre:#1A1817;
  --encre-doux:#6B635C;
  --creme-doux:rgba(245,240,234,.72);

  --rule:rgba(26,24,23,.14);
  --rule-clair:rgba(245,240,234,.16);
  --rule-or:rgba(201,169,106,.42);

  --display:"Cormorant Garamond","Times New Roman",Georgia,serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;

  --maxw:1220px;
  --gutter:clamp(20px,5vw,60px);
  --radius:2px;

  --t-fast:.26s cubic-bezier(.22,.61,.36,1);
  --t-slow:.72s cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ivoire);color:var(--encre);
  font-family:var(--sans);font-size:16px;line-height:1.75;font-weight:300;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
blockquote,figure{margin:0}
cite{font-style:normal}
a{color:inherit}
button{font:inherit;background:transparent;border:0;color:inherit}
::selection{background:var(--champagne);color:var(--noir)}

[id]{scroll-margin-top:100px}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.section{padding:clamp(70px,9vw,126px) 0}
.section--noir{background:var(--noir);color:var(--ivoire)}
.section--creme{background:var(--creme)}
.section--serre{padding:clamp(52px,6vw,84px) 0}

/* ---------- typographie ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.1;
  letter-spacing:.005em;margin:0;color:inherit}
.h1{font-size:clamp(2.5rem,6vw,4.3rem)}
.h2{font-size:clamp(1.95rem,4vw,3.1rem)}
.h3{font-size:clamp(1.25rem,2vw,1.55rem)}
.h4{font-size:clamp(1.05rem,1.5vw,1.2rem)}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
.lead{font-size:clamp(1rem,1.2vw,1.06rem);color:var(--encre-doux);max-width:58ch}
.section--noir .lead{color:var(--creme-doux)}

.eyebrow{
  display:block;font-family:var(--sans);
  font-size:.67rem;font-weight:400;letter-spacing:.3em;text-transform:uppercase;
  color:var(--encre-doux);margin:0 0 18px;
}
.section--noir .eyebrow{color:var(--creme-doux)}

.txt-centre{text-align:center}
.txt-centre .lead{margin-inline:auto}

/* le filet, seul endroit ou le champagne respire */
.filet{display:block;width:54px;height:1px;background:var(--rule-or);margin:22px 0 0}
.txt-centre .filet{margin-inline:auto}

/* l'ornement maison : l'anneau du sceau, rien d'invente */
.anneau{display:block;width:9px;height:9px;border:1px solid var(--champagne);
  border-radius:50%;margin:0 auto 20px}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 32px;border:1px solid transparent;border-radius:var(--radius);
  font-family:var(--sans);font-size:.7rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.btn--plein{background:var(--noir);color:var(--ivoire);border-color:var(--noir)}
.btn--plein:hover{background:var(--champagne);border-color:var(--champagne);color:var(--noir)}
.btn--trait{border-color:var(--rule);color:var(--encre)}
.btn--trait:hover{border-color:var(--champagne);color:var(--champagne)}
.btn--clair{background:var(--ivoire);color:var(--noir);border-color:var(--ivoire)}
.btn--clair:hover{background:var(--champagne);border-color:var(--champagne)}
.btn--fantome{border-color:var(--rule-clair);color:var(--ivoire)}
.btn--fantome:hover{border-color:var(--champagne);color:var(--champagne)}

.fleche{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--encre);
  border-bottom:1px solid var(--rule);padding-bottom:5px;
  transition:color var(--t-fast),border-color var(--t-fast);
}
.fleche svg{display:block;width:15px;height:15px;transition:transform var(--t-fast)}
.fleche:hover{color:var(--champagne);border-color:var(--rule-or)}
.fleche:hover svg{transform:translateX(5px)}
.section--noir .fleche{color:var(--ivoire);border-color:var(--rule-clair)}

/* ---------- navigation ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:90;padding:16px 0;
  transition:background var(--t-fast),padding var(--t-fast),box-shadow var(--t-fast)}
.nav__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:40px}
.nav.scrolled{background:rgba(245,240,234,.95);backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--rule);padding:9px 0}
.nav.menu-open{backdrop-filter:none;background:transparent;box-shadow:none}

/* Le sceau porte deja le nom grave : pas de mot-symbole a cote. */
.nav__brand{display:flex;align-items:center;text-decoration:none;
  position:relative;z-index:120}
.nav__seal{position:relative;display:block;width:54px;height:54px;flex:0 0 54px}
.nav__seal img{position:absolute;inset:0;width:54px;height:54px;
  transition:opacity var(--t-fast)}
.nav__seal .est-noir{opacity:0}
.nav.scrolled .nav__seal .est-creme{opacity:0}
.nav.scrolled .nav__seal .est-noir{opacity:1}

.nav__links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav__links a{font-family:var(--display);font-size:.78rem;letter-spacing:.2em;
  text-transform:uppercase;text-decoration:none;color:var(--ivoire);white-space:nowrap;
  padding-bottom:3px;border-bottom:1px solid transparent;transition:color var(--t-fast),border-color var(--t-fast)}
.nav.scrolled .nav__links a{color:var(--encre)}
.nav__links a:hover,.nav__links a.active{border-color:var(--champagne)}

.nav__end{display:flex;align-items:center;justify-content:flex-end;gap:14px;
  position:relative;z-index:120}
.nav__cta{padding:14px 28px;font-size:.66rem;letter-spacing:.18em;background:transparent;
  border-color:var(--rule-clair);color:var(--ivoire)}
.nav__cta:hover{background:var(--champagne);border-color:var(--champagne);color:var(--noir)}
.nav.scrolled .nav__cta{border-color:var(--rule);color:var(--encre)}
.nav.scrolled .nav__cta:hover{color:var(--noir)}
.nav__links .nav__cta--menu{display:none}

.nav__burger{display:none;width:40px;height:40px;align-items:center;justify-content:center;
  cursor:pointer;padding:0}
.nav__burger span,.nav__burger span::before,.nav__burger span::after{
  content:"";display:block;width:22px;height:1px;background:var(--ivoire);
  transition:transform var(--t-fast),opacity var(--t-fast),background var(--t-fast)}
.nav__burger span::before{transform:translateY(-6px)}
.nav__burger span::after{transform:translateY(5px)}
.nav.scrolled .nav__burger span,
.nav.scrolled .nav__burger span::before,
.nav.scrolled .nav__burger span::after{background:var(--encre)}
/* menu mobile ouvert : la nav repasse en clair meme si elle etait scrollee,
   sinon le logo et le CTA se retrouvent noirs sur le voile noir */
.nav.menu-open .nav__seal .est-creme{opacity:1}
.nav.menu-open .nav__seal .est-noir{opacity:0}
.nav.menu-open .nav__burger span::before,
.nav.menu-open .nav__burger span::after{background:var(--ivoire)}
.nav.menu-open .nav__links .nav__cta--menu{border-color:var(--rule-clair);color:var(--ivoire)}
.nav.menu-open .nav__links .nav__cta--menu:hover{background:var(--champagne);border-color:var(--champagne);color:var(--noir)}

.nav__burger[aria-expanded="true"] span{background:transparent}
.nav__burger[aria-expanded="true"] span::before{transform:rotate(45deg)}
.nav__burger[aria-expanded="true"] span::after{transform:translateY(-1px) rotate(-45deg)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;
  overflow:hidden;background:var(--noir)}
.hero__bg{position:absolute;inset:-2% 0 0;will-change:transform}
.hero__bg img{width:100%;height:102%;object-fit:cover;object-position:60% 40%}
.hero__voile{position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,14,13,.9) 0%,rgba(15,14,13,.7) 42%,rgba(15,14,13,.25) 100%),
             linear-gradient(0deg,rgba(15,14,13,.88) 0%,rgba(15,14,13,0) 52%)}
.hero__in{position:relative;padding-bottom:clamp(64px,10vh,120px);padding-top:150px;color:var(--ivoire)}
.hero__titre{max-width:15ch}
.hero__sous{margin-top:22px;font-size:clamp(1rem,1.35vw,1.14rem);color:var(--creme-doux);
  max-width:46ch;font-weight:300}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}

/* ---------- bandeau de page ---------- */
.pagetete{position:relative;min-height:clamp(380px,52vh,520px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--noir)}
.pagetete__bg{position:absolute;inset:0}
.pagetete__bg img{width:100%;height:100%;object-fit:cover}
.pagetete__voile{position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(15,14,13,.9) 0%,rgba(15,14,13,.3) 70%,rgba(15,14,13,.55) 100%)}
.pagetete__in{position:relative;padding:150px 0 clamp(42px,6vh,64px);color:var(--ivoire)}
.pagetete__in p{margin:16px 0 0;color:var(--creme-doux);max-width:52ch}

/* ---------- bande de faits ---------- */
.faits{background:var(--noir);color:var(--ivoire);padding:clamp(34px,4vw,48px) 0}
.faits__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,44px)}
.faits__item{display:flex;align-items:flex-start;gap:14px;min-width:0}
.faits__ico{display:block;width:22px;height:22px;flex:0 0 22px;margin-top:5px;color:var(--champagne)}
.faits__ico svg{display:block;width:22px;height:22px}
.faits__k{display:block;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--creme-doux)}
.faits__v{display:block;margin-top:5px;font-size:.98rem;color:var(--ivoire)}
.faits__v a{text-decoration:none}
.faits__v a:hover{color:var(--champagne)}
.faits__item + .faits__item{border-left:1px solid var(--rule-clair);padding-left:clamp(20px,3vw,44px)}

/* ---------- duo texte + photo ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,92px);align-items:center}
.duo--inverse .duo__txt{order:2}
.duo__media{position:relative;align-self:center;max-width:460px;width:100%;justify-self:center}
.duo__media img{width:100%;height:auto}
.duo__cadre{position:relative;overflow:hidden}
.duo__note{position:absolute;right:-18px;bottom:26px;background:var(--noir);color:var(--ivoire);
  padding:16px 22px;max-width:190px}
.duo__note small{display:block;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--creme-doux);margin-bottom:4px}
.duo__note span{font-family:var(--display);font-size:1.15rem}
.puces{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px}
.puces li{display:flex;align-items:flex-start;gap:12px;font-size:.98rem;color:var(--encre-doux)}
.puces svg{display:block;width:15px;height:15px;flex:0 0 15px;margin-top:7px;color:var(--champagne)}

/* ---------- cartes de prestations ---------- */
.cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.carte{background:var(--creme);padding:clamp(28px,3vw,42px);display:flex;flex-direction:column;
  transition:background var(--t-fast)}
.carte:hover{background:var(--ivoire)}
.carte__ico{display:block;width:34px;height:34px;color:var(--champagne);margin-bottom:22px}
.carte__ico svg{display:block;width:34px;height:34px}
.carte h3{margin-bottom:10px}
.carte p{font-size:.95rem;color:var(--encre-doux);margin-bottom:20px}
.carte .fleche{margin-top:auto;align-self:flex-start}

/* ---------- carte des tarifs ---------- */
.menu{display:grid;gap:clamp(40px,5vw,64px)}
.menu--deux{grid-template-columns:1fr 1fr}
.menugroupe h3{padding-bottom:14px;border-bottom:1px solid var(--rule)}
.section--noir .menugroupe h3{border-color:var(--rule-clair)}
.menuligne{display:flex;align-items:baseline;gap:12px;padding:13px 0;
  border-bottom:1px solid var(--rule)}
.section--noir .menuligne{border-color:var(--rule-clair)}
.menuligne__n{font-size:.99rem}
.menuligne__p{margin-left:auto;font-family:var(--display);font-size:1.22rem;white-space:nowrap}
.menuligne__p small{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-doux);margin-left:5px;font-family:var(--sans)}
.section--noir .menuligne__p small{color:var(--creme-doux)}
.menuligne__p em{font-style:normal;font-family:var(--sans);font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--encre-doux);margin-right:7px}
.menunote{margin-top:14px;font-size:.86rem;color:var(--encre-doux)}
.section--noir .menunote{color:var(--creme-doux)}

/* ---------- avis ---------- */
.avis{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
.avis__item{background:var(--creme);padding:clamp(30px,3.4vw,46px)}
.avis__txt{font-family:var(--display);font-size:clamp(1.1rem,1.6vw,1.34rem);line-height:1.5;
  color:var(--encre);margin:0}
.avis__nom{display:block;margin-top:20px;font-size:.64rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--encre-doux)}

/* ---------- grille Instagram ---------- */
.ighandle{display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--encre)}
.ighandle svg{display:block;width:17px;height:17px}
.ighandle:hover{color:var(--champagne)}
.iggrille{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
.iggrille--apercu{grid-template-columns:repeat(4,1fr)}
.igpost{position:relative;display:block;overflow:hidden;background:var(--noir)}
.igpost img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  transition:transform var(--t-slow),opacity var(--t-fast)}
.igpost:hover img{transform:scale(1.04);opacity:.78}
.igpost__voir{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;
  font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ivoire);
  background:linear-gradient(0deg,rgba(15,14,13,.82),rgba(15,14,13,0));
  opacity:0;transform:translateY(8px);transition:opacity var(--t-fast),transform var(--t-fast)}
.igpost:hover .igpost__voir,.igpost:focus-visible .igpost__voir{opacity:1;transform:none}
.igfin{margin-top:clamp(30px,4vw,48px);text-align:center}

/* ---------- bande CTA ---------- */
.bandecta{background:var(--noir);color:var(--ivoire);text-align:center}
.bandecta__row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:34px}

/* ---------- contact ---------- */
.coord{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(34px,5vw,72px);align-items:stretch}
.coord__bloc + .coord__bloc{margin-top:30px}
.coord__k{display:block;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--encre-doux);margin-bottom:8px}
.coord__v{font-size:1.02rem}
.coord__v a{text-decoration:none;border-bottom:1px solid var(--rule)}
.coord__v a:hover{color:var(--champagne);border-color:var(--rule-or)}
.carte-map{position:relative;min-height:380px;background:var(--noir-doux)}
.carte-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wa{display:inline-flex;align-items:center;gap:11px;margin-top:28px}
.wa svg{display:block;width:17px;height:17px}

/* ---------- pied de page ---------- */
.footer{background:var(--noir);color:var(--ivoire);padding:clamp(56px,6vw,84px) 0 30px}
.footer__grille{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(30px,4vw,60px)}
.footer__marque img{width:112px;height:auto}
.footer__tag{margin-top:18px;font-size:.92rem;color:var(--creme-doux);max-width:30ch}
.footer h4{font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  font-family:var(--sans);font-weight:400;color:var(--creme-doux);margin-bottom:16px}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer li{font-size:.94rem;color:var(--creme-doux)}
.footer a{text-decoration:none}
.footer a:hover{color:var(--champagne)}
.footer__bar{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;
  align-items:center;margin-top:clamp(40px,5vw,64px);padding-top:22px;
  border-top:1px solid var(--rule-clair);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--creme-doux)}
.footer__credit{text-decoration:none;text-transform:uppercase;letter-spacing:.14em}

/* ---------- modale de reservation ---------- */
.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.ouverte{display:flex}
.rsv__backdrop{position:fixed;inset:0;background:rgba(15,14,13,.78);backdrop-filter:blur(3px)}
.rsv__card{position:relative;display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);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(--creme);box-shadow:0 30px 90px rgba(15,14,13,.4)}
.rsv__aside{min-height:0;overflow-y:auto;position:relative;background:var(--noir);
  color:var(--ivoire);padding:clamp(28px,3vw,40px)}
.rsv__aside img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32}
.rsv__aside-in{position:relative}
.rsv__aside h3{margin-bottom:14px}
.rsv__aside p{font-size:.92rem;color:var(--creme-doux)}
.rsv__body{display:flex;flex-direction:column;overflow-y:auto;min-height:0;
  -webkit-overflow-scrolling:touch;padding:clamp(28px,3vw,40px)}
.rsv__body > *{flex-shrink:0}
.rsv__fermer{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--encre)}
.rsv__fermer svg{display:block;width:16px;height:16px}
.rsv__steps{display:flex;gap:7px;margin-bottom:22px}
.rsv__steps i{display:block;width:34px;height:2px;background:var(--rule)}
.rsv__steps i.on{background:var(--champagne)}
.rsv__lab{display:block;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--encre-doux);margin:22px 0 12px}
.rsv__lab:first-of-type{margin-top:0}
.rsv__packs{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  max-height:290px;overflow-y:auto}
.rsv__pack{display:flex;align-items:baseline;gap:12px;width:100%;text-align:left;
  padding:12px 15px;background:var(--creme);cursor:pointer;
  transition:background var(--t-fast)}
.rsv__pack:hover{background:var(--ivoire)}
.rsv__pack[aria-pressed="true"]{background:var(--noir);color:var(--ivoire)}
.rsv__pack span{font-size:.94rem}
.rsv__pack b{margin-left:auto;font-family:var(--display);font-weight:400;font-size:1.06rem;
  white-space:nowrap}
.rsv__compte{display:block;margin-top:10px;font-size:.78rem;color:var(--encre-doux)}
.rsv__ligne{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.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(--rule);border-radius:var(--radius)}
.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);cursor:pointer;
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.rsv__chip:hover{border-color:var(--champagne)}
.rsv__chip[aria-pressed="true"]{background:var(--noir);border-color:var(--noir);color:var(--ivoire)}
.rsv__total{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-top:26px;padding-top:18px;border-top:1px solid var(--rule)}
.rsv__total span{font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;
  color:var(--encre-doux)}
.rsv__total b{font-family:var(--display);font-weight:400;font-size:1.5rem}
.rsv__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.rsv__actions .btn{flex:1 1 200px;min-width:0}
.rsv__hint{margin-top:14px;font-size:.8rem;color:var(--encre-doux)}
.rsv__recap{margin-top:16px;padding:16px 18px;background:var(--ivoire);font-size:.9rem;
  display:none}
.rsv__recap.on{display:block}
.rsv__recap b{font-weight:400;font-family:var(--display);font-size:1.02rem}
.rsv__note{margin-top:18px;font-size:.78rem;color:var(--encre-doux)}
body.rsv-ouverte{overflow:hidden}

/* ---------- mouvement (jamais cacher le contenu sans JS) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(20px);
  transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal][data-d="1"]{transition-delay:.1s}
.js [data-reveal][data-d="2"]{transition-delay:.2s}
.js [data-reveal][data-d="3"]{transition-delay:.3s}

/* Le clip vit sur l'IMAGE, jamais sur l'element observe : un element
   coupe a zero par son propre clip-path ne declenche plus
   l'IntersectionObserver et resterait invisible pour toujours. */
.js .revele-img img{clip-path:inset(0 0 100% 0);transform:scale(1.08);
  transition:clip-path 1s cubic-bezier(.22,.61,.36,1),transform 1.4s cubic-bezier(.22,.61,.36,1)}
.js .revele-img.in img{clip-path:inset(0 0 0 0);transform:none}

.js .hero__bg img{animation:kenburns 22s ease-out forwards}
@keyframes kenburns{from{transform:scale(1.07)}to{transform:scale(1)}}
.js .hero__in > *{opacity:0;animation:monte .9s cubic-bezier(.22,.61,.36,1) forwards}
.js .hero__in > *:nth-child(1){animation-delay:.15s}
.js .hero__in > *:nth-child(2){animation-delay:.32s}
.js .hero__in > *:nth-child(3){animation-delay:.48s}
@keyframes monte{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js .revele-img img{opacity:1;transform:none;
    clip-path:none;transition:none}
  .js .hero__in > *{opacity:1;animation:none}
  .js .hero__bg img{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .nav__links{position:fixed;top:0;left:0;width:100vw;height:100dvh;
    flex-direction:column;justify-content:center;gap:26px;
    background:var(--noir);transform:translateX(100%);opacity:0;visibility:hidden;
    transition:transform .38s cubic-bezier(.22,.61,.36,1),opacity .28s,visibility .28s;z-index:100}
  .nav__links.nav-open{transform:none;opacity:1;visibility:visible}
  .nav__links a{color:var(--ivoire);font-size:1.5rem;letter-spacing:.14em}
  .nav.scrolled .nav__links a{color:var(--ivoire)}
  .nav__links .nav__cta--menu{display:inline-flex;margin-top:12px;
    border-color:var(--rule-clair);color:var(--ivoire)}
  .nav__end .nav__cta--bar{display:none}
  .nav__burger{display:flex}
  .nav__in{grid-template-columns:1fr auto}
  body.nav-open .nav{z-index:110}

  .duo{grid-template-columns:1fr;gap:38px}
  .duo--inverse .duo__txt{order:0}
  .cartes{grid-template-columns:repeat(2,1fr)}
  .menu--deux{grid-template-columns:1fr}
  .coord{grid-template-columns:1fr}
  .carte-map{min-height:320px}
  .footer__grille{grid-template-columns:1fr 1fr}
  .footer__marque{grid-column:1 / -1}
}

@media (max-width:1020px){
  .rsv__card{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);
    max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
  .rsv__aside{padding:26px}
  .rsv__aside img{display:none}
  /* empile : la croix passe au-dessus du panneau noir, donc en creme */
  .rsv__fermer{color:var(--ivoire)}
}

@media (max-width:760px){
  .faits__grille{grid-template-columns:1fr;gap:20px}
  .faits__item + .faits__item{border-left:0;border-top:1px solid var(--rule-clair);
    padding-left:0;padding-top:20px}
  .avis{grid-template-columns:1fr}
  .hero{min-height:92vh;min-height:92svh}
  .hero__in{padding-top:120px}
  .duo__note{right:0;bottom:-16px}
}

@media (max-width:620px){
  .cartes{grid-template-columns:1fr}
  .iggrille{grid-template-columns:repeat(2,1fr)}
  .btn{padding:15px 26px}
  .rsv__ligne{grid-template-columns:1fr}
  .footer__grille{grid-template-columns:1fr}
}

@media (max-width:680px){
  .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}
}