/* =====================================================
   LES ROCHES RETREAT — Shared Stylesheet
   Santa Teresa, Costa Rica
   Mobile-first design
   ===================================================== */

/* RESET & ROOT */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --w:#faf7f2;
  --c:#f3ede3;
  --c2:#e9e0d2;
  --sand:#d6c9b0;
  --ter:#b8734a;
  --ter2:#a05f38;
  --mid:#9a8f82;
  --ink:#1e1b18;
  --ink2:#2e2a26;
}
html{background:var(--w);color:var(--ink);scroll-behavior:smooth}
body{font-family:'Outfit',sans-serif;font-weight:300;overflow-x:hidden}
a{text-decoration:none;color:inherit}

/* CUSTOM CURSOR — desktop only */
@media(hover:hover){
  body.has-cursor *{cursor:none}
  #cur{position:fixed;width:8px;height:8px;background:var(--ink);border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:width .35s,height .35s;mix-blend-mode:multiply}
  #cur.hov{width:46px;height:46px;background:rgba(30,27,24,.1)}
}

/* =====================================================
   NAVIGATION
   ===================================================== */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.2rem 2rem;
  transition:background .5s,border-color .5s;
}
nav.scrolled{background:rgba(250,247,242,.96);border-bottom:1px solid var(--c2);backdrop-filter:blur(12px)}

.nl-logo{font-family:'Gilda Display',serif;font-size:.95rem;letter-spacing:.18em;text-transform:uppercase;color:var(--w);transition:color .4s}
.nl-logo.dark{color:var(--ink)}

.nav-mid{display:flex;gap:1.8rem}
.nl{font-size:.5rem;letter-spacing:.26em;text-transform:uppercase;color:var(--w);opacity:.55;transition:opacity .2s,color .4s;position:relative}
.nl.dark{color:var(--ink)}
.nl::after{content:'';position:absolute;left:0;bottom:-3px;width:0;height:1px;background:var(--ter);transition:width .3s}
.nl:hover{opacity:1}.nl:hover::after{width:100%}

.nav-book{font-size:.5rem;letter-spacing:.22em;text-transform:uppercase;padding:.5rem 1.2rem;border:1px solid rgba(255,255,255,.4);color:var(--w);border-radius:1px;transition:all .25s}
.nav-book.dark{border-color:rgba(30,27,24,.3);color:var(--ink)}
.nav-book:hover{background:var(--ter);border-color:var(--ter);color:var(--w)}

/* Hamburger mobile */
.nav-burger{display:none;flex-direction:column;gap:5px;padding:4px;background:none;border:none;cursor:pointer}
.nav-burger span{display:block;width:22px;height:1px;background:var(--w);transition:all .3s}
.nav-burger.dark span{background:var(--ink)}

/* Mobile nav overlay */
.nav-overlay{display:none;position:fixed;inset:0;z-index:300;background:var(--ink2);flex-direction:column;align-items:center;justify-content:flex-start;gap:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:5rem 2rem 4rem}
.nav-overlay.open{display:flex}
.nav-overlay .nl{font-size:1.1rem;letter-spacing:.2em;opacity:.6;color:var(--w);cursor:pointer;-webkit-tap-highlight-color:transparent;display:block;padding:.85rem 2rem;text-align:center;min-height:44px;display:flex;align-items:center;justify-content:center}
.nav-overlay .nl.dark{color:var(--w)}
.nav-overlay .nl:hover,.nav-overlay .nl:active{opacity:1}
.nav-close{position:fixed;top:1.2rem;right:1.8rem;font-size:1.5rem;color:rgba(255,255,255,.5);background:none;border:none;cursor:pointer;z-index:301;padding:.5rem;-webkit-tap-highlight-color:transparent}

@media(max-width:768px){
  .nav-mid{display:none}
  .nav-book{display:none}
  /* Burger toujours visible : fond verre dépoli permanent */
  .nav-burger{
    display:flex;
    background:rgba(10,8,6,.38);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,.18);
    border-radius:50px;
    padding:7px 10px;
    gap:5px;
    transition:background .3s, border-color .3s;
  }
  /* Quand le nav est clair (scrolled) : fond transparent, lignes sombres */
  nav.scrolled .nav-burger{
    background:transparent;
    border-color:rgba(30,27,24,.15);
  }
  nav.scrolled .nav-burger span,
  .nav-burger.dark span{background:var(--ink)}
}
@media(min-width:769px){
  nav{padding:1.4rem 4rem}
}

