/* =========================================================
   SUNSET FLORE — Design System
   Même gabarit que Domaine Arcadia : les rôles de couleur
   (forest, sage, cream…) sont ceux du kit identité, ici
   remplis avec la charte Sunset Flore — navy · doré · sable.
   ========================================================= */
:root{
  /* Fonds — navy profond (charte : forestDeep / forest / olive) */
  --forest-deep:#11212E;   /* fond profond */
  --forest:#1B3446;        /* fond secondaire */
  --forest-soft:#223E53;
  --olive:#445F6F;         /* filets et sous-titres */

  /* Doré — accent principal de la charte */
  --sage:#B98A4E;          /* accent principal (logo) */
  --sage-light:#E0C089;    /* accent clair, sur fonds sombres */
  /* Déclinaisons « encre » pour le texte sur fonds clairs :
     le doré de la charte n'atteint que 2,7:1 sur le crème. */
  --sage-deep:#96703E;     /* titres en italique sur crème — 3,9:1 */
  --sage-ink:#7E5B2C;      /* petits textes dorés sur crème — 5,3:1 */
  --stone:#A5AFB7;         /* texte secondaire sur fonds sombres */
  --driftwood:#5E7482;

  /* Sable / papier */
  --cream:#F4EEE1;
  --cream-2:#EBE2D0;
  --cream-3:#E0D6BF;

  /* Rappel, usage rare — terre cuite du couchant */
  --terracotta:#C26A47;
  --terracotta-soft:#D98B6A;

  /* Rôles */
  --bg:var(--cream);
  --ink:var(--forest-deep);
  --line:rgba(17,33,46,.14);
  --line-light:rgba(244,238,225,.18);

  /* Typo */
  --f-display:'Cormorant Garamond', Georgia, serif;
  --f-roman:'Cinzel', Georgia, serif;
  --f-sans:'Josefin Sans', ui-sans-serif, system-ui, sans-serif;

  /* Échelle fluide */
  --t-eyebrow:clamp(.72rem,.68rem + .2vw,.82rem);
  --t-h2:clamp(2.1rem,1.4rem + 3vw,4.4rem);
  --t-h3:clamp(1.15rem,1rem + .6vw,1.5rem);
  --t-body:clamp(1rem,.96rem + .25vw,1.15rem);
  --t-lead:clamp(1.35rem,1.1rem + 1.4vw,2.3rem);

  /* Rythme */
  --pad-x:clamp(1.4rem,6vw,7rem);
  --sec-y:clamp(5rem,10vw,9.5rem);
  --maxw:1320px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-sans);
  font-weight:300;
  color:var(--ink);
  background:var(--bg);
  line-height:1.65;
  font-size:var(--t-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
em{font-style:italic}
::selection{background:var(--sage);color:var(--forest-deep)}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px;border-radius:2px}

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

/* Titres */
h1,h2,h3{font-weight:400;line-height:1.02}
h2{
  font-family:var(--f-display);
  font-size:var(--t-h2);
  font-weight:400;
  letter-spacing:-.01em;
  line-height:1.03;
}
h2 em{color:var(--sage-deep);font-weight:500}
.feature--dark h2 em,.contact h2 em,.band h2 em,.mapsec h2 em,.amenities h2 em{color:var(--sage-light)}

.eyebrow{
  display:inline-block;
  font-family:var(--f-roman);
  font-size:var(--t-eyebrow);
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--sage-ink);
  margin-bottom:1.4rem;
}
.feature--dark .eyebrow,.contact .eyebrow,.mapsec .eyebrow,.amenities .eyebrow{color:var(--sage-light)}

/* Boutons — doré de la charte + texte navy (5,3:1) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--f-sans);font-weight:500;font-size:.82rem;
  letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
  border:1px solid transparent;transition:all .4s var(--ease);
  white-space:nowrap;
}
.btn--pill{background:var(--sage);color:var(--forest-deep);border-radius:100px;padding:.85rem 1.6rem}
.btn--pill:hover{background:var(--forest);color:var(--cream);transform:translateY(-2px)}
.btn--ghost-light{
  background:transparent;color:var(--cream);border:1px solid rgba(244,238,225,.5);
  border-radius:100px;padding:.85rem 1.8rem;
}
.btn--ghost-light:hover{background:var(--cream);color:var(--forest-deep);border-color:var(--cream)}
.btn--full{width:100%;padding-block:1.05rem}

/* =========================================================
   NAVIGATION
   ========================================================= */
