/* ═══════════════════════════════════════════════
   LE MANHATTAN — Cap d'Agde
   Feuille de style principale
   ═══════════════════════════════════════════════ */

/* ---------- 0. Polices auto-hébergées ----------
   Aucune requête vers Google Fonts : les fichiers sont
   dans assets/fonts/. Ne rien charger d'externe. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/cormorant-garamond-300.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/cormorant-garamond-400.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/jost-300.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/jost-400.woff2') format('woff2');}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/jost-500.woff2') format('woff2');}

/* ---------- 1. Variables ---------- */
:root{
  --sand:        #f6f2ec;
  --sand-deep:   #eae3d8;
  --paper:       #ffffff;
  --ink:         #1c1b18;
  --ink-soft:    #55524b;
  --ink-mute:    #8a8579;
  --line:        rgba(28,27,24,.14);
  --line-soft:   rgba(28,27,24,.08);
  --terracotta:  #b86a45;
  --dark:        #1c1b18;
  --dark-2:      #26241f;

  --f-display: "Cormorant Garamond", "Didot", "Bodoni MT", Georgia, serif;
  --f-body:    "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1280px;
  --pad: clamp(1.15rem, 4vw, 3rem);
  --gap: clamp(1.75rem, 3.5vw, 3.25rem);

  --ease: cubic-bezier(.22,.61,.36,1);
  --nav-h: 70px;
}

/* ---------- 2. Reset / base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:300;
  font-size:clamp(.95rem, .92rem + .16vw, 1.02rem);
  line-height:1.62;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* height:auto neutralise l'attribut height du HTML et laisse agir aspect-ratio */
img{ max-width:100%; height:auto; display:block; }
/* les <picture> (WebP + repli JPEG) s'effacent : l'<img> reste la boîte mise en forme */
picture{ display:contents; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }

.skip-link{ position:absolute; left:-9999px; top:0; z-index:200; background:var(--ink); color:var(--sand); padding:.75rem 1.25rem; }
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--terracotta); outline-offset:3px; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- 3. Typographie ---------- */
.h2{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(1.9rem, 1.15rem + 2.6vw, 3.15rem);
  line-height:1.05; letter-spacing:-.015em;
  margin:0 0 .85rem;
}
.h2--light{ color:#f3efe8; }

.eyebrow{
  font-size:.68rem; font-weight:400; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-mute); margin:0 0 .7rem;
}
.eyebrow--light{ color:rgba(255,255,255,.7); }

p{ margin:0 0 .85rem; max-width:60ch; }
em{ font-style:italic; }
strong{ font-weight:500; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-soft);
  border-bottom:1px solid var(--line); padding-bottom:.3rem;
  transition:color .35s var(--ease), border-color .35s var(--ease), gap .35s var(--ease);
}
.link-arrow:hover{ color:var(--ink); border-color:var(--ink); gap:.8rem; }

