/* ===== 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 */
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: 220px;
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: 0.35rem;
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #E4C276;
}
/* 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: center;
align-items: center;
}
.property-content--featured .subtitle {
margin-bottom: 0.4rem;
}
.property-content--featured .property-title {
font-size: 1.3rem;
margin: 0 0 0.8rem;
}
.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;
}
/* 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%;
}
.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: 220px;
}
}
/* =========================
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: 0 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;
}
/*************************************************************
* 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%;
}
}
/* =========================================================
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: 1.7rem;
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-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: #E4C276;
}
.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: 1.7rem;
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(520px, 100vw);
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;
}
}
/* ==========================
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: 220px;
}
.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 h3 {
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 h3::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(520px, 100vw);
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 */
}
/* 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;
margin: 0 0 1.4rem;
padding-left: 1.2rem;
font-size: 1.45rem;
line-height: 1.35;
}
/* 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: 1rem;
line-height: 1.7;
max-width: 700px;
padding-left: 1.5rem;
position: relative;
}
/* 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 */
}