.nav{
  position:fixed;top:0;left:0;width:100%;z-index:100;
  transition:background .5s var(--ease),box-shadow .5s var(--ease),padding .5s var(--ease);
  padding:.5rem 0;
}
.nav__inner{
  max-width:1500px;margin-inline:auto;padding-inline:var(--pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:2rem;
  height:76px;
}
.nav__brand{display:flex;align-items:center;gap:.75rem;color:var(--cream);transition:color .5s var(--ease)}
.nav__mark{width:34px;height:34px;color:var(--cream);transition:color .5s var(--ease)}
.nav__mark svg{width:100%;height:100%}
.nav__word{
  font-family:var(--f-roman);font-size:1.02rem;letter-spacing:.18em;
  text-transform:uppercase;font-weight:500;white-space:nowrap;
}
.nav__links{display:flex;gap:2.2rem}
.nav__links a{
  font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cream);
  font-weight:400;position:relative;padding:.3rem 0;transition:color .4s var(--ease);opacity:.9;
  white-space:nowrap;
}
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
  background:currentColor;transition:width .4s var(--ease);
}
.nav__links a:hover{opacity:1}
.nav__links a:hover::after{width:100%}
.nav__actions{display:flex;align-items:center;gap:1.4rem}
.nav__phone{
  font-family:var(--f-roman);font-size:.85rem;letter-spacing:.08em;color:var(--cream);font-weight:500;
  white-space:nowrap;
}

/* Nav — état "scrollé" */
.nav.is-scrolled{background:var(--cream);box-shadow:0 1px 0 var(--line),0 12px 40px -24px rgba(17,33,46,.4)}
.nav.is-scrolled .nav__brand,.nav.is-scrolled .nav__mark,
.nav.is-scrolled .nav__links a,.nav.is-scrolled .nav__phone{color:var(--forest-deep)}
.nav.is-scrolled .nav__mark{color:var(--sage-ink)}
.nav.is-scrolled .btn--pill{background:var(--sage);color:var(--forest-deep)}
.nav.is-scrolled .btn--pill:hover{background:var(--forest);color:var(--cream)}