/* =====================================================
   TYPOGRAPHY SYSTEM
   ===================================================== */
.eye{
  font-size:.48rem;letter-spacing:.48em;text-transform:uppercase;
  color:var(--ter);margin-bottom:1rem;
  display:flex;align-items:center;gap:.9rem;
}
.eye::before{content:'';width:16px;height:1px;background:var(--ter)}

.sh{
  font-family:'Gilda Display',serif;
  font-size:clamp(1.6rem,4vw,3rem);
  line-height:1.05;color:var(--ink);letter-spacing:-.01em;margin-bottom:.8rem;
}
.sh em{font-family:'Libre Baskerville',serif;font-style:italic;color:var(--ter)}

.body-txt{font-size:.78rem;color:var(--mid);line-height:1.85;max-width:560px}
.body-txt p{margin-bottom:.85rem}

/* =====================================================
   LAYOUT
   ===================================================== */
section{padding:3rem 2rem}
@media(min-width:769px){section{padding:4.5rem 4rem}}

.divider{height:1px;background:var(--c2);margin:1.4rem 0}

/* =====================================================
   MARQUEE
   ===================================================== */
.mq{background:var(--ter);overflow:hidden;white-space:nowrap;padding:.8rem 0}
.mq-t{display:inline-block;animation:mq 30s linear infinite}
.mq-i{display:inline-block;margin:0 2rem;font-size:.52rem;letter-spacing:.36em;text-transform:uppercase;color:rgba(250,247,242,.72)}
.mq-s{display:inline-block;margin:0 .6rem;color:rgba(250,247,242,.38);font-size:.46rem;vertical-align:middle}
@keyframes mq{to{transform:translateX(-50%)}}

/* =====================================================
   BOOKING WIDGET (homepage)
   ===================================================== */
.booking{background:var(--ink)}
.bk-wrap{display:grid;grid-template-columns:1fr;gap:1px;background:rgba(255,255,255,.07)}
@media(min-width:769px){.bk-wrap{grid-template-columns:1fr 1fr 1fr 1fr auto}}
.bk-f{background:var(--ink2);padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.3rem;transition:background .2s}
.bk-f:hover{background:#332d28}
.bk-lbl{font-size:.44rem;letter-spacing:.35em;text-transform:uppercase;color:var(--ter)}
.bk-in{font-family:'Gilda Display',serif;font-size:.9rem;color:var(--w);background:transparent;border:none;outline:none;width:100%;color-scheme:dark}
.bk-in::placeholder{font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:300;color:rgba(255,255,255,.22)}
.bk-sel{font-family:'Outfit',sans-serif;font-size:.7rem;font-weight:300;color:rgba(255,255,255,.55);background:transparent;border:none;outline:none;width:100%;appearance:none}
.bk-sel option{background:var(--ink2);color:var(--w)}
.bk-btn-wrap{padding:1rem 1.2rem;background:var(--ter)}
@media(min-width:769px){.bk-btn-wrap{padding:0}}
.bk-btn{width:100%;height:100%;background:var(--ter);border:none;padding:1rem 2rem;font-family:'Outfit',sans-serif;font-size:.52rem;letter-spacing:.26em;text-transform:uppercase;color:var(--w);transition:background .22s;white-space:nowrap}
.bk-btn:hover{background:var(--ter2)}

/* =====================================================
   VILLAS GRID
   ===================================================== */
.villas-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1rem;
}
@media(min-width:600px){.villas-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1024px){
  .villas-grid{
    grid-template-columns:1.4fr 1fr 1fr;
    grid-template-rows:auto auto;
  }
  .villa-card.featured{grid-row:1/3}
}
.villa-card{border-radius:3px;overflow:hidden;position:relative;background:var(--c2)}
.villa-card:hover .vc-img{transform:scale(1.06)}
.vc-img-wrap{overflow:hidden;aspect-ratio:3/4;position:relative}
@media(min-width:1024px){.villa-card.featured .vc-img-wrap{aspect-ratio:auto;height:100%}}
.vc-img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.vc-body{padding:.9rem}
.vc-name{font-family:'Gilda Display',serif;font-size:1rem;color:var(--ink)}
.vc-detail{font-size:.48rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);margin-top:.2rem}
.vc-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(18,14,10,.7) 0%,transparent 50%);opacity:0;transition:opacity .4s;display:flex;align-items:flex-end;padding:1.2rem}
.villa-card:hover .vc-overlay{opacity:1}
.vc-cta{font-size:.48rem;letter-spacing:.25em;text-transform:uppercase;color:var(--w);border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:.2rem}

