/* =====================================================================
   Bellevue Villas — Design System (base.css)
   Rebuilt 1:1 from the Elementor site in plain HTML/CSS/JS.
   Fonts: Cormorant Infant (display) + Manrope (body)
   ===================================================================== */

/* ---------- Design tokens ---------- */
:root{
  /* Palette (extracted from the live site) */
  --navy:      #33557F;   /* primary   */
  --navy-dark: #2a4568;
  --taupe:     #D5CEC6;   /* secondary */
  --accent:    #98AAC0;   /* light blue-grey */
  --gold:      #C89C53;   /* accent gold */
  --ink:       #111111;   /* headings  */
  --text:      #333333;   /* body copy */
  --muted:     #6b7280;
  --light:     #F6F9F9;   /* light bg  */
  --cream:     #EEEDE9;   /* cream bg  */
  --white:     #ffffff;
  --line:      rgba(17,17,17,.10);

  /* Typography */
  --font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Cormorant Infant", Georgia, "Times New Roman", serif;

  /* Layout */
  --container: 1140px;
  --container-wide: 1320px;
  --gutter: 20px;
  --radius: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  /* Effects */
  --shadow-sm: 0 4px 14px rgba(17,17,17,.06);
  --shadow: 0 18px 45px rgba(17,17,17,.10);
  --shadow-lg: 0 30px 70px rgba(17,17,17,.16);
  --transition: .35s cubic-bezier(.2,.7,.2,1);

  /* Header */
  --header-h: 92px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.7;
  color:var(--text);
  background:var(--white);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; transition:color var(--transition); }
button{ font-family:inherit; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1em; }

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:600;
  line-height:1.12;
  margin:0 0 .4em;
  letter-spacing:.2px;
}
h1{ font-size:clamp(2.6rem, 5.5vw, 4.5rem); font-weight:500; }
h2{ font-size:clamp(2rem, 4vw, 3rem); }
h3{ font-size:clamp(1.7rem, 3vw, 2.25rem); }
h4{ font-size:clamp(1.5rem, 2.4vw, 1.9rem); }
h5{ font-size:1.05rem; font-family:var(--font-body); font-weight:600; color:var(--ink); line-height:1.4; }
h6{ font-size:.95rem; }

.eyebrow{
  font-family:var(--font-body);
  text-transform:uppercase;
  letter-spacing:.28em;
  font-size:.72rem;
  font-weight:600;
  color:var(--gold);
  margin-bottom:1rem;
  display:inline-block;
}