/* ---------- 4. Boutons ---------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:var(--sand); --btn-bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.8rem 1.6rem;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1px solid var(--btn-bd); border-radius:0;
  font-size:.74rem; font-weight:400; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--dark:hover{ --btn-bg:var(--terracotta); --btn-bd:var(--terracotta); }
.btn--light{ --btn-bg:#f3efe8; --btn-fg:var(--ink); --btn-bd:#f3efe8; }
.btn--light:hover{ --btn-bg:transparent; --btn-fg:#f3efe8; }
.btn--ghost{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.5); }
.btn--ghost:hover{ --btn-bd:#fff; --btn-bg:rgba(255,255,255,.12); }
.btn--outline{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line); }
.btn--outline:hover{ --btn-bd:var(--ink); }
.btn--sm{ padding:.6rem 1.15rem; font-size:.68rem; }
.btn--lg{ padding:1rem 2rem; }

/* ---------- 5. Navigation ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  border-bottom:1px solid transparent;
  transition:background .45s var(--ease), border-color .45s var(--ease);
}
.nav__inner{
  max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  height:var(--nav-h); display:flex; align-items:center; justify-content:space-between; gap:1rem;
}

.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:#fff; transition:color .45s var(--ease); }
.brand__mark{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  border:1px solid currentColor; font-family:var(--f-display); font-size:1.05rem; line-height:1;
}
.brand__text{ display:flex; flex-direction:column; line-height:1.1; }
.brand__name{ font-family:var(--f-display); font-size:1.2rem; letter-spacing:.02em; }
.brand__sub{ font-size:.58rem; letter-spacing:.24em; text-transform:uppercase; opacity:.7; }

.nav__links{ display:flex; align-items:center; gap:1.75rem; }
.nav__links a:not(.btn){
  color:#fff; text-decoration:none; font-size:.73rem;
  letter-spacing:.15em; text-transform:uppercase;
  position:relative; padding-block:.35rem;
  transition:color .4s var(--ease);
}
.nav__links a:not(.btn)::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:currentColor; transition:width .4s var(--ease);
}
.nav__links a:not(.btn):hover::after{ width:100%; }
.nav__links .btn{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.55); }
.nav__links .btn:hover{ --btn-bg:#fff; --btn-fg:var(--ink); --btn-bd:#fff; }

.nav.is-stuck{
  background:rgba(246,242,236,.94);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:var(--line-soft);
}
.nav.is-stuck .brand,
.nav.is-stuck .nav__links a:not(.btn){ color:var(--ink); }
.nav.is-stuck .nav__links .btn{ --btn-bg:var(--ink); --btn-fg:var(--sand); --btn-bd:var(--ink); }
.nav.is-stuck .nav__links .btn:hover{ --btn-bg:var(--terracotta); --btn-bd:var(--terracotta); --btn-fg:#fff; }
.nav.is-stuck .nav__toggle span{ background:var(--ink); }

.nav__toggle{
  display:none; width:40px; height:40px; padding:0; background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:center; gap:6px; align-items:flex-end;
}
.nav__toggle span{
  display:block; height:1px; background:#fff;
  transition:width .3s var(--ease), transform .3s var(--ease), opacity .2s var(--ease), background .45s var(--ease);
}
.nav__toggle span:nth-child(1){ width:22px; }
.nav__toggle span:nth-child(2){ width:16px; }
.nav__toggle span:nth-child(3){ width:22px; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ width:22px; transform:translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ width:22px; transform:translateY(-7px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero{
  position:relative; min-height:min(100svh, 780px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--nav-h) + 2rem) var(--pad) clamp(2.5rem,6vh,4rem);
  overflow:hidden; color:#fff;
}
.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__media img{
  width:100%; height:100%; object-fit:cover; object-position:center 55%;
  animation:heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.07); } to{ transform:scale(1); } }

.hero__veil{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, rgba(18,17,14,.7) 0%, rgba(18,17,14,.44) 34%, rgba(18,17,14,.06) 68%, rgba(18,17,14,0) 100%),
    linear-gradient(180deg, rgba(18,17,14,.5) 0%, rgba(18,17,14,.04) 28%, rgba(18,17,14,.2) 60%, rgba(18,17,14,.66) 100%);
}

.hero__content{
  position:relative; z-index:2;
  width:100%; max-width:var(--wrap); margin-inline:auto;
}
.hero__title{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(3rem, 1.6rem + 7vw, 7rem);
  line-height:.92; letter-spacing:-.03em;
  margin:0 0 1.1rem; text-shadow:0 2px 40px rgba(0,0,0,.25);
}
.hero__lede{
  font-size:clamp(1rem, .94rem + .38vw, 1.2rem);
  font-weight:300; max-width:42ch; color:rgba(255,255,255,.93);
  margin-bottom:1.75rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

.hero__scroll{
  position:absolute; z-index:2; left:50%; bottom:.9rem; transform:translateX(-50%);
  width:1px; height:38px; display:block; background:rgba(255,255,255,.28);
}
.hero__scroll span{ position:absolute; inset:0; background:#fff; transform-origin:top; animation:scrollLine 2.4s var(--ease) infinite; }
@keyframes scrollLine{
  0%{ transform:scaleY(0); transform-origin:top; }
  45%{ transform:scaleY(1); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* ---------- 7. Bandeau clé ---------- */
.keybar{ background:var(--dark); color:#f3efe8; }
.keybar__in{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem 2rem;
  padding-block:1.1rem; flex-wrap:wrap;
}
.keybar__stats{
  display:flex; flex-wrap:wrap; gap:0; margin:0; flex:1 1 auto;
}
.keybar__stats > div{
  padding:0 clamp(1rem,2.2vw,2.25rem);
  border-left:1px solid rgba(243,239,232,.18);
}
.keybar__stats > div:first-child{ border-left:0; padding-left:0; }
.keybar__stats dt{
  font-size:.6rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(243,239,232,.5); margin-bottom:.15rem;
}
.keybar__stats dd{ margin:0; font-family:var(--f-display); font-size:1.3rem; line-height:1.15; }

/* ---------- 8. Sections génériques ---------- */
.section{ padding-block:clamp(3.25rem, 5.5vw, 5.5rem); }
.section--tight{ padding-block:clamp(2.75rem, 4.5vw, 4.5rem); }
.section__head{ margin-bottom:clamp(1.5rem,2.5vw,2.25rem); }
.section__head--row{
  display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; flex-wrap:wrap;
}
.section__head .h2{ margin-bottom:0; }
.section__note{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); margin:0; }