.nav__burger{display:none;flex-direction:column;gap:6px;background:none;border:0;cursor:pointer;padding:10px}
.nav__burger span{width:26px;height:1.5px;background:var(--cream);transition:all .35s var(--ease)}
.nav.is-scrolled .nav__burger span{background:var(--forest-deep)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* Menu mobile */
.mobile-menu{
  position:fixed;inset:0;z-index:99;background:var(--forest-deep);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
.mobile-menu.is-open{opacity:1;visibility:visible}
.mobile-menu a{font-family:var(--f-display);font-size:2rem;color:var(--cream)}
.mobile-menu__phone{font-family:var(--f-roman)!important;font-size:1.1rem!important;letter-spacing:.1em;color:var(--sage-light)!important;margin-top:1rem}

/* =========================================================
   HERO — film + storytelling au scroll
   ========================================================= */
.hero{position:relative;height:360vh;background:var(--forest-deep)}
.hero__stage{position:sticky;top:0;height:100vh;overflow:hidden}
.hero__media{
  position:absolute;inset:0;overflow:hidden;
  /* Image d'attente = 1re image du film (remplace l'attribut poster) */
  background:var(--forest-deep) url("../medias/hero-poster.jpg") center/cover no-repeat;
  background-image:image-set(url("../medias/hero-poster.webp") type("image/webp"),url("../medias/hero-poster.jpg") type("image/jpeg"));
}
.hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  transform-origin:50% 60%;will-change:transform;
}
.hero__veil{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(17,33,46,.8) 0%,rgba(17,33,46,.26) 45%,rgba(17,33,46,.4) 100%),
    radial-gradient(120% 95% at 50% 42%,transparent 30%,rgba(17,33,46,.55) 100%);
  opacity:.62;
}
.hero__grain{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Ouverture au noir navy, comme un début de film */
.hero__curtain{position:absolute;inset:0;background:var(--forest-deep);pointer-events:none;animation:curtain 1.6s var(--ease) .15s both}
@keyframes curtain{from{opacity:1}to{opacity:0;visibility:hidden}}

.hero__content{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:var(--cream);padding:6rem 1.4rem;
  text-shadow:0 1px 30px rgba(10,20,28,.5);
}
.hero__brand{display:flex;flex-direction:column;align-items:center;will-change:transform,opacity}
.hero__mark{width:64px;height:64px;color:var(--cream);margin-bottom:1.5rem;opacity:.95;filter:drop-shadow(0 2px 18px rgba(10,20,28,.45))}
.hero__mark svg{width:100%;height:100%;overflow:visible}
.hero__mark-ring{stroke-dasharray:100;stroke-dashoffset:100;transform:rotate(-90deg);transform-origin:22px 28px;animation:ring 1.8s var(--ease-out) .5s forwards}
.hero__mark-letters{opacity:0;animation:fadein 1s var(--ease) 1.2s forwards}
@keyframes ring{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
.hero__eyebrow{
  font-family:var(--f-roman);font-size:clamp(.74rem,.66rem + .3vw,.92rem);
  letter-spacing:.4em;text-transform:uppercase;margin-bottom:1.3rem;color:var(--cream);font-weight:500;
  text-shadow:0 1px 18px rgba(10,20,28,.7);
  animation:eyebrow 1.4s var(--ease-out) .9s both;
}
@keyframes eyebrow{from{opacity:0;letter-spacing:.7em}to{opacity:1;letter-spacing:.4em}}
/* Logotype : Cinzel · capitales · interlettrage +10 % (charte) */
.hero__title{
  font-family:var(--f-roman);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.6rem,5.4vw + .4rem,6.6rem);
  letter-spacing:.1em;line-height:1;text-shadow:0 2px 40px rgba(0,0,0,.35);
  margin-right:-.1em; /* compense l'interlettrage de la dernière lettre */
}
.hero__title .ch{display:inline-block;opacity:0;transform:translateY(.32em);filter:blur(8px);
  animation:letter 1.3s var(--ease-out) forwards;animation-delay:calc(1s + var(--i) * 55ms)}
.hero__title .sp{display:inline-block;width:.32em}
@keyframes letter{to{opacity:1;transform:none;filter:blur(0)}}
.hero__tagline{
  font-family:var(--f-display);font-style:italic;font-weight:400;
  font-size:clamp(1.5rem,1.2rem + 1.5vw,2.5rem);line-height:1.32;max-width:min(40ch,92vw);margin-top:1.8rem;
  opacity:0;will-change:transform,opacity;letter-spacing:.005em;
}
.hero__tagline em{color:var(--sage-light);font-style:italic;font-weight:500}
.hero__facts{
  list-style:none;display:flex;gap:clamp(1.5rem,4vw,3.6rem);margin-top:2.4rem;
  opacity:0;will-change:transform,opacity;flex-wrap:wrap;justify-content:center;
}
.hero__facts li{
  display:flex;flex-direction:column;gap:.35rem;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
}
.hero__facts li span{
  font-family:var(--f-display);font-style:normal;font-size:clamp(1.5rem,3vw,2.3rem);
  letter-spacing:0;text-transform:none;color:var(--cream);
}
.hero__cta{
  display:flex;flex-direction:column;align-items:center;gap:1.3rem;margin-top:2.6rem;
  opacity:0;will-change:transform,opacity;
}
.hero__price{font-family:var(--f-roman);letter-spacing:.14em;text-transform:uppercase;font-size:.86rem}
.hero__price strong{font-weight:600;color:var(--cream)}
.hero__vat{display:block;margin-top:.45rem;font-family:var(--f-sans);font-size:.68rem;letter-spacing:.14em;opacity:.85}

/* Chapitres du film */
.hero__scene{
  position:absolute;left:var(--pad-x);bottom:2.4rem;z-index:4;
  display:flex;align-items:center;gap:1rem;color:var(--cream);
  font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;
  text-shadow:0 1px 14px rgba(10,20,28,.6);
  animation:fadein 1s var(--ease) 2.2s both;opacity:0;
}
.hero__scene-idx{font-family:var(--f-roman);letter-spacing:.12em;opacity:.8}
.hero__scene-idx b{font-weight:500;color:var(--sage-light);opacity:1}
.hero__scene-bar{position:relative;width:64px;height:1px;background:rgba(244,238,225,.3);overflow:hidden}
.hero__scene-bar i{position:absolute;inset:0;background:var(--sage-light);transform-origin:left;transform:scaleX(0)}
.hero__scene-label{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.hero__scene-label.is-out{opacity:0;transform:translateY(6px)}

.hero__scrollcue{
  position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:.9rem;color:var(--cream);
  font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
}
.hero__scrollcue>span:first-child{animation:fadein 1s var(--ease) 2.4s both;opacity:0}
.hero__scrollline{width:1px;height:44px;background:linear-gradient(var(--cream),transparent);position:relative;overflow:hidden;animation:fadein 1s var(--ease) 2.4s both;opacity:0}
.hero__scrollline::after{content:"";position:absolute;top:-50%;left:0;width:100%;height:50%;background:var(--sage-light);animation:scrolldrop 2.2s var(--ease) infinite}
@keyframes scrolldrop{0%{transform:translateY(0)}100%{transform:translateY(300%)}}

/* =========================================================
   MANIFESTE
   ========================================================= */
.manifesto{padding-block:var(--sec-y);text-align:center;background:var(--cream)}
.manifesto__logo{width:240px;height:auto;margin:0 auto clamp(2.6rem,5vw,4rem)}
.manifesto .eyebrow{margin-bottom:2rem}
.manifesto__statement{
  font-family:var(--f-display);font-weight:300;
  font-size:clamp(1.7rem,1.1rem + 2.6vw,3.6rem);line-height:1.18;letter-spacing:-.005em;
  max-width:23ch;margin-inline:auto;
}
.manifesto__statement em{color:var(--sage-deep);font-weight:400}
.manifesto__grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,5vw,5rem);
  max-width:900px;margin:clamp(3rem,6vw,5rem) auto 0;text-align:left;
}
.manifesto__grid p{color:var(--olive)}