/* ---------- Layout helpers ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
.container.wide{ max-width:var(--container-wide); }
.section{ padding:clamp(64px,9vw,120px) 0; }
.section.tight{ padding:clamp(48px,6vw,80px) 0; }
.bg-light{ background:var(--light); }
.bg-cream{ background:var(--cream); }
.bg-navy{ background:var(--navy); color:#eaf0f7; }
.bg-navy h1,.bg-navy h2,.bg-navy h3,.bg-navy h4{ color:#fff; }
.text-center{ text-align:center; }
.lead{ font-size:1.15rem; color:var(--muted); }
.section-head{ max-width:760px; margin:0 auto clamp(40px,5vw,64px); text-align:center; }
.section-head p{ color:var(--muted); font-size:1.1rem; }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--navy);
  --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--font-body); font-weight:600; font-size:.92rem;
  letter-spacing:.04em;
  padding:15px 34px; border:1.5px solid var(--btn-bg); border-radius:var(--radius-pill);
  transition:transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
  text-align:center; line-height:1;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(51,85,127,.28); }
.btn--outline{ --btn-bg:transparent; --btn-fg:var(--navy); border-color:var(--navy); }
.btn--outline:hover{ background:var(--navy); color:#fff; }
.btn--gold{ --btn-bg:var(--gold); border-color:var(--gold); }
.btn--gold:hover{ box-shadow:0 12px 26px rgba(200,156,83,.32); }
.btn--light{ --btn-bg:#fff; --btn-fg:var(--navy); border-color:#fff; }
.btn--ghost-light{ --btn-bg:transparent; --btn-fg:#fff; border-color:rgba(255,255,255,.7); }
.btn--ghost-light:hover{ background:#fff; color:var(--navy); border-color:#fff; }
.btn--sm{ padding:11px 24px; font-size:.82rem; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:1000;
  height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(17,17,17,.06);
  transition:background var(--transition), box-shadow var(--transition), height var(--transition);
}
.site-header.scrolled{ box-shadow:0 8px 30px rgba(17,17,17,.08); }
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:var(--container-wide); }
.brand{ display:inline-flex; align-items:center; }
.brand img{ height:46px; width:auto; }
.nav{ display:flex; align-items:center; gap:34px; }
.nav-menu{ display:flex; align-items:center; gap:30px; }
.nav-menu a{
  font-family:var(--font-body); font-weight:600; font-size:.9rem;
  color:var(--ink); letter-spacing:.02em; position:relative; padding:6px 0;
}
.nav-menu a::after{
  content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
  background:var(--gold); transition:width var(--transition);
}
.nav-menu a:hover::after, .nav-menu a.active::after{ width:100%; }
.nav-menu a:hover{ color:var(--navy); }
.header-actions{ display:flex; align-items:center; gap:18px; }
.lang-switch{ display:flex; align-items:center; gap:6px; font-family:var(--font-body); font-weight:600; font-size:.82rem; }
.lang-switch a{ color:var(--muted); padding:2px 4px; }
.lang-switch a.active{ color:var(--navy); }
.lang-switch .sep{ color:var(--line); }

/* Hamburger */
.nav-toggle{
  display:none; width:46px; height:46px; border:1px solid var(--line);
  background:#fff; border-radius:12px; position:relative; align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:""; position:absolute; width:22px; height:2px; background:var(--ink); border-radius:2px; transition:var(--transition);
}
.nav-toggle span::before{ transform:translateY(-7px); }
.nav-toggle span::after{ transform:translateY(7px); }
body.menu-open .nav-toggle span{ background:transparent; }
body.menu-open .nav-toggle span::before{ transform:rotate(45deg); }
body.menu-open .nav-toggle span::after{ transform:rotate(-45deg); }

/* Off-canvas mobile menu */
.mobile-nav{
  position:fixed; inset:0; z-index:999; display:flex; flex-direction:column;
  padding:calc(var(--header-h) + 24px) 32px 40px;
  background:var(--white); transform:translateX(100%); transition:transform var(--transition);
  overflow-y:auto;
}
body.menu-open .mobile-nav{ transform:translateX(0); }
.mobile-nav a{ font-family:var(--font-display); font-size:1.9rem; color:var(--ink); padding:14px 0; border-bottom:1px solid var(--line); }
.mobile-nav a:hover{ color:var(--navy); }
.mobile-nav .mobile-actions{ margin-top:auto; display:flex; flex-direction:column; gap:16px; padding-top:28px; }
.mobile-nav .lang-switch{ font-size:1rem; }

/* Spacer so fixed header doesn't cover content on non-hero pages */
.header-spacer{ height:var(--header-h); }

/* ---------- Footer (fond CLAIR, comme le site original) ---------- */
.site-footer{ background:var(--light); color:var(--text); padding:72px 0 28px; }
.site-footer a{ color:var(--text); }
.site-footer a:hover{ color:var(--navy); }
/* Le bouton "Запазете сега" garde son texte blanc sur fond navy
   (sinon la règle .site-footer a ci-dessus le passerait en sombre). */