/* =====================================================
   EXPERIENCES GRID
   ===================================================== */
.exp-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.8rem;
}
@media(min-width:769px){.exp-grid{grid-template-columns:repeat(3,1fr)}}
.exp-card{border-radius:3px;overflow:hidden;position:relative;aspect-ratio:3/4;background:var(--c2)}
@media(min-width:769px){.exp-card{aspect-ratio:2/3}}
.exp-card:hover .exp-img{transform:scale(1.06)}
.exp-img-wrap{position:absolute;inset:0;overflow:hidden}
.exp-img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.exp-ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(18,14,10,.75) 0%,transparent 55%)}
.exp-body{position:absolute;bottom:0;left:0;right:0;padding:1rem}
.exp-name{font-family:'Gilda Display',serif;font-size:.95rem;color:var(--w);margin-bottom:.2rem}
.exp-desc{font-size:.55rem;color:rgba(255,255,255,.5);line-height:1.5}

/* =====================================================
   FULL-BLEED PHOTO
   ===================================================== */
.full-photo{height:50vh;position:relative;overflow:hidden}
@media(min-width:769px){.full-photo{height:55vh}}
.fp-img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform 12s ease;transform:scale(1.04)}
.full-photo.in-view .fp-img{transform:scale(1)}
.fp-ov{position:absolute;inset:0;background:linear-gradient(to right,rgba(18,14,10,.5) 0%,transparent 60%)}
.fp-txt{position:absolute;bottom:2rem;left:2rem;max-width:320px}
@media(min-width:769px){.fp-txt{bottom:3rem;left:4rem;max-width:400px}}
.fp-eye{font-size:.44rem;letter-spacing:.42em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:.6rem}
.fp-h{font-family:'Gilda Display',serif;font-size:clamp(1.4rem,3vw,2.8rem);color:var(--w);line-height:1.05}
.fp-h em{font-family:'Libre Baskerville',serif;font-style:italic;color:rgba(250,247,242,.5)}

/* =====================================================
   REVIEWS
   ===================================================== */
.reviews-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:2rem}
@media(min-width:600px){.reviews-grid{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.reviews-grid{grid-template-columns:repeat(3,1fr)}}
.rv-card{background:var(--c);border-radius:3px;padding:1.5rem}
.rv-stars{color:var(--ter);font-size:.7rem;letter-spacing:.1rem;margin-bottom:.8rem}
.rv-text{font-size:.7rem;color:var(--mid);line-height:1.75;font-style:italic;margin-bottom:1rem}
.rv-author{font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--sand)}

/* =====================================================
   FOOTER
   ===================================================== */
footer{
  background:var(--ink2);
  padding:2.5rem 2rem;
}
@media(min-width:769px){
  footer{
    padding:2.5rem 4rem;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:2rem;
    align-items:start;
  }
}
.f-logo{font-family:'Gilda Display',serif;font-size:1rem;letter-spacing:.16em;text-transform:uppercase;color:var(--w);margin-bottom:1rem}
.f-tagline{font-size:.58rem;color:rgba(255,255,255,.25);line-height:1.7;max-width:220px}
.f-col-title{font-size:.46rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ter);margin-bottom:.8rem}
.f-link{display:block;font-size:.6rem;color:rgba(255,255,255,.3);margin-bottom:.4rem;transition:color .2s}
.f-link:hover{color:rgba(255,255,255,.65)}
.f-copy{font-size:.46rem;letter-spacing:.15em;color:rgba(255,255,255,.12);text-transform:uppercase;margin-top:1.5rem}
@media(min-width:769px){.f-copy{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.06);padding-top:1.5rem;margin-top:0}}