/* ---------- 9. Le bien ---------- */
.intro{ background:var(--sand); }
.intro__grid{ display:grid; grid-template-columns:1.25fr .75fr; gap:var(--gap); align-items:center; }
.intro__text p{ color:var(--ink-soft); }

.ticks{ list-style:none; margin:1.35rem 0 0; padding:0; display:grid; gap:.55rem; }
.ticks li{
  position:relative; padding-left:1.6rem; font-size:.93rem; color:var(--ink);
}
.ticks li::before{
  content:""; position:absolute; left:0; top:.45em;
  width:9px; height:5px; border-left:1px solid var(--terracotta); border-bottom:1px solid var(--terracotta);
  transform:rotate(-45deg);
}

.intro__figure{ margin:0; overflow:hidden; }
.intro__figure img{ width:100%; aspect-ratio:3/4; object-fit:cover; transition:transform 1.2s var(--ease); }
.intro__figure:hover img{ transform:scale(1.04); }

/* ---------- 10. Cartes espaces ---------- */
.spaces{ background:var(--paper); }
.cards{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,1.8vw,1.75rem); }
.card{ margin:0; }
.card__media{ position:relative; overflow:hidden; margin-bottom:.9rem; }
.card__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform 1.2s var(--ease); }
.card:hover .card__media img{ transform:scale(1.05); }
.card__num{
  position:absolute; left:0; bottom:0;
  background:var(--paper); color:var(--terracotta);
  font-family:var(--f-display); font-size:.85rem; letter-spacing:.2em;
  padding:.4rem .75rem;
}
.card__title{
  font-family:var(--f-display); font-weight:400;
  font-size:1.4rem; line-height:1.2; margin:0 0 .35rem;
}
.card p{ font-size:.9rem; color:var(--ink-soft); margin:0; max-width:none; }

/* ---------- 11. Terrasse ---------- */
.terrace{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  min-height:min(70vh, 560px); background:var(--dark); color:#f3efe8;
}
.terrace__bg{ position:relative; overflow:hidden; }
.terrace__bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.terrace__panel{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(2.25rem,4.5vw,4rem) clamp(1.25rem,4vw,4rem);
}
.terrace__panel p{ color:rgba(243,239,232,.78); }
.terrace__panel .btn{ align-self:flex-start; margin-top:.75rem; }

/* ---------- 12. Galerie ---------- */
.gallery{ background:var(--sand); }
.grid{ column-count:4; column-gap:clamp(.5rem,.9vw,.9rem); }
.grid__item{
  position:relative; display:block; width:100%;
  margin:0 0 clamp(.5rem,.9vw,.9rem); padding:0;
  border:0; background:none; cursor:pointer; overflow:hidden;
  break-inside:avoid; -webkit-column-break-inside:avoid;
}
.grid__item img{ width:100%; height:auto; display:block; transition:transform 1s var(--ease); }
.grid__item::after{
  content:""; position:absolute; inset:0; background:rgba(28,27,24,.16);
  opacity:0; transition:opacity .45s var(--ease);
}
.grid__item:hover img{ transform:scale(1.05); }
.grid__item:hover::after{ opacity:1; }
.grid__item.is-hidden{ display:none; }
.gallery__more{ text-align:center; margin-top:clamp(1.5rem,2.5vw,2.25rem); }

/* ---------- 13. Équipements ---------- */
.amenities{ background:var(--paper); }
.amenities__cols{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.25rem,2.5vw,2.5rem); }
.amen__title{
  font-family:var(--f-display); font-weight:400; font-size:1.25rem;
  margin:0 0 .8rem; padding-bottom:.6rem; border-bottom:1px solid var(--line);
}
.amen__list{ list-style:none; margin:0; padding:0; }
.amen__list li{
  position:relative; padding-left:1rem; margin-bottom:.42rem;
  font-size:.88rem; color:var(--ink-soft);
}
.amen__list li::before{ content:""; position:absolute; left:0; top:.68em; width:5px; height:1px; background:var(--terracotta); }

