/* =========================================================================
* La Fosca Bay — CHARTE V4 PARTAGÉE (validée Marc).
* Primitives réutilisables sur toutes les pages intérieures (Découvrir, Avis,
* Contact, Galerie, Réservation, fiches, tarifs). Extrait/généralisé de home.css.
* Enqueue GLOBAL (functions.php). L'accueil garde son propre home.css (insulé).
* design de réf : app/public/_design/home-v4.html
* Pattern : bandes/hero photo = widget `image` (vrai ![]()
, indépendant du
* post-CSS Elementor) en position:absolute + overlay ::before + contenu z-index.
* ========================================================================= */
:root{ --v4-primary:#1A5E7A; --v4-deep:#134B62; }
/* ---------- Eyebrows (sur-titres) ---------- */
.lfb-v4-eyebrow p, .lfb-v4-eyebrow-light p{ margin:0; font-weight:500; letter-spacing:.22em; text-transform:uppercase; font-size:12px; }
.lfb-v4-eyebrow p{ color:var(--c-cta); }
.lfb-v4-eyebrow-light p{ color:#fff; opacity:.85; }
/* ---------- Boutons V4 ---------- */
.lfb-v4-btn .elementor-button{ font-family:var(--font-body); font-weight:500; letter-spacing:.04em; font-size:14px; padding:15px 34px; border-radius:3px; transition:.25s; border:1px solid transparent; }
.lfb-v4-btn-white .elementor-button{ background:#fff; color:var(--c-ink); }
.lfb-v4-btn-white .elementor-button:hover{ background:var(--c-sand); color:var(--c-ink); }
.lfb-v4-btn-ghostlight .elementor-button{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.lfb-v4-btn-ghostlight .elementor-button:hover{ background:#fff; color:var(--c-ink); border-color:#fff; }
.lfb-v4-btn-ghost .elementor-button{ background:transparent; color:var(--c-ink); border-color:var(--c-ink); }
.lfb-v4-btn-ghost .elementor-button:hover{ background:var(--c-ink); color:#fff; }
.lfb-v4-btn-ctafill .elementor-button{ background:var(--c-cta); color:#fff; }
.lfb-v4-btn-ctafill .elementor-button:hover{ background:var(--c-cta-hover,#B5663F); color:#fff; }
.lfb-v4-center-btn{ text-align:center; margin-top:30px; }
/* ---------- Hero de PAGE INTÉRIEURE (image ![]()
en fond + overlay, centré) ---------- */
.lfb-v4-phero{ position:relative; overflow:hidden; min-height:54vh; display:flex; align-items:center; justify-content:center; }
.lfb-v4-phero-bg{ position:absolute; inset:0; z-index:0; line-height:0; margin:0; }
.lfb-v4-phero-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.lfb-v4-phero::before{ content:""; position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg,rgba(20,30,40,.32) 0%,rgba(20,30,40,.18) 42%,rgba(19,75,98,.55) 100%); }
.lfb-v4-phero-inner{ position:relative; z-index:2; max-width:840px; width:100%; margin:0 auto; padding:0 32px; text-align:center; color:#fff; }
.lfb-v4-phero-title .elementor-heading-title{ font-family:var(--font-title); font-weight:400; font-size:clamp(38px,6vw,74px); line-height:1.06; letter-spacing:-.01em; color:#fff; text-shadow:0 2px 26px rgba(0,0,0,.3); margin:14px 0 16px; }
.lfb-v4-phero-sub p{ max-width:620px; margin:0 auto; font-size:19px; font-weight:300; color:#fff; opacity:.96; }
/* ---------- Bande bleue (stats / chiffres) ---------- */
.lfb-v4-stats{ padding:60px 0; background-image:linear-gradient(135deg,#1A5E7A,#134B62) !important; }
.lfb-v4-stats-row{ max-width:1180px; width:100%; margin:0 auto; padding:0 32px; display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; text-align:center; }
.lfb-v4-stat{ flex:1; min-width:150px; }
.lfb-v4-stat-num .elementor-heading-title{ font-family:var(--font-title); font-weight:500; font-size:46px; line-height:1; color:#fff; }
.lfb-v4-stat-lab p{ margin:10px 0 0; font-size:13px; letter-spacing:.06em; color:#fff; opacity:.82; }
/* ---------- Intro (bloc centré étroit) ---------- */
.lfb-v4-intro{ max-width:780px; width:100%; margin:0 auto; padding:96px 32px 72px; text-align:center; }
.lfb-v4-intro-title .elementor-heading-title{ font-family:var(--font-title); font-weight:400; font-size:clamp(30px,4vw,52px); color:var(--v4-primary); max-width:18ch; margin:16px auto 26px; }
.lfb-v4-intro-text p{ max-width:62ch; margin:0 auto 16px; font-size:18px; color:#4a5560; font-weight:300; }
.lfb-v4-rule{ width:54px; min-height:1px; background:var(--c-sand-deep); margin:46px auto 0; }
/* ---------- Bande PHOTO pleine largeur (image ![]()
+ légende) ---------- */
.lfb-v4-fullband{ position:relative; }
.lfb-v4-fullband-img img{ display:block; width:100%; height:44vh; min-height:340px; object-fit:cover; }
.lfb-v4-fullband-cap{ position:absolute; left:0; right:0; bottom:22px; z-index:2; }
.lfb-v4-fullband-cap p{ margin:0; color:#fff; font-family:var(--font-title); font-style:italic; font-size:21px; text-shadow:0 2px 18px rgba(0,0,0,.55); text-align:center; }
/* ---------- Section claire centrée + sec-title ---------- */
.lfb-v4-section{ max-width:1180px; width:100%; margin:0 auto; padding:96px 32px; text-align:center; }
.lfb-v4-sec-title .elementor-heading-title{ font-family:var(--font-title); font-weight:400; font-size:clamp(28px,3.5vw,44px); color:var(--v4-primary); margin:14px 0 0; }
.lfb-v4-section-body{ margin-top:52px; }
/* ---------- Bande EXPÉRIENCE (image ![]()
en fond + overlay bleu + texte) ---------- */
.lfb-v4-exp{ position:relative; overflow:hidden; min-height:60vh; display:flex; align-items:center; justify-content:flex-start; }
.lfb-v4-exp-bg{ position:absolute; inset:0; z-index:0; line-height:0; margin:0; }
.lfb-v4-exp-bg img{ width:100%; height:100%; object-fit:cover; display:block; }
.lfb-v4-exp::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(19,75,98,.82),rgba(19,75,98,.42)); }
.lfb-v4-exp-box{ position:relative; z-index:2; max-width:1180px; width:100%; margin:0 auto; padding:0 32px; color:#fff; }
.lfb-v4-exp-box > *{ max-width:540px; }
.lfb-v4-exp-title .elementor-heading-title{ font-family:var(--font-title); font-weight:400; font-size:clamp(30px,4vw,50px); color:#fff; margin:14px 0 16px; }
.lfb-v4-exp-text p{ font-size:18px; font-weight:300; color:#fff; opacity:.95; margin:0 0 26px; }
/* ---------- CTA (bande claire) ---------- */
.lfb-v4-cta{ text-align:center; padding:96px 32px; border-top:1px solid var(--c-sand); }
.lfb-v4-cta-title .elementor-heading-title{ font-family:var(--font-title); font-weight:400; font-size:clamp(30px,4vw,52px); color:var(--v4-primary); margin-bottom:18px; }
.lfb-v4-cta-text p{ color:#4a5560; font-weight:300; margin-bottom:8px; }
/* ---------- Responsive ---------- */
@media(max-width:860px){
.lfb-v4-intro, .lfb-v4-section{ padding:64px 24px; }
.lfb-v4-phero{ min-height:46vh; }
.lfb-v4-exp{ min-height:auto; padding:72px 0; }
}
/* Pas de fil d'ariane ni de barre-titre de thème Kava (décision Marc) :
chaque page a son hero V4, ces éléments sont redondants. */
.page-header,
.breadcrumbs, .kava-breadcrumbs, .rank-math-breadcrumb, .rank-math-breadcrumbs,
.elementor-widget-breadcrumbs, .jet-listing-breadcrumbs, .jet-breadcrumbs,
nav.woocommerce-breadcrumb, .breadcrumb-trail, .trail-items, .site-breadcrumb {
display: none !important;
}
/* Hero des pages intérieures : photo de fond CSS instantanée (anti-flash gris, comme l'accueil).
Le widget image reste par-dessus (même photo) → transition invisible. */
.lfb-v4-phero { background-size: cover; background-position: center; background-repeat: no-repeat; }
.page-id-86 .lfb-v4-phero { background-image: url(/wp-content/uploads/2026/06/fosca-hero.jpg); }
.page-id-88 .lfb-v4-phero { background-image: url(/wp-content/uploads/2026/06/miro-36-1024x768.jpg); }
.page-id-89 .lfb-v4-phero { background-image: url(/wp-content/uploads/2026/06/dali-12-1024x681.jpg); }
.page-id-90 .lfb-v4-phero { background-image: url(/wp-content/uploads/2026/06/miro-30-1024x681.jpg); }
.page-id-87 .lfb-v4-phero { background-image: url(/wp-content/uploads/2026/06/dali-01-1024x681.jpg); }
.page-id-210 .lfb-v4-phero { background-image: url(/wp-content/uploads/2026/06/miro-30-1024x681.jpg); }
.post-type-archive-logement .lfb-v4-phero { background-image: url(/wp-content/uploads/2026/06/miro-01-1024x681.jpg); }
/* Fiche logement : hero V4 plein écran (photo à la une par logement + titre/slogan dynamiques). */
.postid-7 .lfb-v4-phero { background-image: url(/wp-content/uploads/2026/06/dali-01.jpg); }
.postid-29 .lfb-v4-phero { background-image: url(/wp-content/uploads/2026/06/miro-01.jpg); }
/* Conv.20 — Hero logement « façon accueil » : la 1re photo de l'appart remplit tout l'écran
à l'arrivée (effet ouahh), comme le hero d'accueil 100vh. Titre agrandi pour l'impact. */
.single-logement .lfb-v4-phero {
min-height: 100vh;
min-height: 100svh;
}
/* Sortir le contenu du conteneur 1200px de Kava → hero (et galerie) pleine largeur,
comme l'accueil. Les sections de texte se recentrent via leur propre max-width (.lfb-sec). */
.single-logement .site-content__wrap.container { max-width: 100%; padding-left: 0; padding-right: 0; }
.single-logement .site-content__wrap.container > .row { margin-left: 0; margin-right: 0; }
.single-logement .site-content__wrap.container > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
.single-logement .lfb-v4-phero-title .jet-listing-dynamic-field__content,
.single-logement .lfb-v4-phero-title .elementor-heading-title {
font-size: clamp(46px, 8vw, 104px);
line-height: 1.04;
letter-spacing: -.02em;
}
.lfb-v4-phero-title .jet-listing-dynamic-field__content {
font-family: var(--font-title); font-weight: 400; font-size: clamp(38px,6vw,74px);
line-height: 1.06; letter-spacing: -.01em; color: #fff; text-shadow: 0 2px 26px rgba(0,0,0,.3); margin: 14px 0 16px;
}
.lfb-v4-phero-sub .elementor-heading-title {
font-family: var(--font-body); font-size: 19px; font-weight: 300; color: #fff; opacity: .96; max-width: 620px; margin: 0 auto;
}
/* le titre + slogan sont désormais dans le hero → on masque les doublons du bloc infos */
.single-logement .lfb-head-main .lfb-title,
.single-logement .lfb-head-main .lfb-slogan { display: none !important; }
/* Conv.12 — pas de césure automatique sur les grands titres V4 (évite « au-tour ») */
.lfb-v4-phero-title .elementor-heading-title,
.lfb-v4-intro-title .elementor-heading-title,
.lfb-v4-sec-title .elementor-heading-title,
.lfb-v4-cta-title .elementor-heading-title,
.lfb-v4-exp-title .elementor-heading-title { -webkit-hyphens: manual; hyphens: manual; overflow-wrap: normal; }
/* Carte contact — marqueurs logos artistes (Dalí / Miró) en pastilles rondes */
.lfb-gmap .jet-map-marker-image {
width: 56px;
height: 56px;
border-radius: 50%;
background: #fff;
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.45);
box-sizing: border-box;
object-fit: cover;
}
/* Carte contact — libellé (Dalí / Miró) sous le logo-marqueur */
.lfb-gmap .lfb-marker {
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
line-height: 1;
}
.lfb-gmap .lfb-marker-label {
font-weight: 700;
font-size: 12px;
color: #1a1a1a;
background: #fff;
padding: 2px 8px;
border-radius: 10px;
box-shadow: 0 1px 3px rgba(0,0,0,.35);
white-space: nowrap;
}
/* Carte « Découvrir » (fiche lieu) — point ROUGE du lieu courant (repère, non cliquable) */
.lfb-gmap .lfb-poi-pin {
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #e23b3b;
border: 3px solid #fff;
box-shadow: 0 2px 6px rgba(0,0,0,.5);
box-sizing: border-box;
cursor: default;
}
/* Cartes pleine largeur edge-to-edge (full-bleed) — Découvrir + accueil + single logement */
.lfb-poi-single-loc > .lfb-poi-loc-map,
.lfb-poi-loc-map,
.lfb-home-loc-map,
.lfb-appart-loc-map {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
align-self: stretch !important;
}
.lfb-poi-loc-map .jet-map-listing,
.lfb-home-loc-map .jet-map-listing,
.lfb-appart-loc-map .jet-map-listing { border-radius: 0; }