/* =====================================================
   REVEAL ANIMATIONS
   ===================================================== */
.r{opacity:0;transform:translateY(20px);transition:opacity .85s ease,transform .85s ease}
.r.on{opacity:1;transform:none}
.r.d1{transition-delay:.1s}.r.d2{transition-delay:.2s}.r.d3{transition-delay:.3s}

/* =====================================================
   SHARED JS (inline at bottom of each page)
   ===================================================== */
/* See js/main.js */


/* ── Accessibilité : pas d'animations si l'utilisateur le préfère ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body.has-cursor * { cursor: auto !important; }
}

/* ── Mobile booking widget — stacked full-width ──────────────── */
@media(max-width:768px){
  .bk-wrap{grid-template-columns:1fr 1fr;gap:1px}
  .bk-btn{grid-column:1/-1;width:100%;padding:1.1rem}
  .fp-avail{font-size:.47rem;padding:.6rem 1rem;text-align:center}
}
@media(max-width:480px){
  .bk-wrap{grid-template-columns:1fr}
  .bk-f{padding:.85rem 1rem}
}

/* ── Availability indicator ──────────────────────────────────── */
.fp-avail{display:flex;align-items:center;justify-content:center;gap:.5rem;font-family:'Outfit',sans-serif;font-size:.47rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(250,247,242,.78);padding:.65rem 1.4rem;border-top:1px solid rgba(255,255,255,.14)}
.fp-avail-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;flex-shrink:0;animation:pulse 2s ease-in-out infinite}
.fp-cancel{font-family:'Outfit',sans-serif;font-size:.42rem;color:rgba(255,255,255,.65);letter-spacing:.1em;margin-top:.5rem;text-align:center}

/* ── focus-visible ───────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--ter,#b8734a);outline-offset:3px;border-radius:2px}

/* ── Form feedback states ────────────────────────────────────── */
.bk-field-error{border-bottom:1px solid #e05252!important}
.bk-err-msg{font-family:'Outfit',sans-serif;font-size:.44rem;color:#e05252;margin-top:.2rem;letter-spacing:.05em;display:none}
.bk-err-msg.show{display:block}
.fp-cta.loading{opacity:.6;pointer-events:none;position:relative}
.fp-cta.loading::after{content:'';display:inline-block;width:12px;height:12px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;margin-left:.6rem;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}

/* Mobile sticky book bar — CTA redesign */
.mob-book-bar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:199;background:#111;padding:.75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));text-align:center;box-shadow:0 -2px 24px rgba(0,0,0,.45)}
.mob-book-bar a{font-family:'Outfit',sans-serif;font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#fff;display:block;padding:.88rem 1rem;border:1.5px solid rgba(255,255,255,.65);border-radius:3px;line-height:1.3;transition:background .2s,color .2s}
.mob-book-bar a:active{background:rgba(255,255,255,.12)}
@media(max-width:768px){.mob-book-bar{display:block}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* ===========================
   PROMO CODE BOOKING BAR
   =========================== */
.sb-promo { margin: .85rem 0 0; }
.sb-promo-row { display: flex; gap: .45rem; }
.sb-promo-input {
  flex: 1;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 3px;
  padding: .48rem .75rem;
  color: #fff;
  font-family: 'Outfit', sans-serif;
  font-size: .72rem;
  letter-spacing: .05em;
  outline: none;
  transition: border-color .2s;
}
.sb-promo-input::placeholder { color: rgba(255,255,255,.38); }
.sb-promo-input:focus { border-color: rgba(255,255,255,.55); }
.sb-promo-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 3px;
  padding: .48rem 1rem;
  color: rgba(255,255,255,.78);
  font-family: 'Outfit', sans-serif;
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}
.sb-promo-btn:hover { border-color: rgba(255,255,255,.7); color: #fff; }
.sb-promo-btn:disabled { opacity: .45; cursor: not-allowed; }
.sb-promo-msg {
  font-family: 'Outfit', sans-serif;
  font-size: .65rem;
  letter-spacing: .04em;
  margin-top: .38rem;
  min-height: 1rem;
  line-height: 1.4;
}
.sb-promo-msg.ok { color: #7dd3a8; }
.sb-promo-msg.err { color: #f87171; }