/* =========================================================
   CHIFFRES CLÉS
   ========================================================= */
.stats{background:var(--forest);color:var(--cream);padding-block:clamp(3.5rem,6vw,5.5rem)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.stat{display:flex;flex-direction:column;gap:.7rem;text-align:center;position:relative}
.stat:not(:last-child)::after{content:"";position:absolute;right:-1rem;top:15%;height:70%;width:1px;background:var(--line-light)}
.stat__num{font-family:var(--f-display);font-size:clamp(2.4rem,4vw,3.6rem);line-height:1;color:var(--cream)}
.stat__num--txt{font-family:var(--f-roman);font-size:clamp(1.5rem,2.4vw,2.3rem);letter-spacing:.06em;color:var(--sage-light);line-height:1.3}
.stat__label{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--stone);font-weight:400}

/* =========================================================
   FEATURE (image + texte)
   ========================================================= */
.feature{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:0;overflow:hidden;overflow:clip}
.feature__media,.feature__text{min-width:0}/* évite le grid-blowout des images */
.feature--light{background:var(--cream)}
.feature--dark{background:var(--forest-deep);color:var(--cream)}
.feature--dark p{color:var(--cream-3)}
.feature__media{position:relative;overflow:hidden;align-self:stretch;min-height:min(62vh,560px)}
.feature__media img{width:100%;height:100%;object-fit:cover;min-height:100%;position:absolute;inset:0}
.feature__text{padding:clamp(3rem,7vw,7rem) clamp(1.4rem,6vw,6rem)}
.feature__text h2{margin-bottom:1.6rem}
.feature__text p{max-width:46ch}
.feature--reverse .feature__media{order:2}
.feature__list{list-style:none;margin-top:2rem;display:flex;flex-direction:column;gap:.9rem}
.feature__list li{position:relative;padding-left:1.7rem;font-size:.98rem;color:inherit}
.feature__list li::before{content:"";position:absolute;left:0;top:.6em;width:.5rem;height:.5rem;border:1px solid var(--sage);transform:rotate(45deg)}
.feature--dark .feature__list li{color:var(--cream-2)}
.feature__note{margin-top:1.8rem;padding-top:1.6rem;border-top:1px solid var(--line);font-style:italic;font-family:var(--f-display);font-size:1.4rem;color:var(--sage-ink);max-width:40ch}

/* =========================================================
   BANDE IMMERSIVE
   ========================================================= */
.band{position:relative;height:clamp(60vh,80vh,760px);display:flex;align-items:center;justify-content:center;overflow:hidden}
.band__img{position:absolute;inset:-10% 0;background-size:cover;background-position:center 40%;will-change:transform}
.band__overlay{position:absolute;inset:0;background:linear-gradient(rgba(17,33,46,.42),rgba(17,33,46,.55))}
.band__quote{
  position:relative;z-index:2;color:var(--cream);text-align:center;
  font-family:var(--f-display);font-style:italic;font-weight:300;
  font-size:clamp(1.4rem,1rem + 2vw,2.8rem);line-height:1.4;max-width:30ch;padding-inline:1.4rem;
  text-shadow:0 1px 30px rgba(10,20,28,.45);
}

/* =========================================================
   LES APPARTEMENTS (gabarit « villas » d'Arcadia)
   ========================================================= */
.villas{background:var(--cream-2);padding-block:var(--sec-y)}
.section-head{max-width:640px;margin-bottom:clamp(2.6rem,5vw,4rem)}
.section-head--center{text-align:center;margin-inline:auto}
.section-head h2{margin-bottom:1.2rem}
.section-head__sub{color:var(--olive);max-width:50ch}
.section-head--center .section-head__sub{margin-inline:auto}

