/* Jardin Vega VR microsite (sekoya17 template). Ported from the live Elementor CSS (kit post-9, header 2655,
   page template 2675, footer 2661, menu popup 2616, form popups 6896/5653).
   Breakpoints follow the site's custom Elementor ones: mobile <= 575, tablet <= 1279, desktop >= 1280.
   Colours + fonts are the only brand-specific values: change the tokens below for a variant site. */

@font-face { font-family: 'CamptonBook'; src: url('../fonts/campton-book.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: auto; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/display.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }   /* variable, latin */
@font-face { font-family: 'Lato'; src: url('../fonts/lato-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../fonts/lato-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Actor'; src: url('../fonts/actor.woff2') format('woff2'); font-weight: 400; font-style: normal; }

:root {
  --primary: #231F20;     /* Elementor global primary + text */
  --secondary: #1F322E;
  --accent: #EFECE7;      /* sidebar and page background */
  --light: #F7F7F7;
  --gold: #E0BD78;
  --f-text: 'Lato', montserat;
  --f-display: 'Cormorant Garamond', montserat;
  --f-form: 'Lato', montserat;
  --nav-w: 4%;            /* desktop vertical sidebar width (Elementor column 4%) */
}

/* ---- Reset (Hello Elementor reset.css essentials) ---- */
*, *::before, *::after { box-sizing: border-box; }
html { line-height: 1.15; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: #333; font-family: var(--f-text); font-size: 14px; font-weight: normal; line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; background: transparent; }
img { border: 0; max-width: 100%; height: auto; vertical-align: middle; }
h1, h2, h3, h4 { margin: .5rem 0 1rem; font-weight: normal; line-height: 1.2; }
button, input, select, textarea { font-family: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- Icon wrapper: replicates Elementor icon widget box (inline-block, line-height 1, svg 1em) ---- */
.ic-wrap { text-align: center; }
.ic { display: inline-block; line-height: 1; font-size: 30px; transition: transform .3s; cursor: pointer; }
.ic img, .ic svg { display: block; width: 1em; height: 1em; }
.ic:hover { transform: scale(.9); }   /* e-animation-shrink */

/* ---- Mobile/tablet header (hidden on desktop, where the sidebar takes over) ---- */
.m-header { position: relative; z-index: 99; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; padding: 10px; background: var(--accent); box-shadow: 0 -6px 27px -10px rgba(0, 0, 0, .5); }
.m-header .ic-wrap { text-align: end; }
.m-header .ghost img { opacity: 0; }           /* live left icon is transparent (#04393F00) until hover */
.m-header .ghost:hover img { opacity: 1; }
.m-logo img { width: 87px; }

/* ---- Desktop vertical sidebar ---- */
.v-nav { display: none; }

/* ---- Page body: the viewer fills 85vh, then the footer ---- */
.page { display: flex; min-height: 50vh; }
.content { flex: 1 0 100%; background: var(--accent); }
.viewer { display: block; width: 100%; height: 85vh; border: 0; background: var(--accent); }

/* ---- Footer ---- */
.foot-top { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 11vh; padding: 5px; background: var(--secondary); }
.foot-items { display: flex; flex-direction: row; justify-content: space-around; align-items: center; width: 100%; }
.ibox { display: flex; align-items: center; gap: 15px; width: 30%; max-width: 30%; text-align: start; }
.ibox .ibox-icon { flex-shrink: 0; display: inline-block; line-height: 1; font-size: 25px; padding: 5px; border: 1px solid var(--light); border-radius: 50%; color: var(--light); }
.ibox .ibox-icon img { display: block; width: 1em; height: 1em; }
.ibox-text { flex-grow: 1; }
.ibox-title { margin: 8px 0 -5px; font-family: var(--f-display); font-weight: 700; letter-spacing: .5px; font-size: 1.3em; line-height: 1.2; color: var(--light); }
.ibox-title a { color: inherit; }
.ibox-desc { margin: 0; font-family: var(--f-text); color: var(--light); }
.ibox.phone .ibox-title { font-family: var(--f-text); font-weight: normal; letter-spacing: normal; white-space: nowrap; }
.ibox.phone .ibox-desc { font-family: var(--f-display); font-weight: 700; letter-spacing: .5px; }
.foot-bottom { display: flex; flex-direction: row; justify-content: space-between; align-items: center; min-height: 4vh; padding: 10px; background: var(--primary); }
.foot-bottom > div { text-align: center; }
.foot-tagline span { font-size: .8em; color: var(--primary); }   /* same colour as its background on the live site */
.foot-copy { margin-right: 8vw; }
.foot-copy span { font-size: .8em; color: var(--light); }
.foot-credit { margin-right: 5vw; text-align: end !important; }
.foot-credit a { font-size: .6em; color: var(--light); }

/* ---- Popups (menu + forms) ---- */
.popup { position: fixed; inset: 0; display: none; }
.popup.is-open { display: flex; }
.popup-box { position: relative; }
.popup-close { position: absolute; top: 20px; right: 20px; z-index: 2; display: flex; padding: 0; border: 0; background: none; cursor: pointer; line-height: 1; }
.popup-close svg { width: 1em; height: 1em; fill: currentColor; }

/* Slide-out menu: 320px panel, slides in from the left (from the right on phones) */
.menu-pop { z-index: 10; justify-content: flex-start; align-items: center; }
.menu-pop .popup-box { margin: 0 0 0 3%; background: var(--light) var(--panel-bg) 0 0 repeat; box-shadow: 6px 0 31px -9px rgba(0, 0, 0, .2); animation: slideInLeft .8s both; }
.menu-pop.is-closing .popup-box { animation-name: slideOutLeft; }
.menu-pop .popup-msg { display: flex; align-items: flex-start; width: 320px; height: 100vh; padding: 0 6.4px; overflow-y: auto; }   /* scrolls when the menu is taller than the screen */
.menu-pop .popup-close { font-size: 14px; color: #ACACAC; }
.menu-inner { display: flex; flex-direction: column; justify-content: space-between; gap: 10px; width: 100%; margin: auto 0; padding: 40px 15px; }   /* centred when it fits, top-aligned (logo first) when it does not */
.menu-logo { text-align: center; }
.menu-logo img { width: 90%; }
.menu-lists { display: flex; flex-direction: column; padding: 10px; }
.menu-lists h3 { margin: 0; font-family: var(--f-display); font-size: 28px; line-height: 1; text-align: center; color: var(--light); }
.divider { padding: 15px 0; }
.divider span { display: block; width: 60%; margin: 0 auto; border-top: 1px solid var(--light); }
.menu-list { margin: 0 0 80px; padding: 0; list-style: none; text-align: center; }
.menu-list li + li { margin-top: 7px; }
.menu-list a { font-family: var(--f-text); font-weight: bold; text-transform: uppercase; color: var(--light); transition: color .3s; }
.menu-list a:hover { color: var(--gold); }

@keyframes slideInLeft { from { transform: translate3d(-100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
@keyframes slideOutLeft { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
@keyframes slideOutRight { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(100%, 0, 0); } }
@keyframes slideInRight { from { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }

/* Form popups (brochure + pricelist) */
.form-pop { z-index: 9999; justify-content: center; align-items: center; background: rgba(239, 236, 231, .76); }
.form-pop .popup-box { background: var(--secondary) var(--panel-bg) 0 0 repeat; box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2); max-height: 100vh; overflow-y: auto; }
.form-pop .popup-msg { width: 75vw; padding: calc(75vw * .03) calc(75vw * .05); }
.form-pop .popup-close { font-size: 15px; color: var(--light); }
.form-pop .popup-close:hover { color: var(--gold); }
.form-inner { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; max-width: 820px; margin: 0 auto; padding: 10px; }   /* 800px content + 10px Elementor container padding */
.form-logo { margin-bottom: 20px; text-align: center; }
.form-logo img { width: 135px; }
.form-inner h2 { margin: 0; font-family: var(--f-display); font-size: 1.8em; font-weight: 500; line-height: 1; text-transform: uppercase; text-align: center; color: var(--light); }
.form-inner .divider { padding: 2px 0; width: 100%; }
.form-inner .divider span { width: 20%; }
.form-inner h4 { width: 70%; margin: 0; padding-bottom: 25px; font-family: var(--f-display); font-size: 1.5em; line-height: 1; text-align: center; color: var(--light); }
.lead-form { width: 70%; }
.fields { display: flex; flex-wrap: wrap; margin: 0 -5px -10px; }
.field { width: 100%; padding: 0 5px; margin-bottom: 10px; }
.field.c50 { width: 50%; } .field.c40 { width: 40%; } .field.c20 { width: 20%; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field select { width: 100%; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 0; background: rgba(247, 247, 247, .84); color: var(--primary); font-family: var(--f-form); font-size: 10px; line-height: 1.2em; outline: 0; }
.field select { padding: 5px 20px 5px 14px; color: #5B5B53; -webkit-appearance: none; appearance: none; }
.field.spacer { font-family: var(--f-form); font-size: 10px; line-height: 1.2em; }
.field.consent { color: var(--light); }
.field.consent input { margin: 0 4px 0 0; vertical-align: middle; }
.field.consent label { font-family: var(--f-form); font-size: 10px; line-height: 1.2em; }
.field.note { padding-bottom: 0; color: var(--light); font-family: var(--f-form); font-size: 10px; font-weight: 200; line-height: 1.2em; }
.field.submit { text-align: center; }
.hp { display: none !important; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 33px; padding: 0 55px; border: 1px solid var(--gold); border-radius: 0; background: var(--gold); color: #fff; font-family: var(--f-form); font-size: 12px; line-height: 1em; text-transform: uppercase; cursor: pointer; }
.btn:hover { background: var(--secondary); color: var(--primary); }
.btn:disabled { opacity: .7; cursor: wait; }
.form-error { margin: 8px 0 0; color: var(--gold); font-family: var(--f-form); font-size: 11px; text-align: center; }

/* ---- Floor plan lightbox (Elementor lightbox look) ---- */
.lb { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; background: var(--primary); color: var(--accent); }
.lb.is-open { display: flex; }
.lb img { max-width: 85vw; max-height: calc(100vh - 140px); width: auto; height: auto; }
.lb-count { position: absolute; top: 15px; left: 20px; font-size: 15px; line-height: 23px; }
.lb-close, .lb-nav { position: absolute; border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0; }
.lb-close { z-index: 2; top: 13px; right: 15px; width: 30px; height: 30px; font-size: 20px; }
.lb-nav { top: 0; width: 15%; height: 100%; font-size: 25px; display: flex; align-items: center; justify-content: center; }
.lb-nav:hover, .lb-close:hover { color: var(--gold); }
.lb-nav[hidden] { display: none; }
.lb-prev { left: 0; } .lb-next { right: 0; }
.lb svg { width: 1em; height: 1em; fill: currentColor; }
/* Floor plan type tabs (built by main.js): above the side arrows, scroll sideways on narrow screens */
.lb-tabs { position: absolute; z-index: 2; left: 50%; bottom: 15px; transform: translateX(-50%); display: flex; gap: 6px; max-width: calc(100vw - 30px); overflow-x: auto; scrollbar-width: none; }
.lb-tabs::-webkit-scrollbar { display: none; }
.lb-tabs button { flex-shrink: 0; padding: 8px 14px; border: 1px solid rgba(239, 236, 231, .35); border-radius: 20px; background: none; color: var(--accent); font: inherit; font-size: 14px; line-height: 1; white-space: nowrap; cursor: pointer; }
.lb-tabs button:hover { color: var(--gold); border-color: var(--gold); }
.lb-tabs button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--primary); }
.lb-tabs button[hidden], .lb-tabs[hidden] { display: none; }

/* ---- Message pages (thank-you / download) + privacy ---- */
.message { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 85vh; padding: 40px 20px; text-align: center; color: var(--primary); }
.message .lottie { width: 150px; height: 150px; }
.message h1 { margin: 0 0 10px; font-family: var(--f-display); font-size: 2em; line-height: 1.2; }
.message p { margin: 0; }
.legal { max-width: 1140px; margin: 0 auto; padding: 40px 20px; min-height: 85vh; color: #333; }
.legal h1, .legal h2, .legal h3 { font-family: var(--f-display); color: var(--primary); }
.legal a { color: var(--secondary); text-decoration: underline; }

/* ---- Desktop (>= 1280): fixed 4% sidebar, header hidden ---- */
@media (min-width: 1280px) {
  .m-header { display: none; }
  .v-nav { position: fixed; top: 0; left: 0; z-index: 11; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; width: var(--nav-w); height: 100vh; padding: 30px 0; overflow: hidden; background: var(--accent); }
  .v-nav .home { font-size: 4vw; }
  .v-nav .menu { font-size: 35px; }
  .v-nav .caret { font-size: 25px; cursor: default; }
  .page { min-height: 85vh; }
  .content { flex-basis: auto; margin-left: var(--nav-w); width: calc(100% - var(--nav-w)); }
  /* Deliberate fix: the live footer is 100% wide PLUS a 4% left margin, overflowing the page by 4%. */
  .site-foot { margin-left: var(--nav-w); }
  .foot-items { width: 50%; }
}

/* ---- Tablet + mobile (<= 1279) ---- */
@media (max-width: 1279px) {
  .menu-pop .popup-box { margin: 0; }
  .menu-pop .popup-msg { padding: 0; }
  .form-pop .popup-msg { width: 95vw; padding: calc(95vw * .03) calc(95vw * .05); }
  .foot-bottom { flex-direction: column; padding: 0; }
  .foot-tagline { display: none; }
  .foot-copy, .foot-credit { margin: 0; text-align: center !important; }
}

/* ---- Mobile (<= 575) ---- */
@media (max-width: 575px) {
  .menu-pop { align-items: flex-start; }
  .menu-pop .popup-box { animation-name: slideInRight; }
  .menu-pop.is-closing .popup-box { animation-name: slideOutRight; }
  .menu-pop .popup-msg { width: 100vw; height: 100vh; padding: 0 28px; }
  .menu-pop .popup-close { font-size: 21px; }
  .menu-inner { padding: 120px 20px 80px; }
  .menu-logo img { width: 120px; }
  .form-logo img { width: 120px; }
  .form-inner h4 { width: 100%; }
  .lead-form { width: 100%; }
  .field.c50, .field.c40, .field.c20 { width: 100%; }
  .foot-items { flex-direction: column; justify-content: center; gap: 5px; margin: 5px 0; }
  .ibox { width: 50%; max-width: 50%; }
  .ibox .ibox-icon { font-size: 30px; }
  .foot-bottom { padding: 1%; }
  .lb-nav { width: 20%; }
}

/* ---- Jardin Vega: dark panels as sekoya17 but the menu has its own background, Lato text, green mobile header ---- */
.menu-pop .popup-box { background: var(--secondary) url('/img/menu-bg.jpg') center / cover no-repeat; }
.menu-lists h3 { font-weight: 500; }
.menu-list a { font-weight: normal; }
.form-inner h2 { font-size: 2rem; font-weight: 500; text-transform: none; }
.form-inner h4 { font-family: var(--f-text); font-size: 1rem; font-weight: 300; text-transform: uppercase; }
.btn:hover { background: transparent; color: var(--light); }
.m-header { background: var(--secondary); }
.m-header .ic:not(.ghost) img { filter: brightness(0) invert(.97); }   /* menu icon light on green */
.m-header .ghost:hover img, .v-nav .home img { opacity: 0; }        /* both icons are invisible on the live site */
.foot-bottom { font-family: 'CamptonBook', montserat; }
/* Footer row as live: empty left column, the three boxes, Groupe Filatex logo in the right column */
@media (min-width: 1280px) {
  .foot-items { width: 100%; }
  .foot-items::before, .foot-items::after { content: ''; flex: 0 0 27%; align-self: stretch; }
  .foot-items::after { flex-basis: 23%; background: url('/img/footer-logo.svg') right 22px center / 175px auto no-repeat; }
  .ibox { flex: 1 1 0; width: auto; max-width: none; }
}