/* ---------- 14. Village ---------- */
.village{ background:var(--sand-deep); }
.village__grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:var(--gap); align-items:start; }
.village__text p{ color:var(--ink-soft); }
.village__disclaimer{
  margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--line);
  font-size:.8rem; color:var(--ink-mute);
}
.near__title{ font-family:var(--f-display); font-weight:400; font-size:1.25rem; margin:0 0 .8rem; }
.near{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.near li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.9rem;
}
.near__d{ color:var(--ink-mute); font-size:.78rem; text-align:right; flex:none; }
.near__note{ margin-top:.75rem; font-size:.72rem; color:var(--ink-mute); }

/* ---------- 15. Contact ---------- */
.contact{ background:var(--sand-deep); padding-bottom:clamp(3rem,5vw,5rem); }
.contact__card{
  background:var(--dark); color:#f3efe8;
  display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(1.75rem,3.5vw,3.5rem);
  padding:clamp(1.75rem,4vw,3.5rem);
}
.contact__card p{ color:rgba(243,239,232,.78); }
.contact__left .btn{ margin-top:.75rem; }
.contact__right{ border-left:1px solid rgba(243,239,232,.18); padding-left:clamp(1.25rem,2.5vw,2.5rem); }
.contact__quote{
  font-family:var(--f-display); font-style:italic; font-weight:300;
  font-size:clamp(1.1rem,.98rem + .55vw,1.4rem); line-height:1.35;
  color:rgba(243,239,232,.92) !important; margin-bottom:1.5rem;
}
.contact__meta{ margin:0 0 1.25rem; }
.contact__meta > div{ margin-bottom:.9rem; }
.contact__meta dt{
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(243,239,232,.5); margin-bottom:.25rem;
}
.contact__meta dd{ margin:0; font-size:.9rem; color:rgba(243,239,232,.9); line-height:1.5; }
.contact__meta a{ text-decoration:none; border-bottom:1px solid rgba(243,239,232,.4); padding-bottom:1px; }
.contact__meta a:hover{ border-color:#f3efe8; }
.contact__small{ font-size:.7rem; color:rgba(243,239,232,.45) !important; margin:0; }

/* ---------- 16. Footer ---------- */
.footer{ background:var(--dark-2); color:rgba(243,239,232,.75); padding-block:clamp(2rem,3.5vw,3rem); }
.footer__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.25rem 2rem;
}
.footer__brand{ display:flex; align-items:center; gap:.85rem; color:#f3efe8; }
.footer__name{ font-family:var(--f-display); font-size:1.2rem; margin:0; line-height:1.2; }
.footer__place{ font-size:.65rem; letter-spacing:.16em; text-transform:uppercase; margin:0; color:rgba(243,239,232,.5); }
.footer__nav{ display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; }
.footer__nav a{
  font-size:.72rem; letter-spacing:.13em; text-transform:uppercase;
  text-decoration:none; color:rgba(243,239,232,.7); transition:color .3s var(--ease);
}
.footer__nav a:hover{ color:#f3efe8; }
.footer__legal{
  flex:1 0 100%; margin:0; padding-top:1.1rem;
  border-top:1px solid rgba(243,239,232,.12);
  font-size:.7rem; color:rgba(243,239,232,.45); max-width:none;
}
.footer__legal a{ color:rgba(243,239,232,.7); }

/* ---------- 17. Barre de réservation ---------- */
.bookbar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:rgba(246,242,236,.96);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line-soft);
  transform:translateY(110%); transition:transform .45s var(--ease);
}
.bookbar.is-visible{ transform:none; }
.bookbar__in{
  max-width:var(--wrap); margin-inline:auto; padding:.65rem var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.bookbar__text{ margin:0; display:flex; flex-direction:column; line-height:1.25; max-width:none; }
.bookbar__text strong{ font-family:var(--f-display); font-size:1.05rem; font-weight:400; }
.bookbar__text span{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-mute); }

/* ---------- 18. Lightbox ---------- */
.lightbox{
  position:fixed; inset:0; z-index:150; background:rgba(16,15,13,.96);
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,4vw,3rem);
  opacity:0; transition:opacity .3s var(--ease);
}
.lightbox.is-open{ opacity:1; }
.lightbox[hidden]{ display:none; }

.lb__figure{ margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; gap:.9rem; align-items:center; }
.lb__figure img{ max-width:100%; max-height:78vh; width:auto; height:auto; object-fit:contain; }
.lb__figure figcaption{
  font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(243,239,232,.65); text-align:center;
}

