/* =========================================================
   Villa Eloah — reconstruction fidèle (Astra + Elementor)
   Palette, typo et composants repris du site d'origine.
   ========================================================= */
:root{
  /* couleurs d'origine (Astra global colors) */
  --gold:       #deb668;   /* global-color-0 */
  --gold-1:     #cea350;   /* global-color-1 : or principal (liens, accents) */
  --ink:        #2c2a26;   /* global-color-2 : anthracite (titres, bordures) */
  --gray:       #7f7c76;   /* global-color-3 : texte courant */
  --bg:         #e2e1df;   /* global-color-4 : fond clair */
  --offwhite:   #fcfcfc;   /* global-color-5 */
  --ink-2:      #423f38;   /* global-color-6 */
  --white:      #ffffff;
  --sand:       #e7d1a8;   /* bandeau haut / or clair */
  --gold-dark:  #675228;   /* lien bandeau */
  --line:       #dddddd;

  --font-body: "Montserrat", -apple-system, "Segoe UI", sans-serif;
  --font-head: "Fahkwang", Georgia, serif;

  --maxw: 1240px;
  --maxw-narrow: 1200px;
  --gutter: clamp(20px, 5vw, 40px);

  /* Lodgify Book Now Box (mêmes variables que l'original) */
  --ldg-bnb-color-primary:#cea350;
  --ldg-bnb-color-primary-lighter:#e7d1a8;
  --ldg-bnb-color-primary-darker:#675228;
  --ldg-bnb-button-border-radius:3.58em;
}

*{ box-sizing: border-box; }
html{ font-size:100%; scroll-behavior:smooth; }
body{
  margin:0; background: var(--bg); color: var(--gray);
  font-family: var(--font-body); font-weight:400; font-size:16px; line-height:1.857;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--gold-1); text-decoration:none; }

h1,h2,h3,h4,h5,h6{ font-family: var(--font-head); color: var(--ink); margin:0; line-height:1.1; }
h1{ font-size:80px; font-weight:500; line-height:1.1; }
h2{ font-size: clamp(28px, 3.4vw, 44px); font-weight:500; }
h3{ font-size: clamp(22px, 2.4vw, 30px); font-weight:500; }
h4{ font-size: 22px; font-weight:600; }
p{ margin:0 0 1em; }

@media (max-width:921px){ h1{ font-size:56px; } }
@media (max-width:544px){ h1{ font-size:32px; } }

.wrap{ max-width: var(--maxw); margin:0 auto; padding-inline: var(--gutter); }
.wrap-narrow{ max-width: var(--maxw-narrow); margin:0 auto; padding-inline: var(--gutter); }
.section{ padding-block: clamp(56px, 8vw, 100px); }
.section-tight{ padding-block: clamp(36px, 5vw, 64px); }
.text-center{ text-align:center; }
.center-col{ max-width: 820px; margin-inline:auto; }

/* eyebrow = h6 d'origine (Fahkwang 600, 18px) */
.eyebrow{
  font-family: var(--font-head); font-weight:600; font-size:18px;
  color: var(--gold-1); margin:0 0 .5rem; letter-spacing:.02em;
}
.lead{ font-size:18px; color: var(--gray); }
.muted{ color: var(--gray); }

/* ---------- Divider (trait Elementor) ---------- */
.divider-v{ width:1px; height:96px; background: var(--white); margin: 0 auto; }
.divider-h{ width:96px; height:1px; background: var(--gold-1); margin: 0 auto; }
.divider-pad{ padding-block: 48px; }
@media (max-width:921px){ .divider-pad{ padding-block:24px; } }