/* Offre de lancement */
.offer{
  display:flex;align-items:center;gap:1.2rem 2rem;flex-wrap:wrap;
  background:var(--forest-deep);color:var(--cream);border-radius:4px;
  padding:1.2rem 1.6rem;margin-bottom:1.2rem;
}
.offer__tag{font-family:var(--f-roman);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--forest-deep);background:var(--sage-light);padding:.4rem .8rem;border-radius:100px}
.offer__text{font-family:var(--f-display);font-size:clamp(1.2rem,1rem + .8vw,1.6rem);flex:1;min-width:16ch;line-height:1.25}
.offer__text strong{font-weight:500;color:var(--sage-light)}
.offer__cta{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--cream);border-bottom:1px solid rgba(244,238,225,.4);padding-bottom:.2rem;transition:color .3s,border-color .3s}
.offer__cta:hover{color:var(--sage-light);border-color:currentColor}

.villa-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.villa-cards--4{grid-template-columns:repeat(4,1fr)}
.villa-card{
  background:var(--cream);border:1px solid var(--line);border-radius:4px;
  padding:1.8rem 1.6rem;display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease);
  position:relative;overflow:hidden;
}
.villa-card:hover{transform:translateY(-6px);box-shadow:0 30px 60px -40px rgba(17,33,46,.5);border-color:var(--sage)}
.villa-card--signature{background:var(--forest);color:var(--cream);border-color:var(--forest)}
.villa-card__badge{
  position:absolute;top:1.1rem;right:1.1rem;font-family:var(--f-roman);font-size:.58rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--forest-deep);background:var(--sage-light);
  padding:.35rem .7rem;border-radius:100px;
}
.villa-card__top{display:flex;flex-direction:column;gap:.4rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.villa-card--signature .villa-card__top{border-color:var(--line-light)}
.villa-card__ref{font-family:var(--f-roman);font-size:1.3rem;letter-spacing:.08em;text-transform:uppercase}
.villa-card__type{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sage-ink);line-height:1.5}
.villa-card__where{font-size:.72rem;letter-spacing:.08em;color:var(--olive)}
.villa-card__where sup,.villa-card__type sup{font-size:.7em;letter-spacing:0}
.villa-card--signature .villa-card__where{color:var(--stone)}
.villa-card--signature .villa-card__type{color:var(--sage-light)}
.villa-card__body{padding-block:1.5rem;flex:1;display:flex;flex-direction:column}
.villa-card__specs{display:flex;gap:1.3rem;margin-bottom:1.4rem}
.villa-card__specs div:first-child span{white-space:nowrap}
.villa-card__specs div.is-txt span{font-size:1.35rem;line-height:1.15;padding-top:.3rem;margin-bottom:.25rem}
.villa-card__specs div{display:flex;flex-direction:column;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--olive)}
.villa-card--signature .villa-card__specs div{color:var(--stone)}
.villa-card__specs span{font-family:var(--f-display);font-size:1.7rem;letter-spacing:0;text-transform:none;color:var(--forest-deep);margin-bottom:.1rem}
.villa-card--signature .villa-card__specs span{color:var(--cream)}
.villa-card__from{margin-top:auto;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--olive);margin-bottom:.15rem}
.villa-card__price{font-family:var(--f-display);font-size:1.9rem;color:var(--sage-deep);line-height:1.15}
.villa-card__vat{font-size:.72rem;letter-spacing:.06em;color:var(--olive);margin-top:.2rem}
.villa-card__vat sup{font-size:.7em}
.villa-card--signature .villa-card__price{color:var(--sage-light)}
.villa-card__price span{font-size:1.1rem}
.villa-card__cta{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--forest-deep);
  font-weight:500;padding-top:1.3rem;border-top:1px solid var(--line);transition:color .3s,gap .3s;
}
.villa-card--signature .villa-card__cta{color:var(--cream);border-color:var(--line-light)}
.villa-card__cta:hover{color:var(--sage-ink)}
.villa-card--signature .villa-card__cta:hover{color:var(--sage-light)}
/* Lots vendus (pour la mise à jour des disponibilités) */
.villa-card--sold{background:var(--cream-3)}
.villa-card--sold:hover{transform:none;box-shadow:none;border-color:var(--line)}
.villa-card--sold .villa-card__ref,.villa-card--sold .villa-card__specs span{color:var(--olive)}
.villa-card--sold .villa-card__type,.villa-card--sold .villa-card__specs div{color:var(--driftwood)}
.villa-card__stamp{
  align-self:flex-start;font-family:var(--f-roman);font-size:.6rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--cream);background:var(--olive);
  padding:.4rem .85rem;border-radius:100px;margin-bottom:1.1rem;
}
.villa-card__price--sold{font-family:var(--f-roman);font-size:1.15rem;letter-spacing:.16em;text-transform:uppercase;color:var(--olive)}
.villa-card__cta--disabled{color:var(--driftwood);cursor:default;font-style:italic;text-transform:none;letter-spacing:.02em;font-family:var(--f-display);font-size:1rem}
.villa-card__cta--disabled:hover{color:var(--driftwood)}
.villas__legal{margin-top:2.4rem;font-size:.76rem;letter-spacing:.04em;color:var(--olive);text-align:center;line-height:1.8}