.site-footer a.btn, .site-footer a.btn:hover{ color:#fff; }
.footer-top{ display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:40px; }
.footer-brand img{ height:60px; width:auto; margin-bottom:22px; }   /* logo navy, pas d'inversion */
.footer-brand .contact-line{ display:block; margin:0 0 8px; color:var(--muted); font-size:.95rem; }
.footer-brand .contact-line a{ color:var(--muted); }
.footer-brand .btn{ margin-top:16px; }
.footer-col h4{ color:var(--ink); font-family:var(--font-body); font-weight:700; font-size:.9rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px; }
.footer-col ul li{ margin-bottom:12px; }
.footer-col ul a{ font-size:.95rem; }
/* Réseaux sociaux — bloc conservé (masqué pour l'instant, cf. footer() dans bvbuild.py) */
.footer-socials{ display:flex; gap:12px; margin-top:6px; }
.footer-socials a{
  width:42px; height:42px; border-radius:50%; background:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; transition:var(--transition);
}
.footer-socials a:hover{ transform:translateY(-3px); }
.footer-socials svg{ width:18px; height:18px; fill:#fff; }
.footer-bottom{
  margin-top:56px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center;
  font-size:.85rem; color:var(--muted);
}
.footer-bottom a{ color:var(--text); }

/* ---------- Lien fléché (motif récurrent du site : "Виж повече →", "Заведи ме →") ---------- */
.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:600; font-size:.92rem;
  color:var(--ink); letter-spacing:.01em; line-height:1;
}
.link-arrow svg{ width:20px; height:20px; transition:transform var(--transition); }
.link-arrow:hover{ color:var(--navy); }
.link-arrow:hover svg{ transform:translateX(6px); }

/* ---------- Accordion (FAQ + features) ----------
   Sur le site original les intitulés d'accordéon sont en Manrope (sans-serif),
   pas en serif — on reproduit ce choix ici. */
.accordion-item{ border-bottom:1px solid var(--line); }
.accordion-item summary{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 4px; font-family:var(--font-body); font-size:1.12rem; color:var(--ink); font-weight:600;
}
.accordion-item summary::-webkit-details-marker{ display:none; }
.accordion-item summary .acc-icon{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%; border:1.5px solid var(--navy);
  position:relative; transition:var(--transition);
}
.accordion-item summary .acc-icon::before,
.accordion-item summary .acc-icon::after{
  content:""; position:absolute; top:50%; left:50%; width:13px; height:2px; background:var(--navy);
  transform:translate(-50%,-50%); transition:var(--transition);
}
.accordion-item summary .acc-icon::after{ transform:translate(-50%,-50%) rotate(90deg); }
.accordion-item[open] summary .acc-icon{ background:var(--navy); }
.accordion-item[open] summary .acc-icon::before,
.accordion-item[open] summary .acc-icon::after{ background:#fff; }
.accordion-item[open] summary .acc-icon::after{ transform:translate(-50%,-50%) rotate(0); }
.accordion-body{ padding:0 4px 26px; color:var(--muted); max-width:840px; }
.accordion-body p:last-child{ margin-bottom:0; }

/* ---------- FAQ : cartes blanches bordées + chevron bas (repris de l'original) ----------
   Les questions sont dans .faq-wrap ; les features gardent, elles, le bouton +/-. */
.faq-wrap .accordion-item{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  margin-bottom:14px; padding:0 26px;
}
.faq-wrap .accordion-item summary{ font-size:1.12rem; padding:22px 0; }
.faq-wrap .accordion-body{ padding:0 0 24px; }
.faq-wrap .accordion-item summary .acc-icon{
  border:0; width:22px; height:22px; border-radius:0; background:transparent;
}
.faq-wrap .accordion-item summary .acc-icon::before{
  content:""; position:absolute; top:38%; left:50%; width:9px; height:9px;
  border-right:2px solid var(--ink); border-bottom:2px solid var(--ink);
  transform:translate(-50%,-50%) rotate(45deg); background:transparent;
}
.faq-wrap .accordion-item summary .acc-icon::after{ display:none; }
.faq-wrap .accordion-item[open] summary .acc-icon{ background:transparent; }
.faq-wrap .accordion-item[open] summary .acc-icon::before{ transform:translate(-50%,-60%) rotate(-135deg); }

/* ---------- Cards ---------- */
.card{ background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:var(--transition); }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }

/* Blog / attraction card */
.post-card{ display:flex; flex-direction:column; background:#fff; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:var(--transition); height:100%; }
.post-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.post-card .thumb{ aspect-ratio:4/3; overflow:hidden; }
.post-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.post-card:hover .thumb img{ transform:scale(1.06); }
.post-card .post-body{ padding:26px 24px 28px; display:flex; flex-direction:column; gap:16px; flex:1; }
.post-card h5{ font-family:var(--font-display); font-size:1.35rem; font-weight:600; line-height:1.25; color:var(--ink); }
.post-card .read-more{ margin-top:auto; font-weight:600; font-size:.92rem; color:var(--ink); display:inline-flex; align-items:center; gap:8px; }
.post-card .read-more svg{ width:16px; height:16px; transition:transform var(--transition); }
.post-card:hover .read-more svg{ transform:translateX(5px); }

/* ============================================================
   ANIMATIONS — système "haut de gamme"
   ============================================================ */

/* ---------- Révélations au scroll (amélioration progressive) ----------
   Le contenu est visible par défaut ; le JS ajoute .reveal-ready sur <html>
   pour n'activer l'état masqué QUE si le JavaScript fonctionne.
   Variantes de direction via l'attribut data-reveal="up|left|right|zoom". */
.reveal-ready [data-reveal]{
  opacity:0;
  transform:translateY(40px);
  transition:opacity 1s cubic-bezier(.16,.7,.3,1),
             transform 1.1s cubic-bezier(.16,.7,.3,1);
  will-change:opacity, transform;
}
.reveal-ready [data-reveal="left"]  { transform:translateX(-48px); }
.reveal-ready [data-reveal="right"] { transform:translateX(48px); }
.reveal-ready [data-reveal="zoom"]  { transform:scale(.94); }
.reveal-ready [data-reveal="fade"]  { transform:none; }
.reveal-ready [data-reveal].in{ opacity:1; transform:none; }

/* Décalage manuel (data-reveal-delay="1".."6") — l'auto-stagger passe par le JS. */
.reveal-ready [data-reveal-delay="1"]{ transition-delay:.08s; }
.reveal-ready [data-reveal-delay="2"]{ transition-delay:.16s; }
.reveal-ready [data-reveal-delay="3"]{ transition-delay:.24s; }
.reveal-ready [data-reveal-delay="4"]{ transition-delay:.32s; }
.reveal-ready [data-reveal-delay="5"]{ transition-delay:.40s; }
.reveal-ready [data-reveal-delay="6"]{ transition-delay:.48s; }

/* ---------- Transition de page (fondu à l'entrée / à la sortie) ----------
   Le fondu d'ENTRÉE est une animation CSS pure (aucun JS requis → le contenu
   reste visible même sans JavaScript). Le JS ne gère que le fondu de SORTIE
   (.is-leaving) au clic sur un lien interne. */
@media (prefers-reduced-motion: no-preference){
  body.page-fade{ animation:pageIn .55s ease both; }
  body.is-leaving{ animation:none; opacity:0; transition:opacity .26s ease; }
}
/* Fondu en opacité seule : on n'anime PAS transform sur <body>, sinon celui-ci
   deviendrait un bloc conteneur et casserait le position:fixed de la lightbox. */
@keyframes pageIn{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- Effet "Ken Burns" (lent zoom/pan) pour les images d'ambiance ---- */
@keyframes kenburns{
  0%   { transform:scale(1)   translate(0,0); }
  100% { transform:scale(1.08) translate(-1.5%, -1%); }
}
.kenburns{ animation:kenburns 18s ease-out both; }

/* ---------- Réglage global : respecter "réduire les animations" ---------- */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}
[data-reveal-delay="1"]{ transition-delay:.08s; }
[data-reveal-delay="2"]{ transition-delay:.16s; }
[data-reveal-delay="3"]{ transition-delay:.24s; }
[data-reveal-delay="4"]{ transition-delay:.32s; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  :root{ --header-h:80px; }
  .nav-menu{ display:none; }
  .header-actions .lang-switch{ display:none; }
  .header-actions .btn{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:640px){
  body{ font-size:16px; }
  .footer-top{ grid-template-columns:1fr; }
  .btn{ padding:14px 28px; }
  .accordion-item summary{ font-size:1.2rem; }
}