/* ============================================================
   Villa des Jardins — main.css (reproduction Framer)
   ============================================================ */
:root{
  --cream:#FFFDF2;
  --cream-2:#F7F7EE;
  --cream-3:#EFEDE2;
  --sand:#E5E1CF;
  --ink:#3F3E39;          /* titres sombres */
  --body:#5C5A53;         /* texte courant */
  --muted:#8A887F;
  --slate:#6B7B8A;        /* titres bleu-ardoise */
  --slate-2:#7A8995;
  --terracotta:#C99575;   /* accents / liens losange */
  --terracotta-dk:#B07E60;
  --promo:#E6924C;
  --faq-bg:#F5F9FC;
  --taupe:#56554F;        /* footer */
  --taupe-dk:#4B4A45;
  --line:#E2DECF;
  --serif:'Inria Serif', Georgia, serif;
  --sans:'Plus Jakarta Sans', system-ui, sans-serif;
  --script:'Playwrite AU QLD','Playwrite BE VLG', cursive;
  --wrap:1200px;
  --radius:14px;
}

*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0; background:var(--cream); color:var(--body);
  font-family:var(--sans); font-size:17px; line-height:1.7; font-weight:400;
  overflow-x:hidden; max-width:100vw;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}
.skip-link{position:absolute; left:-9999px;}
.skip-link:focus{left:16px; top:16px; background:#fff; padding:10px 16px; z-index:9999; border-radius:8px;}

.villa-wrap{max-width:var(--wrap); margin:0 auto; padding:0 32px; width:100%;}

.villa-h2{
  font-family:var(--serif); font-weight:400; color:var(--slate);
  font-size:clamp(30px,4vw,46px); line-height:1.12; letter-spacing:.2px; margin:0 0 22px;
}
.villa-lead{ color:var(--body); font-size:16px; line-height:1.75; max-width:46ch; }
.villa-lead p{margin:0 0 1em;}
.villa-script{ font-family:var(--script); font-weight:400; color:var(--slate-2); font-style:normal; }

/* ---------- Boutons « Réservations » ---------- */
.btn-resa{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cream); color:var(--ink); border:1px solid rgba(63,62,57,.12);
  font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.2px;
  padding:11px 22px; border-radius:40px; transition:all .25s ease; white-space:nowrap;
}
.btn-resa:hover{ background:var(--taupe); color:#fff; border-color:var(--taupe); }

/* ---------- Lien losange terracotta ---------- */
.villa-diamond-link{ display:inline-flex; align-items:center; gap:14px; color:var(--terracotta); margin-top:26px; font-size:15px; font-weight:500; }
.villa-diamond{ width:44px; height:44px; flex:0 0 44px; color:var(--terracotta); transition:transform .3s ease; }
.villa-diamond svg{width:100%; height:100%;}
.villa-diamond-link:hover .villa-diamond{ transform:translateX(4px); }
.villa-diamond-link__label{ position:relative; }

/* ============================================================
   HEADER
   ============================================================ */
.vh-header{ position:fixed; top:0; left:0; right:0; z-index:120; padding:18px 0; transition:background .35s ease, box-shadow .35s ease, padding .35s ease; }
.vh-header__inner{ max-width:1320px; margin:0 auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.vh-burger{ display:inline-flex; align-items:center; gap:12px; background:none; border:0; cursor:pointer; color:#fff; padding:6px 4px; }
.vh-burger__icon{ display:inline-flex; flex-direction:column; gap:4px; width:22px; }
.vh-burger__icon span{ height:1.5px; background:currentColor; border-radius:2px; transition:.3s; }
.vh-burger__label{ font-size:13px; letter-spacing:2px; font-weight:500; }
.vh-brand{ display:inline-flex; align-items:center; gap:10px; color:#fff; }
.vh-brand__mark{ width:26px; height:32px; opacity:.9; }
.vh-brand__mark svg{width:100%; height:100%;}
.vh-brand__name{ font-family:var(--serif); font-size:21px; letter-spacing:.5px; }
.vh-resa{ background:rgba(255,253,242,.92); }

/* header scrolled state */
.vh-header.is-scrolled{ background:var(--cream); box-shadow:0 1px 0 rgba(63,62,57,.08); padding:12px 0; }
.vh-header.is-scrolled .vh-burger,
.vh-header.is-scrolled .vh-brand{ color:var(--ink); }
.vh-header.is-scrolled .vh-resa{ background:var(--taupe); color:#fff; border-color:var(--taupe); }

/* slide menu */
.vh-menu{ position:fixed; inset:0; z-index:200; visibility:hidden; pointer-events:none; }
.vh-menu.is-open{ visibility:visible; pointer-events:auto; }
.vh-menu__backdrop{ position:absolute; inset:0; background:rgba(20,20,18,.45); opacity:0; transition:opacity .4s ease; }
.vh-menu.is-open .vh-menu__backdrop{ opacity:1; }
.vh-menu__panel{ position:absolute; top:0; left:0; height:100%; width:min(420px,86vw); background:var(--cream); padding:90px 48px 48px; transform:translateX(-100%); transition:transform .42s cubic-bezier(.6,0,.2,1); display:flex; flex-direction:column; box-shadow:0 0 60px rgba(0,0,0,.2); }
.vh-menu.is-open .vh-menu__panel{ transform:translateX(0); }
.vh-menu__close{ position:absolute; top:28px; right:36px; background:none; border:0; font-size:34px; line-height:1; color:var(--ink); cursor:pointer; }
.vh-menu__list{ list-style:none; margin:0; padding:0; }
.vh-menu__list li{ border-bottom:1px solid var(--line); }
.vh-menu__list a{ display:block; padding:18px 0; font-family:var(--serif); font-size:24px; color:var(--ink); transition:color .2s, padding-left .25s; }
.vh-menu__list a:hover{ color:var(--terracotta); padding-left:8px; }
.vh-menu__resa{ margin-top:auto; align-self:flex-start; }

/* ============================================================
   HERO
   ============================================================ */
.villa-hero{ position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.villa-hero__bg{ position:absolute; inset:0; z-index:0; }
.villa-hero__video,.villa-hero__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.villa-hero__veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(60,64,58,.55), rgba(60,64,58,.42) 45%, rgba(45,48,44,.6)); }
.villa-hero__content{ position:relative; z-index:2; color:#fff; padding:120px 24px; max-width:1000px; }
.villa-hero__eyebrow{ display:block; color:rgba(255,255,255,.92); font-size:clamp(18px,2vw,24px); margin-bottom:18px; }
.villa-hero__title{ font-family:var(--serif); font-weight:300; font-size:clamp(44px,7vw,92px); line-height:1.04; letter-spacing:.5px; margin:0; color:#fff; }
.villa-hero__line{ display:block; }
.villa-promo{ position:absolute; right:32px; bottom:32px; z-index:3; background:rgba(40,42,38,.66); backdrop-filter:blur(6px); color:#fff; border-radius:12px; padding:14px 18px; display:flex; flex-direction:column; gap:2px; max-width:240px; text-align:left; border:1px solid rgba(255,255,255,.12); }
.villa-promo__label{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--promo); font-weight:600; }
.villa-promo__text{ font-family:var(--serif); font-size:16px; }

/* ============================================================
   INTRO + PARTENAIRES
   ============================================================ */
.villa-intro{ position:relative; background:var(--cream); padding:0 0 60px; }
.villa-intro__rule{ display:block; width:1px; height:110px; background:var(--line); margin:0 auto; transform:translateY(-1px); }
.villa-intro__copy{ padding:80px 0 0; max-width:560px; }
.villa-intro .villa-h2{ max-width:14ch; }

.villa-partners{ margin-top:70px; padding:30px 0 10px; overflow:hidden; }
.villa-partners__label{ text-align:center; font-size:clamp(16px,1.6vw,20px); color:var(--muted); margin:0 0 26px; }
.villa-partners__track{ display:flex; align-items:center; gap:70px; width:max-content; animation:villa-marquee 32s linear infinite; padding:0 35px; }
.villa-partners__item{ flex:0 0 auto; }
.villa-partners__logo{ height:48px; width:auto; object-fit:contain; filter:grayscale(1) opacity(.55); }
@keyframes villa-marquee{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ============================================================
   CARTES SERVICES
   ============================================================ */
.villa-services{ padding:50px 0 80px; background:var(--cream); }
.villa-services__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:54px 44px; }
.villa-card{ display:block; color:inherit; }
.villa-card__media{ aspect-ratio:16/11; border-radius:var(--radius); overflow:hidden; background:var(--sand); }
.villa-card__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.villa-card__title{ font-family:var(--serif); font-weight:400; color:var(--ink); font-size:24px; margin:22px 0 8px; }
.villa-card__text{ color:var(--muted); font-size:15px; margin:0; max-width:42ch; }
.villa-card--link{ cursor:pointer; }
.villa-card--link:hover .villa-card__media img{ transform:scale(1.04); }
.villa-card--link:hover .villa-card__title{ color:var(--terracotta); }

/* ============================================================
   HÉRITAGE
   ============================================================ */
.villa-heritage{ background:var(--cream-2); padding:96px 0; }
.villa-heritage__inner{ max-width:680px; margin:0 auto; text-align:center; }
.villa-heritage__crest img{ width:64px; height:auto; margin:0 auto 26px; opacity:.85; }
.villa-heritage .villa-h2{ margin-bottom:20px; }
.villa-heritage .villa-lead{ margin:0 auto; }
.villa-heritage .villa-diamond-link{ justify-content:center; }

/* ============================================================
   ÉQUIPEMENTS + COLLAGE
   ============================================================ */
.villa-amen{ background:var(--cream); padding:96px 0; }
.villa-amen__grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.villa-amen__collage{ position:relative; aspect-ratio:4/4.4; }
.villa-amen__photo{ position:absolute; border-radius:var(--radius); overflow:hidden; box-shadow:0 26px 50px rgba(60,55,45,.16); }
.villa-amen__photo img{ width:100%; height:100%; object-fit:cover; }
.villa-amen__photo--main{ left:0; bottom:0; width:74%; aspect-ratio:3/3.4; z-index:1; }
.villa-amen__photo--vintage{ right:0; top:0; width:54%; aspect-ratio:4/3; filter:sepia(.35) contrast(.96); z-index:2; transform:rotate(2.5deg); }
.villa-amen__eyebrow{ display:block; font-size:18px; margin-bottom:14px; }
.villa-amen__list{ list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:26px 18px; }
.villa-amen__item{ display:flex; flex-direction:column; align-items:flex-start; gap:9px; font-size:13.5px; color:var(--muted); }
.villa-amen__item i{ font-size:22px; color:var(--slate-2); }

/* ============================================================
   OFFRES
   ============================================================ */
.villa-offers{ background:var(--cream-2); padding:0 0 96px; }
.villa-offers__grid{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; }
.villa-offers__media{ aspect-ratio:5/5.2; border-radius:var(--radius); overflow:hidden; background:var(--sand); margin-top:-60px; box-shadow:0 26px 50px rgba(60,55,45,.14); }
.villa-offers__media img{ width:100%; height:100%; object-fit:cover; }
.villa-offers__copy .villa-h2{ max-width:12ch; }

/* ============================================================
   TÉMOIGNAGES
   ============================================================ */
.villa-testi{ background:var(--cream); padding:110px 0 120px; text-align:center; }
.villa-testi__quote{ font-family:var(--serif); font-size:90px; line-height:.6; color:var(--ink); display:block; margin-bottom:30px; }
.villa-testi__viewport{ overflow:hidden; max-width:980px; margin:0 auto; }
.villa-testi__track{ display:flex; transition:transform .6s cubic-bezier(.6,0,.2,1); }
.villa-testi__slide{ flex:0 0 100%; margin:0; padding:0 20px; }
.villa-testi__text{ font-size:clamp(22px,2.7vw,34px); line-height:1.5; color:var(--body); margin:0 0 34px; }
.villa-testi__meta{ display:inline-flex; align-items:center; gap:26px; }
.villa-testi__stars{ color:#D9B25A; font-size:14px; letter-spacing:3px; }
.villa-testi__name{ font-size:15px; color:var(--body); }
.villa-testi__dots{ display:flex; justify-content:center; gap:10px; margin-top:42px; }
.villa-testi__dots button{ width:8px; height:8px; border-radius:50%; border:0; background:var(--sand); cursor:pointer; padding:0; transition:background .25s; }
.villa-testi__dots button.is-active{ background:var(--slate-2); }

/* ============================================================
   ACTUALITÉS
   ============================================================ */
.villa-news{ background:var(--cream); padding:20px 0 100px; }
.villa-news__grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; }
.villa-article{ display:block; color:inherit; }
.villa-article__media{ aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden; background:var(--sand); margin-bottom:24px; }
.villa-article__media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.villa-article--link:hover .villa-article__media img,
.villa-card--link.villa-article:hover .villa-article__media img{ transform:scale(1.04); }
.villa-article__meta{ display:flex; align-items:center; gap:12px; font-size:12px; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
.villa-article__rule{ width:36px; height:1px; background:var(--muted); display:inline-block; }
.villa-article__title{ font-family:var(--serif); font-weight:400; color:var(--ink); font-size:30px; margin:0; max-width:18ch; }
.villa-card--link.villa-article:hover .villa-article__title{ color:var(--terracotta); }

/* ============================================================
   FAQ
   ============================================================ */
.villa-faq{ background:var(--cream); padding:30px 0 110px; }
.villa-faq__title{ text-align:center; font-size:clamp(34px,5vw,58px); margin-bottom:54px; }
.villa-faq__list{ max-width:880px; margin:0 auto; display:flex; flex-direction:column; gap:22px; }
.villa-faq__item{ background:var(--faq-bg); border-radius:18px; padding:6px 32px; transition:box-shadow .25s; }
.villa-faq__item[open]{ box-shadow:0 12px 30px rgba(80,100,120,.08); }
.villa-faq__q{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px 0; font-family:var(--serif); font-size:21px; color:var(--ink); }
.villa-faq__q::-webkit-details-marker{ display:none; }
.villa-faq__chevron{ flex:0 0 auto; color:var(--slate-2); transition:transform .3s ease; }
.villa-faq__item[open] .villa-faq__chevron{ transform:rotate(180deg); }
.villa-faq__a{ color:var(--body); font-size:15.5px; padding:0 0 26px; max-width:62ch; }

/* ============================================================
   INSTAGRAM
   ============================================================ */
.villa-social{ background:var(--cream); padding:90px 0 120px; text-align:center; }
.villa-social__inner{ display:inline-flex; flex-direction:column; align-items:center; gap:18px; }
.villa-social__icon{ font-size:30px; color:var(--slate); }
.villa-social__handle{ font-family:var(--serif); font-weight:300; font-size:clamp(34px,5.5vw,66px); color:var(--slate); transition:color .25s; }
.villa-social__inner:hover .villa-social__handle{ color:var(--terracotta); }

/* ============================================================
   FOOTER
   ============================================================ */
.vf{ background:var(--taupe); color:rgba(255,255,255,.82); }
.vf__inner{ max-width:var(--wrap); margin:0 auto; padding:70px 32px 40px; }
.vf__brand{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding-bottom:46px; border-bottom:1px solid rgba(255,255,255,.14); }
.vf__crest{ width:54px; height:auto; opacity:.9; filter:brightness(0) invert(1) opacity(.85); }
.vf__name{ font-family:var(--serif); font-size:30px; color:#fff; letter-spacing:.5px; }
.vf__cols{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; padding-top:42px; }
.vf__menu{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.vf__menu a{ font-family:var(--serif); font-size:19px; color:rgba(255,255,255,.85); transition:color .2s; }
.vf__menu a:hover{ color:#fff; }
.vf__contact h3{ font-family:var(--sans); font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,.6); margin:0 0 14px; font-weight:600; }
.vf__contact a,.vf__contact p{ display:block; color:rgba(255,255,255,.82); margin:0 0 8px; font-size:15px; }
.vf__contact a:hover{ color:#fff; }
.vf__social{ display:flex; gap:14px; margin-top:14px; font-size:18px; }
.vf__bottom{ max-width:var(--wrap); margin:0 auto; padding:22px 32px; border-top:1px solid rgba(255,255,255,.12); display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; font-size:13px; color:rgba(255,255,255,.6); }
.vf__bottom a{ color:rgba(255,255,255,.8); text-decoration:underline; }

/* ============================================================
   CONTACT
   ============================================================ */
.villa-chero{ position:relative; min-height:74vh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.villa-chero--page{ min-height:52vh; background:var(--taupe); }
.villa-chero .villa-hero__title{ font-size:clamp(40px,6vw,72px); }
.villa-cinfo{ background:var(--cream); padding:46px 0; border-bottom:1px solid var(--line); }
.villa-cinfo__grid{ display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; }
.villa-cinfo__item h3{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin:0 0 8px; font-weight:600; }
.villa-cinfo__item p,.villa-cinfo__item a{ font-size:15px; color:var(--body); margin:0; }
.villa-cinfo__social{ display:flex; gap:14px; align-items:center; font-size:18px; color:var(--slate); margin-left:auto; }
.villa-form-sec{ background:var(--cream-2); padding:80px 0 110px; }
.villa-form-sec__title{ text-align:center; margin-bottom:46px; font-size:clamp(34px,5vw,52px); }
.villa-form{ max-width:920px; margin:0 auto; }
.villa-form__row{ display:grid; grid-template-columns:1fr 1fr; gap:30px; margin-bottom:30px; }
.villa-form__field{ display:flex; flex-direction:column; gap:10px; }
.villa-form__field span{ font-size:15px; color:var(--body); }
.villa-form__field--full{ margin-bottom:30px; }
.villa-form input,.villa-form textarea{ font-family:var(--sans); font-size:15px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px 16px; transition:border-color .2s; }
.villa-form input:focus,.villa-form textarea:focus{ outline:none; border-color:var(--slate-2); }
.villa-form__submit{ display:block; width:100%; background:var(--taupe); color:#fff; border:0; border-radius:40px; padding:18px; font-size:16px; cursor:pointer; transition:background .25s; }
.villa-form__submit:hover{ background:var(--taupe-dk); }
.villa-form__notice{ max-width:920px; margin:0 auto 26px; padding:14px 20px; border-radius:10px; text-align:center; }
.villa-form__notice--ok{ background:#E7F1E7; color:#37633c; }
.villa-form__notice--err{ background:#F6E4E2; color:#8a3b34; }

/* page générique */
.villa-page{ padding:70px 0 90px; background:var(--cream); }
.villa-richtext{ max-width:760px; }
.villa-richtext h2{ font-family:var(--serif); color:var(--slate); }
.villa-richtext a{ color:var(--terracotta); text-decoration:underline; }

/* ============================================================
   ANIMATIONS (reveal)
   ============================================================ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none;} .villa-partners__track{animation:none;} }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .villa-services__grid{ gap:40px 30px; }
  .villa-amen__grid,.villa-offers__grid,.villa-news__grid{ grid-template-columns:1fr; gap:40px; }
  .villa-offers__media{ margin-top:0; }
  .villa-amen__list{ grid-template-columns:repeat(4,1fr); }
  .villa-offers__copy{ order:2; }
}
@media (max-width:720px){
  body{ font-size:16px; }
  .villa-wrap{ padding:0 20px; }
  .vh-header__inner{ padding:0 18px; }
  .vh-brand__name{ font-size:18px; }
  .vh-burger__label{ display:none; }
  .villa-hero__content{ padding:90px 18px; }
  .villa-promo{ right:16px; bottom:16px; left:16px; max-width:none; }
  .villa-services__grid{ grid-template-columns:1fr; gap:34px; }
  .villa-amen__list{ grid-template-columns:repeat(3,1fr); gap:20px 12px; }
  .villa-amen__collage{ aspect-ratio:4/4; }
  .villa-heritage,.villa-amen,.villa-testi{ padding:64px 0; }
  .villa-form__row{ grid-template-columns:1fr; gap:22px; margin-bottom:22px; }
  .villa-cinfo__grid{ gap:22px; }
  .villa-cinfo__social{ margin-left:0; }
  .vf__cols{ gap:32px; }
  .villa-article__title{ font-size:24px; }
}