/* =========================================================
   LES ESPACES (gabarit « intérieurs »)
   ========================================================= */
.interiors{background:var(--cream);padding-block:var(--sec-y)}
.interiors .section-head{text-align:center;margin-inline:auto;max-width:880px}
.interiors__grid{
  max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);
  display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem;
}
.interiors__item{position:relative;overflow:hidden;border-radius:4px;aspect-ratio:4/3}
.interiors__item--wide{aspect-ratio:16/9}
.interiors__item img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.interiors__item:hover img{transform:scale(1.05)}
.interiors__item figcaption{
  position:absolute;left:0;bottom:0;padding:1.4rem 1.5rem;color:var(--cream);
  font-family:var(--f-roman);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;z-index:3;
}
.interiors__item::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(17,33,46,.6),transparent 45%)}

/* =========================================================
   SITUATION / CARTE
   ========================================================= */
.mapsec{display:grid;grid-template-columns:0.82fr 1.18fr;background:var(--forest-deep);color:var(--cream);min-height:clamp(560px,68vh,760px)}
.mapsec__panel{padding:clamp(3rem,6vw,6rem) clamp(1.6rem,5vw,5rem);display:flex;flex-direction:column;justify-content:center}
.mapsec__panel h2{margin-bottom:1.2rem}
.mapsec__panel>p{color:var(--cream-3);max-width:38ch;margin-bottom:2rem}
.mapsec__panel>p.mapsec__hint{font-size:.74rem;letter-spacing:.04em;color:var(--stone);margin:-1.4rem 0 2rem}
.mapsec__addr{font-family:var(--f-display);font-style:normal;font-size:1.5rem;color:var(--cream);line-height:1.3;margin-bottom:2rem}
.mapsec__poi{list-style:none;display:flex;flex-direction:column;margin-bottom:2.4rem}
.mapsec__poi li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.85rem 0;border-top:1px solid var(--line-light);font-size:.82rem;letter-spacing:.06em;color:var(--cream-2)}
.mapsec__poi li:last-child{border-bottom:1px solid var(--line-light)}
.mapsec__poi em{font-family:var(--f-display);font-style:normal;font-size:1.35rem;color:var(--sage-light);letter-spacing:0;white-space:nowrap}
.mapsec .btn--pill{align-self:flex-start}
.mapsec .btn--pill:hover{background:var(--cream);color:var(--forest-deep)}
.mapsec__map{position:relative}
#sfMap{position:absolute;inset:0;width:100%;height:100%;background:var(--cream-3);z-index:1}
.mapsec__fallback{padding:2rem;color:var(--cream)}
/* Fond de carte légèrement réchauffé, dans les tons sable */
.mapsec__map .leaflet-tile-pane{filter:sepia(.18) saturate(.7) contrast(.96) brightness(1.02)}
.leaflet-container{font-family:var(--f-sans)!important;background:var(--cream-3)}
.leaflet-bar a{background:var(--forest-deep)!important;color:var(--cream)!important;border-color:var(--line-light)!important}
.leaflet-bar a:hover{background:var(--forest)!important}
.sf-pin{display:grid;place-items:center}
.sf-pin svg{filter:drop-shadow(0 6px 10px rgba(10,20,28,.45))}
.leaflet-popup-content-wrapper{background:var(--forest-deep);color:var(--cream);border-radius:6px;box-shadow:0 20px 40px -20px rgba(0,0,0,.6)}
.leaflet-popup-content{font-family:var(--f-sans);font-size:.9rem;margin:.7rem 1rem}
.leaflet-popup-content b{font-family:var(--f-roman);font-size:.95rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;display:block;margin-bottom:.25rem;color:var(--sage-light)}
.leaflet-popup-tip{background:var(--forest-deep)}
.leaflet-container a.leaflet-popup-close-button{color:var(--cream)}
.leaflet-tooltip.sf-tip{background:var(--forest-deep);color:var(--cream);border:none;border-radius:4px;font-family:var(--f-roman);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;padding:.3rem .6rem;box-shadow:0 8px 20px -12px rgba(0,0,0,.6)}
.leaflet-tooltip.sf-tip::before{display:none}
.leaflet-control-attribution{background:rgba(244,238,225,.82)!important;font-size:.62rem!important}

/* =========================================================
   PRESTATIONS
   ========================================================= */