.lb__close,.lb__nav{
  position:absolute; background:none; border:0; cursor:pointer;
  color:rgba(243,239,232,.75); line-height:1;
  transition:color .3s var(--ease), transform .3s var(--ease);
}
.lb__close:hover,.lb__nav:hover{ color:#fff; }
.lb__close{ top:clamp(.5rem,2vw,1.25rem); right:clamp(.5rem,2vw,1.25rem); font-size:2.2rem; padding:.25rem .55rem; }
.lb__nav{ top:50%; transform:translateY(-50%); font-size:3rem; padding:.5rem 1rem; }
.lb__nav--prev{ left:clamp(0rem,1vw,1rem); }
.lb__nav--next{ right:clamp(0rem,1vw,1rem); }
.lb__nav--prev:hover{ transform:translateY(-50%) translateX(-4px); }
.lb__nav--next:hover{ transform:translateY(-50%) translateX(4px); }

.lb__count{
  position:absolute; bottom:clamp(.5rem,2vw,1.25rem); left:50%; transform:translateX(-50%);
  margin:0; font-size:.72rem; letter-spacing:.2em; color:rgba(243,239,232,.5);
}
body.is-locked{ overflow:hidden; }

/* ---------- 19. Reveal ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.07s; }
.reveal[data-delay="2"]{ transition-delay:.14s; }
.reveal[data-delay="3"]{ transition-delay:.21s; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
  .hero__media img,.hero__scroll span{ animation:none; }
}

/* ═══════════ 20. Responsive ═══════════ */

@media (max-width:1080px){
  .cards{ grid-template-columns:repeat(2,1fr); }
  .amenities__cols{ grid-template-columns:repeat(2,1fr); row-gap:2rem; }
  .grid{ column-count:3; }
}

@media (max-width:900px){
  :root{ --nav-h:62px; }

  .nav__toggle{ display:flex; }
  .nav__links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--sand); padding:.75rem var(--pad) 1.75rem;
    border-bottom:1px solid var(--line-soft);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity .3s var(--ease), transform .3s var(--ease);
    max-height:calc(100svh - var(--nav-h)); overflow-y:auto;
  }
  .nav__links.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a:not(.btn){
    color:var(--ink) !important; width:100%;
    padding:.85rem 0; border-bottom:1px solid var(--line-soft); font-size:.8rem;
  }
  .nav__links .btn{
    margin-top:1.1rem; width:100%;
    --btn-bg:var(--ink); --btn-fg:var(--sand); --btn-bd:var(--ink);
  }
  .nav.has-open-menu{ background:rgba(246,242,236,.98); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
  .nav.has-open-menu .brand{ color:var(--ink); }
  .nav.has-open-menu .nav__toggle span{ background:var(--ink); }

  .keybar__in{ padding-block:.9rem; }
  .keybar__stats{ gap:.25rem 0; }
  .keybar__stats > div{ padding-inline:1rem; }

  .intro__grid,
  .village__grid{ grid-template-columns:1fr; }
  .intro__figure{ order:-1; }
  .intro__figure img{ aspect-ratio:16/10; }

  .terrace{ grid-template-columns:1fr; }
  .terrace__bg{ min-height:44vh; }

  .contact__card{ grid-template-columns:1fr; }
  .contact__right{ border-left:0; border-top:1px solid rgba(243,239,232,.18); padding-left:0; padding-top:1.5rem; }
}

@media (max-width:640px){
  body{ padding-bottom:60px; }               /* place pour la barre de réservation */
  .hero{ min-height:88svh; }
  .hero__actions .btn{ flex:1 1 100%; }
  .brand__sub{ display:none; }

  .keybar__stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:.85rem 0; width:100%; }
  .keybar__stats > div{ padding:0 .6rem; }
  .keybar__stats > div:nth-child(3n+1){ border-left:0; padding-left:0; }
  .keybar__stats dd{ font-size:1.08rem; }
  .keybar__in > .btn{ width:100%; }
  .hero__scroll{ display:none; }

  .cards{ grid-template-columns:1fr 1fr; gap:.9rem; }
  .card__title{ font-size:1.15rem; }
  .card p{ font-size:.83rem; }

  .grid{ column-count:2; }
  .amenities__cols{ grid-template-columns:1fr 1fr; gap:1.25rem; }
  .near li{ font-size:.85rem; }

  .footer__inner{ gap:1rem; }
  .lb__nav{ font-size:2.2rem; }
  .lb__figure img{ max-height:70vh; }
}

@media (max-width:420px){
  .cards{ grid-template-columns:1fr; }
  .amenities__cols{ grid-template-columns:1fr; }
}