/* ===== TYPOGRAPHY (Adobe Fonts) ===== */ /* Menu = Avenir Medium; Text = Avenir Light; Titles = Essonnes Display Regular */ html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} html, body{ height:100%; } body{font-family:"Avenir","Avenir Next","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,system-ui,sans-serif;font-weight:300;line-height:1.55;color:#111} h1,h2,h3,h4,h5,h6{font-family:"essonnes-display",serif;font-weight:400;letter-spacing:0;line-height:1.12} /* Menu principal */ /*.mainnav .menu>li>a{font-family:"Avenir","Avenir Next","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,system-ui,sans-serif;font-weight:500}*/ /* Footer headings */ .site-footer .footer-col h3,.site-footer .footer-follow h3{font-family:"essonnes-display",serif;font-weight:400} /* ====== TYPOGRAPHIE (Adobe Fonts) ====== Assure-toi d’avoir dans : */ :root{ /* Familles chargées par ton kit Adobe */ --ff-serif-display: "essonnes-display", serif; /* Essonnes Display (Light/Regular/Bold…) */ --ff-serif-headline: "essonnes-headline", serif; /* Optionnel si présent dans le kit */ /* Sans (Avenir) – mets ici le nom EXACT que te donne Adobe si différent */ --ff-sans: "Avenir", "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, system-ui, sans-serif; /* Poids */ --wt-avenir-light: 300; /* Avenir Light */ --wt-avenir-medium: 500; /* Avenir Medium (passe à 600 si c’est trop léger) */ --wt-ess-regular: 400; /* Essonnes Regular */ --wt-ess-bold: 700; /* Essonnes Bold */ } /* Lissage & base */ html{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body{ font-family: var(--ff-sans); font-weight: var(--wt-avenir-light); line-height: 1.55; } a h4, a h5, a h6, a p, a span, a div {     text-decoration: none !important; } /* Titres = Essonnes Display Regular (tu peux passer H1/H2 en Headline si tu l’as) */ h1,h2,h3,h4,h5,h6{ font-family: var(--ff-serif-display); font-weight: var(--wt-ess-regular); letter-spacing: 0; line-height: 1.12; } h2{ font-size: 2.5rem; } /* Option : Headline pour H1/H2 */ /* h1,h2{ font-family: var(--ff-serif-headline); font-weight: 400; } */ /* Menu principal = Avenir Medium (MAJUSCULES déjà gérées) */ p{ font-size: 0.875rem; } .mainnav .menu > li > a{ font-family: var(--ff-sans); font-weight: var(--wt-avenir-medium); } /* Boutons & CTA = Avenir Medium */ .btn, .btn-estimation, .btn-cta{ font-family: var(--ff-sans); font-weight: var(--wt-avenir-medium); } /* Topnav */ .topnav{ font-family: var(--ff-sans); font-weight: var(--wt-avenir-medium); } /* Footer titres */ .site-footer .footer-col h3, .site-footer .footer-follow h3{ font-family: var(--ff-serif-display); font-weight: var(--wt-ess-regular); } /* Helpers pratiques */ .avenir-light{ font-family: var(--ff-sans) !important; font-weight: var(--wt-avenir-light) !important; } .avenir-medium{ font-family: var(--ff-sans) !important; font-weight: var(--wt-avenir-medium) !important; } .ess-regular{ font-family: var(--ff-serif-display) !important; font-weight: var(--wt-ess-regular) !important; } .ess-bold{ font-family: var(--ff-serif-display) !important; font-weight: var(--wt-ess-bold) !important; } .ess-italic{ font-family: var(--ff-serif-display) !important; font-style: italic !important; } :root{--top-bg:#A9A3A2;--top-text:#0A203E;--top-icon:#0A203E;--top-icon-hover:#E4C276;--main-bg:#0A203E;--main-text:#fff;--main-muted:rgba(255,255,255,.85);--separator:rgba(255,255,255,.35);--accent:#E4C276;--ink:#0A203E;--shadow:0 24px 60px rgba(0,0,0,.25);--footer-bg:#0A203E;--footer-hr:rgba(255,255,255,.35)} html,body{height:100%} body.site{min-height:100%;display:flex;flex-direction:column} main.site-main{flex:1 0 auto} footer.site-footer{flex-shrink:0} .scroll-indicator{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:56px;height:56px;border-radius:50%;border:1px solid rgba(255,255,255,.7);background:rgba(0,0,0,.35);backdrop-filter:blur(2px);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3;animation:pulse 1.6s ease-in-out infinite;transition:transform .12s ease,background .2s ease,border-color .2s ease} .scroll-indicator i{font-size:22px} .scroll-indicator:hover{transform:translateX(-50%) translateY(-1px);background:rgba(0,0,0,.55);border-color:#fff} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.25)}70%{box-shadow:0 0 0 12px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}} .site-footer{background:var(--footer-bg);color:#fff} .footer-top{padding:36px 0 18px} .footer-brand img{height:38px;width:auto} .footer-follow h3{color:#E4C276;font-size:1.2rem;font-weight:700;margin:0 12px 0 0} .social-list{display:inline-flex;gap:10px;align-items:center} .social-list a{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#fff;color:#0A203E;text-decoration:none;transition:transform .15s ease,filter .15s ease} .social-list a:hover{transform:translateY(-2px);filter:brightness(.95)} .footer-hr{border:0;border-top:1px solid var(--footer-hr);margin:14px 0 28px} .footer-columns{padding-bottom:20px} .footer-col h3{color:#E4C276;font-size:1.2rem;font-weight:700;margin-bottom:.7rem} .footer-col ul, ul.footer-legal{list-style:none;margin:0;padding:0} .footer-col li+li{margin-top:.25rem} .footer-col a,.footer-legal a{color:#fff;text-decoration:none} .footer-col a:hover{color:var(--accent)} .footer-col p{margin:0 0 .35rem 0} .footer-bottom{margin-top:100px;padding:20px 0;border-top:1px solid var(--footer-hr);display:flex;align-items:center;justify-content:center;gap:.5rem;flex-wrap:wrap} .footer-legal{list-style:none;margin:0;padding:0;display:inline-flex;gap:.5rem;flex-wrap:wrap} .footer-legal::before{content:" - ";color:#fff;opacity:.85;margin:0 .25rem} .footer-legal li{white-space:nowrap} .footer-legal li+li::before{content:"-";margin:0 .5rem;color:#fff;opacity:.8} a:focus-visible,button:focus-visible{outline:2px dashed var(--accent);outline-offset:3px} /* ========================= HERO vidéo / image plein écran ========================= */ /* Important pour que 100vh soit propre */ html, body { height: 100%; margin: 0; padding: 0; } /* Section hero plein écran */ .hero { position: relative; overflow: hidden; width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); /* aucun espace au-dessus / en dessous */ margin-top: 0 !important; margin-bottom: 0 !important; /* plein écran */ min-height: 100vh; min-height: 100svh; background: #000; } /* Viewport dynamique encore plus fiable si dispo */ @supports (height: 100dvh) { .hero { min-height: 100dvh; } } /* Swiper occupe toute la zone hero */ .hero .swiper, .hero .swiper-wrapper, .hero .swiper-slide { width: 100%; height: 100%; min-height: 100%; padding: 0; } .hero .swiper-slide { position: relative; } /* Fond image + fond vidéo + mask prennent 100% de la slide */ .hero .image-layer, .hero .video-layer, .hero .mask { position: absolute; inset: 0; width: 100%; height: 100%; } /* IMAGE en fond */ .hero .image-layer { background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; transform-origin: center; will-change: transform; } /* Ken Burns sur les photos du HERO uniquement (slides marquées .has-image-only) */ .hero .swiper-slide.has-image-only .image-layer { transform-origin: center; } .hero .swiper-slide.has-image-only.swiper-slide-active .image-layer, .hero .swiper-slide.has-image-only.swiper-slide-duplicate-active .image-layer { animation: kenburns 20s ease-out forwards; } .hero .swiper-slide.has-image-only:not(.swiper-slide-active):not(.swiper-slide-duplicate-active) .image-layer { animation: none; } /* Effet Ken Burns : zoom léger mais visible */ @keyframes kenburns { 0% { transform: scale(1.02); } 100% { transform: scale(1.14); } } /* VIDÉO par-dessus l'image */ .hero .video-layer { z-index: 1; overflow: hidden; background: transparent; } /* IFRAME : plein écran type "background cover" + fade-in */ .hero .video-layer iframe { position: absolute; top: 50%; left: 50%; /* centré, rogne ce qui dépasse */ transform: translate(-50%, -50%); border: 0; display: block; background: #000; opacity: 0; /* caché au début, on laisse l'image derrière */ transition: opacity .6s ease; /* plein écran */ min-width: 100%; min-height: 100%; width: 100%; height: 100%; } /* MASK par-dessus image/vidéo */ .hero .mask { z-index: 2; background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.15)); } /* CAPTION au-dessus de tout */ .hero .caption { position: relative; z-index: 3; max-width: 900px; text-align: center; margin-inline: auto; } .hero .caption h1 { color: #fff; margin: 0 0 .3em; line-height: 1.1; font-weight: 800; font-size: clamp(28px, 5vw, 64px); text-shadow: 0 2px 16px rgba(0,0,0,.32); } .hero .caption h1, .hero .caption h2, .hero .caption h3, .hero .caption h4 { color: #fff; font-weight: 500; } .hero .caption p { color: rgba(255,255,255,.95); font-size: clamp(16px, 2.2vw, 22px); margin-bottom: 1.2rem; text-shadow: 0 1px 10px rgba(0,0,0,.25); } /* Bouton CTA */ .hero .btn-cta { display: inline-flex; align-items: center; justify-content: center; border-radius: 0; /* bouton rectangulaire */ border: 1px solid #E4C276; /* doré */ background: transparent; color: #E4C276; text-transform: uppercase; text-decoration: none; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 600; padding: 0.8rem 1.2rem; transition: all 0.25s ease; } .hero .btn-cta:hover { background: #E4C276; color: #0A203E; } /* Animations d’apparition des éléments de la caption */ .hero .caption > * { opacity: 0; transform: translateY(32px); filter: blur(6px); transition: opacity .7s ease-out, transform .7s ease-out, filter .7s ease-out; } .hero .swiper-slide.swiper-slide-active .caption > * { opacity: 1; transform: translateY(0); filter: blur(0); } /* Délais pour effet de cascade */ .hero .swiper-slide.swiper-slide-active .caption h1 { transition-delay: .10s; } .hero .swiper-slide.swiper-slide-active .caption p { transition-delay: .30s; } .hero .swiper-slide.swiper-slide-active .caption .btn-cta { transition-delay: .55s; } /* Pagination */ .hero .swiper-pagination-bullet { width: 10px; height: 10px; opacity: .6; background: #fff; } .hero .swiper-pagination-bullet-active { opacity: 1; } /* Boutons prev / next */ .hero .swiper-button-prev, .hero .swiper-button-next { color: #fff; width: 64px; height: 64px; border-radius: 50%; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; transition: background .2s ease, border-color .2s ease, transform .12s ease; } .hero .swiper-button-prev::after, .hero .swiper-button-next::after { font-size: 32px; font-weight: 900; } .hero .swiper-button-prev:hover, .hero .swiper-button-next:hover { background: rgba(0,0,0,.55); border-color: rgba(255,255,255,.85); transform: translateY(-1px); } .hero .swiper-button-prev { left: 18px; } .hero .swiper-button-next { right: 18px; } /* Responsive pour les flèches */ @media (max-width: 576px) { .hero .swiper-button-prev, .hero .swiper-button-next { width: 52px; height: 52px; } .hero .swiper-button-prev::after, .hero .swiper-button-next::after { font-size: 26px; } } /* Bouton scroll bas */ .scroll-indicator { position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%); width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.35); backdrop-filter: blur(2px); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 4; animation: pulse 1.6s ease-in-out infinite; transition: transform .12s ease, background .2s ease, border-color .2s ease; } .scroll-indicator i { font-size: 22px; } .scroll-indicator:hover { transform: translateX(-50%) translateY(-1px); background: rgba(0,0,0,.55); border-color: #fff; } /* Petite anim pour le scroll-indicator */ @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.4); } 70% { box-shadow: 0 0 0 18px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } /* PRELOADER vidéo dans le hero */ .hero .video-preloader { position: absolute; inset: 0; z-index: 2; /* au-dessus de la vidéo tant qu'elle est cachée */ display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, rgba(255,255,255,.12), rgba(0,0,0,.65)); transition: opacity .35s ease; } .hero .video-preloader.is-hidden { opacity: 0; pointer-events: none; } /* Petit spinner circulaire */ .hero .video-preloader-spinner { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255,255,255,.26); border-top-color: #ffffff; animation: hero-video-spinner 0.8s linear infinite; } @keyframes hero-video-spinner { to { transform: rotate(360deg); } } /* ========================= Hauteur réduite sur tablette & mobile ========================= */ /* Tablette / petit laptop : ~80% de la hauteur */ @media (max-width: 991.98px) { .hero { max-height: 80vh; } } /* Smartphone : ~70% de la hauteur */ @media (max-width: 575.98px) { .hero { max-height: 70vh; } } .hero.hero-dynamic { height: 100vh; /* fallback correct */ min-height: 100vh; /* pas svh, plus fiable */ } /* Quand le JS applique la hauteur calculée, il écrase celui-ci */ .hero.hero-dynamic.js-active { height: auto; min-height: 0; } /* ========================= GÉNÉRIQUE SECTIONS HOME ========================= */ /* ========================= 1) INTRO AGENCE (bandeau blanc) ========================= */ .intro-agency { background: #fff; padding: 3rem 0; } .intro-agency .row { max-width: 900px; /* recentre le bloc dans la page */ margin: 0 auto; align-items: center; } /* --- Colonne gauche --- */ .intro-agency-label h3 { text-transform: uppercase; letter-spacing: .18em; font-size: 1.2rem; /* plus petit */ color: #E4C276; line-height: 1.6; } /* --- Colonne droite (2e col de la row) --- */ .intro-agency .row > [class*="col-"]:nth-child(2) { position: relative; font-size: 0.875rem; /* un peu plus grand */ color: rgba(10, 32, 62, .9); max-width: 650px; } .intro-agency-text p{ font-size: 1.2rem; /* un peu plus grand */ text-align: justify; font-family:"essonnes-display",serif;font-weight:300; }.intro-agency-text p .cta-btn { font-family: var(--ff-sans); font-weight: var(--wt-avenir-medium); font-size: 0.875rem; /* un peu plus grand */ } /* Version desktop : bordure + espacement symétrique */ @media (min-width: 768px) { /* texte gauche aligné à droite + espace jusqu’à la barre */ .intro-agency .row > [class*="col-"]:first-child { text-align: right; padding-right: 2.5rem; /* distance texte gauche ↔ barre */ } /* texte droite aligné à gauche + espace depuis la barre */ .intro-agency .row > [class*="col-"]:nth-child(2) { text-align: left; padding-left: 2.5rem; /* distance barre ↔ texte droite */ } /* BORDURE VERTICALE pleine hauteur entre les 2 colonnes */ .intro-agency .row > [class*="col-"]:nth-child(2)::before { content: ""; position: absolute; left: 0; /* au bord de la colonne de droite */ top: -50px; bottom: 0; /* pleine hauteur de la colonne */ width: 2px; background: #E4C276; } } /* Texte de droite */ .intro-agency-text { margin-bottom: 1rem; } /* --- Bouton du bloc intro --- */ .intro-agency .cta-btn,.cta-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #E4C276; border-radius: 0; /* pas d’arrondi */ background: transparent; color: #0A203E; text-transform: uppercase; /* majuscules */ text-decoration: none; /* pas de soulignement */ text-align: center; padding: .8rem 2.2rem; font-weight: 600; letter-spacing: .06em; transition: all .25s ease; } .intro-agency .cta-btn:hover,.cta-btn:hover { background: #E4C276; color: #0A203E; } /* ========================= 2) PROPRIÉTÉS À LA UNE ========================= */ #feature-properties { position: relative; /*background-color: #0A203E; /* bleu foncé */ color: #fff; overflow: hidden; } .section-title { text-align: center; } /* H2 avec traits dorés sur une seule ligne */ .section-title h2 { display: inline-flex; align-items: center; justify-content: center; gap: 1.5rem; font-weight: 300; line-height: 1.4; margin-bottom: 0.8rem; white-space: nowrap; /* ➜ une seule ligne */ } /* Traits */ .section-title h2::before, .section-title h2::after { content: ""; flex: 0 0 60px; height: 1px; background-color: #E4C276; } /* Sous-titre éventuel dans le h2 */ .section-title h2 .section-subtitle { font-weight: 300; } /* Mobile : traits plus courts si besoin */ @media (max-width: 767.98px) { .section-title h2::before, .section-title h2::after { flex-basis: 40px; } } /* Couleur texte dans le bloc "Propriétés à la une" */ #feature-properties .section-title h2 { color: #fff; } /* Le conteneur doit être relatif pour que ::before se positionne bien */ #feature-properties { position: relative; z-index: 0; } /* Voile uniquement quand la classe .has-bg-image est présente */ #feature-properties.has-bg-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.65) 100% ); opacity: 0.85; pointer-events: none; z-index: 1; } /* Et pour que le contenu passe au-dessus du voile */ #feature-properties .container, #feature-properties .container-fluid { position: relative; z-index: 2; } /* On remonte le contenu par-dessus le voile */ #feature-properties > .container, #feature-properties > .container-fluid { position: relative; z-index: 1; } /* ------- Titre / texte du haut ------- */ #feature-properties .section-title { text-align: center; max-width: 760px; margin: 0 auto 2.5rem; color: #fff; } #feature-properties .section-title h2 { line-height: 1.4; margin-bottom: 0.8rem; } #feature-properties .section-title p, #feature-properties .section-title > *:not(h2):not(p.text-center) { color: rgba(255, 255, 255, 0.82); font-size: 0.875rem; } /* Bouton du bloc "Propriétés à la une" */ #feature-properties .cta-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 0; /* bouton rectangulaire */ border: 1px solid #E4C276; /* doré */ background: transparent; color: #E4C276; text-transform: uppercase; text-decoration: none; letter-spacing: 0.08em; font-size: 0.875rem; font-weight: 600; padding: 0.8rem 1.2rem; transition: all 0.25s ease; } #feature-properties .cta-btn i { font-size: 0.9rem; } #feature-properties .cta-btn:hover { background: #E4C276; color: #0A203E; } /* ============================================ LISTING PRESTIGE (mise en avant 50/50) ============================================ */ .property-item--prestige { display: flex; flex-wrap: wrap; } .property-item--prestige .property-image--featured, .property-item--prestige .property-content--featured { flex: 0 0 50%; max-width: 50%; } /* Inversion gauche/droite sur les lignes paires */ .property-item--prestige.property-item--prestige-reverse .property-image--featured { order: 2; } .property-item--prestige.property-item--prestige-reverse .property-content--featured { order: 1; } @media (max-width: 991.98px) { .property-item--prestige .property-image--featured, .property-item--prestige .property-content--featured { flex: 0 0 100%; max-width: 100%; } } /* ============================================ SWIPER PRESTIGE (slider images du prestige) ============================================ */ .property-prestige-swiper { position: relative; width: 100%; height: 100%; overflow: hidden; /* empêche de voir la slide suivante */ } .property-prestige-swiper .swiper-wrapper { height: 100%; display: flex; /* garantit que Swiper gère une slide à la fois */ } .property-prestige-swiper .swiper-slide { flex: 0 0 100%; /* 1 seule slide visible */ width: 100% !important; /* Swiper a parfois besoin d’un width forcé */ flex-shrink: 0; } .property-prestige-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } /* ============================================ FLÈCHES DU SWIPER PRESTIGE ============================================ */ .property-prestige-prev, .property-prestige-next { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; } .property-prestige-prev::before, .property-prestige-next::before { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.875rem; color: #fff; } .property-prestige-prev::before { content: "\f104"; } /* angle-left */ .property-prestige-next::before { content: "\f105"; } /* angle-right */ .property-prestige-prev { left: 10px; } .property-prestige-next { right: 10px; } .property-prestige-prev:hover, .property-prestige-next:hover { background: #E4C276; border-color: #E4C276; } .property-prestige-prev:hover::before, .property-prestige-next:hover::before { color: #0A203E; } /* ========================= CARROUSEL & CARTES PROPRIÉTÉS ========================== */ /* ------- Slider / Swiper (carrousel de biens) ------- */ .properties-slider { position: relative; padding: 0.5rem 0 2rem; /* petit espace sous le slider, pas énorme */ } /* Dans ce bloc, on force une hauteur naturelle (pas de height:100%) */ #feature-properties .properties-slider.swiper, #feature-properties .properties-slider .swiper-wrapper, #feature-properties .properties-slider .swiper-slide { height: auto; } /* Slides : simple bloc, pas de flex ici */ .properties-slider .swiper-slide { padding: 0.5rem 0.3rem; display: block; } /* Cartes dans le carrousel : hauteur naturelle, pas étirée */ .properties-slider .swiper-slide .property-item { display: flex; flex-direction: column; width: 100%; height: auto; /* pas de height:100% */ margin: 15px auto; } /* Flèches de navigation Swiper */ .properties-slider .prev, .properties-slider .next { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.7); display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 5; background: rgba(10, 32, 62, 0.6); backdrop-filter: blur(4px); transition: all 0.2s ease; } .properties-slider .prev { left: 10px; } .properties-slider .next { right: 10px; } .properties-slider .prev i, .properties-slider .next i { color: #fff; font-size: 1rem; } .properties-slider .prev:hover, .properties-slider .next:hover { background: #E4C276; border-color: #E4C276; } .properties-slider .prev:hover i, .properties-slider .next:hover i { color: #0A203E; } /* Responsive flèches sur mobile */ @media (max-width: 767.98px) { #feature-properties .section-title { margin-bottom: 1.8rem; padding: 0 1rem; } .property-item { max-width: 100%; } .properties-slider .prev, .properties-slider .next { width: 36px; height: 36px; top: auto; bottom: 0.3rem; transform: none; } .properties-slider .prev { left: 50%; margin-left: -44px; } .properties-slider .next { right: 50%; margin-right: -44px; } } /* ========================= CARTE PROPRIÉTÉ STANDARD ========================== */ /*.property-item { background: #fff; color: #0A203E; box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55); margin: 15px auto; overflow: hidden; }*/ .property-item { background: #fff; color: #0A203E; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); margin: 15px auto !important; overflow: hidden; } .properties_carousel .property-item { max-width: 100%; } /* Image principale */ .property-image { position: relative; overflow: visible; /* pour laisser dépasser le badge */ } .property-image img { width: 100%; height: 300px; object-fit: cover; display: block; transform: scale(1.02); transition: transform 0.4s ease; } /* Zoom léger au survol de la carte */ .property-item:hover .property-image img { transform: scale(1.08); } /* Badge status (Exclusivité, Vendu…) */ .property-image .label-status { position: absolute; left: 50%; bottom: -20px; /* à cheval sous l'image */ transform: translateX(-50%); z-index: 10; display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 1.2rem; height: 40px; line-height: 1; font-size: 0.85rem; font-weight: 700; white-space: nowrap; } .property-image .label-status.dark_blue_bg,.property-content--featured .label-status.dark_blue_bg { background-color: #00112E; color: #fff; } /* Couleur actuelle pour Exclusif (déjà utilisée) */ .label-exclu { background-color: #0A203E; /* bleu foncé Esprit Immo */ } /* Sous compromis → orange */ .label-compromis { background-color: #E67E22; color: #fff; } /* Sous offre → violet */ .label-sous-offre { background-color: #8E44AD; color: #fff; } /* Vendu → vert */ .label-vendu { background-color: #C0392B; color: #fff; } /* Viager → bordeaux / rouge foncé */ .label-viager { background-color: #27AE60; color: #fff; } /* ===== Overlay + bouton "+" ===== */ .property-overlay-banner { position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.65) 100% ); opacity: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.25s ease; z-index: 1; } .property-item--prestige .property-overlay-banner { pointer-events: none; } .property-overlay-banner ul { list-style: none; margin: 0; padding: 0; } .property-overlay-banner li { display: inline-block; } /* Un seul bouton circulaire */ .property-overlay-banner ul li > a { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; align-items: center; justify-content: center; background: #fff; color: #0A203E; text-decoration: none; font-size: 1.25rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4); } .property-item:hover .property-overlay-banner { opacity: 1; } /* ===== Contenu texte de la carte ===== */ .property-content { padding: 2.2rem 1.8rem 2rem; padding-top: 2.4rem; /* pour ne pas manger le badge */ text-align: center; display: flex; flex-direction: column; align-items: center; } /* On centre aussi le contenu de la featured */ .property-content, .property-content--featured { text-align: center; display: flex; flex-direction: column; align-items: center; } .property-content-body, .property-content-footer { width: 100%; } .property-content-footer { margin-top: 1.2rem; } /* Ref en doré */ .property-content .subtitle { display: block; margin-bottom: 1rem; margin-top: 1rem; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: #0A203E; } /* Titre sans trait */ .property-title { position: static; font-size: 1.5rem; margin: 0 0 0.6rem; padding-bottom: 0; } .property-title a { color: #0A203E; text-decoration: none; } .property-title a:hover { text-decoration: underline; } .property-title::after { content: none; } /* Descriptif */ .property-excerpt { margin: 0; font-size: 0.9rem; color: rgba(10, 32, 62, 0.8); } /* Prix + soulignement centré sous le prix */ .property-price { position: relative; display: inline-block; margin-top: 0; margin-bottom: 0.6rem; padding-bottom: 0.7rem; font-size: 1.2rem; font-weight: 700; color: #E4C276; text-align: center; } .property-price::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 80px; height: 2px; background-color: #0A203E; transform: translateX(-50%); } /* Infos pièces / chambres / surface */ .property-meta { font-size: 0.9rem; color: rgba(10, 32, 62, 0.85); margin-bottom: 1.1rem; } .property-meta-main { margin-bottom: 0.2rem; } /* Bouton DÉCOUVRIR */ .property-cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 220px; border: 1px solid #E4C276; border-radius: 0; background: transparent; color: #0A203E; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 600; padding: 0.75rem 1rem; text-decoration: none; transition: all 0.25s ease; } .property-cta:hover { background: #E4C276; color: #0A203E; } /* ========================= FEATURED PROPERTY (1ère annonce) ========================== */ .property-item--featured { display: flex; flex-wrap: wrap; background: #fff; color: #0A203E; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12); margin: 15px auto; overflow: hidden; } /* Image = 2/3 */ .property-image--featured { position: relative; flex: 0 0 66.666%; max-width: 66.666%; overflow: hidden; } .property-image--featured img { width: 100%; height: 100%; object-fit: cover; } /* Empêche l'image du slider prestige de déborder */ .property-prestige-swiper .swiper-slide img { transform: none !important; height: 100% !important; width: 100% !important; object-fit: cover; } /* Badge sur l’image featured */ /*.property-image--featured .label-status { position: absolute; right: 0; bottom: 50%; transform: translateX(-50%); z-index: 10; /*display: inline-flex; align-items: center; justify-content: center;*/ /* padding: 0.35rem 1.5rem; height: 40px; line-height: 1; border-radius: 999px; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; white-space: nowrap; }*/ /* POSITION PAR DÉFAUT = À DROITE */ .property-image--featured .label-status, .property-content--featured .label-status { position: absolute; top: 40px; right: 90px; left: auto; transform: translateX(50%); /* meilleur centrage côté droit */ z-index: 10; display: inline-flex; align-items: center; justify-content: center; padding: 0.35rem 1.2rem; height: 40px; font-size: 0.85rem; font-weight: 700; white-space: nowrap; } /* MODE REVERSE = BADGE À GAUCHE */ .property-item--prestige-reverse .label-status, .property-content--featured.reverse .label-status { left: 90px; right: auto; transform: translateX(-50%); /* centrage côté gauche */ } /* Colonne texte = 1/3 */ .property-content--featured { flex: 0 0 33.333%; max-width: 33.333%; padding: 2.2rem 2.4rem 2.4rem; display: flex; flex-direction: column; justify-content: center; text-align: left; align-items: center; } .property-item--featured.standard .property-content--featured { text-align: center; } .property-item--featured.standard .property-content--featured .property-title::before { content: ""; position: absolute; left: 0; top: 0.15em; bottom: 0.15em; width: 0px; background: transparent; border-radius: 0px; } .property-content--featured .subtitle { margin-bottom: 0.4rem; } .property-content--featured .property-title{ font-size: 1.8rem; margin: 0 0 0.8rem; position: relative; padding-left: 14px; /* espace pour la barre */ } .property-content--featured .property-title::before{ content: ""; position: absolute; left: 0; top: 0.15em; /* ajuste l’alignement vertical */ bottom: 0.15em; /* ajuste la hauteur */ width: 2px; background: #E4C276; /* or */ border-radius: 2px; /* optionnel */ } .property-content--featured .property-content-body { width: 400px; } .property-item--featured.standard .property-content--featured .property-content-body { width: 100%; } .property-item--featured.standard .property-content--featured .property-content-body h4 { margin-bottom:15px; font-weight: 200 ; } .property-content--featured .property-excerpt { font-size: 0.95rem; margin-bottom: 0.8rem; } .property-content--featured .property-price { font-size: 1.3rem; margin-top: 0.7rem; } .property-content--featured .property-meta { margin-bottom: 1rem; } .property-cta--featured { max-width: 260px; justify-content: center; } /* Responsive : featured repasse en pile */ @media (max-width: 991.98px) { .property-item--featured { flex-direction: column; } .property-image--featured, .property-content--featured { flex: 0 0 100%; max-width: 100%; } .property-content--featured { padding: 1.8rem 1.4rem 2rem; } .property-cta--featured { margin-left: auto; margin-right: auto; } } /* ========================= CARTE CTA SANS PHOTO (bloc bleu) ========================== */ .property-item--cta { background-color: #00112E; color: #ffffff; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; } .property-cta-inner { padding: 2.2rem 1.8rem 2.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; flex: 1 1 auto; width: 100%; } .property-item--cta .subtitle { color: #E4C276; } .property-cta-title { font-size: 1.25rem; margin: 0 0 0.9rem; line-height: 1.3; } .property-cta-text { font-size: 0.875rem; margin: 0 0 1.4rem; color: rgba(255, 255, 255, 0.85); } .property-cta--invert { background-color: #E4C276; color: #00112E; border-color: #E4C276; } .property-cta--invert:hover { background-color: transparent; color: #E4C276; } /* ========================= LISTING PAGE : HAUTEURS ÉGALES ========================== */ /* Colonnes 3 par ligne (annonces classiques + CTA) = même hauteur + espace vertical */ .row.resultListing > .col-lg-4, .row.resultListing > .col-md-4, .row.resultListing > .col-sm-6 { display: flex; margin-bottom: 2rem !important; /* espace entre les lignes */ } /* Chaque .property-item remplit sa colonne (uniquement dans le listing) */ .row.resultListing > .col-lg-4 > .property-item, .row.resultListing > .col-md-4 > .property-item, .row.resultListing > .col-sm-6 > .property-item { display: flex; flex-direction: column; width: 100%; height: 100%; } /* Corrige la hauteur trop grande de la section feature-properties */ #feature-properties { min-height: auto !important; /* ou 0, les deux vont bien */ } /* Et on s'assure que Swiper ne rajoute pas de hauteur en plus */ #feature-properties .swiper, #feature-properties .swiper-wrapper, #feature-properties .swiper-slide { } /* ========================= CARROUSELS DE BIENS (Swiper) ========================== */ /* Même style de base pour tous les sliders de biens */ .properties-slider, .properties-slider2, .properties-slider3 { position: relative; padding: 0.5rem 0 2rem; /* petit espace sous le carrousel */ } /* On laisse le wrapper suivre la hauteur réelle des slides */ .properties-slider .swiper-wrapper, .properties-slider2 .swiper-wrapper, .properties-slider3 .swiper-wrapper { height: auto; /* au lieu de 100% */ align-items: stretch; /* les slides prennent toutes la même hauteur */ } /* Chaque slide s’adapte au contenu, sans s’étirer en hauteur */ .properties-slider .swiper-slide, .properties-slider2 .swiper-slide, .properties-slider3 .swiper-slide { height: auto; padding: 0.5rem 0.3rem; display: flex; /* pour que la carte remplisse la slide */ } /* La carte occupe toute la slide, mais ne dépasse pas */ .properties-slider .swiper-slide > .property-item, .properties-slider2 .swiper-slide > .property-item, .properties-slider3 .swiper-slide > .property-item { flex: 1 1 auto; height: auto; /* surtout PAS 100% ici */ margin: 0 auto; } /* ============================================ VIDÉO DANS LES CARTES : même taille que les photos (ne change rien d'autre : badges, hover, etc.) ============================================ */ /* STANDARD (cartes 3 colonnes) : on donne à la vidéo EXACTEMENT la même hauteur que .property-image img (220px) */ .property-image .property-media--video{ position: relative; width: 100%; height: 300px; /* = hauteur de .property-image img */ overflow: hidden; background: #000; } /* si ton helper encapsule dans .video-container */ .property-image .property-media--video .video-container{ position: absolute; inset: 0; width: 100%; height: 100%; } .property-image .property-media--video iframe{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; display: block; background: #000; /* "cover" : remplit toute la zone comme une image object-fit */ width: 100%; height: 100%; min-width: 177.78%; /* ≈ 16/9 cover */ min-height: 100%; } /* FEATURED / PRESTIGE : ici, ta zone image est déjà en height:100% dans .property-image--featured donc on fait juste la vidéo en 100% de la zone */ .property-image--featured .property-media--video{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; background: #000; } .property-image--featured .property-media--video .video-container{ position: absolute; inset: 0; width: 100%; height: 100%; } .property-image--featured .property-media--video iframe{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; display: block; background: #000; width: 100%; height: 100%; min-width: 177.78%; min-height: 100%; } /* ========================================================= FIX RESPONSIVE : images/vidéos invisibles (featured + standard) ========================================================= */ /* ========================================================= PRESTIGE : sur mobile, toujours media au-dessus du contenu (désactive l'alternance reverse en responsive) ========================================================= */ @media (max-width: 991.98px) { /* le container prestige doit repasser en colonne */ .property-item--prestige{ display: flex; flex-direction: column !important; } /* annule toute inversion (row-reverse / order) */ .property-item--prestige.property-item--prestige-reverse{ flex-direction: column !important; } /* force l'ordre : image/vidéo d'abord */ .property-item--prestige .property-image{ order: 1 !important; width: 100% !important; } /* puis le contenu */ .property-item--prestige .property-content{ order: 2 !important; width: 100% !important; } /* si tu as une classe reverse côté contenu, on neutralise aussi */ .property-item--prestige .property-content.reverse, .property-item--prestige .property-content--featured.reverse{ order: 2 !important; } /* 1) STANDARD cards (listing classique) */ .property-item .property-image{ position: relative; height: 260px; /* hauteur visible en responsive */ min-height: 260px; overflow: hidden; } /* 2) FEATURED (standard featured + prestige featured) */ .property-image--featured{ position: relative; height: 320px; min-height: 320px; overflow: hidden; } /* 3) Images: toujours couvrir la zone */ .property-item .property-image img, .property-image--featured img{ width: 100%; height: 100% !important; object-fit: cover; display: block; } /* 4) Slider prestige doit remplir la zone (si présent) */ .property-prestige-swiper{ height: 100%; min-height: 100%; } .property-prestige-swiper .swiper-wrapper, .property-prestige-swiper .swiper-slide{ height: 100%; } .property-prestige-swiper img{ width: 100%; height: 100% !important; object-fit: cover; } /* 5) VIDEO: même hauteur/largeur que la photo (standard + featured) */ .property-item .property-image .property-media--video, .property-image--featured .property-media--video{ position: absolute; inset: 0; width: 100%; height: 100%; min-height: 100%; overflow: hidden; background: #000; } .property-item .property-image .property-media--video .video-container, .property-image--featured .property-media--video .video-container{ position: absolute; inset: 0; width: 100%; height: 100%; } /* iframe cover (ratio 16/9) */ .property-item .property-image .property-media--video iframe, .property-image--featured .property-media--video iframe{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: 0; width: 100%; height: 100%; min-width: 177.78%; /* 16/9 => couvre en largeur */ min-height: 100%; } } @media (max-width: 575.98px) { .property-item .property-image{ height: 220px; min-height: 220px; } .property-image--featured{ height: 260px; min-height: 260px; } .property-content-body, .property-content-footer { width: 100% !important; } } /* La première annonce en col-12 n'est pas touchée par ces règles, elle garde donc sa hauteur spécifique (mise en avant). */ /* Titre + texte + bouton déjà OK, on les laisse tels qu'on les a définis avant */ /* ========================= SECTION "VOUS RECHERCHEZ" ========================= */ .home-search { background-color: #0A203E; color: #fff; padding: 2.8rem 0 3.2rem; } .home-search .home-section-title { text-align: center; margin-bottom: 2rem; } .home-search .search-title { font-size: 1.4rem; font-weight: 600; margin: 0; color: #fff; } /* Labels au-dessus des selects */ .home-search-form .form-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.11em; color: rgba(255, 255, 255, 0.8); margin-bottom: 0.35rem; font-family:"essonnes-display",serif;font-weight:300 } /* Selects "flat" avec seulement une bordure bottom */ .home-search-form .search-field { background: transparent; font-family:"essonnes-display",serif;font-weight:300; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.5); border-radius: 0; color: #fff; padding-left: 0; padding-right: 0; padding-bottom: 0.4rem; font-size: 0.95rem; } .home-search-form .btn.dropdown-toggle{ border: 0 !important; } /* Retirer l’ombre Bootstrap au focus */ .home-search-form .search-field:focus { box-shadow: none; border-color: #E4C276; /* doré au focus */ } /* Couleur du texte dans la liste déroulante (selon navigateur) */ .home-search-form .search-field option { color: #0A203E; /* texte foncé dans la dropdown */ font-family:"essonnes-display",serif;font-weight:300; } /* Bouton Rechercher */ .home-search-form .btn-search { border-radius: 0; background-color: transparent; color: #E4C276; border: 1px solid #E4C276; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 600; padding: 0.8rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; text-decoration: none; } .home-search-form .btn-search i { font-size: 0.9rem; } .home-search-form .btn-search:hover { background-color: transparent; color: #0A203E; background-color: #E4C276; } /* Responsive : un peu d’air en mobile */ @media (max-width: 767.98px) { .home-search { padding: 2.2rem 0 2.6rem; } } .home-search-form .bootstrap-select button, .home-search-form input { padding: 14px 15px 16px 15px !important; height: 54px; line-height: 54px; border-radius: 0; margin: 0 !important; background-color: transparent; color: #FFF !important; font-family:"essonnes-display",serif;font-weight:300; } .home-search-form input { border: none; text-transform: uppercase; color: #FFF !important; font-weight: 300; font-size: 14px; } input::placeholder { color: #FFF !important; } .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) { width: 100% !important; } .home-search-form .dropdown-toggle::after { right: 12px; top: 27px; position: absolute; } .home-search-form .btn-light:hover { color: #777; } .home-search-form .bootstrap-select .dropdown-toggle .filter-option { position: absolute; top: 0; padding: 0 12px; } .section-title2 { text-align: center; } .section-title2 h1 { position: relative; display: inline-block; font-weight: 500; line-height: 1.4; margin-bottom: 2.4rem !important; white-space: nowrap; /* pour rester sur une seule ligne */ padding-bottom: 0.6rem; } /* H2 avec un seul trait doré en dessous (≈ 100px) */ .section-title2 h2 { position: relative; display: inline-block; font-weight: 400; line-height: 1.4; margin-bottom: 1.8rem !important; white-space: nowrap; /* pour rester sur une seule ligne */ padding-bottom: 0.6rem; } .section-title2 h1::after,.section-title2 h2::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100px; /* largeur du soulignement */ height: 1px; background-color: #E4C276; transform: translateX(-50%); } /* Optionnel : adapter un peu sur mobile */ @media (max-width: 576px) { .section-title2 h2::after { width: 80px; } } /* ========================= SECTION LIEUX DE VIE / VILLES ========================= */ .home-towns { background: #fff; padding: clamp(3rem, 7vh, 4rem) 0; } /* Titre de section .home-towns .home-section-title { text-align: center; margin-bottom: 2.5rem; } .home-towns .home-section-title h2 { font-size: 1.6rem; font-weight: 600; color: #0A203E; margin-bottom: 0.6rem; } */ .home-towns .towns-intro { margin: 0 auto; max-width: 640px; font-size: 0.98rem; color: rgba(10, 32, 62, 0.8); } /* Grille */ .home-towns-grid { margin-top: 1.5rem; } .town-card-link { text-decoration: none; color: inherit; display: block; } /* Carte = uniquement la photo avec overlay */ .town-card { position: relative; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18); height: 100%; } /* Photo qui prend tout l’espace de la carte */ .town-card-img { position: relative; height: 260px; /* tu peux ajuster la hauteur ici */ } .town-card-img img { width: 100%; height: 100%; object-fit: cover; /* la photo remplit entièrement la zone */ display: block; transform: scale(1.02); transition: transform 0.45s ease; } /* Voile + overlay */ .town-card-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.55) 100%); opacity: 0.7; transition: opacity 0.35s ease; } /* Overlay centré (titre + bouton) */ .town-card-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; /* centrage vertical */ text-align: center; /* centrage horizontal */ padding: 1.5rem; z-index: 2; } .town-card-overlay h4 { font-size: 1.5rem; margin: 0 0 0.6rem; color: #fff; } /* Bouton éventuel sur la photo */ .town-card-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.45rem 1.1rem; border: 1px solid #E4C276; color: #E4C276; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } .town-card-btn i { font-size: 0.85rem; } /* Hover : zoom + voile un peu plus marqué */ .town-card:hover .town-card-img img { transform: scale(1.08); } .town-card:hover .town-card-img::after { opacity: 0.9; } /* Responsive */ @media (max-width: 767.98px) { .home-towns { padding: 2.4rem 0 2.8rem; } .town-card-img { height: 300px; } } /* ========================= SECTION OU SELON VOS ENVIES ========================= */ .activities-widget { background-color: #fff; padding: clamp(3rem, 7vh, 4rem) 0; } /* Barre sous le titre principal */ .activities-widget .bar { width: 60px; height: 2px; background-color: #E4C276; margin: 0.6rem auto 1.4rem; } /* Carte */ .activity-card { position: relative; overflow: hidden; height: 480px; /* format portrait */ border-radius: 0; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.15); } .activity-overlay.bg_white{ padding: 60px; } /* Photo d’arrière-plan centrée */ .activity-card .activity-bg { position: absolute; inset: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; z-index: 1; transition: transform 0.5s ease, filter 0.5s ease; } /* Overlay pour centrer le texte */ .activity-card .activity-overlay { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; /* centrage vertical */ text-align: center; background: rgba(10, 32, 62, 0.25); /* léger voile pour lisibilité */ } .activity-card .activity-overlay.bg_white{ background: rgba(255, 255, 255, 1); /* léger voile pour lisibilité */ } /* Titre sur la photo */ .activity-card .activity-overlay h4 { color: #fff; font-size: 1.8rem; font-weight: 500; position: relative; margin-bottom: 1.6rem; letter-spacing: 0.05em; } .activity-card .activity-overlay.bg_white h4 { color: #0A203E; } /* Soulignement doré sous le titre */ .activity-card .activity-overlay h4::after { content: ""; display: block; width: 50px; height: 2px; background-color: #E4C276; margin: 0.6rem auto 0; } /* Bouton (facultatif) */ .activity-card .activity-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem 1.2rem; border: 1px solid #E4C276; color: #E4C276; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; transition: all 0.3s ease; text-decoration: none; } .activity-card .activity-overlay.bg_white .activity-btn { color: #0A203E; } .activity-card .activity-btn:hover { background-color: #E4C276; color: #0A203E; } /* Hover image */ .activity-card:hover .activity-bg { transform: scale(1.08); filter: brightness(0.8); } /* Responsive */ @media (max-width: 991.98px) { .activity-card { height: 380px; } } @media (max-width: 575.98px) { .activity-card { height: 320px; } } /* ========================= TITRE SECTION-TITLE3 Bordure verticale dorée à gauche ========================= */ .section-title3 { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 2rem; } .section-title3 h2 { position: relative; font-size: 2rem; font-weight: 400; color: #0A203E; line-height: 1.3; margin: 0; padding-left: 1.2rem; /* espace pour la barre */ } /* Barre dorée verticale à gauche */ .section-title3 h2::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background-color: #E4C276; border-radius: 2px; } /* Variante sur fond foncé (ex: section sombre) */ .dark-section .section-title3 h2 { color: #fff; } /* Responsive : taille du texte ajustée sur mobile */ @media (max-width: 767.98px) { .section-title3 h2 { font-size: 1.3rem; } } /* ========================= 6) NEWSLETTER + RÉSEAUX SOCIAUX ========================= */ /* Section globale */ .home-newsletter { background: #EFEDE9; /* fond gris très clair, comme sur le montage */ padding: 3.2rem 0; } /* ===== Colonne gauche : carte bleu foncé ===== */ .newsletter-card { background: #0A203E; color: #fff; padding: 6.6rem 4rem; max-width: 95%; box-shadow: 0 18px 55px rgba(0, 0, 0, 0.25); } .newsletter-card-inner { position: relative; display: flex; flex-direction: column; /* permet d’aligner le bouton à droite */ } /* Titre sur 2 lignes : "Inscrivez-vous / à notre alerte E.Mail" */ .newsletter-card-title { position: relative; font-size: 2.2rem; line-height: 1.4; margin: 0 0 1.8rem; padding-left: 1.8rem; /* espace pour la flèche */ align-self: flex-start; /* reste bien collé à gauche */ } /* Flèche triangle doré à gauche du titre */ .newsletter-card-title::before { content: ""; position: absolute; left: 0; top: 0.85rem; width: 0; height: 0; border-style: solid; /* triangle droit : haut / droite / bas / gauche */ border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #E4C276; } /* Bouton "Je m’inscris", aligné à droite */ .newsletter-card-btn { align-self: flex-end; /* aligne le bouton à droite dans la carte */ display: inline-flex; align-items: center; justify-content: center; padding: 0.6rem 1.4rem; border-radius: 0; border: 1px solid #fff; color: #fff; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 600; text-decoration: none; transition: all 0.25s ease; } .newsletter-card-btn:hover { background: #E4C276; border-color: #E4C276; color: #0A203E; } /* ===== Colonne droite : texte + réseaux sociaux ===== */ .newsletter-right { text-align: left; } .newsletter-right-title { font-size: 1.6rem; font-weight: 500; color: #0A203E; margin-bottom: 0.9rem; } .newsletter-right-text { font-size: 0.95rem; color: rgba(10, 32, 62, 0.8); max-width: 440px; margin-bottom: 1.5rem; } /* Bloc "Suivez-nous" + icônes */ /* Bloc "Suivez-nous" + icônes */ .newsletter-social { display: inline-flex; flex-direction: column; /* label au-dessus des icônes */ align-items: flex-start; gap: 0.45rem; /* espace entre le texte et les icônes */ } .newsletter-social-label { font-size: 1rem; /* légèrement plus grand */ font-weight: 600; /* un peu plus gras */ color: #0A203E; } /* Les icônes restent en ligne */ .newsletter-social-links { display: flex; align-items: center; gap: 0.6rem; } .newsletter-social-links a { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #0A203E; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: all 0.2s ease; background-color:#0A203E; } .newsletter-social-links a i { font-size: 0.95rem; color: #FFF; } .newsletter-social-links a:hover { background: #0A203E; } .newsletter-social-links a:hover i { color: #fff; } /* ===== Responsive ===== */ @media (max-width: 991.98px) { .home-newsletter { padding: 2.6rem 0 3rem; } .newsletter-card { margin: 0 auto 2rem; } .newsletter-right { text-align: center; } .newsletter-right-text { margin-left: auto; margin-right: auto; } .newsletter-social { justify-content: center; } } .brown_bg{ background-color :#a9a3a2 !important; } .mt_n100{ margin-top: -100px !important; } .text-photo-alt ul { margin: 10px 0 10px 10px !important; list-style: none; } .text-photo-alt ul li::before,.about-default ul li::before { color: #E4C276 !important; margin-left: -1.2em; } /* ===== Sidebar filtres annonces ===== */ /* ===== Toolbar listing (bouton + compteur/tri) ===== */ .listing-toolbar { position: relative; min-height: 60px; } /* Bouton "Affinez votre recherche" */ .listing-toolbar .btn-filter-advanced { border-radius: 0; border: 1px solid #E4C276; background: transparent; color: #0A203E; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 600; padding: 0.7rem 1.2rem; display: inline-flex; align-items: center; gap: 0.35rem; } .listing-toolbar .btn-filter-advanced:hover { background: #E4C276; color: #0A203E; } /* Desktop : bouton centré, bloc "X annonces + tri" à droite */ @media (min-width: 992px) { .listing-toolbar { /* tu peux garder les classes Bootstrap sur le
, on force la mise en page avec position:absolute */ min-height: 70px; } .listing-toolbar .btn-filter-advanced { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .listing-toolbar #searchBoxTop { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } } /* ===== Sidebar filtres annonces (à GAUCHE) ===== */ .filters-sidebar { position: fixed; left: -480px; /* caché à gauche */ right: auto; top: 0; width: 440px; max-width: 90vw; height: 100vh; background: #0A203E; color: #fff; z-index: 1050; box-shadow: 18px 0 40px rgba(0,0,0,.45); transition: left .3s ease; padding: 1.5rem 1.6rem 2rem; } .filters-sidebar.is-open { left: 0; } .filters-sidebar-inner { height: 100%; overflow-y: auto; } .filters-title { font-size: 1.2rem; margin: 0 0 1.4rem; } /* Bouton de fermeture */ .filters-close { border: 0; background: transparent; color: #fff; font-size: 1.1rem; position: absolute; top: 1rem; right: 1.2rem; } /* Fond assombri derrière */ .filters-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1040; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } .filters-backdrop.is-visible { opacity: 1; visibility: visible; } /* Empilement des champs dans la sidebar */ .filters-fields { display: flex; flex-direction: column; gap: 1rem; } /* Un champ par ligne */ .sidebar-search-form .search-col { width: 100%; } /* Labels homogènes */ .sidebar-search-form .form-label { display: block; color: rgba(255,255,255,.9); font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.25rem; } /* Champs dans la sidebar */ .sidebar-search-form .search-field, .sidebar-search-form .bootstrap-select button, .sidebar-search-form input { border-bottom: 1px solid rgba(255,255,255,.5); color: #fff !important; width: 100%;; } .text-column{ padding: 30px !important; } .text-column h2 { position: relative; display: inline-flex; /* ou block si tu veux qu'il prenne toute la largeur */ align-items: center; justify-content: flex-start; font-size: 2rem; font-weight: 400; color: #0A203E; line-height: 1.3; margin: 0 0 20px; /* remplace ton style="margin-bottom:20px;" */ padding-left: 1.2rem; /* espace pour la barre */ } /* Barre dorée verticale à gauche */ .text-column h2::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background-color: #E4C276; border-radius: 2px; } .about-default h3 { position: relative; display: inline-flex; /* ou block si tu veux qu'il prenne toute la largeur */ align-items: center; justify-content: flex-start; color: #0A203E; line-height: 1.3; margin: 15px 0 20px; /* remplace ton style="margin-bottom:20px;" */ padding-left: 1.2rem; /* espace pour la barre */ } /* Barre dorée verticale à gauche */ .about-default h3::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background-color: #E4C276; border-radius: 2px; } .video h2{ color:#FFF !important; } .video .text-column h2 { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; font-size: 2.5rem; font-weight: 300; line-height: 1.3; margin: 0 0 20px; margin-bottom: 20px; padding-left: 0; color:#FFF !important; } .video .text-column h2::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 0; background-color:transparent; border-radius: 0; } .video .text-column p { font-size: 1.2rem; } /************************************************************* * SECTION CONTACT – ESPACE IMMOBILIER * Style cohérent avec ton thème (bleu #0A203E, doré #E4C276) *************************************************************/ /* ------- TITRES ------- */ .contact-intro .contact-title { font-size: 2.2rem; font-weight: 400; color: #0A203E; margin-bottom: 0.8rem; line-height: 1.3; } .contact-intro .contact-subtitle { font-size: 1.15rem; color: #777; font-weight: 300; } .contact-intro-text { max-width: 620px; margin: 1.2rem auto 0; color: #555; font-size: 1rem; line-height: 1.65; } /************************************************************* * COORDONNÉES – BARRE EXACTEMENT AU CENTRE VISUEL *************************************************************/ .contact-coords-wrapper { max-width: 700px; margin: 2.5rem auto 3rem; } /* Ligne contenant les 2 blocs + la barre */ .contact-coords { display: flex; justify-content: center; align-items: stretch; gap: 40px; /* optionnel si tu veux espacer */ } /* Colonnes */ .contact-coord-block { text-align: center; min-width: 180px; /* fixe un minimum pour équilibrer */ } /* Barre verticale parfaitement centrée */ .contact-coords-separator { width: 2px; background-color: #E4C276; border-radius: 2px; margin: 0 40px; /* espace entre la barre et les blocs */ } /* Labels */ .contact-coord-label { font-size: 0.9rem; font-weight: 600; color: #E4C276; text-transform: uppercase; letter-spacing: 0.05em; } /* Valeurs */ .contact-coord-value { font-size: 1.2rem; font-weight: 400; color: #0A203E; margin-top: 3px; } /* Mobile : tout s'empile */ @media (max-width: 768px) { .contact-coords { flex-direction: column; gap: 1.5rem; } .contact-coords-separator { display: none; } .contact-coord-block { text-align: center; margin-bottom: 1rem; } } /* ============================================================ FORMULAIRE ============================================================ */ .contact-form-block { padding-top: 5px; } .contact-form .form-label { font-size: 0.85rem; font-weight: 600; color: #0A203E; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; } .contact-form input, .contact-form textarea, .contact-form select { border: 1px solid #ddd; border-radius: 0; padding: 0.75rem 1rem; font-size: 0.95rem; color: #0A203E; transition: all .25s ease; } .contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { border-color: #E4C276; box-shadow: none; outline: none; } /* Champ MESSAGE */ .contact-form textarea.input-message { min-height: 200px; resize: vertical; } /* Checkbox RGPD */ .read_tcs { font-size: 0.85rem; color: #444; line-height: 1.5; } .read_tcs input { margin-right: 6px; } /* ------- BOUTON ENVOYER ------- */ #btnsubmit.btn { background-color: #E4C276; color: #0A203E; padding: 0.75rem 2.4rem; border: none; border-radius: 0; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; transition: all .25s ease; } #btnsubmit.btn:hover { background-color: #caa85f; color: #0A203E; } /* ------- ALERTES ------- */ #alertBoxSuccess, #alertBoxError { border-radius: 0; font-size: 0.95rem; } /* ------- RESPONSIVE GLOBAL ------- */ @media (max-width: 768px) { .contact-title { font-size: 1.9rem; } #btnsubmit.btn { width: 100%; } } /* ============================================ CONTACT FORM — SAFE MOBILE TWEAKS (ne casse pas Bootstrap) ============================================ */ /* 1) Padding mobile (car ton container est p-0) */ @media (max-width: 575.98px){ /* Donne de l'air au bloc coords + form sans toucher au layout global */ .contact-coords-wrapper, form.contact-form-block{ padding-left: 12px; padding-right: 12px; } /* 2) Coordonnées : empilement vertical propre */ .contact-coords{ flex-direction: column !important; align-items: stretch !important; gap: 12px; } /* Les "col-md-3" à l'intérieur d'un flex : on force en full width en mobile */ .contact-coord-block{ width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; text-align: center; } /* Séparateur vertical -> devient horizontal */ .contact-coords-separator{ width: 100% !important; height: 1px !important; margin: 6px 0 !important; } /* 3) Recaptcha : éviter overflow */ .contact-form-block .g-recaptcha, .contact-form-block iframe{ max-width: 100% !important; } /* 4) Bouton envoyer : plein largeur */ #btnsubmit{ width: 100%; min-height: 48px; } /* 5) Champs : confort tactile */ .contact-form-block .form-control, .contact-form-block .form-select{ min-height: 46px; } /* 6) Texte RGPD : évite les lignes trop longues */ .read_tcs label{ display: block; font-size: 0.92rem; line-height: 1.35; word-break: break-word; } } /* ========================================================= FICHE BIEN – HEADER PRESTIGE / STANDARD ========================================================= */ /* ========================================== BLOC TITRE + CARACTÉRISTIQUES PRINCIPALES ========================================== */ .property-main-header { background-color: #ffffff; padding: 2.5rem 0 2rem; } .property-main-title { font-size: 2.5rem; font-weight: 400; } /* Ligne de caractéristiques */ .property-main-meta { margin-top: 0.6rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1.8rem; font-size: 0.85rem; } .property-main-meta .meta-item { display: flex; flex-direction: column; align-items: center; text-transform: uppercase; letter-spacing: 0.14em; } .property-main-meta .meta-label { font-size: 0.68rem; color: #7c7c7c; } .property-main-meta .meta-label.right{ text-align: right; width: 100%; } .property-main-meta .meta-value { margin-top: 0.1rem; color: #0A203E; } /* Barre CTA + icônes + prix */ .property-main-bar { margin-top: 1.8rem; padding-left: 0; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } /* Bloc gauche : bouton rouge + icônes */ .property-main-actions { display: flex; align-items: center; gap: 0.75rem; } .property-main-contact { border-radius: 0; padding: 0.55rem 1.6rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; background-color: #b5161c; /* rouge proche du montage */ border: 1px solid #b5161c; color: #fff; } .property-main-contact:hover { background-color: #8f1016; border-color: #8f1016; color: #fff; } .property-main-iconbtn { border: none; background: transparent; padding: 0; font-size: 1rem; color: #b3b3b3; } .property-main-iconbtn:hover { color: #0A203E; } /* Bloc prix à droite */ .property-main-price .price-main { font-size: 1.35rem; font-weight: 600; color: #0A203E; } .property-main-price sup { font-size: 0.7em; } /* Mention sous le bloc */ .property-main-note { margin-top: 0.7rem; margin-left: 2.5rem; font-size: 0.78rem; text-align: left; color: #7c7c7c; } /* Responsive */ @media (max-width: 767.98px) { .property-main-bar { flex-direction: column; align-items: stretch; } .property-main-price { text-align: left !important; } } /* ========================================== BLOC TITRE + CARACTÉRISTIQUES PRINCIPALES ========================================== */ .property-main-header { background-color: #ffffff; padding: 2.5rem 0 2rem; } /* Wrapper = 4/5 de largeur, 1/5 vide à gauche (desktop) */ .property-main-wrapper { width: 100%; /* 4/5 */ margin-left: 0; /* 1/5 vide à gauche */ } /* Bloc avec bordure verticale à gauche (titre + meta + barre) */ .property-main-box { border-left: 2px solid #E4C276; /* bordure sur tout le bloc */ padding-left: 2.5rem; } /* Titre */ .property-main-title { font-size: 2.5rem; font-weight: 400; margin-bottom: 0.8rem; } /* Ligne de caractéristiques */ .property-main-meta { margin-bottom: 1.4rem; display: flex; flex-wrap: wrap; justify-content: flex-start; /* aligné à gauche */ gap: 1.8rem; font-size: 0.85rem; } .property-main-meta .meta-item { display: flex; flex-direction: column; align-items: flex-start; text-transform: uppercase; letter-spacing: 0.14em; } .property-main-meta .meta-label { font-size: 0.68rem; color: #7c7c7c; } .property-main-meta .meta-value { margin-top: 0.1rem; color: #0A203E; } /* Barre CTA + icônes + prix (pas de bordure) */ .property-main-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-bottom: 0.4rem; } /* Actions gauche : bouton + icônes */ .property-main-actions { display: flex; align-items: center; gap: 0.75rem; } /* Bouton contact – petit */ .property-main-contact { border-radius: 0; padding: 0.35rem 1.2rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; background-color: #b5161c; border: 1px solid #b5161c; color: #fff; } .property-main-contact:hover { background-color: #8f1016; border-color: #8f1016; color: #fff; } .property-main-iconbtn { border: none; background: transparent; padding: 0; font-size: 1.05rem; color: #b3b3b3; } .property-main-iconbtn:hover { color: #0A203E; } /* Prix à droite */ .property-main-price .price-main { font-size: 1.35rem; font-weight: 600; color: #E4C276; margin-left: 40px; } .property-main-price sup { font-size: 0.7em; } /* Phrase honoraires – même largeur 4/5, alignée à gauche, sans bordure */ .property-main-note { margin-top: 0.7rem; font-size: 0.78rem; color: #7c7c7c; } /* Responsive */ @media (max-width: 991.98px) { /* Sur tablette/mobile : bloc plein écran, plus de 1/5 vide */ .property-main-wrapper { width: 100%; margin-left: 0; } .property-main-box { padding-left: 1.5rem; } } @media (max-width: 767.98px) { .property-main-bar { flex-direction: column; align-items: flex-start; } .property-main-price { text-align: left !important; } } /* ========================================================= SIDEBAR CARACTÉRISTIQUES (OFFCANVAS) ========================================================= */ .property-features-panel { background-color: #A9A3A2; color: #0A203E; width: min(500px, 100vw) !important; box-shadow: -18px 0 50px rgba(0,0,0,.4); border-left: 0; } .property-features-inner { height: 100%; display: flex; flex-direction: column; } .property-features-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 2.6rem 3rem 1.8rem; } .property-features-title { font-size: 1.5rem; margin: 0; max-width: 80%; } /* Croix */ .property-features-close { position: relative; width: 34px; height: 34px; border: 0; background: transparent; padding: 0; } .property-features-close span { position: absolute; left: 50%; top: 50%; width: 28px; height: 1px; background-color: #fff; transform-origin: center; } .property-features-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .property-features-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } /* Corps */ .property-features-body { padding: 0 3rem 2.6rem; overflow-y: auto; } .property-features-priceblock { margin-bottom: 2rem; } .property-features-priceblock .price-main { font-weight: 600; margin-bottom: 0.4rem; } .property-features-priceblock .price-main span { font-weight: 400; } .property-features-priceblock .price-sub { font-size: 0.9rem; } /* Lignes */ .property-features-list { font-size: 0.95rem; } .property-features-list .feature-row { display: flex; justify-content: space-between; gap: 1.4rem; padding: 0.65rem 0; border-bottom: 1px solid rgba(255,255,255,.35); } .property-features-list .feature-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; } .property-features-list .feature-value { text-align: right; } .property-features-list .features-subtitle { margin: 1.8rem 0 0.6rem; font-size: 1rem; font-weight: 500; } .features-extra { list-style: none; padding-left: 0; margin: 0 0 0.8rem; font-size: 0.9rem; } .features-extra li + li { margin-top: 0.15rem; } /* Mobile */ @media (max-width: 575.98px) { .property-features-header, .property-features-body { padding-left: 1.6rem; padding-right: 1.6rem; } .property-features-title { max-width: 70%; font-size: 1.3rem; } } @media (max-width: 767.98px) { .property-features-panel.offcanvas-end { left: 0; /* couvre tout l’écran */ right: 0; } } /* ========================== SECTION VISITE GUIDÉE ========================== */ .property-visit-section { background-color: #0a203e; padding: 3rem 0 3rem; } /* Label "Visite guidée" */ .property-section-label { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.75rem; color: #FFF; margin-bottom: 0.4rem; } /* Titre h2 de la section */ .property-section-title { font-size: 1.35rem; margin-bottom: 1.2rem; color: #FFF; } /* Texte */ .property-visit-section p { font-size: 0.95rem; margin-bottom: 0.9rem; color: #FFF; } /* Bloc vidéo à droite */ .property-visit-video { width: 100%; } /* Wrapper responsive 16/9 avec préloader par-dessus */ .property-video-wrapper { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 */ overflow: hidden; background-color: #000; } /* Iframe plein cadre, comme pour le hero mais en "contenu" */ .property-video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Préloader vidéo, esprit hero */ .property-video-preloader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at center, rgba(0,0,0,.25), rgba(0,0,0,.6)); z-index: 2; transition: opacity .35s ease, visibility .35s ease; } .property-video-spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: #ffffff; animation: propertyVideoSpin .8s linear infinite; } @keyframes propertyVideoSpin { to { transform: rotate(360deg); } } /* Quand la vidéo est chargée, on masque le préloader */ .property-video-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } /* Fallback image */ .property-visit-video.placeholder img { display: block; width: 100%; height: auto; } /* Responsive : rien de spécial, Bootstrap gère le 2 colonnes -> 1 colonne */ @media (max-width: 767.98px) { .property-visit-section { padding: 2.5rem 0 2.5rem; } .property-section-title { font-size: 1.2rem; } } /* ========================================================= SECTION PHOTOS DU BIEN (SWIPER + LIGHTGALLERY) ========================================================= */ .property-photos-section { background-color: #ffffff; padding: 2.5rem 0 3rem; } /* Swiper : hauteur fixe + largeur auto + 10px entre les photos */ .property-photos-swiper .swiper-wrapper { align-items: stretch; } .property-photos-swiper .swiper-slide { height: 260px; /* hauteur fixe */ width: auto; /* largeur auto */ display: flex; } .property-photo-item { position: relative; width: 100%; height: 100%; overflow: hidden; } .property-photo-item img { height: 100%; width: auto; max-width: none; object-fit: cover; display: block; transition: transform .4s ease, opacity .4s ease; } /* Effet hover : léger zoom + voile */ .property-photo-item::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(0,0,0,0.0), rgba(0,0,0,0.18)); opacity: 0; transition: opacity .4s ease; } .property-photo-item:hover img { transform: scale(1.04); } .property-photo-item:hover::after { opacity: 1; } /* Barre de contrôle sous le slider : flèches à gauche + bouton rouge à droite */ .property-photos-footer { margin-top: 0.9rem; display: flex; align-items: center; justify-content: space-between; } /* Flèches sous le slider */ .property-photos-arrows { display: inline-flex; align-items: center; gap: 0.3rem; } .property-photos-prev, .property-photos-next { border: none; background: transparent; padding: 0; font-size: 1.1rem; line-height: 1; color: #8c8c8c; } .property-photos-prev:hover, .property-photos-next:hover { color: #0A203E; } /* Bouton rouge "VOIR TOUTES LES PHOTOS DU BIEN" (réutilise .cta-btn.favourite mais on ajuste la taille) */ .property-photos-all-btn { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; padding: 0.45rem 1.6rem; } .property-photos-footer .cta-btn { /*background-color: #b5161c; border-color: #b5161c;*/ background-color: transparent; border-color: transparent; color: #00112e; } .property-photos-footer .cta-btn i { color: #b5161c; } .property-photos-footer .cta-btn:hover { background-color: #FFF; /*border-color: #b5161c;*/ color: #b5161c;*/ } /* Responsive photos */ @media (max-width: 767.98px) { .property-photos-swiper .swiper-slide { height: 300px; } .property-photos-footer { flex-direction: column; align-items: flex-start; gap: 0.4rem; } } /* ========================================================= SECTION "DESCRIPTIF DU BIEN" ========================================================= */ .property-description-section { background-color: #ffffff; padding: 3rem 0 3rem; } /* Ligne titre + bouton */ .description-header { margin-bottom: 1.4rem; } /* Titre avec barre verticale, version "description" */ .description h2 { position: relative; display: inline-flex; align-items: center; justify-content: flex-start; color: #0A203E; line-height: 1.3; margin: 0; padding-left: 1.2rem; /*font-size: 1.25rem;*/ } /* Barre dorée verticale à gauche du titre */ .description h2::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background-color: #E4C276; border-radius: 2px; } /* Bouton "AFFICHER TOUTES LES CARACTÉRISTIQUES" */ .property-features-toggle { display: inline-flex; align-items: center; justify-content: center; border-radius: 0; border: 1px solid transparent; background: #E4C276; color: #00112E; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 600; padding: 0.55rem 1.4rem; } .property-features-toggle:hover { background-color: #0A203E; border-color: #0A203E; color: #E4C276; } /* Texte du descriptif */ .description-content p { font-size: 0.95rem; margin-bottom: 0.9rem; } /* Responsive */ @media (max-width: 767.98px) { .property-description-section { padding: 2.5rem 0 2.5rem; } .description-header { flex-direction: column; align-items: flex-start; gap: 0.8rem; } .description h3 { font-size: 1.1rem; } } /* ========================================================= SIDEBAR CARACTÉRISTIQUES (OFFCANVAS) ========================================================= */ .property-features-panel { width: min(500px, 100vw) !important; box-shadow: -18px 0 50px rgba(0,0,0,.4); border-left: 0; } .property-features-inner { height: 100%; display: flex; flex-direction: column; } .property-features-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 2.6rem 3rem 1.8rem; } .property-features-title { font-size: 1.5rem; margin: 0; max-width: 80%; } /* Bouton croix */ .property-features-close { position: relative; width: 34px; height: 34px; border: 0; background: transparent; padding: 0; } .property-features-close span { position: absolute; left: 50%; top: 50%; width: 28px; height: 1px; background-color: #fff; transform-origin: center; } .property-features-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .property-features-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } /* Corps de la sidebar */ .property-features-body { padding: 0 3rem 2.6rem; overflow-y: auto; } /* Bloc prix */ .property-features-priceblock { margin-bottom: 2rem; } .property-features-priceblock .price-main { font-weight: 600; margin-bottom: 0.4rem; } .property-features-priceblock .price-main span { font-weight: 400; } .property-features-priceblock .price-sub { font-size: 0.9rem; } /* Lignes des caractéristiques */ .property-features-list { font-size: 0.95rem; } .property-features-list .feature-row { display: flex; justify-content: space-between; gap: 1.4rem; padding: 0.65rem 0; border-bottom: 1px solid rgba(255,255,255,.35); } .property-features-list .feature-label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; } .property-features-list .feature-value { text-align: right; } .property-features-list .features-subtitle { margin: 1.8rem 0 0.6rem; font-size: 1rem; font-weight: 500; } /* Listes complémentaires */ .features-extra { list-style: none; padding-left: 0; margin: 0 0 0.8rem; font-size: 0.9rem; } .features-extra li + li { margin-top: 0.15rem; } .property-features-panel img.dpe{ max-height: 150px; margin-left: 20px; } /* Responsive sidebar */ @media (max-width: 575.98px) { .property-features-header, .property-features-body { padding-left: 1.6rem; padding-right: 1.6rem; } .property-features-title { max-width: 70%; font-size: 1.3rem; } } /* ================================================ TABLEAU "Description des pièces" dans la sidebar ================================================ */ /* Contexte : uniquement dans la sidebar */ .property-features-panel .table { margin-top: 0.75rem; margin-bottom: 1.5rem; color: #0A203E; /* texte principal */ background-color: transparent; /* on laisse respirer le fond #A9A3A2 */ font-size: 0.9rem; } /* En-tête du tableau */ .property-features-panel .table thead th { background-color: rgba(10, 32, 62, 0.9); /* bleu nuit */ color: #ffffff; border-color: rgba(255, 255, 255, 0.25); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 0.55rem; padding-bottom: 0.55rem; } /* Coins légèrement arrondis sur la première/dernière colonne en-tête */ .property-features-panel .table thead th:first-child { border-top-left-radius: 3px; } .property-features-panel .table thead th:last-child { border-top-right-radius: 3px; } /* Suppression des gros bordures Bootstrap */ .property-features-panel .table > :not(caption) > * > * { border-top: none; } /* Lignes zébrées (striped) – on remplace le gris Bootstrap */ .property-features-panel .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.18); /* léger voile clair */ } .property-features-panel .table-striped > tbody > tr:nth-of-type(even) > * { background-color: rgba(255, 255, 255, 0.06); /* encore plus subtil */ } /* Ligne de séparation fine entre les lignes */ .property-features-panel .table tbody tr + tr td { border-top: 1px solid rgba(255, 255, 255, 0.18); } /* Hover léger sur les lignes */ .property-features-panel .table tbody tr:hover > * { background-color: rgba(228, 194, 118, 0.22); /* clin d’œil doré */ } /* Alignement et padding cellule */ .property-features-panel .table td, .property-features-panel .table th { padding: 0.55rem 0.6rem; vertical-align: middle; } /* Optionnel : resserrer un peu les colonnes m² / niveau */ .property-features-panel .table td:nth-child(1), .property-features-panel .table td:nth-child(3), .property-features-panel .table th:nth-child(1), .property-features-panel .table th:nth-child(3) { white-space: nowrap; width: 1%; } /* ========================================================= SECTION "POURQUOI AVONS-NOUS SÉLECTIONNÉ CE BIEN ?" ========================================================= */ .property-selected-section { position: relative; padding: 3rem 0 3rem; color: #ffffff; background-color: #0A203E; /* fallback si pas d'image */ margin-bottom: 80px; } /* Overlay pour lisibilité */ /*.property-selected-overlay { position: absolute; inset: 0; /*background: radial-gradient(circle at center, rgba(0,0,0,0.15), rgba(0,0,0,0.55)); background-color: ; }*/ /* ————— COLONNE GAUCHE ————— */ .property-selected-profile { text-align: left; } .property-selected-photo { width: 100%; /* ⚠️ prend toute la colonne (1/4) */ overflow: hidden; margin-bottom: 1rem; } .property-selected-photo img { display: block; width: 100%; /* ⚠️ important : respecte la colonne */ height: auto; object-fit: cover; } .property-selected-name { margin: 0 0 .2rem; font-weight: 600; font-size: 1rem; color: #ffffff; } .property-selected-contact { margin: 0; font-size: .95rem; color: #ffffff; } /* ————— COLONNE DROITE ————— */ .description.description-selected h3 { position: relative; display: inline-flex; align-items:baseline; color: #ffffff; font-style: italic; margin: 0 0 1.4rem; padding-left: 1.2rem; font-size: 2.4rem; line-height: 1.15; font-weight: 300; } /* barre verticale */ .description.description-selected h3::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background-color: #E4C276; border-radius: 2px; } .property-selected-content { color: #ffffff; padding-left: 30px; } .property-selected-quote { font-size: 2rem !important; line-height: 1.5; max-width: 700px; padding-left: 1.5rem; position: relative; } .property-selected-quote p{ font-size: 1.4rem !important; line-height: 1.3; font-style: italic; } /* guillemet décoratif */ .property-selected-quote::before { content: "“"; position: absolute; left: 0; top: -0.4rem; font-size: 2.4rem; color: rgba(255,255,255,0.35); } /* ————— RESPONSIVE ————— */ @media (max-width: 767.98px) { .property-selected-section { padding: 2.3rem 0; } .property-selected-photo { width: 160px; margin-bottom: 1rem; } .property-selected-photo img { height: auto; width: 100%; } .description.description-selected h3 { font-size: 1.25rem; } .property-selected-quote { padding-left: 1.2rem; margin-top: 1rem; } } .quote-block { position: relative; /* barre dorée verticale */ padding: 1.6rem 2rem 1.6rem 2.2rem; font-size: 1rem; line-height: 1.7; max-width: 700px; color: #ffffff; border-radius: 4px; margin-top: 1.2rem; } /* Grand guillemet décoratif */ .quote-block::before { content: "“"; position: absolute; left: 10px; top: -10px; font-size: 3.2rem; line-height: 1; opacity: 0.18; color: #ffffff; pointer-events: none; } /* petit guillemet de fermeture facultatif */ .quote-block::after { content: "”"; position: absolute; right: 15px; bottom: -14px; font-size: 3rem; line-height: 1; opacity: 0.15; color: #ffffff; pointer-events: none; } /* Responsive */ @media (max-width: 767.98px) { .quote-block { padding: 1.3rem 1.4rem 1.3rem 1.5rem; } } .marker { background-image: url('../img/marker.webp') !important; background-size: cover; width: 50px !important; height: 50px !important; border-radius: 0%; cursor: pointer; } /* Bouton scroll-to-top */ .scroll-top-btn { position: fixed; right: 1.75rem; bottom: 1.75rem; z-index: 999; width: 3rem; height: 3rem; border-radius: 999px; /* bien rond */ border: 1px solid #E4C276; /* doré déjà utilisé */ background: rgba(10, 10, 15, 0.9); /* fond sombre léger */ color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; cursor: pointer; /* Effet d’apparition */ opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; } /* État visible quand on a scrollé */ .scroll-top-btn.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } /* Icône interne (fleche) */ .scroll-top-btn .scroll-top-icon { line-height: 1; display: inline-block; } /* Hover / focus */ .scroll-top-btn:hover, .scroll-top-btn:focus-visible { background: rgba(15, 15, 25, 1); border-color: #f0d488; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); outline: none; } /* Pour les écrans très petits, on rapproche un peu du bord */ @media (max-width: 575.98px) { .scroll-top-btn { right: 1.1rem; bottom: 1.1rem; width: 2.6rem; height: 2.6rem; font-size: 1.2rem; } } .table-honoraires thead th { background-color: #2f3b4f !important; /* bleu proche du PDF */ color: #ffffff !important; border-color: #2f3b4f !important; text-transform: uppercase !important; font-weight: 600 !important; letter-spacing: 0.03em !important; } .table-honoraires tbody td { border-color: #2f3b4f; } .table-honoraires tbody tr:nth-of-type(odd) { background-color: #f7f8fb; /* léger gris bleuté */ } .table-honoraires { border-color: #2f3b4f; } /* ======================================================= ALERTE "Aucun bien" — Style Premium Immobilier ======================================================= */ /* ======================================================= ALERTE "Aucun bien" — Style Premium Immobilier ======================================================= */ .empty-result-card { background: #f8f7f6; /* plus doux et premium que #ebe9ea */ border-radius: 18px; border: 1px solid rgba(10, 32, 62, 0.15); box-shadow: 0 18px 60px rgba(0,0,0,0.12); color: #0A203E; position: relative; } /* Petite ligne dorée décorative en haut */ .empty-result-card::before { content: ""; position: absolute; top: 0; left: 50%; width: 90px; height: 4px; background: #E4C276; border-radius: 20px; transform: translateX(-50%); } /* Icône */ .empty-icon i { font-size: 3.5rem; color: #E4C276; opacity: 0.9; } /* Titre */ .empty-title { font-weight: 700; font-size: 1.6rem; color: #0A203E; } /* Texte */ .empty-text { font-size: 1.05rem; color: #0A203E; } /* Lien */ .empty-link { color: #0A203E; font-weight: 600; text-decoration: underline; } .empty-link:hover { color: #E4C276; text-decoration: none; } /* Bouton CTA */ .cta-alert { display: inline-block; padding: 14px 28px; background: #0A203E; color: #fff; font-weight: 600; border-radius: 50px; text-decoration: none; transition: all 0.3s ease; } .cta-alert:hover { background: #E4C276; color: #0A203E; } /* ---------------------------------------------------- MODAL COULEUR #0A203E SANS RADIUS / SANS BORDER ------------------------------------------------------*/ .search-modal .modal-dialog { margin: 0 !important; max-width: 100% !important; width: 100% !important; height: auto; transform: translateY(-120px); transition: transform .45s ease-out; } .search-modal.show .modal-dialog { transform: translateY(0); } .search-modal-content { background: #0A203E !important; border: none !important; border-radius: 0 !important; padding-bottom: 20px; } /* Enlever backgrounds Bootstrap */ .search-modal .modal-header, .search-modal .modal-body { background: #0A203E !important; color: #fff; } /* Bouton close blanc */ .search-modal .btn-close-white { filter: invert(1); } .video-cover-wrapper { position: relative; width: 100%; height: 100%; overflow: hidden; } .video-cover-wrapper iframe { position: absolute; top: 50%; left: 50%; width: 100vw; /* large pour remplir */ height: 56.25vw; /* ratio 16/9 basé sur viewport */ min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); pointer-events: none; /* optionnel pour éviter clic iframe */ } .guided-tour-section { padding: 80px 0; /* air global haut / bas */ } .guided-tour-section h2 { margin-bottom: 40px; /* espace avec la vidéo */ max-width: 900px; line-height: 1.25; font-weight: 400; } /* Optionnel : respirer un peu plus sur mobile */ @media (max-width: 768px) { .guided-tour-section { padding: 70px 0; } .guided-tour-section h2 { margin-bottom: 30px; font-size: 1.6rem; } } /***========================================================= SECTION PHOTOS PRESTIGE =========================================================*/ .property-photos-section.prestige-photos{ padding: 80px 0; margin: 40px 0 ; } /* --- Titre montage --- */ .prestige-section-title{ text-align:center; font-family:"Cormorant Garamond", serif; font-style:italic; color:#0A203E; margin:0 0 22px; } /* --- Wrapper pour flèches overlay --- */ .prestige-photos-wrap{ position:relative; } /* 3 images visibles comme montage */ /* --- Flèches comme montage : posées sur les côtés, au centre vertical --- */ .prestige-photos .prestige-photos-nav{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:50%; border:1px solid rgba(10,32,62,.15); background: rgba(255,255,255,.90); color:#0A203E; display:flex; align-items:center; justify-content:center; z-index:5; } .prestige-photos .property-photos-prev{ left:-12px; } .prestige-photos .property-photos-next{ right:-12px; } /* hover léger */ .prestige-photos .prestige-photos-nav:hover{ background:#fff; } /* --- Bouton centré "Galerie photos" (petit bouton sombre comme montage) --- */ .prestige-photos-cta{ display:flex; justify-content:center; margin-top:18px; } .prestige-gallery-btn{ display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; background:#0A203E; color:#fff; border-radius:2px; text-decoration:none; font-size:14px; letter-spacing:.02em; } .prestige-gallery-btn:hover{ color:#fff; opacity:.92; } /* Responsive */ @media (max-width: 768px){ .prestige-photos .prestige-photos-swiper .swiper-wrapper{ gap:12px; } .prestige-photos .prestige-photos-swiper .swiper-slide{ width: 80% !important; /* sur mobile tu peux slider */ } .prestige-photos .property-photos-prev{ left:6px; } .prestige-photos .property-photos-next{ right:6px; } } /* ===== Bloc Localisation (prestige) ===== */ .prestige-location{ margin: 150px 0 0 0; padding: 70px 0; background-color:#EBE9EA; } .prestige-section-title-left{ font-family:"Cormorant Garamond", serif; font-style: italic; color:#0A203E; margin:0 0 14px; } .prestige-section-text{ color:#3b4b65; margin:0; max-width: 420px; } /* Cadre carte type montage */ .prestige-map-frame{ position: relative; background: transparent; padding: 0; /* IMPORTANT : pas d’espace gris */ margin-top: -150px; } /* Coin bleu épais à GAUCHE (haut + gauche) */ .prestige-map-frame:before{ content:""; position:absolute; left:-18px; /* décale légèrement comme le montage */ top:-18px; width: 70%; height: 70%; border-top: 18px solid #0A203E; /* plus épais */ border-left: 18px solid #0A203E; /* plus épais */ pointer-events:none; z-index: 1; } /* La carte doit remplir, sans fond gris visible */ .prestige-map-frame #map{ width:100%; height: 360px; background: #fff; /* au cas où pendant le chargement */ border-radius: 2px; overflow:hidden; position: relative; z-index: 2; /* au-dessus du coin bleu */ } /* Assure que le canvas mapbox ne laisse pas de bordures/gris */ .prestige-map-frame #map .mapboxgl-canvas{ width:100% !important; height:100% !important; } /* Responsive */ @media (max-width: 992px){ .prestige-location{ padding: 55px 0; } .prestige-map-frame #map{ height: 320px; } .prestige-map-frame:before{ left:-14px; top:-14px; width: 60%; height: 60%; border-top-width: 9px; border-left-width: 9px; } } /* ===== Bloc "Découvrez ... en vidéo" (prestige) ===== */ .prestige-video{ padding: 0 0 80px 0; margin: 0 0 80px 0; background-color:#EBE9EA; } .prestige-section-title{ text-align:center; font-family:"Cormorant Garamond", serif; font-style: italic; color:#0A203E; margin:0 0 26px; } /* Cadre vidéo simple (propre, sans fond parasite) */ .prestige-video-frame{ border-radius: 2px; overflow:hidden; } .prestige-video .video-container iframe, .prestige-video .video-container video{ width:100% !important; height: 320px !important; display:block; border:0; } /* Texte à droite */ .prestige-video-subtitle{ font-family:"Cormorant Garamond", serif; font-style: italic; color:#0A203E; margin:0 0 12px; font-size: 22px; } .prestige-video-desc{ color:#3b4b65; line-height: 1.65; } /* Responsive */ @media (max-width: 992px){ .prestige-video{ padding: 55px 0; } .prestige-video .video-container iframe, .prestige-video .video-container video{ height: 280px !important; } } .prestige .property-main-box { border-left: 0; } .prestige h1{ border-left: 2px solid #E4C276; padding-left: 2.5rem; } /* ========================================================= PRESTIGE : reprise du standard + séparateurs verticaux + tailles plus grandes Utilisation : wrapper HTML
...
========================================================= */ /* Bloc titre */ .prestige .property-main-header { background-color: #ffffff; padding: 3.2rem 0 2.4rem; /* plus d’air */ } .prestige .property-main-title { font-size: 3.1rem; /* + conséquent */ font-weight: 400; line-height: 1.18; } /* Ligne meta */ .prestige .property-main-meta { margin-top: 1.1rem; gap: 2.6rem; /* plus espacé */ font-size: 1.05rem; /* base plus grande */ } /* Chaque item */ .prestige .property-main-meta .meta-item { position: relative; padding-left: 1.4rem; /* place pour la barre */ align-items: center; } /* Barre verticale à gauche sur tous sauf le premier */ .prestige .property-main-meta .meta-item:not(:first-child)::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); height: 52px; /* barre bien visible */ width: 1px; background: rgba(10,32,62,.22); } /* Label plus lisible */ .prestige .property-main-meta .meta-label { font-size: 0.82rem; /* au lieu de 0.68rem */ color: #7c7c7c; letter-spacing: 0.14em; } /* Valeur plus grande */ .prestige .property-main-meta .meta-value { margin-top: 0.25rem; color: #0A203E; font-size: 1.25rem; /* augmente nettement */ letter-spacing: 0.02em; text-transform: none; /* valeur plus “premium” */ } /* Option prix : même logique, mais plus présent */ .prestige .property-main-meta .meta-value.price { color: #0a203e !important; border: 1px solid #e4c276; padding: 0.35rem 0.7rem; display: inline-block; } .property-main-meta .meta-value.price { margin-top: 0.1rem; color: #0a203e !important; border: 1px solid #e4c276; } /* (Optionnel) Barre CTA : si tu la gardes dans le prestige, elle prend plus d’air */ .prestige .property-main-bar { margin-top: 2.2rem; gap: 1.8rem; } /* (Optionnel) Bouton contact plus grand si présent */ .prestige .property-main-contact { padding: 0.7rem 2.0rem; font-size: 0.92rem; } /* (Optionnel) Icônes un peu plus grandes */ .prestige .property-main-iconbtn { font-size: 1.15rem; } /* ========================================================= CARDS PRESTIGE - Carousel listing ========================================================= */ /* Image plus haute, effet “prestige” */ .property-image--prestige{ position:relative; overflow:hidden; } .property-image--prestige img{ width:100%; height: 280px; /* donne l’aspect premium */ object-fit:cover; display:block; transition: transform .5s ease; } /* Zoom hover propre, sans sortir du cadre */ .property-item--prestige:hover .property-image--prestige img{ transform: scale(1.06); } /* Contenu plus aéré */ .property-content--prestige{ padding:18px 18px 16px; display:flex; flex-direction:column; flex:1; } .property-content--prestige .subtitle{ display:block; font-size:12px; color:#8a93a2; margin-bottom:6px; } /* Titre plus élégant */ .property-content--prestige .property-title{ font-family:"Cormorant Garamond", serif; font-style: italic; font-size:22px; line-height:1.15; margin:0 0 10px; } .property-content--prestige .property-title a{ color:#0A203E; text-decoration:none; } /* Extrait */ .property-content--prestige .property-excerpt{ color:#3b4b65; line-height:1.55; margin:0 0 12px; } /* Footer aligné */ .property-content-footer--prestige{ margin-top:auto; display:flex; flex-direction:column; gap:10px; } /* Prix plus présent */ .property-price--prestige{ font-size:15px; color:#0A203E; font-weight:600; padding:8px 10px; background:#F1F1F1; border:1px solid rgba(10,32,62,.10); border-radius:6px; width:fit-content; } /* Meta plus clean */ .property-meta--prestige{ color:#6b7280; font-size:13px; line-height:1.35; } /* CTA plein largeur, sobre */ .property-cta--prestige{ width:100%; text-align:center; border-radius:2px; } /* Responsive : hauteur image */ @media (max-width: 768px){ .property-image--prestige img{ height: 240px; } } /* ========================================================= PRESTIGE LISTING - texte sur la photo (overlay) ========================================================= */ .property-item--prestige-onimage{ background:#fff; border:1px solid rgba(10,32,62,.08); border-radius:2px; overflow:hidden; } /* IMAGE */ .property-image--prestige-onimage{ position:relative; overflow:hidden; } /* lien couvrant toute l'image */ .property-link--cover{ position:absolute; inset:0; z-index: 1; display:block; } /* image en fond */ .property-image--prestige-onimage img{ width:100%; height: 320px; /* ajuste selon ton montage */ object-fit:cover; display:block; transition: transform .55s ease; } /* zoom propre */ .property-item--prestige-onimage:hover .property-image--prestige-onimage img{ transform: scale(1.06); } /* overlay assombrissant */ .property-onimage-overlay{ position:absolute; inset:0; background: linear-gradient( to bottom, rgba(10,32,62,.35) 0%, rgba(10,32,62,.45) 50%, rgba(10,32,62,.35) 100% ); z-index: 2; } /* contenu centré */ .property-onimage-content{ position:absolute; inset:0; z-index: 3; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding: 18px; pointer-events:none; /* le lien cover gère le clic */ } /* subtitle (ref) */ .property-item--prestige-onimage .subtitle{ color: rgba(255,255,255,.85); font-size: 12px; margin-bottom: 8px; } /* titre dans l'image */ .property-item--prestige-onimage .property-title{ font-family:"Cormorant Garamond", serif; font-style: italic; font-size: 26px; line-height: 1.15; margin: 0 0 14px; } .property-item--prestige-onimage .property-title a{ color:#fff; text-decoration:none; pointer-events:auto; /* si tu veux que le titre soit cliquable malgré pointer-events none */ } /* bouton au centre */ .property-cta--onimage{ pointer-events:auto; background:#ffffff; color:#0A203E; border:1px solid rgba(255,255,255,.9); padding: 10px 16px; border-radius:2px; text-transform: none; } .property-cta--onimage:hover{ color:#0A203E; opacity:.92; } /* Ribbons au-dessus */ .property-image--prestige-onimage .label-status{ position:absolute; top:14px; left:14px; z-index: 4; } /* Ton bouton "+" au-dessus aussi */ .property-image--prestige-onimage .property-overlay-banner{ z-index: 4; } /* (OPTIONNEL) bloc bas */ .property-content--prestige-bottom{ padding: 14px 16px 16px; } /* responsive */ @media(max-width:768px){ .property-image--prestige-onimage img{ height: 260px; } .property-item--prestige-onimage .property-title{ font-size: 22px; } } /* ========================================================= PRESTIGE CARD (listing swiper) - tout sur la photo Overlay uniquement derrière le bloc texte centré ========================================================= */ .property-item--prestige-card{ border-radius: 2px; overflow: hidden; border: 1px solid rgba(10,32,62,.08); background:#fff; } .property-image--prestige-card{ position: relative; overflow: hidden; } /* Lien couvrant toute la card */ .property-cover-link{ position:absolute; inset:0; z-index: 1; display:block; } /* Image */ .property-image--prestige-card img{ width:100%; height: 360px; /* ajuste si besoin */ object-fit: cover; display:block; transition: transform .55s ease; } .property-item--prestige-card:hover .property-image--prestige-card img{ transform: scale(1.06); } /* Ribbons au dessus */ .property-image--prestige-card .label-status{ position:absolute; top:16px; left:16px; z-index: 4; } /* Centrage du bloc texte */ .property-prestige-center{ position:absolute; inset:0; z-index: 3; display:flex; align-items:center; justify-content:center; padding: 18px; pointer-events:none; /* le lien cover gère le clic */ } /* Overlay uniquement sur le panel (pas sur toute l'image) */ .property-prestige-panel{ pointer-events:auto; text-align:center; padding: 35px 22px 35px; max-width: 78%; background: rgba(10,32,62,.45); /* overlay local */ backdrop-filter: blur(2px); border: 1px solid rgba(255,255,255,.18); } /* Ref */ .property-prestige-ref{ display:block; font-size: 12px; color: rgba(255,255,255,.85); margin-bottom: 8px; } /* Titre (montage = élégant, serif/italic) */ .property-prestige-title{ font-family:"Cormorant Garamond", serif; font-style: italic; font-weight: 400; font-size: 28px; line-height: 1.12; margin: 0 0 10px; } .property-prestige-title{ position: relative; margin-bottom: 18px; /* espace sous le titre */ padding-bottom: 14px; /* espace pour la ligne */ } .property-prestige-title::after{ content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 100px; border-bottom: 2px solid #D4AF37; /* or */ } .property-prestige-title a{ color:#fff; text-decoration:none; } /* Prix (sur l'image aussi) */ .property-prestige-price{ color:#fff; font-weight:600; font-size: 14px; margin-bottom: 8px; letter-spacing: .02em; } /* Meta condensée */ .property-prestige-meta{ color: rgba(255,255,255,.85); font-size: 12px; margin-bottom: 14px; } /* Bouton conforme montage : fin, transparent / bord */ .property-prestige-btn{ display:inline-flex; align-items:center; justify-content:center; padding: 10px 18px; border:none; /*1px solid rgba(255,255,255,.9);*/ background: transparent; /* bouton “premium” */ color:#fff; text-decoration:none; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; } .property-prestige-btn:hover{ background: rgba(255,255,255,.12); color:#fff; } /* Ton bouton + doit rester cliquable au-dessus */ .property-image--prestige-card .property-overlay-banner{ position:absolute; right:14px; bottom:14px; z-index: 5; } .property-image--prestige-card .property-overlay-banner a{ pointer-events:auto; } /* Responsive */ @media(max-width:768px){ .property-image--prestige-card img{ height: 280px; } .property-prestige-panel{ max-width: 92%; padding: 18px 16px 14px; } .property-prestige-title{ font-size: 22px; } } /* ============================================ LISTING PRESTIGE (ajaxPaginationData) : 50/50 Scope strict pour éviter tout conflit ailleurs ============================================ */ .row.resultListing .property-item--prestige{ display:flex; flex-wrap: nowrap; /* IMPORTANT : évite que ça passe en dessous */ min-height: 400px; } .row.resultListing .property-item--prestige .property-image--featured, .row.resultListing .property-item--prestige .property-content--featured{ flex: 0 0 50%; max-width: 50%; } /* alternance */ .row.resultListing .property-item--prestige.property-item--prestige-reverse .property-image--featured{ order:2; } .row.resultListing .property-item--prestige.property-item--prestige-reverse .property-content--featured{ order:1; } /* Responsive : pile sur mobile */ @media (max-width: 991.98px){ .row.resultListing .property-item--prestige{ flex-wrap: wrap; } .row.resultListing .property-item--prestige .property-image--featured, .row.resultListing .property-item--prestige .property-content--featured{ flex:0 0 100%; max-width:100%; } }