.amenities{background:var(--forest);color:var(--cream);padding-block:var(--sec-y)}
.amenities__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light)}
.amenity{background:var(--forest);padding:clamp(2rem,3.5vw,3rem);display:flex;flex-direction:column;gap:1rem;transition:background .5s var(--ease)}
.amenity:hover{background:var(--forest-soft)}
.amenity__icon{width:40px;height:40px;color:var(--sage-light)}
.amenity__icon svg{width:100%;height:100%}
.amenity h3{font-family:var(--f-display);font-size:1.5rem;color:var(--cream)}
.amenity p{font-size:.92rem;color:var(--cream-3);max-width:34ch}

/* =========================================================
   CONTACT
   ========================================================= */
.contact{background:var(--forest-deep);color:var(--cream);padding-block:var(--sec-y)}
.contact__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:start}
.contact__intro h2{margin-bottom:1.4rem}
.contact__intro>p{color:var(--cream-3);max-width:44ch;margin-bottom:2.6rem}
.contact__details{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 2rem}
.contact__details>div{display:flex;flex-direction:column;gap:.25rem;border-top:1px solid var(--line-light);padding-top:1.1rem}
.contact__label{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--sage-light)}
.contact__value{font-family:var(--f-display);font-size:1.35rem;color:var(--cream);line-height:1.3}
a.contact__value{transition:color .3s}
a.contact__value:hover{color:var(--sage-light)}
.contact__note{font-size:.8rem;color:var(--stone);letter-spacing:.04em}

