/* ========================================================= HAMADAT PROMOTION IMMOBILIÈRE — Design system Palette déduite du logo / PPTX client (teal + anthracite) ========================================================= */ :root{ --teal: #1E8C82; --teal-dark: #146B63; --teal-tint: #E6F1F0; --charcoal: #2A2A2A; --charcoal-soft: #262626; --off-white: #F5F6F7; --white: #FFFFFF; --grey-1: #6E7679; --grey-2: #9BA1A2; --grey-3: #B9BFC1; --grey-4: #D7DADA; --radius-lg: 28px; --radius-md: 18px; --radius-sm: 10px; --shadow-soft: 0 10px 40px rgba(20,30,30,.08); --shadow-card: 0 6px 24px rgba(20,30,30,.10); --ff-heading: 'Poppins', 'Cairo', sans-serif; --ff-body: 'Inter', 'Cairo', sans-serif; --container: 1240px; /* ---- Theme-aware semantic tokens (flip in dark mode below) ---- */ --bg: var(--white); --bg-tint: var(--off-white); --bg-card: var(--off-white); --text: var(--charcoal); --text-soft: var(--grey-1); --text-softer: var(--grey-3); --border-c: var(--grey-4); --accent: var(--teal-dark); --nav-bg: rgba(255,255,255,.6); --nav-border: rgba(255,255,255,.75); --nav-highlight: rgba(255,255,255,.9); --input-bg: var(--off-white); } html.dark-mode{ --bg: #0D1315; --bg-tint: #131A1C; --bg-card: #182022; --text: #F1F3F3; --text-soft: #A6AEB0; --text-softer: #7C8384; --border-c: rgba(255,255,255,.1); --accent: #4FC4B6; --nav-bg: rgba(18,24,26,.55); --nav-border: rgba(255,255,255,.1); --nav-highlight: rgba(255,255,255,.14); --input-bg: #131A1C; --shadow-soft: 0 10px 40px rgba(0,0,0,.45); --shadow-card: 0 6px 24px rgba(0,0,0,.35); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} html.dark-mode{color-scheme:dark;} body{ margin:0; font-family:var(--ff-body); color:var(--text); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden; transition:background .35s ease,color .35s ease; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} ul{margin:0;padding:0;list-style:none;} h1,h2,h3,h4{font-family:var(--ff-heading);font-weight:600;margin:0 0 .5em;line-height:1.15;color:var(--text);} p{line-height:1.7;color:var(--text-soft);margin:0 0 1em;} .container{max-width:var(--container);margin:0 auto;padding:0 32px;} /* ---------- Language toggling ---------- */ /* Scoped to body descendants: document.documentElement (html) itself carries a lang="ar"/"fr" attribute for accessibility, and an unscoped [lang="ar"] selector would also match , hiding the entire page. */ body [lang="ar"]{display:none;} html.lang-ar body [lang="ar"]{display:initial;} html.lang-ar body [lang="fr"]{display:none;} html.lang-ar body{font-family:var(--ff-heading-ar,'Cairo',sans-serif);direction:rtl;text-align:right;} html.lang-ar h1, html.lang-ar h2, html.lang-ar h3, html.lang-ar h4, html.lang-ar p, html.lang-ar span, html.lang-ar a, html.lang-ar li{font-family:'Cairo',sans-serif;} html.lang-ar .nav__links{direction:rtl;} html.lang-ar .lang-toggle{direction:ltr;} body .blog-article__body[lang="ar"]{display:none;} html.lang-ar body .blog-article__body[lang="ar"]{display:block;} html.lang-ar body .blog-article__body[lang="fr"]{display:none;} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;gap:8px; padding:14px 30px;border-radius:999px; font-weight:600;font-size:15px;letter-spacing:.2px; border:1px solid transparent;cursor:pointer; transition:all .25s ease; } .btn--primary{background:var(--teal);color:#fff;} .btn--primary:hover{background:var(--teal-dark);transform:translateY(-2px);} .btn--outline{background:transparent;border-color:rgba(255,255,255,.6);color:#fff;} .btn--outline:hover{background:rgba(255,255,255,.15);} .btn--dark{background:var(--charcoal);color:#fff;} .btn--dark:hover{background:#000;} .btn--ghost{background:var(--teal-tint);color:var(--teal-dark);} .btn--ghost:hover{background:var(--teal);color:#fff;} /* ---------- Nav (liquid-glass) ---------- */ .nav-wrap{position:fixed;top:20px;left:0;right:0;z-index:200;display:flex;justify-content:center;padding:0 20px;} .nav{ position:relative; display:flex;align-items:center;justify-content:space-between;gap:24px; background:var(--nav-bg); backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%); border:1px solid var(--nav-border); border-radius:999px;padding:10px 12px 10px 22px; box-shadow:var(--shadow-soft), inset 0 1px 0 var(--nav-highlight); width:100%;max-width:1120px; transition:background .35s ease,border-color .35s ease,box-shadow .35s ease; isolation:isolate; } .nav::before{ content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(135deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,0) 30%); opacity:.7;z-index:-1; } html.dark-mode .nav::before{background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 35%);} .nav__logo{display:flex;align-items:center;gap:10px;font-weight:700;} .nav__logo img{height:34px;width:auto;} html.dark-mode .nav__logo img{filter:brightness(0) invert(1);} .nav__links{display:flex;align-items:center;gap:28px;font-size:14.5px;font-weight:500;} .nav__links a{color:var(--text);opacity:.82;transition:opacity .2s,color .2s;} .nav__links a:hover{opacity:1;color:var(--teal);} .nav__right{display:flex;align-items:center;gap:10px;} .theme-toggle{ display:flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:50%;border:1px solid var(--nav-border); background:rgba(255,255,255,.35);color:var(--text);cursor:pointer; transition:background .25s,transform .2s;flex:none; } .theme-toggle:hover{transform:translateY(-1px);} html.dark-mode .theme-toggle{background:rgba(255,255,255,.06);} .theme-toggle svg{width:17px;height:17px;} .theme-toggle .icon-sun{display:none;} .theme-toggle .icon-moon{display:block;} html.dark-mode .theme-toggle .icon-sun{display:block;} html.dark-mode .theme-toggle .icon-moon{display:none;} .lang-toggle{ display:flex;align-items:center;padding:3px;gap:2px; border:1px solid var(--nav-border);border-radius:999px;font-size:12.5px;font-weight:700; background:rgba(255,255,255,.3); } html.dark-mode .lang-toggle{background:rgba(255,255,255,.05);} .lang-toggle button{border:0;background:transparent;padding:7px 13px;cursor:pointer;color:var(--text-soft);border-radius:999px;transition:background .2s,color .2s;} .lang-toggle button.active{background:var(--teal-dark);color:#fff;} html.dark-mode .lang-toggle button.active{background:var(--teal);color:#0D1315;} .nav__cta{background:var(--teal-dark);color:#fff;border-radius:999px;padding:11px 22px;font-weight:600;font-size:14px;white-space:nowrap;transition:background .2s;} .nav__cta:hover{background:var(--teal);} .nav__burger{display:none;align-items:center;justify-content:center;border:0;background:var(--bg-tint);color:var(--text);border-radius:999px;padding:10px 12px;cursor:pointer;} @media(max-width:900px){ .nav__links{display:none;} .nav__burger{display:block;} /* .nav__cta's text is white-space:nowrap, so it can't shrink — together with the burger it was ~395px wide, more than the mobile nav pill has room for, which pushed the burger off-screen entirely and squeezed .nav__logo down to 0 width. Drop the header CTA here; the bottom .mini-cta-bar (Appeler/WhatsApp/RDV) already offers the same action on every page at this width. */ .nav__cta{display:none;} /* .nav__links doubled as the mobile menu's own markup (burger toggles nav__links--open, see main.js) but had no styling for that state at all — display:none from the rule above simply never got overridden, so the burger was a dead button. Turn it into an actual dropdown panel below the nav pill when open. */ .nav__links.nav__links--open{ display:flex; flex-direction:column; align-items:stretch; gap:2px; position:fixed; top:90px;left:20px;right:20px; z-index:199; background:var(--nav-bg); backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%); border:1px solid var(--nav-border); border-radius:24px; padding:10px; box-shadow:var(--shadow-soft); } .nav__links--open a{padding:14px 16px;border-radius:16px;} .nav__links--open a:hover{background:rgba(127,127,127,.1);} } /* ---------- Full-screen hero carousel ---------- */ .hero{position:relative;height:100vh;min-height:640px;width:100%;overflow:hidden;background:var(--charcoal);} .hero__slide{ position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease; } .hero__slide.active{opacity:1;z-index:2;} .hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1);} .hero__slide.active img{animation:kenburns 7s ease-out forwards;} @keyframes kenburns{from{transform:scale(1);}to{transform:scale(1.09);}} @media(prefers-reduced-motion:reduce){.hero__slide.active img{animation:none;}} .hero__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,25,25,.15) 0%,rgba(15,20,20,.15) 40%,rgba(10,15,15,.78) 100%);} .hero__content{ position:absolute;left:0;right:0;bottom:0;z-index:10; padding:0 0 90px;color:#fff; } .hero__inner{max-width:var(--container);margin:0 auto;padding:0 32px;} .hero__eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border:1px solid rgba(255,255,255,.4);border-radius:999px;font-size:13px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:22px;color:#fff;background:rgba(255,255,255,.08);backdrop-filter:blur(6px);} .hero__title{font-size:clamp(38px,6vw,72px);color:#fff;margin-bottom:14px;max-width:820px;} .hero__tagline{font-size:clamp(16px,2vw,20px);color:rgba(255,255,255,.85);max-width:560px;margin-bottom:32px;} .hero__cta-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;} .hero__meta{display:flex;gap:26px;margin-top:44px;flex-wrap:wrap;} .hero__meta div{color:rgba(255,255,255,.75);font-size:13.5px;} .hero__meta strong{display:block;color:#fff;font-size:15px;font-weight:600;} .hero__nav{position:absolute;bottom:40px;right:32px;z-index:15;display:flex;gap:12px;align-items:center;} .hero__arrow{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(255,255,255,.08);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(6px);transition:background .2s;} .hero__arrow:hover{background:rgba(255,255,255,.25);} .hero__arrow[data-hero-prev] .icon, .hero__arrow[data-g-prev] .icon{transform:rotate(180deg);} .hero__dots{position:absolute;left:32px;bottom:44px;z-index:15;display:flex;gap:8px;} .hero__dot{width:34px;height:3px;border-radius:2px;background:rgba(255,255,255,.35);cursor:pointer;overflow:hidden;position:relative;} .hero__dot.active{background:rgba(255,255,255,.35);} .hero__dot.active::after{content:'';position:absolute;left:0;top:0;bottom:0;width:0%;background:#fff;animation:dotfill 6s linear forwards;} @keyframes dotfill{from{width:0%;}to{width:100%;}} .hero__scroll{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:15;color:rgba(255,255,255,.7);font-size:11px;letter-spacing:2px;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:8px;} .hero__scroll::after{content:'';width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:scrolldown 1.8s ease-in-out infinite;} @keyframes scrolldown{0%{opacity:0;transform:translateY(-6px);}50%{opacity:1;}100%{opacity:0;transform:translateY(10px);}} /* ---------- Simple page hero (About / News) ---------- */ .page-hero{background:var(--charcoal);color:#fff;padding:190px 0 90px;} .page-hero .eyebrow{color:var(--grey-3);} .page-hero .eyebrow::before{background:var(--teal);} .page-hero h1{color:#fff;font-size:clamp(32px,5vw,54px);max-width:760px;margin-bottom:18px;} .page-hero__lead{color:rgba(255,255,255,.78);font-size:18px;max-width:640px;margin:0;} /* ---------- Section shells ---------- */ section{padding:120px 0;} .section--tight{padding:80px 0;} .section--tint{background:var(--bg-tint);} .section--dark{background:var(--charcoal);color:#fff;} .section--dark p{color:var(--grey-3);} .section--dark h1,.section--dark h2,.section--dark h3{color:#fff;} .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px;} .eyebrow::before{content:'';width:22px;height:2px;background:var(--teal);display:inline-block;} .section-head{max-width:680px;margin:0 auto 56px;text-align:center;} .section-head h2{font-size:clamp(28px,4vw,44px);} .section-head p{font-size:17px;} .section--dark .eyebrow{color:var(--grey-3);} .section--dark .eyebrow::before{background:var(--teal);} /* ---------- Intro / about block ---------- */ .intro-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:center;} .intro-grid p{font-size:18px;} .intro-list{margin-top:28px;display:grid;gap:14px;} .intro-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--text);font-weight:500;} .intro-list li::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;background:var(--teal);margin-top:7px;} .intro-figure{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);aspect-ratio:4/5;position:relative;background:#111;} .intro-figure img{width:100%;height:100%;object-fit:cover;} .intro-figure .gallery__arrows .hero__arrow{width:38px;height:38px;} .intro-figure .gallery__caption{left:16px;bottom:16px;padding:8px 16px;font-size:12.5px;} .intro-figure .gallery__counter{left:16px;top:16px;padding:5px 12px;font-size:11px;} .intro-figure .gallery__arrows{right:16px;bottom:16px;gap:8px;} @media(max-width:860px){.intro-grid{grid-template-columns:1fr;}} /* ---------- Values grid ---------- */ .values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;} .value-card{background:var(--bg-card);border-radius:var(--radius-md);padding:34px 28px;transition:transform .25s,box-shadow .25s,background .35s;} .value-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-card);} .value-card .num{font-family:var(--ff-heading);font-size:15px;color:var(--teal);font-weight:700;margin-bottom:18px;} .value-card h3{font-size:19px;margin-bottom:10px;} .value-card p{font-size:14.5px;margin:0;} @media(max-width:960px){.values-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:560px){.values-grid{grid-template-columns:1fr;}} /* ---------- Stats ---------- */ .stats-band{background:var(--teal-dark);border-radius:var(--radius-lg);padding:56px 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;color:#fff;} .stats-band .stat h3{font-size:clamp(32px,4vw,48px);color:#fff;margin-bottom:6px;} .stats-band .stat p{color:rgba(255,255,255,.8);margin:0;font-size:14px;} @media(max-width:760px){.stats-band{grid-template-columns:repeat(2,1fr);}} /* ---------- Residence cards / grid ---------- */ .tabs{display:flex;gap:10px;justify-content:center;margin-bottom:44px;} .tab-btn{padding:12px 26px;border-radius:999px;border:1px solid var(--border-c);background:var(--bg-card);font-weight:600;font-size:14px;cursor:pointer;color:var(--text);} .tab-btn.active{background:var(--charcoal);color:#fff;border-color:var(--charcoal);} .res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;} .res-card{border-radius:var(--radius-md);overflow:hidden;position:relative;box-shadow:var(--shadow-card);background:#111;aspect-ratio:3/4;transition:transform .3s;} .res-card:hover{transform:translateY(-6px);} .res-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s;} .res-card:hover img{transform:scale(1.06);} .res-card__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.82) 100%);} .res-card__badges{position:absolute;top:16px;right:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-end;} .res-card__badge{padding:6px 14px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;} .res-card__badge--status{background:#fff;color:var(--charcoal);} .res-card__badge--teal{background:var(--teal);color:#fff;} .res-card__body{position:absolute;left:0;right:0;bottom:0;padding:24px;color:#fff;} .res-card__body h3{color:#fff;font-size:22px;margin-bottom:4px;} .res-card__body .loc{font-size:13px;color:rgba(255,255,255,.75);display:flex;align-items:center;gap:6px;margin-bottom:10px;} .res-card__cta{font-size:13px;font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:6px;} @media(max-width:960px){.res-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:640px){.res-grid{grid-template-columns:1fr;}} /* ---------- Residence detail page ---------- */ .res-hero{position:relative;height:88vh;min-height:560px;overflow:hidden;background:var(--charcoal);} .res-hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s ease;} .res-hero__slide.active{opacity:1;z-index:2;} .res-hero__slide img{width:100%;height:100%;object-fit:cover;transform:scale(1);} .res-hero__slide.active img{animation:kenburns 6.5s ease-out forwards;} @media(prefers-reduced-motion:reduce){.res-hero__slide.active img{animation:none;}} .res-breadcrumb{position:absolute;top:110px;left:0;right:0;z-index:10;} .res-breadcrumb .container{color:rgba(255,255,255,.8);font-size:13.5px;} .res-breadcrumb a{color:rgba(255,255,255,.8);} .res-breadcrumb a:hover{color:#fff;} .res-hero__caption{position:absolute;left:0;right:0;bottom:64px;z-index:10;color:#fff;} .res-hero__caption .container{max-width:var(--container);} .res-hero__caption h1{color:#fff;font-size:clamp(30px,4.4vw,52px);margin-bottom:10px;} .res-hero__slidetext{font-size:16px;color:rgba(255,255,255,.85);min-height:24px;} .res-hero__progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.2);z-index:11;} .res-hero__progress-bar{height:100%;background:var(--teal);width:0%;} .res-hero__dots{position:absolute;right:32px;bottom:70px;z-index:12;display:flex;flex-direction:column;gap:8px;} .res-hero__dots .hero__dot{width:3px;height:26px;} .badge-status{display:inline-flex;align-items:center;gap:8px;padding:8px 18px;border-radius:999px;background:var(--teal-tint);color:var(--teal-dark);font-weight:700;font-size:13px;margin-bottom:20px;} .detail-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:64px;} .detail-grid h2{font-size:26px;} .key-numbers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0 8px;} .key-numbers .kn{background:var(--bg-card);border-radius:var(--radius-md);padding:22px 18px;} .key-numbers .kn .v{font-family:var(--ff-heading);font-size:26px;font-weight:700;color:var(--accent);} .key-numbers .kn .l{font-size:12.5px;color:var(--text-soft);margin-top:6px;line-height:1.4;} .side-card{background:var(--bg-card);border-radius:var(--radius-lg);padding:30px;position:sticky;top:110px;} .side-card h3{font-size:16px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-soft);margin-bottom:16px;} .side-card .row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--border-c);font-size:14.5px;} .side-card .row:last-of-type{border-bottom:none;} .side-card .row span:first-child{color:var(--text-soft);} .side-card .row span:last-child{font-weight:600;text-align:right;color:var(--text);} .side-card .btn{width:100%;justify-content:center;margin-top:20px;} @media(max-width:900px){.detail-grid{grid-template-columns:1fr;}.side-card{position:static;}} .map-link{color:var(--teal);font-weight:600;} .map-embed{margin-top:18px;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-c);position:relative;height:320px;} .map-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} .feature-list{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:24px;} .feature-item{display:flex;align-items:center;gap:14px;background:var(--bg-card);border-radius:var(--radius-sm);padding:16px 18px;font-size:14.5px;font-weight:500;color:var(--text);} .feature-item .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none;} .feature-item .icon{width:19px;height:19px;flex:none;color:var(--accent);} @media(max-width:560px){.feature-list{grid-template-columns:1fr;}} /* ---------- Residence own diaporama gallery ---------- */ .gallery{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:16/8;box-shadow:var(--shadow-card);background:#111;} .gallery__slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;} .gallery__slide.active{opacity:1;z-index:2;} .gallery__slide img{width:100%;height:100%;object-fit:cover;} .gallery__caption{position:absolute;left:24px;bottom:24px;z-index:10;color:#fff;background:rgba(20,25,25,.55);backdrop-filter:blur(6px);padding:10px 20px;border-radius:999px;font-size:14px;font-weight:600;} .gallery__caption .proposed-tag{font-size:10px;opacity:.7;font-weight:500;margin-left:8px;} .gallery__arrows{position:absolute;right:24px;bottom:24px;z-index:10;display:flex;gap:10px;} .gallery__counter{position:absolute;left:24px;top:24px;z-index:10;color:#fff;background:rgba(20,25,25,.55);backdrop-filter:blur(6px);padding:6px 14px;border-radius:999px;font-size:12.5px;} /* ---------- CTA band ---------- */ .cta-band{background:linear-gradient(120deg,var(--teal-dark),var(--teal));border-radius:var(--radius-lg);padding:52px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;color:#fff;} .cta-band h3{color:#fff;font-size:26px;margin-bottom:6px;} .cta-band p{color:rgba(255,255,255,.85);margin:0;} .cta-band__actions{display:flex;gap:14px;flex-wrap:wrap;} /* ---------- Contact form ---------- */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;} .form-field{margin-bottom:18px;} .form-field label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:8px;} .form-field input, .form-field select, .form-field textarea{ width:100%;padding:14px 16px;border-radius:var(--radius-sm);border:1px solid var(--border-c); font-family:var(--ff-body);font-size:14.5px;background:var(--input-bg);color:var(--text); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus{outline:2px solid var(--teal);} .form-field--hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;margin:0;} .form-msg{display:none;padding:11px 14px;border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;margin-bottom:14px;} .form-msg.is-visible{display:block;} .form-msg.is-ok{background:rgba(30,140,130,.12);color:var(--teal-dark,#136);} .form-msg.is-error{background:rgba(200,60,60,.1);color:#a83232;} .form-field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;} @media (max-width:640px){.form-field-row{grid-template-columns:1fr;}} .section--dark .form-field input,.section--dark .form-field select,.section--dark .form-field textarea{ background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fdfdfd; } .section--dark .form-field label{color:rgba(255,255,255,.85);} .btn[disabled]{opacity:.6;cursor:not-allowed;} /* ---------- Opportunités : cartes de catégorie (CTA vers le formulaire) ---------- */ .opp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;} @media (max-width:860px){.opp-grid{grid-template-columns:repeat(2,1fr);}} .opp-card{ background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md); padding:32px 20px;text-align:center;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s; } .opp-card:hover,.opp-card:focus-visible{transform:translateY(-4px);border-color:var(--teal);box-shadow:var(--shadow-card);outline:none;} .opp-card__icon{ width:52px;height:52px;border-radius:50%;background:var(--teal-tint);color:var(--teal-dark); display:flex;align-items:center;justify-content:center;margin:0 auto 14px; } .opp-card b{display:block;font-size:15px;} /* ---------- Opportunités : liste de caractéristiques ---------- */ .bullet-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;} @media (max-width:640px){.bullet-grid{grid-template-columns:1fr;}} .bullet-item{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--text);} .bullet-item .icon{flex:none;color:var(--teal);} .btn[disabled]{opacity:.6;cursor:not-allowed;} .contact-info-card{background:var(--charcoal);color:#fff;border-radius:var(--radius-lg);padding:36px;height:fit-content;} .contact-info-card h3{color:#fff;} .contact-info-card .row{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:14.5px;} .contact-info-card .row .icon{flex:none;color:var(--teal);opacity:.9;} .contact-info-card .row:last-child{border-bottom:none;} @media(max-width:860px){.contact-grid{grid-template-columns:1fr;}} /* ---------- Footer ---------- */ footer{background:var(--charcoal-soft);color:var(--grey-3);padding:70px 0 30px;} .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:50px;} .footer-grid h4{color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.5px;margin-bottom:18px;} .footer-grid ul{display:grid;gap:10px;} .footer-grid a{font-size:14px;color:var(--grey-3);} .footer-grid a:hover{color:#fff;} .footer-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px;} .footer-logo img{height:32px;filter:brightness(0) invert(1);} .footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;} @media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr;}} /* ---------- Progress (état d'avancement) & availability ---------- */ .progress-block{margin-top:6px;} .progress-block .progress-label{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;font-weight:600;color:var(--text-soft);margin-bottom:8px;} .progress-block .progress-label strong{color:var(--accent);font-size:15px;font-family:var(--ff-heading);} .progress-track{width:100%;height:8px;border-radius:999px;background:var(--border-c);overflow:hidden;} .progress-track__bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--teal-dark),var(--teal));} .avail-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.2px;} .avail-chip::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;} .avail-chip--open{background:var(--teal-tint);color:var(--teal-dark);} .avail-chip--sold{background:var(--bg-card);color:var(--text-soft);} html.dark-mode .avail-chip--open{background:rgba(79,196,182,.15);color:var(--accent);} .res-card__avail{position:absolute;left:16px;bottom:16px;z-index:11;} .hero__meta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:20px;} /* Progress/availability sit on photos with a dark scrim (card bodies, hero) — always render them light-on-dark regardless of site theme. */ .res-card__body .avail-chip{margin:2px 0 8px;} .res-card__body .avail-chip--sold{background:rgba(255,255,255,.16);color:#fff;} .res-card__body .progress-block{margin-bottom:10px;max-width:220px;} .res-card__body .progress-block .progress-label, .hero__content-slide .progress-block .progress-label{color:rgba(255,255,255,.8);} .res-card__body .progress-block .progress-label strong, .hero__content-slide .progress-block .progress-label strong{color:#fff;} .res-card__body .progress-track, .hero__content-slide .progress-track{background:rgba(255,255,255,.22);} .hero__content-slide .hero__cta-row{margin-bottom:18px;} /* ---------- Hero badges (slides libres du carrousel d'accueil) ---------- */ .hero__badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;} .hero__badge{display:inline-flex;align-items:center;padding:5px 14px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:#fff;background:var(--teal);border:1px solid rgba(255,255,255,.25);} /* ---------- Disponibilité (modal par typologie, fiche résidence) ---------- */ .dispo-modal{position:fixed;inset:0;background:rgba(20,25,25,.68);z-index:210;display:none;align-items:center;justify-content:center;padding:24px;} .dispo-modal.open{display:flex;} .dispo-modal-box{background:var(--bg,#fff);max-width:660px;width:100%;padding:44px;position:relative;max-height:86vh;overflow-y:auto;border-radius:var(--radius-md);box-shadow:var(--shadow-soft);} @media(max-width:640px){ .dispo-modal{padding:16px;} .dispo-modal-box{padding:30px 22px;max-height:88vh;} .dispo-table th,.dispo-table td{padding:11px 6px;font-size:12px;} } .dispo-modal-close{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;border:1px solid var(--border-c);background:transparent;color:var(--text);font-size:15px;cursor:pointer;z-index:2;} .dispo-modal-close:hover{border-color:var(--teal);color:var(--teal);} .dispo-modal-box h3{font-family:var(--ff-heading);font-size:22px;color:var(--text);margin-bottom:8px;} .dispo-modal-box .sub{font-size:12.5px;color:var(--text-soft);margin-bottom:28px;} .dispo-table{width:100%;border-collapse:collapse;margin-bottom:22px;} .dispo-table th,.dispo-table td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--border-c);font-size:13px;} .dispo-table th{color:var(--text-soft);font-weight:700;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;} .dispo-table td.status{color:var(--text-soft);font-style:italic;} .status-pill{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.3px;padding:5px 11px;white-space:nowrap;border-radius:999px;background:var(--teal-tint);color:var(--teal-dark);} .status-pill.pending{background:rgba(180,83,9,.1);color:#b45309;border:1px solid rgba(180,83,9,.28);} .dispo-details{margin-top:6px;} .dispo-details summary{cursor:pointer;font-size:12.5px;font-weight:700;color:var(--text);padding:14px 0;list-style:none;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-c);} .dispo-details summary::-webkit-details-marker{display:none;} .dispo-details summary::after{content:'+';font-size:17px;color:var(--text-soft);} .dispo-details[open] summary::after{content:'\2212';} .dispo-details .dd-body{padding:16px 0 20px;font-size:12.5px;color:var(--text-soft);line-height:1.7;} .dispo-details .dd-body img{width:100%;margin-top:12px;border-radius:var(--radius-sm);} /* ---------- Icons ---------- */ .icon{flex:none;display:inline-block;vertical-align:-2px;} .res-card__body .loc .icon{color:rgba(255,255,255,.75);} /* ---------- Utility ---------- */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease;} .reveal.in{opacity:1;transform:translateY(0);} .mt-0{margin-top:0;} .text-center{text-align:center;} .chip{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--teal-tint);color:var(--teal-dark);font-size:12.5px;font-weight:700;} /* ---------- Blog ---------- */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;} @media(max-width:960px){.blog-grid{grid-template-columns:repeat(2,1fr);}} @media(max-width:640px){.blog-grid{grid-template-columns:1fr;}} .blog-card{display:block;background:var(--bg-card);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);transition:transform .25s,box-shadow .25s;} .blog-card:hover{transform:translateY(-6px);} .blog-card img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;} .blog-card__placeholder{width:100%;aspect-ratio:16/10;background:linear-gradient(135deg,var(--teal-tint),var(--bg-card));} .blog-card__body{padding:22px 24px 26px;} .blog-card__date{font-size:12px;color:var(--text-soft);margin-bottom:8px;letter-spacing:.02em;} .blog-card__body h3{font-size:18px;margin-bottom:8px;} .blog-card__body p{font-size:14px;margin-bottom:14px;} .blog-card__cta{font-size:13px;font-weight:700;color:var(--accent);} .blog-article__breadcrumb{padding:130px 0 0;font-size:13.5px;color:var(--text-soft);} .blog-article__breadcrumb a{color:var(--text-soft);} .blog-article__breadcrumb a:hover{color:var(--accent);} .blog-article{max-width:760px;} .blog-article h1{margin-top:18px;font-size:clamp(28px,4vw,42px);} .blog-article__cover{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:8px;} .blog-article__cover img{width:100%;display:block;object-fit:cover;max-height:440px;} .blog-article__body{font-size:16.5px;line-height:1.85;color:var(--text-soft);} .blog-article__body p{margin:0 0 1.3em;} /* ---------- Liens (linktree) ---------- */ .page-hero--links{text-align:center;padding-bottom:60px;} .page-hero--links .container{max-width:640px;} .page-hero--links .eyebrow{justify-content:center;} .page-hero--links .eyebrow::before{display:none;} .links-list{display:flex;flex-direction:column;gap:14px;max-width:560px;margin:0 auto;} .link-card{display:flex;align-items:center;gap:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:18px 22px;box-shadow:var(--shadow-card);transition:transform .2s,box-shadow .2s,border-color .2s;} .link-card:hover{transform:translateY(-3px);border-color:var(--teal);box-shadow:var(--shadow-soft);} .link-card__icon{flex:none;width:44px;height:44px;border-radius:50%;background:var(--teal-tint);color:var(--teal-dark);display:flex;align-items:center;justify-content:center;} .link-card__label{flex:1;font-weight:700;font-size:15.5px;} .link-card__arrow{flex:none;color:var(--text-soft);} /* ---------- Vidéos (carrousel YouTube) ---------- */ .video-carousel{position:relative;} .video-carousel__track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding-bottom:6px;-webkit-overflow-scrolling:touch;} .video-carousel__track::-webkit-scrollbar{height:0;} .video-card{flex:0 0 320px;scroll-snap-align:start;background:var(--bg-card);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);cursor:pointer;transition:transform .25s,box-shadow .25s;} .video-card:hover{transform:translateY(-6px);} .video-card__thumb{position:relative;aspect-ratio:16/9;background:#111;} .video-card__thumb img{width:100%;height:100%;object-fit:cover;display:block;} .video-card__play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;} .video-card:hover .video-card__play{background:var(--teal);transform:scale(1.08);} .video-card__body{padding:18px 20px 22px;} .video-card__body h3{font-size:16.5px;margin-bottom:6px;} .video-card__body p{font-size:13.5px;color:var(--text-soft);} .video-carousel__arrow{position:absolute;top:calc(50% - 14px);width:44px;height:44px;border-radius:50%;border:1px solid var(--border);background:var(--bg-card);color:var(--text);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-soft);transition:background .2s;} .video-carousel__arrow:hover{background:var(--teal-tint);} .video-carousel__arrow--prev{left:-22px;} .video-carousel__arrow--next{right:-22px;} .video-carousel__arrow--prev .icon{transform:rotate(180deg);} @media(max-width:720px){ .video-carousel__arrow{display:none;} .video-card{flex-basis:78vw;} } .video-lightbox{position:fixed;inset:0;z-index:500;display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .2s;} .video-lightbox.is-open{opacity:1;pointer-events:auto;} .video-lightbox__backdrop{position:absolute;inset:0;background:rgba(10,14,14,.86);} .video-lightbox__frame{position:relative;width:100%;max-width:920px;} .video-lightbox__embed{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--radius-md);overflow:hidden;} .video-lightbox__embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;} .video-lightbox__close{position:absolute;top:-44px;right:0;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.08);color:#fff;cursor:pointer;font-size:16px;} .video-lightbox__close:hover{background:rgba(255,255,255,.22);} /* ========================================================= CTA sitewide : bulle flottante, barre d'actions rapides, modal « Prendre rendez-vous » universel ========================================================= */ .float-cta{ position:fixed;right:26px;bottom:calc(26px + env(safe-area-inset-bottom));width:56px;height:56px;border-radius:50%; background:var(--teal);z-index:190;display:flex;align-items:center;justify-content:center;cursor:pointer; box-shadow:0 10px 26px rgba(20,30,30,.28);transition:transform .2s;color:#fff; } .float-cta:hover{transform:scale(1.08);} .float-cta svg{width:23px;height:23px;} .float-card{ position:fixed;right:24px;bottom:96px;width:230px;background:var(--charcoal);border-radius:var(--radius-md); padding:20px;z-index:191;display:none;box-shadow:0 16px 34px rgba(0,0,0,.3); } .float-card.show{display:block;} .float-card .x{color:rgba(255,255,255,.6);font-size:13px;text-align:right;margin-bottom:10px;cursor:pointer;} .float-card p{color:#fff;font-size:14px;font-weight:600;margin:0 0 14px;line-height:1.35;} .float-btn{display:block;width:100%;text-align:center;padding:11px;border-radius:var(--radius-sm);font-size:12.5px;font-weight:700;margin-bottom:8px;text-decoration:none;} .float-btn:last-child{margin-bottom:0;} .float-btn.call{background:rgba(255,255,255,.1);color:#fff;} .float-btn.call:hover{background:rgba(255,255,255,.18);} .float-btn.wa{background:#25D366;color:#fff;} .float-btn.wa:hover{background:#20b859;} .mini-cta-bar{ display:none;position:fixed;left:0;right:0;bottom:0;z-index:192;background:var(--charcoal); padding:8px 8px calc(8px + env(safe-area-inset-bottom));gap:6px; } .mini-cta-bar a{ flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; color:#fdfdfd;font-size:10px;font-weight:700;letter-spacing:.2px;padding:8px 4px;min-height:44px; text-decoration:none;border-radius:10px; } .mini-cta-bar a svg{width:18px;height:18px;} .mini-cta-bar a.mid{background:#25D366;} @media (max-width:860px){ .mini-cta-bar{display:flex;} .float-cta,.float-card{display:none !important;} } .rdv-modal{position:fixed;inset:0;background:rgba(20,25,25,.68);z-index:300;display:none;align-items:center;justify-content:center;padding:24px;} .rdv-modal.open{display:flex;} .rdv-modal-box{background:var(--bg);border-radius:var(--radius-lg);max-width:420px;width:100%;padding:38px 32px;position:relative;text-align:center;box-shadow:var(--shadow-soft);} .rdv-modal-box h3{margin-bottom:8px;} .rdv-modal-box p{font-size:13.5px;color:var(--text-soft);margin-bottom:24px;line-height:1.6;} .rdv-modal-close{ position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--border-c); background:transparent;color:var(--text);font-size:14px;cursor:pointer; } .rdv-modal-close:hover{border-color:var(--teal);color:var(--teal);} .rdv-modal-actions{display:flex;flex-direction:column;gap:10px;} .rdv-modal-actions a{ display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border-c);border-radius:var(--radius-sm); font-size:13px;font-weight:600;color:var(--text);text-decoration:none;transition:border-color .2s,background .2s,color .2s; } .rdv-modal-actions a:hover{border-color:var(--teal);background:var(--teal-tint);color:var(--teal-dark);} .rdv-modal-actions a svg{width:18px;height:18px;flex:none;} /* ---------- Partage enrichi (pages résidence) ---------- */ .share-btn{ display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--text); border:1px solid var(--border-c);border-radius:var(--radius-sm);padding:11px 16px;cursor:pointer;background:transparent; } .share-btn:hover{border-color:var(--teal);color:var(--teal-dark);} .share-btn svg{width:16px;height:16px;}