/* =========================================================
   Boutons — format d'origine : carré, contour, transparent
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family: var(--font-body); font-weight:700; font-size:14px; line-height:1;
  padding:14px 23px; border:1px solid var(--ink); border-radius:0;
  background: transparent; color: var(--ink); cursor:pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.btn:hover{ background: var(--ink); color: var(--white); }
.btn svg{ width:18px; height:18px; fill: currentColor; }
.btn--light{ border-color: rgba(255,255,255,.85); color:#fff; }
.btn--light:hover{ background:#fff; color: var(--ink); border-color:#fff; }
/* bouton pill or (style Lodgify) — utilisé en repli */
.btn--book{
  border:none; border-radius: var(--ldg-bnb-button-border-radius);
  background: var(--gold-1); color:#fff; padding:15px 34px; font-size:15px;
}
.btn--book:hover{ background: var(--gold-dark); color:#fff; }

/* =========================================================
   Bandeau haut (simple-banner)
   ========================================================= */
.topbar{
  position:relative; width:100%; background: var(--sand); color:#383838;
  text-align:center; font-weight:700; font-size:15px; padding:10px 44px; z-index:50;
}
.topbar a{ color: var(--gold-dark); font-weight:700; }
.topbar .topbar-close{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#383838; cursor:pointer; font-size:18px; line-height:1; padding:4px;
}
@media (max-width:544px){ .topbar{ font-size:13px; padding:9px 38px; } }

/* =========================================================
   Header transparent (logo centré, nav gauche/droite)
   placé à l'intérieur du héros
   ========================================================= */
.site-header{
  position:absolute; top:0; left:0; right:0; z-index:20;
  padding-block: 18px; padding-inline: var(--gutter);
}
.header-grid{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
  max-width: 1500px; margin:0 auto;
}
.nav{ display:flex; align-items:center; gap: clamp(.5rem, 1.6vw, 1.4rem); }
.nav.left{ justify-content:flex-end; }
.nav.right{ justify-content:flex-start; }
.nav-link{
  font-family: var(--font-body); font-weight:500; font-size:14px;
  color: rgba(245,245,244,.85); padding: 6px 2px; white-space:nowrap;
  transition: color .2s;
}
.nav{ gap: clamp(.5rem, 1.4vw, 1.5rem); }
.nav-link:hover, .nav-link.active{ color: var(--offwhite); }
.brand{ justify-self:center; display:block; line-height:0; }
.brand img{ width:185px; max-width:40vw; height:auto; }
@media (max-width:921px){ .brand img{ width:144px; } }
@media (max-width:544px){ .brand img{ width:120px; } }

.menu-toggle{ display:none; background:none; border:none; color:#fff; cursor:pointer; padding:6px; justify-self:end; }
.menu-toggle svg{ width:26px; height:26px; }

/* header sur fond clair (pages au fond clair) */
.site-header.on-light .nav-link{ color: rgba(44,42,38,.85); }
.site-header.on-light .nav-link:hover, .site-header.on-light .nav-link.active{ color: var(--gold-1); }
.site-header.on-light .menu-toggle{ color: var(--ink); }

/* mobile drawer */
.mobile-nav{
  position:fixed; inset:0; z-index:200; background: var(--offwhite);
  transform: translateX(100%); transition: transform .4s cubic-bezier(.5,0,.2,1);
  display:flex; flex-direction:column; padding:24px var(--gutter); overflow:auto;
}
.mobile-nav.open{ transform:none; }
.mn-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.2rem; }
.mn-head img{ width:140px; }
.mn-close{ background:none; border:none; color: var(--ink); cursor:pointer; padding:6px; }
.mn-close svg{ width:26px; height:26px; }
.mobile-nav .nav-link{ color: var(--ink); font-family: var(--font-head); font-size:1.5rem; padding:14px 0; border-bottom:1px solid var(--line); }

/* =========================================================
   Drapeaux — sélecteur de langue flottant (bas droite)
   ========================================================= */
.lang-float{
  position:fixed; right:16px; bottom:14px; z-index:120;
  display:flex; gap:8px; padding:0; background:transparent;
}
.lang-btn{ background:none; border:none; padding:0; line-height:0; cursor:pointer; opacity:.6; transition: opacity .2s, transform .2s; }
.lang-btn:hover{ opacity:1; transform: translateY(-1px); }
.lang-btn[aria-pressed="true"]{ opacity:1; box-shadow:0 0 0 1.5px var(--white); border-radius:2px; }
.lang-btn svg{ width:22px; height:15px; display:block; border-radius:2px; box-shadow:0 1px 4px rgba(0,0,0,.35); }
@media (max-width:544px){ .lang-float{ right:10px; bottom:10px; gap:6px; } .lang-btn svg{ width:20px; height:13px; } }

/* =========================================================
   Hero (fond vidéo)
   ========================================================= */
.hero{ position:relative; min-height:100vh; display:flex; align-items:flex-end; isolation:isolate; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:-2; background:#2c2a26; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; }
.hero-video{ position:absolute; inset:0; z-index:-2; overflow:hidden; pointer-events:none; }
.hero-video iframe{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh; border:0;
}
.hero::after{ content:""; position:absolute; inset:0; z-index:-1; background: var(--ink); opacity:.32; }
.hero-inner{ width:100%; text-align:center; color:#fff; padding-bottom: 2vh; padding-top: 22vh; }
.hero h1{ color:#fff; text-shadow:0 0 10px rgba(0,0,0,.23); }
.hero-sub{ font-family: var(--font-body); font-weight:600; font-size:18px; color:#fff; text-shadow:0 0 10px rgba(0,0,0,.33); margin: 1.4rem auto 0; max-width:780px; }
@media (max-width:921px){ .hero{ min-height:711px; } .hero-video{ display:none; } .hero-sub{ font-size:14px; } }
@media (max-width:767px){ .hero{ min-height:620px; } }

/* page hero (intérieur, fond sombre) */
.page-hero{ position:relative; background: var(--ink); color:#fff; padding-top: clamp(150px, 22vh, 240px); padding-bottom: clamp(48px, 7vw, 96px); text-align:center; isolation:isolate; overflow:hidden; }
.page-hero h1{ color:#fff; }
.page-hero .lead{ color: rgba(255,255,255,.82); max-width:760px; margin:1.4rem auto 0; }
.page-hero.has-img::after{ content:""; position:absolute; inset:0; z-index:-1; background: var(--ink); opacity:.5; }
.page-hero.has-img .page-hero-img{ position:absolute; inset:0; z-index:-2; }
.page-hero.has-img .page-hero-img img{ width:100%; height:100%; object-fit:cover; }

/* =========================================================
   Reviews carousel
   ========================================================= */
.reviews{ position:relative; }
.reviews-rail{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:10px; scrollbar-width:none; }
.reviews-rail::-webkit-scrollbar{ display:none; }
.review{ scroll-snap-align:start; flex:0 0 calc((100% - 36px)/3); min-width:280px; background:#fff; border:1px solid var(--line); padding:30px 28px; display:flex; flex-direction:column; }
.review-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.review-head img{ width:42px; height:42px; object-fit:contain; }
.review-name{ font-family: var(--font-head); font-size:20px; color: var(--ink); line-height:1.1; }
.review-date{ font-size:13px; color: var(--gray); }
.stars{ display:flex; gap:2px; color: var(--gold-1); margin-bottom:10px; }
.stars svg{ width:16px; height:16px; fill: currentColor; }
.review-text{ font-size:14.5px; line-height:1.7; color: var(--gray); margin:0; }
.reviews-ctrl{ display:flex; justify-content:center; gap:12px; margin-top:26px; }
.reviews-ctrl button{ width:46px; height:46px; border-radius:50%; border:1px solid var(--gold-1); background:transparent; color: var(--gold-1); cursor:pointer; display:grid; place-items:center; transition: background .2s, color .2s; }
.reviews-ctrl button:hover{ background: var(--gold-1); color:#fff; }
.reviews-ctrl svg{ width:20px; height:20px; }
@media (max-width:921px){ .review{ flex-basis: calc((100% - 18px)/2); } }
@media (max-width:600px){ .review{ flex-basis: 86%; } }

/* =========================================================
   Split (histoire)
   ========================================================= */
.split{ display:grid; grid-template-columns:1fr 1fr; gap: clamp(28px,5vw,72px); align-items:center; }
.split-media img{ width:100%; object-fit:contain; }
@media (max-width:767px){ .split{ grid-template-columns:1fr; } }

/* =========================================================
   Reserve + Lodgify
   ========================================================= */
.reserve{ text-align:center; }
.reserve .center-col{ max-width:760px; }
.reserve .promo{ font-size:14px; color: var(--gray); }
.lodgify-wrap{ max-width:920px; margin:26px auto 0; }
#lodgify-book-now-box, .lodgify-book-now-box{ min-height:60px; }
.lodgify-fallback{ display:flex; flex-direction:column; align-items:center; gap:10px; }

/* =========================================================
   Statement banner (citation sur image)
   ========================================================= */
.statement{ position:relative; isolation:isolate; color:#fff; text-align:center; padding-block: clamp(80px, 12vw, 150px); overflow:hidden; }
.statement-img{ position:absolute; inset:0; z-index:-2; }
.statement-img img{ width:100%; height:100%; object-fit:cover; }
.statement::after{ content:""; position:absolute; inset:0; z-index:-1; background: var(--ink); opacity:.5; }
.statement h2{ color:#fff; max-width:20ch; margin:0 auto; }
.statement .divider-h{ background:#fff; }

/* =========================================================
   Icon boxes (cercle or, style stacked)
   ========================================================= */
.iconboxes{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(28px,4vw,48px) clamp(24px,3vw,40px); }
.iconbox{ text-align:center; }
.iconbox .ic{ width:74px; height:74px; border-radius:50%; background: var(--gold-1); color:#fff; display:grid; place-items:center; margin:0 auto 1rem; }
.iconbox .ic i{ font-size:30px; }
.iconbox h4{ font-family: var(--font-head); font-weight:600; font-size:22px; color: var(--ink); margin-bottom:.4rem; }
.iconbox p{ font-size:14.5px; color: var(--gray); margin:0; }
@media (max-width:767px){ .iconboxes{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; } }

/* =========================================================
   Gallery (3 colonnes) + lightbox
   ========================================================= */
.gallery{ display:grid; grid-template-columns: repeat(3,1fr); gap:14px; }
.gallery a{ display:block; overflow:hidden; cursor:zoom-in; }
.gallery img{ width:100%; aspect-ratio:3/2; object-fit:cover; transition: transform .6s ease; }
.gallery a:hover img{ transform: scale(1.05); }
@media (max-width:767px){ .gallery{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:480px){ .gallery{ grid-template-columns:1fr; } }

.lightbox{ position:fixed; inset:0; z-index:300; background: rgba(20,18,15,.95); display:none; align-items:center; justify-content:center; padding:4vh 4vw; }
.lightbox.open{ display:flex; }
.lightbox img{ max-width:100%; max-height:92vh; }
.lb-btn{ position:absolute; background: rgba(255,255,255,.12); border:none; color:#fff; cursor:pointer; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; transition: background .2s; }
.lb-btn:hover{ background: rgba(255,255,255,.25); }
.lb-close{ top:20px; right:24px; width:46px; height:46px; }
.lb-prev{ left:3vw; top:50%; transform:translateY(-50%); }
.lb-next{ right:3vw; top:50%; transform:translateY(-50%); }
.lb-btn svg{ width:26px; height:26px; }

/* =========================================================
   Map
   ========================================================= */
.map-embed{ width:100%; height: clamp(320px, 42vw, 520px); border:0; display:block; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{ background: var(--ink); color: rgba(255,255,255,.7); }
.footer-main{ padding-block: clamp(54px, 7vw, 86px); }
.footer-grid{ display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap:40px; }
.footer-logo img{ width:185px; margin-bottom:14px; }
.footer-col h4{ font-family: var(--font-body); font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color: var(--gold); margin:0 0 1rem; }
.footer-col a, .footer-col p{ display:block; color: rgba(255,255,255,.66); font-size:14.5px; margin-bottom:.5rem; transition: color .2s; }
.footer-col a:hover{ color: var(--gold); }
.footer-social{ display:flex; gap:14px; margin-top:8px; }
.footer-social a{ width:50px; height:50px; border-radius:50%; border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; color: var(--gold-1); margin:0; }
.footer-social a:hover{ background: var(--gold-1); color:#fff; border-color: var(--gold-1); }
.footer-social svg{ width:22px; height:22px; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); padding-block:22px; text-align:center; font-size:13px; color: rgba(255,255,255,.5); }
@media (max-width:921px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:544px){ .footer-grid{ grid-template-columns:1fr; text-align:center; } .footer-logo img, .footer-social{ margin-inline:auto; } .footer-social{ justify-content:center; } }

/* =========================================================
   Tuiles (activités, golf), FAQ, accordéon natif
   ========================================================= */
.tiles{ display:grid; grid-template-columns: repeat(3,1fr); gap: clamp(20px,3vw,30px); }
.tile{ background:#fff; border:1px solid var(--line); display:flex; flex-direction:column; }
.tile img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.tile .tbody{ padding:20px 22px 24px; }
.tile h4{ font-family: var(--font-head); font-weight:600; font-size:20px; color: var(--ink); margin:0 0 .4rem; }
.tile .dist{ font-family: var(--font-body); font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color: var(--gold-1); display:block; margin-bottom:.3rem; }
.tile p{ font-size:14px; line-height:1.7; color: var(--gray); margin:0; }
@media (max-width:900px){ .tiles{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:600px){ .tiles{ grid-template-columns:1fr; } }

.facts{ list-style:none; margin:1rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px 10px; }
.facts li{ font-size:13px; color: var(--ink-2); border:1px solid var(--line); padding:6px 12px; border-radius:2px; background:#fff; }

.faq{ max-width:860px; margin:0 auto; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:22px 0; font-family:var(--font-head); font-weight:500; font-size:21px; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:18px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--gold-1); font-size:26px; line-height:1; font-family:var(--font-body); }
.faq details[open] summary::after{ content:"\2013"; }
.faq .faq-a{ padding:0 0 22px; color:var(--gray); font-size:15px; line-height:1.8; max-width:74ch; }

/* =========================================================
   Reveal
   ========================================================= */
.reveal{ opacity:0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

@media (max-width:860px){
  .nav{ display:none; }
  .menu-toggle{ display:inline-flex; }
  .header-grid{ grid-template-columns: 1fr auto; }
  .brand{ justify-self:start; }
}