.contact__form{background:var(--forest);border:1px solid var(--line-light);border-radius:6px;padding:clamp(1.8rem,3vw,2.6rem)}
.contact__form-title{font-family:var(--f-display);font-size:1.7rem;margin-bottom:1.6rem;color:var(--cream)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.45rem;margin-bottom:1.1rem}
.field span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--stone)}
.field input,.field select{
  background:transparent;border:0;border-bottom:1px solid var(--line-light);
  color:var(--cream);font-family:var(--f-sans);font-size:1rem;padding:.6rem 0;border-radius:0;
  transition:border-color .3s var(--ease);
}
.field input:focus,.field select:focus{outline:none;border-color:var(--sage-light)}
.field select{cursor:pointer}
.field select option{background:var(--forest);color:var(--cream)}
.field select.is-flash{animation:flash 1.2s var(--ease)}
@keyframes flash{0%,100%{border-color:var(--line-light)}30%{border-color:var(--sage-light)}}
.checkbox{display:flex;gap:.7rem;align-items:flex-start;margin-block:1.2rem 1.6rem;font-size:.82rem;color:var(--cream-3);cursor:pointer}
.checkbox input{margin-top:.2rem;accent-color:var(--sage)}
.contact__form-note{margin-top:1rem;font-size:.85rem;color:var(--sage-light);min-height:1.2em}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{background:var(--forest-deep);color:var(--cream);padding-top:clamp(3rem,5vw,4.5rem);border-top:1px solid var(--line-light)}
.footer__inner{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem}
/* Logo horizontal blanc : ses contre-formes sont peintes en #11212E → à poser uniquement sur ce fond */
.footer__logo{width:340px;max-width:100%;height:auto;margin:-1rem 0 1rem -.6rem}
.footer__brand p{color:var(--stone);font-size:.9rem}
.footer__brand strong{color:var(--cream);font-weight:500}
.footer__nav{display:flex;flex-direction:column;gap:.7rem}
.footer__nav a{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cream-3);transition:color .3s}
.footer__nav a:hover{color:var(--sage-light)}
.footer__contact{display:flex;flex-direction:column;gap:.6rem}
.footer__contact a{font-family:var(--f-display);font-size:1.5rem;color:var(--cream)}
.footer__contact span{font-size:.85rem;color:var(--stone)}
.footer__legal{display:flex;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;padding-block:1.6rem;border-top:1px solid var(--line-light);font-size:.72rem;letter-spacing:.04em;color:var(--stone)}
.footer__rr{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.footer__rr:hover{color:var(--sage-light);border-color:currentColor}

/* =========================================================
   REVEALS (scroll)
   ========================================================= */
.reveal,.reveal-img{opacity:0;transition:opacity 1s var(--ease),transform 1s var(--ease)}
.reveal{transform:translateY(28px)}
.reveal-img{transform:scale(1.04)}
.reveal.is-in,.reveal-img.is-in{opacity:1;transform:none}
.reveal-img{overflow:hidden}

/* =========================================================
   RESPONSIVE
   ========================================================= */
/* Navigation : les intitulés Sunset Flore sont plus longs que ceux d'Arcadia */
@media (max-width:1539px){
  .nav__phone{display:none}
  .nav__links{gap:1.8rem}
}
@media (max-width:1400px){
  .nav__links{gap:1.3rem}
  .nav__links a{letter-spacing:.1em}
  .nav__cta-long{display:none}
}
@media (max-width:1240px){
  .villa-cards--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1080px){
  .villa-cards{grid-template-columns:repeat(2,1fr)}
  .amenities__grid{grid-template-columns:repeat(2,1fr)}
  .contact__details{grid-template-columns:1fr}
}
@media (max-width:1180px){
  .nav__links,.nav__actions{display:none}
  .nav__burger{display:flex}
}
@media (max-width:900px){
  .feature{grid-template-columns:1fr}
  .feature__media{min-height:52vh;order:-1!important}
  .feature--reverse .feature__media{order:-1}
  .contact__inner{grid-template-columns:1fr}
  .contact__details{grid-template-columns:1fr 1fr}
  .mapsec{grid-template-columns:1fr}
  .mapsec__map{min-height:60vh;order:2}
  #sfMap{position:relative}
  .footer__inner{grid-template-columns:1fr;gap:2rem}
  .manifesto__grid{grid-template-columns:1fr;gap:1.4rem}
  .stats__grid{grid-template-columns:repeat(2,1fr);gap:2.5rem 1rem}
  .stat:nth-child(2)::after{display:none}
}
/* Hero mobile : pas de storytelling scrubé → version statique lisible */
@media (max-width:767px){
  .hero{height:100svh}
  .hero__stage{position:relative;height:100svh}
  .hero__content{justify-content:flex-end;padding:6rem 1.6rem 4.5rem;align-items:flex-start;text-align:left}
  .hero__brand{align-items:flex-start}
  .hero__mark{width:52px;height:52px;margin-bottom:1.1rem}
  .hero__eyebrow{align-self:flex-start;letter-spacing:.32em}
  @keyframes eyebrow{from{opacity:0;letter-spacing:.5em}to{opacity:1;letter-spacing:.32em}}
  .hero__title{text-align:left;font-size:clamp(2.6rem,13.5vw,4.2rem);line-height:1.02}
  .hero__title .sp{display:block;width:auto;height:0}
  .hero__tagline{opacity:1;text-align:left;margin-inline:0;font-size:1.35rem;font-weight:500;animation:fadeup 1s var(--ease-out) 1.7s both}
  .hero__cta{opacity:1;align-items:flex-start;margin-top:2rem;animation:fadeup 1s var(--ease-out) 1.95s both}
  .hero__facts{display:none}
  .hero__scrollcue,.hero__scene{display:none}
  .hero__veil{opacity:1;background:linear-gradient(to top,rgba(10,20,28,.9) 0%,rgba(10,20,28,.55) 40%,rgba(10,20,28,.12) 72%,rgba(10,20,28,.35) 100%)}
  .hero__media{background-image:url("../medias/hero-poster-mobile.jpg");background-image:image-set(url("../medias/hero-poster-mobile.webp") type("image/webp"),url("../medias/hero-poster-mobile.jpg") type("image/jpeg"))}
}
@media (max-width:767px) and (orientation:landscape){
  .hero__media{background-image:url("../medias/hero-poster.jpg");background-image:image-set(url("../medias/hero-poster.webp") type("image/webp"),url("../medias/hero-poster.jpg") type("image/jpeg"))}
}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (max-width:560px){
  .villa-cards,.villa-cards--4{grid-template-columns:1fr}
  .amenities__grid{grid-template-columns:1fr}
  .interiors__grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .contact__details{grid-template-columns:1fr}
  .hero__facts{gap:1.4rem 2rem}
  .footer__legal{flex-direction:column;gap:.6rem}
  .stat:nth-child(3)::after{display:none}
  .offer{padding:1.3rem 1.2rem;flex-direction:column;align-items:flex-start;gap:.9rem}
  .offer__text{min-width:0}
}

/* =========================================================
   ACCESSIBILITÉ — mouvement réduit
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero{height:100vh}
  .hero__stage{position:relative}
  .hero__video{display:none}
  .hero__tagline,.hero__facts,.hero__cta{opacity:1!important}
  .reveal,.reveal-img{opacity:1!important;transform:none!important}
  .hero__curtain{display:none}
  .hero__title .ch,.hero__mark-letters,.hero__eyebrow,.hero__scene,.hero__scrollcue>span:first-child,.hero__scrollline{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .hero__mark-ring{animation:none!important;stroke-dashoffset:0}
  .hero__scene{display:none}
  .hero__scrollline::after,.band__img{animation:none!important}
  *{transition:none!important}
}