/* --- POLICE PERSONNALISÉE --- */
@font-face {
    font-family: "Royale Milano";
    src: url("../fonts/royale-milano/RoyaleMilanoRegular.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Royale Milano";
    src: url("../fonts/royale-milano/RoyaleMilanoRegularItalic.otf") format("opentype");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Branch Regular";
    src: url("../fonts/branch-regular/Branch%20Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Segoe UI : uniquement pour le handle Instagram (@…) */
@font-face {
    font-family: "Segoe UI";
    src: url("../fonts/segoe-ui/Segoe%20UI.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}                               

/* --- VARIABLES ET BASES --- */
:root {
    --beige-loru: #F2EFDF; /* Couleur signature [cite: 14] */
    --white: #ffffff;
    --text-dark: #595842;
    --text-secondary: #595842; /* Même couleur pour le secondaire */
    --gold: #d4af37;
    --section-text-max-width: 500px; /* Même largeur bloc texte Location et Villas */
    /* Accueil section Location : vibrance sur la photo uniquement */
    --home-hero-vibrance-saturate: 1.09;
    --home-hero-vibrance-contrast: 1.025;
}

/* Royale Milano : tous les h1, titres, menu déroulant, langue — police uniquement, pas de taille globale */
h1, h2,
.hero-title, .hero-title-main, .hero-title-tagline,
.serif-title,
.location-title, .location-subtitle, .location-text h1, .location-text h2,
.villas-title, .villas-text h1, .villas-text h2,
.villas-video-title, .villas-video-subtitle,
.villas-list-title, .villas-list-subtitle, .villas-list-text h1, .villas-list-text h2,
.villa-card-title, .villa-card-title-link,
.villa-detail-title, .villa-detail-subtitle, .villa-title-line-1, .villa-title-line-2,
.villa-detail-section-title, .villa-detail-location-description h1, .villa-detail-location-description h2,
.villa-single-title, .villa-hero-title,
.tarifs-hero-title, .tarifs-hero-subtitle, .tarifs-card-title,
.contact-form-title, .contact-form-subtitle, .contact-title-second,
.footer-section-title,
.equipements-title, .villa-gallery-title,
.booking-calendar-title, .booking-calendar-subtitle, .calendar-month-title,
.unique-place-title, .separator-title,
.side-menu-list a, .side-menu-nav a,
.lang-selector .lang-current, .lang-dropdown .lang-item, .lang-dropdown .lang-item span {
    font-family: "Royale Milano", serif;
    font-weight: 500;
    font-style: normal;
}

/* Section Instagram : titre "Sur Instagram" en Royale Milano 50px */
.instagram-section .serif-title {
    font-family: "Royale Milano", serif;
    font-size: 50px !important;
    font-weight: 500;
    font-style: normal;
}

.cigra-regular {
    font-family: "Royale Milano", serif;
    font-weight: 500;
    font-style: normal;
}

/* Branch Regular : boutons, liens, navbar (réservation, FR), formulaires, cartes villas (sdb, ch, prsn) */
.reservation-btn, .reservation-btn span,
.lang-selector .lang-current, .lang-dropdown .lang-item, .lang-dropdown .lang-item span,
.nav-actions, .nav-actions a,
.location-btn, .villas-btn, .villas-btn-text, .villa-card-btn,
.villa-detail-back-link, .villa-detail-location, .villa-detail-btn,
.contact-form-submit, .contact-form-field label, .contact-form-field input, .contact-form-field textarea, .contact-form-field select,
.villa-detail-item, .villa-detail-item span, .villa-card-details,
.footer-logo-link,
.villa-availability-btn, .villa-detail-location-btn {
    font-family: "Branch Regular", serif;
}

/* Royale Milano : menu slide hamburger (liens + contact) */
.side-menu-list a, .side-menu-nav a, .side-menu-contact, .side-menu-contact a, .side-menu-contact p {
    font-family: "Royale Milano", serif;
    font-weight: 500;
}
.side-menu-list a, .side-menu-nav a {
    font-size: 1.125rem;
}

/* Zoom désactivé - Site à 100% */

/* Smooth scroll global */
html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    font-family: "Royale Milano", serif;
    font-size: 16px;
    font-weight: 500;
    background-color: #F2EFDF;
    color: #595842;
    line-height: 1.2;
    position: relative;
}

/* Mobile paysage : barres latérales (pillarboxing) en blanc au lieu de beige */
@media (max-width: 896px) and (orientation: landscape) {
    html,
    body {
        background-color: #ffffff;
    }
}

/* Mobile portrait : safe areas (encoche, indicateur d'accueil) + bandes latérales (évite décalage / liseré blanc selon appareils) */
@media (max-width: 768px) and (orientation: portrait) {
    html,
    body {
        background-color: #ffffff !important;
        padding-top: env(safe-area-inset-top, 0px);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        padding-left: env(safe-area-inset-left, 0px);
        padding-right: env(safe-area-inset-right, 0px);
    }
}


/* Branch Regular pour les paragraphes et le petit texte (16px et moins) — tout le reste en Royale Milano */
p,
.body-text,
.text-small {
    font-family: "Branch Regular", serif;
}

/* Texture/grain subtil sur tout le site */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Sous le contenu : z-index très haut recouvrait la vidéo hero (rectangle noir) sur iOS WebKit */
    z-index: 0;
    opacity: 0.03;
    background-image: 
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 2px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 2px
        );
    background-size: 20px 20px;
}

/* Aligner le grain sur les safe areas (évite un léger décalage / liseré vs le fond sur iPhone) */
@media (max-width: 768px) and (orientation: portrait) {
    body::before {
        left: env(safe-area-inset-left, 0px);
        right: env(safe-area-inset-right, 0px);
        top: env(safe-area-inset-top, 0px);
        bottom: env(safe-area-inset-bottom, 0px);
        width: auto;
        height: auto;
    }
}

/* Règle générale pour tous les paragraphes */
p {
    font-size: 15px !important;
}

main {
    background-color: var(--white);
    position: relative;
    z-index: 1;
}

.instagram-section,
.reviews-section,
.site-footer {
    position: relative;
    z-index: 1;
}

/* --- NAVBAR [cite: 8] --- */
.site-navbar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    z-index: 1000;
}

.navbar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    z-index: 1000;
    padding-left: 100px !important;
    padding-right: 100px !important;
    margin-top: -34px !important;
    margin-bottom: 200px !important;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: none;
    color: #595842;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(-100%);
    animation: navbarSlideDown 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    background: transparent !important;
    backdrop-filter: none !important;
    height: 100px !important;
    min-height: 1px !important;
}

@keyframes navbarSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Classe .scrolled désactivée - la navbar ne change plus au scroll */

.navbar.hidden {
    transform: translateY(-100%) !important;
    opacity: 0 !important;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Navbar toujours en #917D6E partout (même sur les images) */
body:has(.villa-detail-section) .navbar,
body.villa-detail-page .navbar,
body:has(.hero) .navbar,
body:has(.unique-place-section) .navbar,
body:has(.tarifs-hero-section) .navbar,
body:has(.villa-hero-section) .navbar,
body:has(.villas-video-hero) .navbar,
.hero .navbar,
.unique-place-section .navbar,
.tarifs-hero-section .navbar,
.villa-hero-section .navbar,
.villas-video-hero .navbar {
    color: #595842 !important;
}

/* Navbar spécifique pour la page tarifs - background blanc visible dès le début (même hauteur que le reste du site) */
/* Page Les villas (hero vidéo) : barre blanche fixe dès le chargement ; animation uniquement sur .nav-container */
body:has(.villas-video-hero) .navbar,
.villas-video-hero .navbar {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: none !important;
}

body:has(.tarifs-hero-section) .navbar,
.tarifs-hero-section .navbar {
    background: #ffffff !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: none !important;
}


/* Navbar spécifique pour la page villa avec hero - background blanc visible dès le début */
body:has(.villa-hero-section) .navbar,
.villa-hero-section .navbar {
    background: #ffffff !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: none !important;
}

/* Seulement le contenu de la navbar arrive d'en haut sur la page tarifs */
body:has(.tarifs-hero-section) .navbar .nav-container,
.tarifs-hero-section .navbar .nav-container {
    opacity: 0;
    transform: translateY(-100%);
    animation: navbarContentSlideDown 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Seulement le contenu de la navbar arrive d'en haut sur la page villa avec hero */
body:has(.villa-hero-section) .navbar .nav-container,
.villa-hero-section .navbar .nav-container {
    opacity: 0;
    transform: translateY(-100%);
    animation: navbarContentSlideDown 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Seulement le contenu de la navbar arrive d'en haut sur la page Les villas (hero vidéo) */
body:has(.villas-video-hero) .navbar .nav-container,
.villas-video-hero .navbar .nav-container {
    opacity: 0;
    transform: translateY(-100%);
    animation: navbarContentSlideDown 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes navbarContentSlideDown {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

body:has(.villa-detail-section) .nav-logo,
body:has(.villa-detail-section) .nav-actions,
body.villa-detail-page .nav-logo,
body.villa-detail-page .nav-actions,
body:has(.hero) .nav-logo,
body:has(.hero) .nav-actions,
body:has(.unique-place-section) .nav-logo,
body:has(.unique-place-section) .nav-actions,
body:has(.tarifs-hero-section) .nav-logo,
body:has(.tarifs-hero-section) .nav-actions,
body:has(.villa-hero-section) .nav-logo,
body:has(.villa-hero-section) .nav-actions,
body:has(.villas-video-hero) .nav-logo,
body:has(.villas-video-hero) .nav-actions {
    color: #595842 !important;
}

body:has(.villa-detail-section) .logo-script,
body:has(.villa-detail-section) .logo-di,
body:has(.villa-detail-section) .logo-palombaggia,
body:has(.villa-detail-section) .logo-underline,
body.villa-detail-page .logo-script,
body.villa-detail-page .logo-di,
body.villa-detail-page .logo-palombaggia,
body.villa-detail-page .logo-underline,
body:has(.hero) .logo-script,
body:has(.hero) .logo-di,
body:has(.hero) .logo-palombaggia,
body:has(.hero) .logo-underline,
body:has(.unique-place-section) .logo-script,
body:has(.unique-place-section) .logo-di,
body:has(.unique-place-section) .logo-palombaggia,
body:has(.unique-place-section) .logo-underline,
body:has(.tarifs-hero-section) .logo-script,
body:has(.tarifs-hero-section) .logo-di,
body:has(.tarifs-hero-section) .logo-palombaggia,
body:has(.tarifs-hero-section) .logo-underline,
body:has(.villa-hero-section) .logo-script,
body:has(.villa-hero-section) .logo-di,
body:has(.villa-hero-section) .logo-palombaggia,
body:has(.villa-hero-section) .logo-underline,
body:has(.villas-video-hero) .logo-script,
body:has(.villas-video-hero) .logo-di,
body:has(.villas-video-hero) .logo-palombaggia,
body:has(.villas-video-hero) .logo-underline {
    color: #595842 !important;
}

body:has(.villa-detail-section) .logo-underline,
body.villa-detail-page .logo-underline,
body:has(.hero) .logo-underline,
body:has(.unique-place-section) .logo-underline,
body:has(.tarifs-hero-section) .logo-underline,
body:has(.villa-hero-section) .logo-underline,
body:has(.villas-video-hero) .logo-underline {
    background: #917D6E !important;
}

body:has(.villa-detail-section) .lang-selector i,
body:has(.villa-detail-section) .reservation-btn i,
body:has(.villa-detail-section) .menu-toggle i,
body.villa-detail-page .lang-selector i,
body.villa-detail-page .reservation-btn i,
body.villa-detail-page .menu-toggle i,
body:has(.hero) .lang-selector i,
body:has(.hero) .reservation-btn i,
body:has(.hero) .menu-toggle i,
body:has(.hero) .lang-selector .lang-chevron,
body:has(.unique-place-section) .lang-selector i,
body:has(.unique-place-section) .reservation-btn i,
body:has(.unique-place-section) .menu-toggle i,
body:has(.unique-place-section) .lang-selector .lang-chevron,
body:has(.tarifs-hero-section) .lang-selector i,
body:has(.tarifs-hero-section) .reservation-btn i,
body:has(.tarifs-hero-section) .menu-toggle i,
body:has(.tarifs-hero-section) .lang-selector .lang-chevron,
body:has(.villa-hero-section) .lang-selector i,
body:has(.villa-hero-section) .reservation-btn i,
body:has(.villa-hero-section) .menu-toggle i,
body:has(.villa-hero-section) .lang-selector .lang-chevron,
body:has(.villas-video-hero) .lang-selector i,
body:has(.villas-video-hero) .reservation-btn i,
body:has(.villas-video-hero) .menu-toggle i,
body:has(.villas-video-hero) .lang-selector .lang-chevron {
    color: #595842 !important;
}

body:has(.villa-detail-section) .lang-selector,
body:has(.villa-detail-section) .reservation-btn,
body:has(.villa-detail-section) .reservation-btn span,
body:has(.villa-detail-section) .lang-selector .lang-current,
body.villa-detail-page .lang-selector,
body.villa-detail-page .reservation-btn,
body.villa-detail-page .reservation-btn span,
body.villa-detail-page .lang-selector .lang-current,
body:has(.hero) .lang-selector,
body:has(.hero) .reservation-btn,
body:has(.hero) .reservation-btn span,
body:has(.hero) .lang-selector .lang-current,
body:has(.unique-place-section) .lang-selector,
body:has(.unique-place-section) .reservation-btn,
body:has(.unique-place-section) .reservation-btn span,
body:has(.unique-place-section) .lang-selector .lang-current,
body:has(.tarifs-hero-section) .lang-selector,
body:has(.tarifs-hero-section) .reservation-btn,
body:has(.tarifs-hero-section) .reservation-btn span,
body:has(.tarifs-hero-section) .lang-selector .lang-current,
body:has(.villa-hero-section) .lang-selector,
body:has(.villa-hero-section) .reservation-btn,
body:has(.villa-hero-section) .reservation-btn span,
body:has(.villa-hero-section) .lang-selector .lang-current,
body:has(.villas-video-hero) .lang-selector,
body:has(.villas-video-hero) .reservation-btn,
body:has(.villas-video-hero) .reservation-btn span,
body:has(.villas-video-hero) .lang-selector .lang-current {
    color: #595842 !important;
}

.nav-container {
    width: 100%;
    max-width: 1800px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 0;
    background: transparent;
    margin-top: 25px;
}

.nav-logo {
    margin-right: auto;
    margin-left: -20px;
}

.nav-actions {
    margin-left: auto;
    margin-right: -20px;
}

.nav-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, opacity 0.3s ease;
    flex-shrink: 0;
    opacity: 1;
}

.nav-logo img {
    opacity: 1 !important;
    visibility: visible !important;
}

.logo-complete {
    height: 190px;
    width: auto;
    object-fit: contain;
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
    max-width: 100%;
    transform: translate(-69px, 14px) !important;
}

/* Animation hover scale pour les icônes de la navbar */
.nav-logo:hover {
    transform: scale(1.1);
    opacity: 1;
}

.nav-logo:hover .logo-complete {
    transform: translate(-69px, 14px) scale(1.05) !important;
}

.lang-selector {
    transition: transform 0.3s ease;
}

.reservation-btn {
    transition: transform 0.3s ease;
}

.menu-toggle {
    transition: transform 0.3s ease;
}

.lang-selector i,
.lang-selector svg,
.reservation-btn i,
.reservation-btn svg,
.menu-toggle i,
.menu-toggle svg {
    transition: transform 0.3s ease;
    display: inline-block;
}

/* Effet zoom sur tout le bloc au survol - Version robuste */
.lang-selector-wrapper:hover .lang-selector,
.lang-selector:hover {
    transform: translateX(43px) scale(1.1) !important;
}

.reservation-btn:hover {
    transform: translateX(61px) scale(1.1) !important;
}

.reservation-btn:hover i {
    transform: translateX(57px) scale(1.1) !important;
}

.menu-toggle:hover {
    transform: translateX(69px) scale(1.1) !important;
}

.logo-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-olive-branch {
    height: 40px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.logo-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.2;
}

.logo-script {
    font-family: "Branch Regular", serif;
    font-size: 32px;
    font-weight: 400;
    color: inherit;
    margin: 0;
    line-height: 1;
    letter-spacing: 1px;
}

.logo-underline {
    width: 100%;
    height: 3px;
    background: currentColor;
    margin: 4px 0 6px 0;
    border-radius: 2px;
}

.logo-di {
    font-family: "Branch Regular", serif;
    font-size: 11px;
    font-weight: 400;
    color: inherit;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0;
}

.logo-palombaggia {
    font-family: "Branch Regular", serif;
    font-size: 12px;
    font-weight: 400;
    color: inherit;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 25px;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
    color: inherit;
}

.lang-selector-wrapper {
    position: relative;
}

.lang-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: inherit;
    transform: translateX(43px) !important;
}

.lang-selector i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    color: inherit;
}

.lang-selector .lang-chevron {
    width: 14px;
    height: 14px;
    transition: transform 0.3s ease;
    color: inherit;
}

.lang-selector.active .lang-chevron {
    transform: rotate(180deg);
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: var(--white);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    z-index: 1001;
}

.lang-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--text-dark);
    font-family: "Branch Regular", serif;
}

.lang-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.lang-item.active {
    background-color: rgba(0, 0, 0, 0.08);
    font-weight: 700;
}

.lang-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-dark);
}

.reservation-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    font-size: 16px;
    font-weight: 700;
    transform: translateX(61px) !important;
}

.reservation-btn i {
    width: 28px;
    height: 28px;
    stroke-width: 3;
    color: inherit;
    transform: translateX(57px) !important;
}

.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(69px) !important;
}

.menu-toggle i,
.menu-toggle svg {
    width: 30px;
    height: 30px;
    stroke-width: 2;
    color: inherit;
}

/* --- MENU DÉROULANT LATÉRAL --- */
/* Au-dessus de la navbar mobile (10010) pour que le panneau couvre logo + icônes */
.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh; /* fallback */
    height: 100svh; /* mobile : hauteur visible avec barre d’adresse (Safari, Chrome Android…) */
    z-index: 10020;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s ease, opacity 0.3s ease;
}

.side-menu.active {
    visibility: visible;
    opacity: 1;
}

.side-menu-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.side-menu-content {
    position: absolute;
    top: 0;
    right: 0;
    width: 22%;
    min-width: 240px;
    max-width: 320px;
    height: 100%;
    background: #F2EFDF;
    box-shadow: -2px 0 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    padding: 60px 40px 120px;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.side-menu.active .side-menu-content {
    transform: translateX(0);
}

.menu-close {
    position: absolute;
    top: 25px;
    right: 25px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #595842;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
    z-index: 10;
}

.menu-close:hover {
    opacity: 0.7;
}

.menu-close i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.side-menu-nav {
    flex: 1;
    margin-top: 60px;
}

.side-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.side-menu-list li {
    position: relative;
}

.side-menu-list li::after {
    content: none; /* Suppression des traits de séparation */
}

.side-menu-list li:last-child::after {
    display: none;
}

.side-menu-list a {
    display: block;
    padding: 25px 0;
    text-decoration: none;
    color: #595842;
    font-family: "Royale Milano", serif;
    font-size: 22px;
    font-weight: 500;
    font-style: normal;
    text-transform: uppercase;   /* Majuscules, plus net et luxe */
    letter-spacing: 0.16em;      /* Espacement pour un rendu haut de gamme */
    transition: opacity 0.3s ease;
    line-height: 1.3;
}

.side-menu-logo {
    margin-top: auto;          /* pousse le logo en bas */
    padding-top: 20px;
    padding-bottom: 30px;
    text-align: right;         /* aligné à droite */
}

.side-menu-logo img {
    max-width: 140px;
    height: auto;
    display: inline-block;
}

.side-menu-list a:hover {
    opacity: 0.6;
}

.side-menu-contact {
    margin-top: auto;
    padding-top: 25px;
    padding-bottom: 20px;
    border-top: none; /* Suppression du trait au-dessus du bloc contact */
    font-size: 13px;
    color: #595842;
    line-height: 2.2;
    font-family: "Royale Milano", serif;
}

.side-menu-contact p {
    margin: 0;
    font-weight: 500;
}

.side-menu-contact a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
    font-weight: 500;
    display: block;
}

.side-menu-contact a:hover {
    opacity: 0.7;
}

/* --- HERO SECTION [cite: 15] --- */
.hero {
    position: relative;
    height: 100vh; /* fallback */
    height: 100svh; /* évite dépassement / saut quand la barre d’adresse mobile change */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    color: var(--white);
    background-color: var(--beige-loru); /* visible tant que la photo charge (évite blanc nu) */
}

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transform-origin: center center;
}

/* Page d’accueil uniquement : vibrance sur la photo section Location */
body.home .location-section img,
body.front-page .location-section img {
    filter: saturate(var(--home-hero-vibrance-saturate)) contrast(var(--home-hero-vibrance-contrast));
}

/* Flash + dézoom d’intro + Ken Burns : accueil, tarifs, contact, villa détail, Les villas (vidéo) */
.hero-reveal-media {
    transform-origin: center center;
    transform: scale(1.12);
    animation: heroBgIntroDezoom 1.35s cubic-bezier(0.22, 0.99, 0.37, 1) forwards;
}

.hero-reveal-media.hero-bg--ken-active {
    animation: heroKenBurnsLoop 20s ease-in-out infinite alternate;
}

/* Flash blanc rapide par-dessus le hero (overlay reveal) */
.hero-intro-flash {
    position: absolute;
    inset: 0;
    z-index: 12; /* au-dessus du titre le temps du flash, puis disparaît */
    background: #ffffff;
    pointer-events: none;
    animation: heroIntroFlashOut 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes heroIntroFlashOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* Dézoom initial : l’image « rentre » dans le cadre */
@keyframes heroBgIntroDezoom {
    from {
        transform: scale(1.12);
    }
    to {
        transform: scale(1);
    }
}

/* Ken Burns classique après l’intro */
@keyframes heroKenBurnsLoop {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.12);
    }
}

/* Flash + dézoom seulement quand le média est prêt (classe .loru-hero-intro-ready sur le <section>) */
section:not(.loru-hero-intro-ready) .hero-intro-flash {
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

section:not(.loru-hero-intro-ready) .hero-reveal-media {
    animation: none !important;
    transform: scale(1.12);
}

@media (prefers-reduced-motion: no-preference) {
    section:not(.loru-hero-intro-ready) img.hero-reveal-media {
        opacity: 0;
        transition: opacity 0.35s ease;
    }

    section.loru-hero-intro-ready img.hero-reveal-media {
        opacity: 1;
    }
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    opacity: 0;
    animation: fadeIn 2.5s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.hero-title {
    font-family: "Royale Milano", serif;
    font-size: 100px !important;
    font-weight: 500 !important;
    margin: 0;
    line-height: 1.1;
    display: block;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), -1px -1px 1px rgba(255, 255, 255, 0.15);
}

/* Tagline "location villas corse du sud" : petit, au-dessus du titre */
.hero-title-tagline {
    display: block;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    font-size: 12px !important;
    font-weight: 400;
    margin-bottom: 20px;
    font-family: inherit;
}

/* Titre principal "L'oru di Palombaggia" : gros */
.hero-title-main {
    display: block;
    font-size: 100px !important;
}

.hero-title i {
    font-style: italic;
    font-weight: 500;
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .hero-intro-flash {
        animation: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
    }

    .hero-bg,
    .hero-reveal-media {
        animation: none !important;
        transform: none !important;
    }

    .hero-reveal-media.hero-bg--ken-active {
        animation: none !important;
    }
}

/* --- INSTAGRAM SECTION [cite: 14] --- */
.instagram-section {
    padding: 5px 0 !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    margin-top: 0;
    background-color: var(--beige-loru);
    text-align: center;
    overflow: hidden;
    position: relative;
    z-index: 5;
}

/* Désactiver les animations reveal pour Instagram et Footer, mais garder l'animation du carousel */
.instagram-section .insta-header *,
.instagram-section .serif-title,
.instagram-section .insta-handle,
.site-footer * {
    animation: none !important;
    transition: opacity 0.3s ease !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Autoriser l'animation du carousel Instagram - Défilement infini */
.insta-carousel {
    animation: scrollInstagram 50s linear infinite;
}

@keyframes scrollInstagram {
    0% {
        transform: translateX(0);
    }
    100% {
        /* 7 images × (600px de largeur + 10px de gap) */
        transform: translateX(calc(-7 * (600px + 10px)));
    }
}

.instagram-section.reveal-element,
.site-footer.reveal-element,
.instagram-section .reveal-element,
.site-footer .reveal-element {
    opacity: 1 !important;
    transform: none !important;
}

.insta-header {
    padding: 0 10px 10px !important;
    position: relative;
    z-index: 10;
}

.serif-title {
    font-family: "Royale Milano", serif;
    font-size: 3rem;
    font-style: italic;
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--text-secondary);
}

.insta-handle-link {
    text-decoration: none;
    display: inline-block;
    transition: opacity 0.3s ease;
    color: inherit;
}

.insta-handle-link:hover {
    opacity: 0.7;
}

.insta-handle {
    letter-spacing: 0.1em;
    font-size: 19px !important;
    opacity: 0.7;
    font-weight: 400;
    font-family: "Segoe UI", sans-serif !important;
    color: inherit;
    cursor: pointer;
    margin-top: -50px;
}

.insta-carousel-wrapper {
    position: relative;
    width: 100%;
    padding: 0 60px 0 0;
}

.insta-carousel-container {
    overflow: hidden;
    width: 100%;
}

.insta-carousel {
    display: flex;
    gap: 10px;
    will-change: transform;
    width: fit-content;
}

.insta-item {
    flex-shrink: 0;
    width: 600px;
    height: 600px;
    overflow: hidden;
    background: #d1cfc9;
    border: 1px solid var(--beige-loru);
}

.insta-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
    display: block;
}

.insta-item:hover img {
    transform: scale(1.05);
}

/* Flèches de navigation */
.insta-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.3s ease;
    opacity: 0.7;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.insta-carousel-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    transform: translateY(-50%) scale(1.1);
}

.insta-carousel-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.insta-carousel-prev {
    left: 10px;
}

.insta-carousel-next {
    right: 10px;
}

.insta-carousel-btn i {
    width: 24px;
    height: 24px;
    stroke-width: 2;
    color: #595842;
}

.insta-carousel-btn:hover i {
    color: #3B4038;
}

/* --- REVIEWS SECTION [cite: 12, 13] --- */
.reviews-section {
    padding: 80px 50px;
    background-color: #fff;
}

.reviews-container {
    max-width: 1800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

/* Widget Trustindex : occuper toute la largeur */
.reviews-container > div,
.reviews-container > .trustindex-airbnb-wrapper {
    grid-column: 1 / -1;
}

/* Ne pas écraser les styles du plugin Trustindex (couleurs, fonds des blocs d'avis) */
.trustindex-airbnb-wrapper {
    isolation: isolate;
    min-height: 1px;
}
/* Premier niveau du widget : laisser le plugin gérer couleurs et mise en forme */
.trustindex-airbnb-wrapper > * {
    all: revert;
    display: block;
    box-sizing: border-box;
}
/* Éviter que le thème force font-size !important sur les paragraphes du widget */
.trustindex-airbnb-wrapper p {
    font-size: inherit !important;
}
/* Si le plugin affiche un iframe, lui donner un fond pour que le contenu soit lisible */
.trustindex-airbnb-wrapper iframe {
    background: #fff;
}
/* Cartes d'avis et bouton "charger plus" Trustindex Airbnb : fond noir (priorité sur le plugin) */
.reviews-section .ti-widget.ti-airb .ti-review-item > .ti-inner,
.reviews-section .ti-widget.ti-airb .ti-load-more-reviews-container .ti-load-more-reviews-button,
.trustindex-airbnb-wrapper .ti-widget.ti-airb .ti-review-item > .ti-inner,
.trustindex-airbnb-wrapper .ti-widget.ti-airb .ti-load-more-reviews-container .ti-load-more-reviews-button {
    border-top-width: 0 !important;
    border-bottom-width: 0 !important;
    border-left-width: 0 !important;
    border-right-width: 0 !important;
    background: #f4f4f4 !important;
    background-color: #f4f4f4 !important;
}

.review-card {
    background: var(--beige-loru);
    padding: 25px 18px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 320px;
    transition: box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.review-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Désactiver les animations reveal uniquement pour les cartes du thème (pas le widget Trustindex) */
.review-card,
.review-card * {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.review-card.reveal-element {
    opacity: 1 !important;
    transform: none !important;
}

.review-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.review-avatar {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.review-info {
    flex: 1;
}

.review-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--text-dark);
    margin-bottom: 5px;
}

.review-date {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dark);
    opacity: 0.6;
}

.stars {
    color: #FFD700;
    margin-bottom: 20px;
    font-size: 16px;
    letter-spacing: 2px;
}

.review-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-dark);
    margin-bottom: auto;
    font-style: italic;
}

.review-source {
    margin-top: auto;
    display: flex;
    align-items: center;
}

.review-source svg {
    width: 16px;
    height: 16px;
}

/* --- LOCATION SECTION --- */
.location-section {
    padding: 96px 80px; /* Plus de padding pour centrer les blocs */
    background-color: var(--beige-loru);
}

/* Override pour #location-ideal - hauteur fixe 640px */
#location-ideal.location-section {
    padding: 100px 165px 100px 165px !important;
    margin: 0 !important;
    height: 640px !important;
    min-height: 640px !important;
    max-height: 640px !important;
    overflow: hidden;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Supprimer TOUTES les marges du contenu dans #location-ideal pour un contenu compact centré */
#location-ideal .location-container {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    top: 0 !important;
    height: auto !important;
    padding: 0 90px 0 90px !important; /* Même espacement que Villas : 90px chaque côté */
    gap: 30px !important; /* Espace texte / photo */
}

#location-ideal .location-content {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

#location-ideal .location-title {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

#location-ideal .location-text {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

#location-ideal .location-text p {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

#location-ideal .location-text p + p {
    margin-top: 16px !important;
}

#location-ideal .location-detail {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

#location-ideal .location-subtitle {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

#location-ideal .location-detail p {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
}

#location-ideal .location-btn {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.location-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2.2fr 2.8fr; /* Image ~44% (+10%), texte ~56% */
    gap: 30px !important; /* Espace image-texte */
    align-items: center;
    padding: 0 50px;
}

.location-content {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: flex-start;
    text-align: left;
    width: 100%;
}

.location-title {
    font-family: "Royale Milano", serif;
    font-size: 50px !important; /* text-5xl mobile par défaut */
    font-weight: 500;
    font-style: italic;
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.4;
    text-align: left;
    max-width: var(--section-text-max-width);
}

/* Titre section Location : "et maquis" / "and Scents" à la ligne (tout le site) */
.location-section .location-title .location-title-line2 {
    display: block !important;
    margin-top: 0.15em;
}

/* Titre section Location en anglais (Between Sea and Scents) : weight 700 */
body.lang-en .location-title {
    font-weight: 700 !important;
}

.location-text {
    display: flex;
    flex-direction: column;
    gap: 25px;
    align-items: flex-start;
    text-align: justify;
    max-width: var(--section-text-max-width);
    width: 100%;
    min-width: 0; /* Permet au bloc flex de ne pas dépasser */
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
}

.location-text * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Forcer la police Branch Regular sur TOUT le contenu ACF de location-text */
.location-text,
.location-text *,
.location-text p,
.location-text h1,
.location-text h2,
.location-text h3,
.location-text h4,
.location-text h5,
.location-text h6,
.location-text strong,
.location-text em,
.location-text span,
.location-text div,
.location-text ul,
.location-text ol,
.location-text li,
.location-text a {
    font-family: "Branch Regular", serif !important;
}

.location-text p {
    font-size: 15px !important;
    line-height: 1.625 !important; /* relaxed */
    color: var(--text-dark) !important;
    margin: 0 !important;
    text-align: justify !important;
}

/* Styles spécifiques pour les titres H2 dans location-text - Style identique à .location-title */
.location-text h2 {
    font-family: "Royale Milano", serif !important;
    font-size: 50px !important; /* Même taille que .location-title */
    font-weight: 500 !important;
    font-style: italic !important; /* Italique comme .location-title */
    color: var(--text-secondary) !important; /* Même couleur que .location-title */
    line-height: 1.4 !important; /* Même line-height que .location-title */
    margin: 25px 0 15px 0 !important; /* Espacement cohérent avec le gap de 25px */
    text-align: left !important;
}

.location-text h2:first-child {
    margin-top: 0 !important;
}

/* Empêcher WordPress d'ajouter des styles par défaut */
.location-text .wp-block,
.location-text .wp-block *,
.location-text .entry-content,
.location-text .entry-content *,
.location-text .wp-block-paragraph,
.location-text .wp-block-heading,
.location-text .has-large-font-size,
.location-text .has-medium-font-size,
.location-text .has-small-font-size {
    font-family: "Branch Regular", serif !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

.location-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
}

.location-subtitle {
    font-family: "Royale Milano", serif;
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0 0 10px 0;
    color: var(--text-dark);
    text-transform: none;
    text-align: left;
}

.location-btn {
    display: inline-block;
    padding: 10px 25px;
    border: 1px solid var(--text-dark);
    background: transparent;
    color: var(--text-dark);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 10px; /* Réduit la taille du bouton */
    font-weight: 700;
    letter-spacing: 0.2em;
    transition: all 0.3s ease;
    align-self: flex-start;
    margin-top: 10px;
    cursor: pointer;
    font-family: "Branch Regular", serif;
}

.location-btn:hover {
    background-color: var(--text-dark);
    color: var(--white);
}

.location-image {
    display: flex;
    justify-content: center;
    align-items: center;
}

.location-image-card {
    background: transparent;
    padding: 0;
    border-radius: 16px;
    box-shadow: none;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

.location-image-card img {
    display: block;
    object-fit: cover;
    border-radius: 16px; /* Bords arrondis */
}
/* Taille max desktop uniquement à partir de 1367 px (1025–1366 = progression dans un autre bloc) */
@media (min-width: 1367px) {
    .location-image-card img {
        width: 690px;
        height: 748px;
    }
    /* Limiter la largeur des conteneurs pour éviter qu’ils augmentent trop après 1366 (reprendre 90% comme en 1025–1366) */
    .location-section .location-container,
    .villas-section .villas-container {
        width: 100% !important;
        max-width: 1230px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }
    /* Location : colonne texte = largeur à 1217 px (380 px), colonne grille pour ne pas créer d’espace image–texte */
    .location-section .location-container,
    #location-ideal .location-container {
        grid-template-columns: 380px 1fr !important;
    }
}

/* Effet parallaxe pour les images */
.parallax-image {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

.parallax-container {
    overflow: hidden;
}

/* --- UNIQUE PLACE SECTION --- */
.unique-place-section {
    position: relative;
    width: 100%;
    height: 77vh;
    min-height: 474px;
    overflow-x: hidden;
    overflow-y: visible;
    padding-left: 0;
    padding-right: 0;
}

@supports (overflow-x: clip) {
    .unique-place-section {
        overflow-x: clip;
        overflow-y: visible;
    }
}

.unique-place-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Rognage uniquement du média (scale parallax), pas du calque texte */
.unique-place-media-clip {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.unique-place-media-clip img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Parallax pro : scale(1.25), déplacement doux et long (facteur 0.1 en JS) */
.unique-place-section .unique-place-media-clip img.parallax-image {
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center center;
    transform-origin: center center;
    transform: scale(1.25);
}

.unique-place-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.unique-place-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 40px;
}

.unique-place-title {
    font-family: "Royale Milano", serif;
    font-size: 80px;
    font-weight: 500;
    color: var(--white);
    text-align: center;
    margin: 0;
    line-height: 1.2;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), -1px -1px 1px rgba(255, 255, 255, 0.15);
    text-transform: none; /* Afficher le texte ACF tel que saisi (ex. « Évasion de Luxe entre Porto-Vecchio et Bonifacio ») */
}

/* Arrivée du texte : depuis le bas vers le haut */
.unique-place-text.unique-place-text-entrance {
    opacity: 0;
    transform: translateY(clamp(110px, 22vh, 240px));
    transition: opacity 1.2s cubic-bezier(0.33, 0.85, 0.22, 1), transform 1.2s cubic-bezier(0.33, 0.85, 0.22, 1);
}

.unique-place-text.unique-place-text-entrance.is-in-view {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .unique-place-text.unique-place-text-entrance {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* --- SEPARATOR SECTION --- */
.separator-section {
    position: relative;
    width: 100%;
    height: 65vh;
    min-height: 400px;
    overflow: hidden;
    margin-bottom: 0;
    /* full-bleed horizontal: aucun padding propre à la section */
    padding-left: 0;
    padding-right: 0;
}

.separator-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.separator-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Parallax pro : scale(1.25), déplacement doux et long (facteur 0.1 en JS) */
.separator-section .separator-image img.parallax-image {
    height: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: center center;
    transform-origin: center center;
    transform: scale(1.25);
}

.separator-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
}

.separator-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    padding: 40px;
}

.separator-title {
    font-family: "Royale Milano", serif;
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 500;
    color: var(--white);
    text-align: center;
    margin: 0;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    text-transform: none;
}

/* --- VILLAS SECTION (Active 3) - même espacement que Location --- */
.villas-section .villas-container {
    gap: 30px !important; /* Espace texte / photo */
}

.villas-section {
    padding: 100px 15px 100px 165px !important;
    height: 640px !important;
    min-height: 640px !important;
    max-height: 640px !important;
    background-color: var(--beige-loru);
    overflow: hidden;
    display: flex;
    align-items: center;
}

.villas-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2.8fr 2.2fr; /* Image 2.8fr, texte 2.2fr = même largeur bloc texte que Location */
    gap: 30px !important; /* Espace image-texte */
    align-items: center;
    padding: 0 50px; /* Même que Location pour même espace texte / bord écran */
}

.villas-image {
    order: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.villas-image-card {
    background: transparent;
    padding: 0;
    border-radius: 16px;
    box-shadow: none;
    overflow: hidden;
    width: 100%;
    margin: 0 auto;
}

.villas-image img {
    display: block;
    object-fit: cover;
    border-radius: 16px; /* Bords arrondis */
}
@media (min-width: 1367px) {
    .villas-image img {
        width: 690px;
        height: 748px;
    }
}

.villas-section--reversed .villas-image { order: 2; }
.villas-section--reversed .villas-content { order: 1; }

.villas-content {
    order: 2;
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: flex-start;
    text-align: left;
    width: 100%;
}

.villas-title {
    font-family: "Royale Milano", serif;
    font-size: 50px !important;
    font-weight: 500;
    margin: 0;
    color: var(--text-dark);
    line-height: 1.2;
    text-align: left;
    max-width: var(--section-text-max-width);
}

.villas-text {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    text-align: justify;
    max-width: var(--section-text-max-width);
    width: 100%;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
    box-sizing: border-box;
}

.villas-text * {
    max-width: 100%;
    box-sizing: border-box;
}

/* Forcer la police Branch Regular sur TOUT le contenu ACF de villas-text */
.villas-text,
.villas-text *,
.villas-text p,
.villas-text h1,
.villas-text h2,
.villas-text h3,
.villas-text h4,
.villas-text h5,
.villas-text h6,
.villas-text strong,
.villas-text em,
.villas-text span,
.villas-text div,
.villas-text ul,
.villas-text ol,
.villas-text li,
.villas-text a {
    font-family: "Branch Regular", serif !important;
}

.villas-text p {
    font-size: 15px !important;
    line-height: 1.625 !important;
    color: var(--text-dark) !important;
    margin: 0 !important;
    text-align: justify !important;
}

/* Espacement entre paragraphes = même que section location (25px), via le gap du conteneur .villas-text */

/* Styles spécifiques pour les titres H2 dans villas-text - Style identique à .location-title */
.villas-text h2 {
    font-family: "Royale Milano", serif !important;
    font-size: 50px !important; /* Même taille que .location-title */
    font-weight: 500 !important;
    font-style: italic !important; /* Italique comme .location-title */
    color: var(--text-secondary) !important; /* Même couleur que .location-title */
    line-height: 1.4 !important; /* Même line-height que .location-title */
    margin: 25px 0 15px 0 !important; /* Même espacement que .location-text h2 */
    text-align: left !important;
}

.villas-text h2:first-child {
    margin-top: 0 !important;
}

/* Empêcher WordPress d'ajouter des styles par défaut */
.villas-text .wp-block,
.villas-text .wp-block *,
.villas-text .entry-content,
.villas-text .entry-content *,
.villas-text .wp-block-paragraph,
.villas-text .wp-block-heading,
.villas-text .has-large-font-size,
.villas-text .has-medium-font-size,
.villas-text .has-small-font-size {
    font-family: "Branch Regular", serif !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

.villas-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dark);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    align-self: flex-start;
    margin-top: 10px;
    position: relative;
    padding-bottom: 8px;
}

.villas-btn-text {
    position: relative;
    display: inline-block;
}

.villas-btn-text::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
}

.villas-btn:hover .villas-btn-text::after {
    background: rgba(0, 0, 0, 0.4);
}

.villas-btn-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.villas-btn:hover {
    opacity: 1;
    transform: translateY(-5px);
}

.villas-btn:hover .villas-btn-arrow {
    transform: translateX(5px);
}

/* --- VILLAS VIDEO HERO --- */
.villas-video-hero {
    position: relative;
    width: 100%;
    height: 100vh; /* fallback */
    height: 100svh;
    min-height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000000; /* pas de blanc : évite écran « bloqué » en attendant les frames vidéo */
}

.villas-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: 0;
    background: #000000;
    opacity: 1;
    transform-origin: center center;
    /* Calque composite : évite rectangle noir sur certains WebKit sans réappliquer l’anim hero-reveal */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    animation: none !important;
}

.villas-video-noscript-fallback {
    position: absolute;
    inset: 0;
    background: #000000;
    z-index: 0;
}

.villas-video-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1;
    pointer-events: none;
}

/* Overlay "Appuyez pour activer le son" (mobile / tablette) */
.villas-video-sound-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.villas-video-sound-overlay.is-visible {
    display: flex;
    pointer-events: auto;
}
.villas-video-sound-overlay.is-unlocked {
    opacity: 0;
    pointer-events: none;
}
.villas-video-sound-overlay-text {
    font-family: "Branch Regular", sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--white);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
}
@media (min-width: 1025px) {
    .villas-video-sound-overlay.is-visible {
        display: none;
    }
    .villas-video-hero .villas-video-title {
        max-width: min(94vw, 72rem) !important;
    }
}

.villas-video-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    pointer-events: none;
    padding-left: clamp(12px, 4vw, 48px);
    padding-right: clamp(12px, 4vw, 48px);
    box-sizing: border-box;
}

.villas-video-subtitle {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    opacity: 0.9;
    color: var(--white);
}

.villas-video-title {
    font-family: "Royale Milano", serif;
    font-size: 100px !important;
    font-weight: 500;
    margin: 0 auto;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
    color: var(--white);
    width: fit-content;
    max-width: min(92vw, 38rem);
    overflow-wrap: break-word;
    word-wrap: break-word;
    animation: villasVideoTitleFadeOut 6s ease-in-out forwards;
}

@keyframes villasVideoTitleFadeOut {
    0%, 37% {
        opacity: 1;
    }
    53%, 100% {
        opacity: 0;
        visibility: hidden;
    }
}

.villas-video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 30px 50px;
}

.video-controls-left {
    display: flex;
    gap: 20px;
    align-items: center;
}

.video-control-btn {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.video-control-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.video-control-btn i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

/* --- VILLAS LIST SECTION --- */
.villas-list-section {
    padding: 100px 50px;
    background-color: var(--beige-loru);
}

.villas-list-header {
    max-width: 1200px;
    margin: 0 auto 60px;
    text-align: left;
}

.villas-list-subtitle {
    /* Toujours nettement plus petit que .villas-list-title (toutes largeurs) */
    font-size: clamp(9px, 0.2rem + 1.15vw, 11px);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #666;
    margin: 0 0 15px 0;
    font-family: "Branch Regular", serif;
    line-height: 1.3;
}

.villas-list-title {
    font-family: "Royale Milano", serif;
    font-size: clamp(1.65rem, 0.55rem + 3.8vw, 3.35rem);
    font-weight: 500;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.2;
    text-align: left;
}

/* Styles pour le texte descriptif ACF de la page Les Villas */
.villas-list-text {
    max-width: 1200px;
    margin: 0 auto 60px;
    text-align: left;
}

/* Forcer la police Branch Regular sur TOUT le contenu ACF de villas-list-text */
.villas-list-text,
.villas-list-text *,
.villas-list-text p,
.villas-list-text h1,
.villas-list-text h2,
.villas-list-text h3,
.villas-list-text h4,
.villas-list-text h5,
.villas-list-text h6,
.villas-list-text strong,
.villas-list-text em,
.villas-list-text span,
.villas-list-text div,
.villas-list-text ul,
.villas-list-text ol,
.villas-list-text li,
.villas-list-text a {
    font-family: "Branch Regular", serif !important;
}

.villas-list-text p {
    font-size: 15px !important;
    line-height: 1.625 !important;
    color: var(--text-dark) !important;
    margin: 0 0 20px 0 !important;
    text-align: left !important;
}

.villas-list-text p:last-child {
    margin-bottom: 0 !important;
}

/* Styles spécifiques pour les titres H2 dans villas-list-text - Style identique à .location-title */
.villas-list-text h2 {
    font-family: "Royale Milano", serif !important;
    font-size: 30px !important;
    font-weight: 500 !important;
    font-style: italic !important;
    color: var(--text-secondary) !important;
    line-height: 1.4 !important;
    margin: 25px 0 15px 0 !important;
    text-align: left !important;
}

.villas-list-text h2:first-child {
    margin-top: 0 !important;
}

/* Empêcher WordPress d'ajouter des styles par défaut */
.villas-list-text .wp-block,
.villas-list-text .wp-block *,
.villas-list-text .entry-content,
.villas-list-text .entry-content *,
.villas-list-text .wp-block-paragraph,
.villas-list-text .wp-block-heading,
.villas-list-text .has-large-font-size,
.villas-list-text .has-medium-font-size,
.villas-list-text .has-small-font-size {
    font-family: "Branch Regular", serif !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

.villas-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.villa-card {
    background: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.villa-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.villa-card-image-link {
    display: block;
    text-decoration: none;
    width: 100%;
}

.villa-card-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.villa-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}

.villa-card-image:hover img {
    transform: scale(1.1);
}

.villa-card-content {
    background: var(--white);
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    flex: 1;
    justify-content: center;
    align-items: center;
}

/* Désactiver les animations reveal sur le contenu texte des cartes */
.villa-card-content,
.villa-card-content * {
    opacity: 1 !important;
    transform: none !important;
}

/* Empêcher que les éléments enfants héritent des classes reveal */
.villa-card-content .villa-card-title,
.villa-card-content .villa-card-separator,
.villa-card-content .villa-card-details,
.villa-card-content .villa-detail-item,
.villa-card-content .villa-card-btn {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.villa-card-title-link {
    text-decoration: none;
    display: block;
    transition: opacity 0.3s ease;
}

.villa-card-title-link:hover {
    opacity: 0.7;
}

.villa-card-title {
    font-family: "Royale Milano", serif;
    font-size: 1.8rem;
    font-weight: 500;
    margin: 0;
    color: var(--text-dark);
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
}

.villa-card-separator {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin: 0;
}

.villa-card-details {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
}

.villa-detail-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    opacity: 0.45;
}

.villa-detail-item i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    color: var(--text-dark);
    opacity: 0.45;
}

.villa-detail-item span {
    text-transform: uppercase;
    font-weight: 400;
    color: var(--text-dark);
    letter-spacing: 0.5px;
    opacity: 0.45;
}

.villa-card-btn {
    display: inline-block;
    text-align: center;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-dark);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 1.5px;
    transition: all 0.3s ease;
    margin: 20px auto 0;
    width: fit-content;
    font-family: "Branch Regular", serif;
    position: relative;
    padding-bottom: 8px;
}

.villa-card-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
}

.villa-card-btn:hover {
    opacity: 0.7;
}

.villa-card-btn:hover::after {
    background: rgba(0, 0, 0, 0.4);
}

/* --- VILLA DETAIL PAGE --- */
/* Section blanche en haut */
/* Section principale : du bas du hero jusqu'au carrousel équipements */
.villa-detail-main-section {
    padding: 120px 80px 50px;
    background-color: var(--beige-loru) !important;
    position: relative;
    z-index: 2;
    min-height: 550px;
}

.villa-detail-section {
    padding: 0 80px;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background-color: var(--beige-loru) !important;
    position: relative;
    z-index: 1;
}

/* S'assurer que le background beige s'arrête avant la galerie photos */
.villa-detail-section .villa-detail-separator {
    background-color: var(--beige-loru);
}

/* Styles pour la section principale */
.villa-detail-main-section .villa-detail-container {
    position: relative;
    z-index: 2;
}

/* La galerie photos a son propre background beige */
.villa-gallery-section {
    background-color: var(--beige-loru) !important;
}

.villa-detail-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 0 50px;
    position: relative;
    z-index: 2;
}

/* 1368–1600px : réduire paddings + un peu plus de largeur pour l’image → elle atteint la hauteur du container plus tôt (même ratio) */
@media (min-width: 1368px) and (max-width: 1599px) {
    .villa-detail-main-section {
        padding-left: 48px !important;
        padding-right: 48px !important;
    }
    .villa-detail-main-section .villa-detail-container {
        padding-left: 24px !important;
        padding-right: 24px !important;
        max-width: 100%;
        grid-template-columns: 0.92fr 1.08fr;
    }
}

/* Colonne gauche - Contenu */
.villa-detail-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-right: 40px;
    padding-left: 0;
    align-items: center;
    justify-content: center;
}

.villa-detail-main-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.villa-detail-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-dark);
    text-decoration: none;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    transition: opacity 0.3s ease;
    width: fit-content;
    position: relative;
    z-index: 10001 !important;
    pointer-events: auto !important;
    cursor: pointer;
}

.villa-detail-back-link:hover {
    opacity: 0.7;
}

.villa-detail-back-link i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    pointer-events: none;
}

.villa-detail-location {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dark);
    opacity: 0.8;
    margin: 0;
    text-align: left;
    font-family: "Royale Milano", serif;
}

.villa-detail-title {
    font-family: "Royale Milano", serif;
    font-weight: 500;
    font-style: normal;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: var(--text-dark);
    margin: 0;
    line-height: 1.2;
    text-align: left;
    display: block;
}

.villa-title-line-1 {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    display: block;
}

.villa-title-line-2 {
    font-size: clamp(3rem, 5vw, 4.5rem);
    display: block;
}

.villa-detail-subtitle {
    font-family: "Royale Milano", serif;
    font-size: 1.1rem;
    font-style: italic;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.villa-detail-section-divider {
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
    margin: 10px 0;
}

.villa-detail-info {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    margin: 0;
    padding: 20px 0;
    align-items: center;
}

.villa-detail-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-dark);
    opacity: 0.6;
    flex: 1;
    justify-content: flex-start;
}

.villa-detail-info-item i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: var(--text-dark);
    flex-shrink: 0;
    opacity: 0.6;
}

.villa-detail-info-item span {
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.villa-detail-description {
    font-size: 24px;
    line-height: 1.7;
    color: var(--text-dark);
    margin: 0;
    opacity: 0.85;
    position: relative;
    padding-left: 20px;
}

.villa-detail-description::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--text-dark);
    opacity: 0.3;
}

.villa-detail-section-title {
    font-family: "Royale Milano", serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 500;
    font-style: italic;
    color: var(--text-dark);
    margin: 0 0 15px 0;
    line-height: 1.2;
    opacity: 0.9;
    position: relative;
    padding-left: 0;
}

.villa-detail-features-intro,
.villa-detail-comfort-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-dark);
    margin-bottom: 15px;
    opacity: 0.75;
}

/* Blocs individuels pour chaque feature */
.villa-feature-single-block {
    background: var(--white);
    padding: 20px 25px;
    border-radius: 4px;
    margin-bottom: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    gap: 15px;
    align-items: flex-start;
}

.villa-feature-single-block .feature-check-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    color: var(--text-dark);
    flex-shrink: 0;
    margin-top: 3px;
    opacity: 0.7;
}

.villa-feature-single-block .feature-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-dark);
    flex: 1;
}

.villa-feature-single-block .feature-content strong {
    font-weight: 700;
    color: var(--text-dark);
    opacity: 1;
}

.villa-feature-single-block .feature-content span {
    opacity: 0.8;
}

/* Forcer la police Branch Regular sur TOUT le contenu ACF de villa-detail-location-description */
.villa-detail-location-description,
.villa-detail-location-description *,
.villa-detail-location-description p,
.villa-detail-location-description h1,
.villa-detail-location-description h2,
.villa-detail-location-description h3,
.villa-detail-location-description h4,
.villa-detail-location-description h5,
.villa-detail-location-description h6,
.villa-detail-location-description strong,
.villa-detail-location-description em,
.villa-detail-location-description span,
.villa-detail-location-description div,
.villa-detail-location-description ul,
.villa-detail-location-description ol,
.villa-detail-location-description li,
.villa-detail-location-description a {
    font-family: "Branch Regular", serif !important;
}

.villa-detail-location-description {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--text-dark) !important;
    margin: 0 0 25px 0 !important;
    text-align: justify;
}

.villa-detail-location-description p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    color: var(--text-dark) !important;
    margin: 0 0 20px 0 !important;
    text-align: justify;
}

.villa-detail-location-description p:last-child {
    margin-bottom: 0 !important;
}

/* Styles spécifiques pour les titres H2 dans villa-detail-location-description - Style identique à .location-title */
.villa-detail-location-description h2 {
    font-family: "Royale Milano", serif !important;
    font-size: 30px !important;
    font-weight: 500 !important;
    font-style: italic !important;
    color: var(--text-secondary) !important;
    line-height: 1.4 !important;
    margin: 25px 0 15px 0 !important;
    text-align: left !important;
}

.villa-detail-location-description h2:first-child {
    margin-top: 0 !important;
}

/* Empêcher WordPress d'ajouter des styles par défaut */
.villa-detail-location-description .wp-block,
.villa-detail-location-description .wp-block *,
.villa-detail-location-description .entry-content,
.villa-detail-location-description .entry-content *,
.villa-detail-location-description .wp-block-paragraph,
.villa-detail-location-description .wp-block-heading,
.villa-detail-location-description .has-large-font-size,
.villa-detail-location-description .has-medium-font-size,
.villa-detail-location-description .has-small-font-size {
    font-family: "Branch Regular", serif !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

.villa-detail-location-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text-dark);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    align-self: flex-start;
    margin-top: 10px;
    position: relative;
    padding-bottom: 8px;
    font-family: "Branch Regular", serif;
}

.villa-detail-location-btn-text {
    position: relative;
    display: inline-block;
}

.villa-detail-location-btn-text::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease;
}

.villa-detail-location-btn:hover .villa-detail-location-btn-text::after {
    background: rgba(0, 0, 0, 0.4);
}

.villa-detail-location-btn-arrow {
    display: inline-block;
    transition: transform 0.3s ease;
}

.villa-detail-location-btn:hover {
    opacity: 1;
    transform: translateY(-5px);
}

.villa-detail-location-btn:hover .villa-detail-location-btn-arrow {
    transform: translateX(5px);
}

/* Séparateur entre sections */
.villa-detail-separator {
    max-width: 1200px;
    margin: 80px auto 0;
    padding: 0 50px;
    height: 1px;
    background: #595842;
}

/* S'assurer que tout le contenu jusqu'à la galerie a le background beige */
.villa-detail-section,
.villa-detail-section .villa-detail-container,
.villa-detail-section .villa-detail-content,
.villa-detail-section .villa-detail-separator {
    background-color: var(--beige-loru) !important;
}

.villa-detail-white-top {
    display: none;
}

/* Fond blanc en haut pour les pages villa-detail */
body:has(.villa-detail-section) main,
body.villa-detail-page main {
    background-color: var(--white) !important;
}

/* Navbar blanche uniquement pour la page villa detail - visible dès le début */
body:has(.villa-detail-section) .navbar,
body.villa-detail-page .navbar {
    background: var(--white) !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    animation: none !important;
    pointer-events: none;
}

body:has(.villa-detail-section) .navbar *,
body.villa-detail-page .navbar * {
    pointer-events: auto;
}

/* Garder l'animation d'arrivée pour le contenu de la navbar sur villa detail */
body:has(.villa-detail-section) .navbar .nav-container,
body.villa-detail-page .navbar .nav-container {
    opacity: 0;
    transform: translateY(-100%);
    animation: navbarContentSlideDown 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Section Equipements - base : bloc normal (mobile first), full-bleed uniquement à partir de 768px */
.villa-equipements-section {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 80px 0;
    background-color: var(--white);
    position: relative;
    z-index: 5;
    box-sizing: border-box;
    overflow: visible;
}

@media (min-width: 768px) {
    .villa-equipements-section {
        width: 100vw;
        max-width: 100vw;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        transform: translateY(-1px);
    }
}

.villa-equipements-container {
    max-width: 1400px;
    margin: 0 auto;
    margin-left: 0;
    position: relative;
    padding: 0 50px;
    overflow: visible;
}

.villa-equipements-carousel-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 20px;
    margin-bottom: 0;
    position: relative;
    padding-bottom: 0;
    overflow: visible;
    width: 1720px !important;
    transform: translate(-11px, 9px) !important;
}

.villa-equipements-carousel-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    /* Empêche le swipe horizontal de “faire sauter” la page verticalement */
    touch-action: pan-x;
    overscroll-behavior-y: contain;
}

.villa-equipements-nav-group-left {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    z-index: 100;
    position: relative;
    background-color: var(--white);
    padding-right: 10px;
    order: -1;
    align-self: flex-end;
    padding-bottom: 16px;
    max-width: 15px;
    overflow: visible;
}

.villa-equipements-nav-group-right {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    z-index: 100;
    position: relative;
    background-color: var(--white);
    padding-left: 10px;
    margin-left: auto;
    align-self: flex-end;
    padding-bottom: 16px;
    overflow: visible;
}

@media (min-width: 1200px) and (max-width: 1400px) {
    .villa-equipements-nav-group-right {
        width: 800px;
    }
}
/* De 1400px à 1920px : largeur qui diminue progressivement de 800px à 355px */
@media (min-width: 1401px) and (max-width: 1920px) {
    .villa-equipements-nav-group-right {
        width: calc(800px - (100vw - 1400px) * 445 / 520);
    }
}
@media (min-width: 1921px) {
    .villa-equipements-nav-group-right {
        width: 355px;
    }
}

.villa-equipements-nav-group-right .equipements-title {
    display: block;
    margin: 0;
    margin-left: 15px;
    font-size: 21px !important;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-dark);
    position: relative;
    bottom: -19px !important;
}

.villa-equipements-nav {
    background: transparent;
    border: none;
    color: var(--text-dark);
    width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.3s ease;
    position: relative;
    top: 29px;
    z-index: 101;
    flex-shrink: 0;
    padding: 0;
    margin-bottom: 0;
    margin-left: -10px;
    margin-right: -10px;
    overflow: visible;
}

.villa-equipements-nav:hover {
    color: var(--text-dark);
    opacity: 0.7;
}

.villa-equipements-nav i,
.villa-equipements-nav i svg,
.villa-equipements-nav svg,
.villa-equipements-nav [data-lucide] svg {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    stroke-width: 1.5 !important;
    stroke: currentColor;
}

.villa-equipements-nav.villa-equipements-prev i,
.villa-equipements-nav.villa-equipements-prev i svg,
.villa-equipements-nav.villa-equipements-prev svg,
.villa-equipements-nav.villa-equipements-prev [data-lucide] svg {
    transform: translateX(-23px) !important;
}

.villa-equipements-nav.villa-equipements-next i,
.villa-equipements-nav.villa-equipements-next i svg,
.villa-equipements-nav.villa-equipements-next svg,
.villa-equipements-nav.villa-equipements-next [data-lucide] svg {
    transform: translateX(1px) !important;
}

.villa-equipements-carousel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
    transition: transform 0.6s ease-in-out;
    /* 12 items à 160px + 1 piscine à 200px + 13 gaps de 30px */
    width: calc(12 * 160px + 200px + 13 * 150px);
    min-width: calc(12 * 160px + 200px + 13 * 150px);
    flex-shrink: 0;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.villa-equipements-items-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0; /* rapprocher images + texte de la barre à points */
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    flex-shrink: 0;
    touch-action: pan-x;
}

.villa-equipements-items-row {
    display: flex;
    gap: 150px; /* espacement entre chaque image (aligné au JS et à la barre d'indicateurs) */
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    min-width: 100%;
    flex-shrink: 0;
}

.villa-equipements-items-wrapper > .villa-equipement-item {
    flex-shrink: 0;
}

.villa-equipement-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-width: 160px;
    width: 160px;
    height: auto;
    min-height: 180px;
    position: relative;
    overflow: visible;
    border-radius: 8px;
    flex-shrink: 0;
    background-color: transparent;
    padding-bottom: 0;
}

/* Toutes les images ont maintenant la même taille */
.equipement-image {
    width: 160px;
    height: 110px;
    min-width: 160px;
    min-height: 110px;
    max-width: 160px;
    max-height: 110px;
    object-fit: contain; /* Préserve le ratio et montre toute l'image */
    object-position: center;
    display: block;
    background-color: #ffffff;
    border-radius: 8px;
    flex-shrink: 0;
    padding: 2px; /* Padding minimal pour maximiser l'espace occupé */
}

.equipement-image[src$=".svg"] {
    background-color: #ffffff;
    object-fit: contain;
    object-position: center;
    padding: 2px;
}

/* Carrousel équipements : décalage vertical image + label */
.villa-equipement-item .equipement-image {
    transform: translateY(52px);
}
.villa-equipement-item .equipement-label {
    transform: translateY(23px);
}

/* Plus d'exception pour le lit - même dimensions que les autres */

/* Barre d'indicateurs pour le carousel d'équipements - dans le carousel */
.villa-equipements-indicators {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: -4px; /* remonter la barre vers le texte */
    position: relative;
    width: 100%;
    flex-shrink: 0;
    height: 12px;
}

.equipements-indicator-line {
    width: 4230px; /* 12×160 + 200 (piscine) + 13×150px gap */
    min-width: 4230px;
    height: 1px;
    background-color: #595842;
    position: relative;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.equipements-indicators-dots {
    display: block;
    position: absolute;
    width: 4230px; /* 12×160 + 200 + 13×50 — aligné avec la rangée d’images */
    min-width: 4230px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    padding: 0;
    pointer-events: none;
    height: 8px;
}

/* Centrer chaque point sous le centre de son image ; à partir de la piscine (3), léger décalage à gauche */
.equipements-indicator-dot:nth-child(1) { position: absolute; left: 80px; transform: translateX(-50%) translateY(-50%); top: 50%; }
.equipements-indicator-dot:nth-child(2) { position: absolute; left: 390px; transform: translateX(-50%) translateY(-50%); top: 50%; }
.equipements-indicator-dot:nth-child(3) { position: absolute; left: 695px; transform: translateX(-50%) translateY(-50%); top: 50%; }
.equipements-indicator-dot:nth-child(4) { position: absolute; left: 1025px; transform: translateX(-50%) translateY(-50%); top: 50%; }
.equipements-indicator-dot:nth-child(5) { position: absolute; left: 1328px; transform: translateX(-50%) translateY(-50%); top: 50%; }
.equipements-indicator-dot:nth-child(6) { position: absolute; left: 1638px; transform: translateX(-50%) translateY(-50%); top: 50%; }
.equipements-indicator-dot:nth-child(7) { position: absolute; left: 1948px; transform: translateX(-50%) translateY(-50%); top: 50%; }
.equipements-indicator-dot:nth-child(8) { position: absolute; left: 2258px; transform: translateX(-50%) translateY(-50%); top: 50%; }
.equipements-indicator-dot:nth-child(9) { position: absolute; left: 2573px; transform: translateX(-50%) translateY(-50%); top: 50%; }
.equipements-indicator-dot:nth-child(10) { position: absolute; left: 2883px; transform: translateX(-50%) translateY(-50%); top: 50%; }
.equipements-indicator-dot:nth-child(11) { position: absolute; left: 3193px; transform: translateX(-50%) translateY(-50%); top: 50%; }
.equipements-indicator-dot:nth-child(12) { position: absolute; left: 3503px; transform: translateX(-50%) translateY(-50%); top: 50%; }
.equipements-indicator-dot:nth-child(13) { position: absolute; left: 3813px; transform: translateX(-50%) translateY(-50%); top: 50%; }
.equipements-indicator-dot:nth-child(14) { position: absolute; left: 4123px; transform: translateX(-50%) translateY(-50%); top: 50%; }

/* Villa Concadoro : 13 équipements (sans piscine) — largeur carrousel, barre et points recalculés */
.villa-equipements-section.equipements-13-items .villa-equipements-carousel {
    width: calc(13 * 160px + 13 * 150px);
    min-width: calc(13 * 160px + 13 * 150px);
}
.villa-equipements-section.equipements-13-items .equipements-indicator-line,
.villa-equipements-section.equipements-13-items .equipements-indicators-dots {
    width: 4030px;
    min-width: 4030px;
}
.villa-equipements-section.equipements-13-items .equipements-indicator-dot:nth-child(1) { left: 80px; }
.villa-equipements-section.equipements-13-items .equipements-indicator-dot:nth-child(2) { left: 390px; }
.villa-equipements-section.equipements-13-items .equipements-indicator-dot:nth-child(3) { left: 700px; }
.villa-equipements-section.equipements-13-items .equipements-indicator-dot:nth-child(4) { left: 1010px; }
.villa-equipements-section.equipements-13-items .equipements-indicator-dot:nth-child(5) { left: 1320px; }
.villa-equipements-section.equipements-13-items .equipements-indicator-dot:nth-child(6) { left: 1630px; }
.villa-equipements-section.equipements-13-items .equipements-indicator-dot:nth-child(7) { left: 1940px; }
.villa-equipements-section.equipements-13-items .equipements-indicator-dot:nth-child(8) { left: 2250px; }
.villa-equipements-section.equipements-13-items .equipements-indicator-dot:nth-child(9) { left: 2560px; }
.villa-equipements-section.equipements-13-items .equipements-indicator-dot:nth-child(10) { left: 2870px; }
.villa-equipements-section.equipements-13-items .equipements-indicator-dot:nth-child(11) { left: 3180px; }
.villa-equipements-section.equipements-13-items .equipements-indicator-dot:nth-child(12) { left: 3490px; }
.villa-equipements-section.equipements-13-items .equipements-indicator-dot:nth-child(13) { left: 3800px; }

.equipements-indicator-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    opacity: 1;
    pointer-events: none;
}

.equipements-indicator-dot.active {
    opacity: 1;
}

.equipements-indicator-dot svg {
    display: block;
}

.equipement-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8B7355;
}

.equipement-icon i {
    width: 40px;
    height: 40px;
    stroke-width: 1.5;
}

.equipement-label {
    font-family: "Branch Regular", serif;
    font-size: 14px;
    color: #5a5a5a;
    text-align: left;
    margin: 0;
    line-height: 1.4;
}

/* Label pour le carrousel d'équipements - entre l'image et la barre */
.villa-equipement-item .equipement-label {
    font-family: "Branch Regular", serif;
    font-size: 13px;
    color: #595842;
    text-align: center;
    margin-top: 6px;
    margin-bottom: 0;
    line-height: 1.3;
    width: 100%;
    padding: 0 4px;
    font-weight: 400;
    height: 35px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.equipement-dot {
    position: absolute;
    bottom: 0;
    left: 0;
    transform: translateY(50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5a5a5a;
    z-index: 2;
}

.equipements-timeline {
    display: none;
}

/* Masqué par défaut ; affiché dans .villa-equipements-nav-group-right (desktop à droite, mobile/tablet en haut centré) */
.equipements-title {
    display: none;
}
.villa-equipements-nav-group-right .equipements-title {
    display: block;
}

/* Section Galerie Photos */
.villa-gallery-section {
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    padding: 80px 0 100px 0;
    background-color: var(--beige-loru);
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    box-sizing: border-box;
    margin-bottom: 0;
}

.villa-gallery-section .villa-gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px 0 0;
}

.villa-gallery-title {
    display: none;
}

.villa-gallery-container {
    border: none;
    border-radius: 0;
    overflow: hidden;
    background: var(--beige-loru);
}

.villa-gallery-main {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f5f5f5;
}

.villa-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.villa-gallery-thumbnails-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 30px;
    background: var(--beige-loru);
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.gallery-nav-btn {
    background: var(--beige-loru);
    border: 1px solid rgba(0, 0, 0, 0.2);
    color: var(--text-dark);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    padding: 0;
}

.gallery-nav-btn:hover {
    background: var(--text-dark);
    color: var(--white);
    border-color: var(--text-dark);
}

.gallery-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.gallery-nav-btn i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.villa-gallery-thumbnails {
    display: flex;
    gap: 15px;
    overflow-x: auto;
    scroll-behavior: smooth;
    flex: 1;
    padding: 5px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.villa-gallery-thumbnails::-webkit-scrollbar {
    height: 4px;
}

.villa-gallery-thumbnails::-webkit-scrollbar-track {
    background: transparent;
}

.villa-gallery-thumbnails::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 2px;
}

.gallery-thumbnail {
    flex-shrink: 0;
    width: 120px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.gallery-thumbnail:hover {
    opacity: 1;
    transform: scale(1.05);
}

.gallery-thumbnail.active {
    border-color: var(--text-dark);
    opacity: 1;
}

.gallery-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Bouton Vérifier les disponibilités */
.villa-availability-btn-wrapper-inline {
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    transform: translateX(-4px);
}

.villa-availability-btn {
    display: inline-block;
    padding: 15px 30px;
    background: var(--text-dark);
    color: var(--white);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-family: "Branch Regular", serif;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: fit-content;
    text-align: center;
}

.villa-availability-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Colonne droite - Image sticky */
.villa-detail-image-sticky {
    position: relative;
    top: 0;
    height: fit-content;
    align-self: center;
    margin-top: 0;
    transform: none;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Même taille d’image pour toutes les villas (Concadoro, Ardiadoro, Maora) : ratio fixe */
.villa-detail-image-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.villa-detail-main-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    transform: none !important;
    will-change: auto;
}

.villa-detail-prestige-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--white);
    padding: 8px 16px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.villa-detail-prestige-badge i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
    color: var(--text-dark);
}

.villa-detail-prestige-badge span {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dark);
}

/* --- VILLA SINGLE PAGE --- */
.villa-single-wrapper {
    padding: 100px 50px;
    background-color: var(--beige-loru);
    display: flex;
    justify-content: center;
}

.villa-single-card {
    background: var(--white);
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.villa-single-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
}

.villa-single-content {
    background: var(--white);
    padding: 25px 50px 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.villa-single-title {
    font-family: "Royale Milano", serif;
    font-size: 1.8rem;
    font-weight: 500;
    margin: 0;
    color: var(--text-dark);
    line-height: 1.3;
    text-align: center;
}

.villa-single-separator {
    width: 80%;
    height: 1px;
    background-color: var(--text-dark);
    opacity: 0.2;
    margin: 5px auto;
}

.villa-single-details {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
}

.villa-single-details .villa-detail-item {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 14px;
    color: var(--text-dark);
    font-family: "Royale Milano", serif;
    font-weight: 500;
}

.villa-single-details .villa-detail-item i {
    display: none;
}

.villa-single-details .villa-detail-item span {
    display: inline-block;
    white-space: nowrap;
}

.villa-single-btn {
    display: inline-block;
    text-align: center;
    padding: 8px 20px;
    border: 1px solid var(--text-dark);
    background: transparent;
    color: var(--text-dark);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    margin: 5px auto 0;
    width: auto;
    font-family: "Royale Milano", serif;
}

.villa-single-btn:hover {
    background-color: var(--text-dark);
    color: var(--white);
}

/* --- TARIFS PAGE --- */
.tarifs-hero-section {
    position: relative;
    width: 100%;
    height: 817px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tarifs-hero-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.tarifs-hero-background {
    background-color: #ffffff;
}
.tarifs-hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    filter: none;
    image-rendering: auto;
}

/* Page contact : image nette (pas de flou) — le dézoom d’intro vient de .hero-reveal-media */
.page-contact-hero .tarifs-hero-background img {
    filter: none;
    image-rendering: auto;
}

.tarifs-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, transparent 70%, var(--beige-loru) 70%);
    z-index: 1;
    display: none !important;
}

.tarifs-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--white);
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.5s ease, transform 1.5s ease;
    width: 100%;
    max-width: 100%;
    padding-left: clamp(12px, 4vw, 40px);
    padding-right: clamp(12px, 4vw, 40px);
    box-sizing: border-box;
}

.tarifs-hero-content.revealed {
    opacity: 1;
    transform: translateY(0);
}

.tarifs-hero-subtitle {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--white);
    margin: 0 0 15px 0;
    font-family: "Royale Milano", serif;
}

.tarifs-hero-title {
    font-family: "Royale Milano", serif;
    font-size: 100px !important;
    font-weight: 500;
    color: var(--white);
    margin: 0 auto;
    line-height: 1.2;
    text-transform: none;
    text-align: center;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), -1px -1px 1px rgba(255, 255, 255, 0.15);
}

/* --- VILLA HERO SECTION --- */
.villa-hero-section {
    position: relative;
    width: 100%;
    height: 85vh; /* fallback */
    height: 85svh;
    min-height: 650px;
    max-height: 900px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.villa-hero-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #ffffff;
}

.villa-hero-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: none;
    image-rendering: auto;
}

.villa-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 0%, transparent 70%, var(--beige-loru) 70%);
    z-index: 1;
    display: none !important;
}

.villa-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: var(--white);
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

.villa-hero-content.revealed {
    opacity: 1;
    transform: translateY(0);
}

.villa-hero-title {
    font-family: "Royale Milano", serif;
    font-size: 100px !important;
    font-weight: 500;
    color: var(--white);
    margin: 0;
    line-height: 1.2;
    text-transform: none;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4), -1px -1px 1px rgba(255, 255, 255, 0.15);
}

/* Style spécifique pour la villa Concadoro - padding-top sur l'image hero */
.villa-concadoro-hero .villa-hero-background img {
    padding-top: 15px !important;
    object-position: center top;
}

.tarifs-content-section {
    padding: 80px 50px;
    background-color: var(--beige-loru);
    margin-top: -140px;
    position: relative;
    z-index: 3;
}

.tarifs-card {
    max-width: 920px;
    margin: 0 auto;
    background: var(--white);
    border-radius: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

.tarifs-card.revealed {
    opacity: 1;
    transform: translateY(0);
}

.tarifs-card-left,
.tarifs-card-right {
    padding: 45px 50px;
    display: flex;
    flex-direction: column;
}

.tarifs-card-left {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.tarifs-card-title {
    font-family: "Royale Milano", serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--text-dark);
    margin: 0 0 40px 0;
    line-height: 1.3;
}

.tarifs-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: auto;
}

.tarif-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.tarif-item:last-of-type {
    border-bottom: none;
}

.tarif-period {
    font-size: 14px;
    color: var(--text-dark);
    font-family: "Royale Milano", serif;
}

.tarif-price {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-dark);
    font-family: "Royale Milano", serif;
}

.tarifs-footer-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.tarifs-footer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 400;
}

.tarifs-footer-item i {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

.tarifs-card-right {
    gap: 25px;
}

.tarifs-description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-dark);
    margin: 0;
    font-family: "Royale Milano", serif;
}

.tarifs-response-box {
    background: var(--beige-loru);
    padding: 20px 25px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 10px 0;
}

.tarifs-response-box i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    color: var(--text-dark);
}

.tarifs-response-box span {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dark);
    font-family: "Royale Milano", serif;
}

.tarifs-conditions {
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-dark);
    margin: 0;
    font-family: "Branch Regular", serif;
}

.tarifs-collapsible {
    margin-top: 20px;
}

.tarifs-collapsible-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    background: none;
    border: none;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    font-family: "Royale Milano", serif;
    text-align: left;
    transition: opacity 0.3s ease;
}

.tarifs-collapsible-btn:hover {
    opacity: 0.7;
}

.tarifs-collapsible-btn span {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dark);
}

.tarifs-collapsible-btn .collapsible-icon {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    color: var(--text-dark);
    transition: transform 0.3s ease;
}

.tarifs-collapsible-btn.active .collapsible-icon {
    transform: rotate(180deg);
}

.tarifs-collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0;
}

.tarifs-collapsible-content.active {
    max-height: 500px;
    padding: 20px 0;
}

.tarifs-collapsible-content p {
    font-size: 14px;
    line-height: 1.7;
    color: #666;
    margin: 0;
    font-family: "Branch Regular", serif;
}

.tarifs-collapsible-content p:last-child {
    margin-bottom: 0;
}

/* --- BOOKING CALENDAR SECTION --- */
.booking-calendar-section {
    margin-top: -26px;
    padding: 0 50px 100px 50px;
    background-color: var(--beige-loru);
}

.booking-calendar-container {
    max-width: 1400px;
    margin: 0 auto;
}

.booking-calendar-header {
    text-align: center;
    margin-bottom: 60px;
}

.booking-calendar-subtitle {
    font-family: "Branch Regular", serif;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dark);
    margin: 0 0 15px 0;
    opacity: 0.7;
}

.booking-calendar-title {
    font-family: "Royale Milano", serif;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 500;
    font-style: italic;
    color: var(--text-dark);
    margin: 0 auto;
    margin-top: 26px !important;
    max-width: 100%;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    transform: translateY(26px) !important;
}

.booking-calendar-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 60px;
    align-items: start;
}

.booking-filters {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.booking-filter-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.booking-label {
    font-family: "Branch Regular", serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dark);
}

.booking-select,
.booking-input {
    font-family: "Branch Regular", serif;
    font-size: 15px;
    padding: 15px 20px;
    border: 1px solid rgba(89, 88, 66, 0.2);
    background: var(--white);
    color: var(--text-dark);
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

.booking-select:focus,
.booking-input:focus {
    outline: none;
    border-color: var(--text-dark);
}

.booking-calendar-display {
    background: var(--white);
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.calendar-month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(89, 88, 66, 0.1);
    min-width: 0;
}

.calendar-nav-btn {
    background: none;
    border: 1px solid rgba(89, 88, 66, 0.2);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-dark);
}

.calendar-nav-btn:hover {
    background: var(--text-dark);
    color: var(--white);
    border-color: var(--text-dark);
}

.calendar-nav-btn i {
    width: 18px;
    height: 18px;
}

.calendar-month-title {
    font-family: "Royale Milano", serif;
    font-size: 1.8rem;
    font-weight: 500;
    font-style: italic;
    color: var(--text-dark);
    margin: 0;
    flex: 1;
    min-width: 0;
    text-align: center;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-grid {
    display: grid;
    /* minmax(0,1fr) : évite le débordement horizontal sur petits écrans (320–414px) */
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 30px;
}

.calendar-day-header {
    text-align: center;
    font-family: "Branch Regular", serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-dark);
    opacity: 0.6;
    padding: 10px 0;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "Branch Regular", serif;
    color: var(--text-dark);
    background: var(--beige-loru);
    border: 1px solid rgba(89, 88, 66, 0.1);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    padding: 5px;
    min-width: 0;
    overflow: hidden;
}

.calendar-day-number {
    font-family: "Branch Regular", serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
}

.calendar-day-price {
    font-family: "Branch Regular", serif;
    font-size: 10px;
    font-weight: 400;
    opacity: 0.7;
    line-height: 1.2;
    margin-top: 2px;
}

.calendar-day:hover:not(.disabled):not(.booked) {
    background: rgba(89, 88, 66, 0.1);
    border-color: var(--text-dark);
}

.calendar-day.disabled {
    opacity: 0.3;
    cursor: not-allowed;
    background: #f5f5f5;
}

.calendar-day.disabled .calendar-day-price {
    display: none;
}

.calendar-day.booked {
    background: rgba(89, 88, 66, 0.3);
    cursor: not-allowed;
    position: relative;
}

.calendar-day.booked .calendar-day-price {
    display: none;
}

.calendar-day.booked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 1px;
    background: var(--text-dark);
    opacity: 0.5;
}

.calendar-day.selected,
.calendar-day.available.selected {
    background: var(--text-dark) !important;
    color: var(--white);
    border-color: var(--text-dark);
}

.calendar-day.selected .calendar-day-number,
.calendar-day.selected .calendar-day-price {
    color: var(--white);
}

.calendar-day.selected .calendar-day-price {
    opacity: 0.9;
}

.calendar-day.available {
    background: var(--beige-loru);
}

.calendar-legend {
    display: flex;
    gap: 30px;
    justify-content: center;
    padding-top: 20px;
    border-top: 1px solid rgba(89, 88, 66, 0.1);
}

/* Jours du calendrier qui donneraient moins que le minimum de nuits (5 hors saison, 7 haute saison) : visuellement désactivés pour la date de fin */
.calendar-day.below-min-nights {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: auto;
}

.calendar-min-nights-message {
    margin-top: 14px;
    padding: 12px 16px;
    font-family: "Branch Regular", serif;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-dark);
    background: rgba(89, 88, 66, 0.08);
    border: 1px solid rgba(89, 88, 66, 0.2);
    border-radius: 8px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Branch Regular", serif !important;
    font-size: 12px;
    color: var(--text-dark);
}

.legend-color {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(89, 88, 66, 0.2);
}

.legend-color.available {
    background: var(--beige-loru);
}

.legend-color.booked {
    background: rgba(89, 88, 66, 0.3);
}

.legend-color.selected {
    background: var(--text-dark);
}

.booking-summary {
    margin-top: 20px;
    padding: 25px;
    background: var(--white);
    border-radius: 8px;
    border: 1px solid rgba(89, 88, 66, 0.1);
}

.booking-conditions-collapsible {
    margin-top: 20px;
}

.booking-conditions-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    background: none;
    border: none;
    border-top: 1px solid rgba(89, 88, 66, 0.1);
    cursor: pointer;
    font-family: "Royale Milano", serif;
    text-align: left;
    transition: opacity 0.3s ease;
    color: var(--text-dark);
}

.booking-conditions-toggle:hover {
    opacity: 0.7;
}

.booking-conditions-toggle span {
    font-family: "Branch Regular", serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    text-transform: none;
    letter-spacing: 0.5px;
}

.booking-conditions-toggle .conditions-icon {
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
    color: var(--text-dark);
    transition: transform 0.3s ease;
}

.booking-conditions-toggle.active .conditions-icon {
    transform: rotate(180deg);
}

.booking-conditions-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0;
    /* Texte ACF : même police que les paragraphes du site (body = Royale par défaut) */
    font-family: "Branch Regular", serif;
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-dark);
}

.booking-conditions-content.active {
    max-height: min(70vh, 800px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 0;
}

/* Titres éventuels dans le WYSIWYG : pas de Royale Milano, style proche du corps de texte */
.booking-conditions-content h1,
.booking-conditions-content h2,
.booking-conditions-content h3,
.booking-conditions-content h4,
.booking-conditions-content h5,
.booking-conditions-content h6 {
    font-family: "Branch Regular", serif !important;
    font-weight: 600;
    font-size: 15px !important;
    line-height: 1.8;
    margin: 0 0 12px 0;
    text-transform: none;
    font-style: normal;
    color: var(--text-dark);
}

.booking-conditions-content p {
    font-size: 15px !important;
    line-height: 1.8;
    color: var(--text-dark);
    margin: 0 0 12px 0;
    font-family: "Branch Regular", serif !important;
    font-weight: 400;
}

.booking-conditions-content ul,
.booking-conditions-content ol {
    font-family: "Branch Regular", serif;
    margin: 0 0 12px 0;
    padding-left: 1.25em;
}

.booking-conditions-content li {
    font-family: "Branch Regular", serif;
    font-size: 15px;
    margin-bottom: 6px;
}

.booking-conditions-content p:last-child {
    margin-bottom: 0;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid rgba(89, 88, 66, 0.1);
}

.summary-item:last-child {
    border-bottom: none;
}

.summary-item.summary-total {
    margin-top: 10px;
    padding-top: 20px;
    border-top: 2px solid var(--text-dark);
    font-weight: 700;
}

.summary-label {
    font-family: "Branch Regular", serif;
    font-size: 14px;
    color: var(--text-dark);
}

.summary-value {
    font-family: "Branch Regular", serif;
    font-size: 18px;
    font-style: italic;
    color: var(--text-dark);
    font-weight: 400;
}

.summary-total .summary-label,
.summary-total .summary-value {
    font-size: 20px;
    font-weight: 700;
}

/* --- CONTACT FORM SECTION --- */
#loru-contact-form {
    scroll-margin-top: 100px; /* ancre après envoi : dégagement sous la navbar */
}

.contact-form-section {
    padding: 100px 50px;
    background-color: var(--white);
    min-height: 640px !important;
    display: flex;
    align-items: center;
}

.contact-form-container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Sur la page contact, centrer verticalement le formulaire et rapprocher de la photo */
.page-contact-section .contact-form-container {
    align-items: center !important;
    grid-template-columns: 1fr 1fr !important; /* 50% / 50% */
    gap: 15px !important; /* Réduire encore plus l'espacement entre le formulaire et la photo */
}

/* Sur la page tarifs-réservations, appliquer les mêmes styles */
.page-tarifs-section .contact-form-container {
    align-items: center !important;
    grid-template-columns: 1fr 1fr !important; /* 50% / 50% */
    gap: 15px !important;
}

/* Tarifs : image à gauche, formulaire à droite (inverse de Contact) */
.page-tarifs-section .contact-form-left {
    order: 2;
}
.page-tarifs-section .contact-form-right {
    order: 1;
}

.contact-form-left {
    display: flex;
    flex-direction: column;
}

.contact-form-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.contact-form-subtitle {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #666;
    margin: 0 0 20px 0;
    font-family: "Branch Regular", serif;
}

.contact-form-title {
    font-family: "Royale Milano", serif;
    font-size: 45px;
    font-weight: 500;
    color: var(--text-dark);
    margin: 0 0 50px 0;
    line-height: 1.2;
}

.contact-form-title br {
    display: block;
}

.contact-title-second {
    display: inline-block;
    padding-left: 20px;
}

/* Sur la page contact, aligner le N de Nous au C de Contactez */
.page-contact-section .contact-title-second {
    padding-left: 0;
}

/* Sur la page contact, réduire le formulaire de moitié et forcer le changement */
.page-contact-section .contact-form-left {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.page-contact-section .contact-form-wrapper {
    max-width: 250px !important;
    width: 250px !important;
    height: auto !important;
    overflow: visible !important;
}

/* Sur la page tarifs-réservations, appliquer les mêmes styles */
.page-tarifs-section .contact-form-left {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.page-tarifs-section .contact-form-wrapper {
    max-width: 250px !important;
    width: 250px !important;
    height: auto !important;
    overflow: visible !important;
}

/* Réduire les espacements sur la page contact */
.page-contact-section .contact-form-title {
    margin: 0 0 25px 0 !important;
    font-size: 45px !important;
}

.page-contact-section .contact-form {
    gap: 15px !important;
}

.page-contact-section .contact-form-row {
    gap: 15px !important;
}

.page-contact-section .contact-form-field {
    gap: 5px !important;
}

.page-contact-section .contact-form-field input,
.page-contact-section .contact-form-field textarea,
.page-contact-section .contact-form-field select {
    padding: 10px 12px !important;
    font-size: 13px !important;
}

.page-contact-section .contact-form-field textarea {
    min-height: 50px !important;
    max-height: 80px !important;
}

.page-contact-section .contact-form-field label {
    font-size: 10px !important;
}

.page-contact-section .g-recaptcha {
    margin: 10px 0 !important;
    transform: scale(0.85) !important;
    transform-origin: left top !important;
}

.page-contact-section .contact-form-submit {
    padding: 12px 30px !important;
    font-size: 11px !important;
    margin-top: 5px !important;
}

/* Style formulaire contact (modèle : fond beige, bordures brunes, placeholders, reCAPTCHA, Envoyer) */
.page-contact-section .contact-form-wrapper:has(form.contact-form--contact-style) {
    max-width: 420px !important;
    width: 100% !important;
}

.contact-form-section.page-contact-section {
    background-color: #fff;
}

.contact-form--contact-style .contact-form-row--single {
    display: block;
}

.contact-form--contact-style .contact-form-row--single .contact-form-field {
    margin-bottom: 0;
}

.contact-form--contact-style .contact-form-row--single + .contact-form-row--single .contact-form-field {
    margin-top: 14px;
}

.contact-form--contact-style .contact-form {
    gap: 0;
}

.contact-form--contact-style .contact-form-field--float,
.contact-form--tarifs-style .contact-form-field--float {
    position: relative;
    gap: 0;
}

.contact-form--contact-style .contact-form-field--float input,
.contact-form--contact-style .contact-form-field--float textarea,
.contact-form--tarifs-style .contact-form-field--float input,
.contact-form--tarifs-style .contact-form-field--float textarea,
.contact-form--tarifs-style .contact-form-field--float select {
    padding-top: 18px !important;
}

.contact-form--contact-style .contact-form-field--float label,
.contact-form--tarifs-style .contact-form-field--float label {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    font-weight: 400;
    color: #6b6158;
    pointer-events: none;
    transition: transform 0.2s ease, font-size 0.2s ease, color 0.2s ease, top 0.2s ease;
}

.contact-form--contact-style .contact-form-field--float textarea ~ label,
.contact-form--tarifs-style .contact-form-field--float textarea ~ label {
    top: 22px;
    transform: translateY(0);
}

/* Label flottant : au-dessus du champ, sur le bord (comme sur la maquette) */
.contact-form--contact-style .contact-form-field--float input:focus ~ label,
.contact-form--contact-style .contact-form-field--float input:not(:placeholder-shown) ~ label,
.contact-form--contact-style .contact-form-field--float textarea:focus ~ label,
.contact-form--contact-style .contact-form-field--float textarea:not(:placeholder-shown) ~ label,
.contact-form--tarifs-style .contact-form-field--float input:focus ~ label,
.contact-form--tarifs-style .contact-form-field--float input:not(:placeholder-shown) ~ label,
.contact-form--tarifs-style .contact-form-field--float input:valid ~ label,
.contact-form--tarifs-style .contact-form-field--float select:focus ~ label,
.contact-form--tarifs-style .contact-form-field--float select:valid ~ label,
.contact-form--tarifs-style .contact-form-field--float textarea:focus ~ label,
.contact-form--tarifs-style .contact-form-field--float textarea:not(:placeholder-shown) ~ label {
    top: 0;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 600;
    color: #5c5248;
    background: #fff;
    padding: 0 6px;
}

.contact-form--contact-style .contact-form-field--float textarea:focus ~ label,
.contact-form--contact-style .contact-form-field--float textarea:not(:placeholder-shown) ~ label,
.contact-form--tarifs-style .contact-form-field--float textarea:focus ~ label,
.contact-form--tarifs-style .contact-form-field--float textarea:not(:placeholder-shown) ~ label {
    top: 0;
}

.contact-form--contact-style .contact-form-field input,
.contact-form--contact-style .contact-form-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #5c5248 !important;
    border-radius: 4px;
    background: #fff !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    color: var(--text-dark);
}

.contact-form--contact-style .contact-form-field input::placeholder,
.contact-form--contact-style .contact-form-field textarea::placeholder {
    color: #6b6158;
}

.contact-form--contact-style .contact-form-field input:focus,
.contact-form--contact-style .contact-form-field textarea:focus {
    outline: none;
    border-color: #4a423a !important;
}

.contact-form--contact-style .contact-form-field textarea {
    min-height: 100px !important;
    resize: vertical;
}

.contact-form--contact-style .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.contact-form--contact-style .g-recaptcha {
    margin: 16px 0 !important;
    transform: none !important;
}

.contact-form--contact-style .contact-form-submit {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    background: #595842 !important; /* même couleur que les icônes navbar */
    color: #fff !important;
    border: none !important;
    margin-top: 8px !important;
}

.contact-form--contact-style .contact-form-submit:hover {
    background: #4a4a38 !important;
}

/* Même design pour le formulaire Tarifs & Réservations */
.contact-form-section.page-tarifs-section {
    background-color: #fff;
}

.page-tarifs-section .contact-form-wrapper:has(form.contact-form--tarifs-style) {
    max-width: 560px !important;
    width: 100% !important;
}

.contact-form--tarifs-style .contact-form-row--double {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.contact-form--tarifs-style .contact-form-row--double .contact-form-field-full {
    grid-column: 1 / -1;
}

.contact-form--tarifs-style .contact-form {
    gap: 14px;
}

.contact-form--tarifs-style .contact-form-field input,
.contact-form--tarifs-style .contact-form-field textarea,
.contact-form--tarifs-style .contact-form-field select {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #5c5248 !important;
    border-radius: 4px;
    background: #fff !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    color: var(--text-dark);
}

.contact-form--tarifs-style .contact-form-field input::placeholder,
.contact-form--tarifs-style .contact-form-field textarea::placeholder {
    color: #6b6158;
}

.contact-form--tarifs-style .contact-form-field input:focus,
.contact-form--tarifs-style .contact-form-field textarea:focus,
.contact-form--tarifs-style .contact-form-field select:focus {
    outline: none;
    border-color: #4a423a !important;
}

.contact-form--tarifs-style .contact-form-field textarea {
    min-height: 100px !important;
    resize: vertical;
}

.contact-form--tarifs-style .contact-form-field select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235c5248' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

/* Villa : pas de label flottant ; libellé = 1re option (disparaît dès qu’une villa est choisie) */
.contact-form--tarifs-style .contact-form-field--villa-select select {
    padding: 12px 14px !important;
}
.contact-form--tarifs-style .contact-form-field--villa-select select:invalid {
    color: #6b6158;
}
.contact-form--tarifs-style .contact-form-field--villa-select select option {
    color: var(--text-dark);
}

.contact-form--tarifs-style .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.contact-form--tarifs-style .contact-form-submit {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    background: #595842 !important; /* même couleur que les icônes navbar */
    color: #fff !important;
    border: none !important;
    margin-top: 8px !important;
}

.contact-form--tarifs-style .contact-form-submit:hover {
    background: #4a4a38 !important;
}

/* Réduire les espacements sur la page tarifs-réservations */
.page-tarifs-section .contact-form-title {
    margin: 0 auto 25px auto !important;
    font-size: 45px !important;
    text-align: center !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.page-tarifs-section .contact-form {
    gap: 15px !important;
}

.page-tarifs-section .contact-form-row {
    gap: 15px !important;
}

.page-tarifs-section .contact-form-field {
    gap: 5px !important;
}

.page-tarifs-section .contact-form-field input,
.page-tarifs-section .contact-form-field textarea,
.page-tarifs-section .contact-form-field select {
    padding: 10px 12px !important;
    font-size: 13px !important;
}

.page-tarifs-section .contact-form-field textarea {
    min-height: 50px !important;
    max-height: 80px !important;
}

.page-tarifs-section .contact-form-field label {
    font-size: 10px !important;
}

.page-tarifs-section .g-recaptcha {
    margin: 10px 0 !important;
    transform: scale(0.85) !important;
    transform-origin: left top !important;
}

.page-tarifs-section .contact-form-submit {
    padding: 12px 30px !important;
    font-size: 11px !important;
    margin-top: 5px !important;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.contact-form-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-form-field-full {
    grid-column: 1 / -1;
}

.contact-form-field label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dark);
    font-family: "Branch Regular", serif !important;
}

.contact-form-field input,
.contact-form-field textarea,
.contact-form-field select {
    font-family: "Branch Regular", serif;
    font-size: 15px;
    color: var(--text-dark);
    background: #fff;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    padding: 12px 14px;
    outline: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form-field select {
    cursor: pointer;
}

.contact-form-field input[readonly] {
    background-color: rgba(0, 0, 0, 0.02);
    cursor: not-allowed;
}

.contact-form-field input:focus,
.contact-form-field textarea:focus,
.contact-form-field select:focus {
    border-color: #b0b0b0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.contact-form-field input:invalid:not(:focus):not(:placeholder-shown),
.contact-form-field textarea:invalid:not(:focus):not(:placeholder-shown) {
    border-color: #d32f2f;
}

.contact-form-field input.error,
.contact-form-field textarea.error,
.contact-form-field select.error {
    border-color: #d32f2f;
}

.field-error {
    display: none;
    font-size: 11px;
    color: #d32f2f;
    margin-top: 4px;
    font-family: "Royale Milano", serif;
}

.field-error.show {
    display: block;
}

.contact-form-field textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form-message {
    padding: 15px 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-family: "Royale Milano", serif;
    font-size: 14px;
    text-align: center;
}

.contact-form-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.contact-form-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.contact-form-submit {
    background: var(--text-dark);
    color: var(--white);
    border: none;
    padding: 16px 40px;
    font-family: "Branch Regular", serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: opacity 0.3s ease;
    border-radius: 4px;
    width: fit-content;
    margin-top: 10px;
}

.contact-form-submit:hover {
    opacity: 0.9;
}

/* reCAPTCHA styling */
.g-recaptcha {
    margin: 20px 0;
    display: flex;
    justify-content: flex-start;
}

.recaptcha-note {
    font-size: 12px;
    color: #666;
    margin-top: 10px;
    line-height: 1.5;
}

.recaptcha-note a {
    color: var(--text-dark);
    text-decoration: underline;
}

.recaptcha-note a:hover {
    opacity: 0.8;
}

.contact-form-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-form-image-card {
    width: 600px;
    height: 650px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.contact-form-image-card img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* --- FOOTER [cite: 9, 10, 11] --- */
.site-footer {
    background-color: var(--beige-loru);
    border-top: 1px solid rgba(0,0,0,0.05);
    opacity: 1 !important;
    transform: none !important;
    overflow: visible !important;
}

.footer-main {
    padding: 122px 0 104px;
    margin-top: -50px;
    margin-bottom: -50px;
    overflow: visible !important;
}

.footer-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1.2fr auto 1fr;
    gap: 0;
    padding: 0 50px;
    align-items: stretch;
    justify-items: center;
}

.footer-col {
    width: 100%;
    max-width: 100%;
}

.footer-contact,
.footer-socials {
    justify-self: stretch;
}

.footer-adresse {
    justify-self: center;
}

.footer-col {
    display: flex;
    flex-direction: column;
}

.footer-section-title {
    font-family: "Royale Milano", serif;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 18px !important;
    color: #595842 !important;
    margin: 0 0 15px 0 !important;
    color: #595842 !important;
    text-align: left;
    align-self: stretch;
}

.footer-contact .footer-section-title {
    text-align: center;
}

.footer-adresse .footer-section-title {
    text-align: center;
}

.footer-socials .footer-section-title {
    text-align: center;
}

/* Alignement des titres sur la même ligne horizontale */
.footer-col .footer-section-title {
    margin-top: 0;
    margin-bottom: 15px !important;
}

.footer-follow {
    align-items: center;
    text-align: center;
    justify-content: flex-start;
    position: relative;
    min-height: 100%;
}

.footer-follow .footer-social {
    justify-content: center;
    margin-bottom: 15px !important;
}

.footer-follow .footer-logo-link {
    margin-top: auto;
    width: auto;
    padding-top: 10px !important;
}

.footer-logo-link {
    text-decoration: none;
    color: var(--text-dark);
    margin-top: auto;
    width: auto;
    display: flex;
    justify-content: center;
}

.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    width: 100%;
}

.footer-logo .logo-complete {
    height: 180px;
    width: auto;
    object-fit: contain;
    display: block;
    max-width: 600px;
}

.footer-follow .footer-section-title {
    margin-bottom: 15px !important;
}

.footer-social {
    display: flex;
    gap: 15px;
    margin-top: 0;
    justify-content: center;
    width: 100%;
    margin-bottom: auto;
}

.social-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #595842 !important;
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: scale(1);
}

.social-icon:hover {
    transform: scale(1.3);
    opacity: 1;
}

.social-icon svg {
    width: 24px;
    height: 24px;
}

.footer-ratings {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 1;
    overflow: visible !important;
}

.footer-ratings-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
    flex: 1;
    width: 100%;
    position: relative;
    z-index: 1;
    overflow: visible !important;
}

.footer-ratings-content .rating-widget {
    margin: 0;
}

.footer-ratings-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.rating-widget {
    padding: 12px 15px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: #f4f3f0;
    max-width: 280px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    overflow: visible !important;
}

/* S'assurer que les widgets Google injectés par l'extension sont visibles */
.footer-ratings * {
    overflow: visible !important;
}

.footer-ratings iframe,
.footer-ratings [class*="google"],
.footer-ratings [id*="google"] {
    position: relative !important;
    z-index: 10 !important;
    overflow: visible !important;
    background: #f4f3f0 !important;
}

/* Style pour Abritel - similaire à Google */
.abritel-rating {
    background: var(--white);
    border: 1px solid rgba(0,0,0,0.08);
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
}

.abritel-logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.abritel-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.abritel-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #5a5a5a !important;
    opacity: 0.8;
}

.abritel-score {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    color: #5a5a5a !important;
}

/* Ancien style booking-rating gardé pour compatibilité mais non utilisé */
.booking-rating {
    background: var(--white);
    padding: 0;
    overflow: hidden;
}

.booking-logo {
    background: #003580;
    color: var(--white);
    padding: 15px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.booking-content {
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
}

.booking-score {
    font-size: 32px;
    font-weight: 900;
    line-height: 1;
    color: var(--text-dark);
}

.score-denominator {
    font-size: 18px;
    font-weight: 400;
    color: #5a5a5a !important;
    opacity: 0.6;
}

.booking-label {
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-dark);
    opacity: 0.6;
}

.google-rating {
    background: #f4f3f0;
    border: 1px solid rgba(0,0,0,0.08);
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
}

.google-logo {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.google-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.google-stars {
    color: #FFD700;
    font-size: 16px;
    letter-spacing: 1.5px;
    line-height: 1;
}

.google-score {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    color: #5a5a5a !important;
}

.footer-separator {
    position: relative;
    width: 1px;
    margin: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-separator-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #595842 !important;
    width: 1px;
    background: rgba(90, 90, 90, 0.3);
}

.footer-separator-circle {
    position: relative;
    width: 12px;
    height: 12px;
    z-index: 1;
    object-fit: contain;
}

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
}

.footer-contact-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: "Branch Regular", serif;
    font-size: 14px !important;
    color: #595842 !important;
    font-weight: 400;
    color: #595842 !important;
    line-height: 1.6;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
}

.footer-contact-email,
.footer-contact-phone {
    margin: 0;
    font-size: 14px !important;
    text-transform: uppercase;
}

/* Tél. / e-mail auto-liés sur mobile : couleur thème (évite le bleu système) */
.site-footer a[href^="tel:"],
.site-footer a[href^="mailto:"] {
    color: var(--text-dark) !important;
    -webkit-text-fill-color: var(--text-dark);
    text-decoration: none;
}

.site-footer a[href^="tel:"]:visited,
.site-footer a[href^="mailto:"]:visited {
    color: var(--text-dark) !important;
}

.site-footer a[x-apple-data-detectors] {
    color: var(--text-dark) !important;
    -webkit-text-fill-color: var(--text-dark) !important;
    text-decoration: none !important;
}

.footer-adresse {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
}

.footer-adresse-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: "Branch Regular", serif;
    font-size: 14px !important;
    color: #595842 !important;
    font-weight: 400;
    color: #595842 !important;
    line-height: 1.6;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
}

.footer-adresse-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-transform: uppercase;
}

.footer-adresse-route,
.footer-adresse-postal {
    margin: 0;
    font-size: 14px !important;
    text-transform: uppercase;
}

.footer-socials {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
}

.footer-socials {
    font-family: "Branch Regular", serif;
    text-transform: uppercase;
    color: #595842 !important;
}

.footer-socials div,
.footer-socials p,
.footer-socials span {
    font-size: 14px !important;
    text-transform: uppercase;
    color: #595842 !important;
}

.footer-bottom {
    border-top: 1px solid rgba(89, 88, 66, 0.1);
    padding: 25px 50px;
    background-color: var(--white);
    color: #595842 !important;
}

.footer-bottom-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    letter-spacing: 1px;
    color: #595842 !important;
    color: #5a5a5a;
    opacity: 0.6;
}

/* Copyright : afficher le texte ACF tel que saisi (pas de majuscules forcées) */
.footer-copyright-text {
    text-transform: none;
}

.footer-links {
    display: flex;
    gap: 25px;
    text-transform: uppercase;
}

.footer-links a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-links a:hover {
    opacity: 1;
}

/* --- MAP MODAL --- */
.map-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.3s ease, opacity 0.3s ease;
}

.map-modal.active {
    visibility: visible;
    opacity: 1;
}

.map-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}

.map-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #eee8d6;
    border-radius: 30px;
    width: 85%;
    max-width: 1000px;
    max-height: 92vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    z-index: 10001;
    display: flex;
    flex-direction: column;
}

.map-modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.map-modal-close:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.map-modal-close i {
    width: 20px;
    height: 20px;
    stroke-width: 2;
    color: #000000;
}

/* Flèches swipe : visibles uniquement ≤677px (voir media query carte) */
.map-modal-swipe-arrows {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10003;
    border-radius: inherit;
}

.map-modal-swipe-arrow {
    pointer-events: auto;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: #595842;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-modal-swipe-arrow:hover {
    opacity: 0.85;
}

.map-modal-swipe-arrow:active {
    opacity: 0.7;
}

.map-modal-swipe-arrow svg {
    filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.95)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.map-modal-swipe-arrow--prev {
    left: 8px;
}

.map-modal-swipe-arrow--next {
    right: 8px;
}

.map-modal-grid {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    gap: 0;
    min-height: 720px;
    flex: 1;
    overflow: visible;
    max-height: 92vh;
}

.map-modal-swipe-viewport {
    min-width: 0;
}

.map-modal-swipe-slide {
    min-width: 0;
    min-height: 0;
}

/* ≥678px : même grille 3 colonnes ; le viewport disparaît du layout (enfants = cellules grille) */
@media (min-width: 678px) {
    .map-modal-swipe-viewport {
        display: contents;
    }

    .map-modal-swipe-slide {
        display: flex;
        flex-direction: column;
    }

    .map-modal-swipe-slide--legend {
        grid-column: 1;
        grid-row: 1;
    }

    .map-modal-separator {
        grid-column: 2;
        grid-row: 1;
    }

    .map-modal-swipe-slide--map {
        grid-column: 3;
        grid-row: 1;
    }
}

.map-modal-info {
    padding: 50px 40px;
    background: var(--white);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 100%;
    max-height: 92vh;
    color: #000000;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
    box-sizing: border-box;
    border-radius: 30px 0 0 30px;
}

.map-modal-info::-webkit-scrollbar {
    width: 6px;
}

.map-modal-info::-webkit-scrollbar-track {
    background: transparent;
}

.map-modal-info::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 3px;
}

.map-modal-info::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

.map-modal-separator {
    background: rgba(0,0,0,0.1);
    width: 1px;
    align-self: stretch;
}

/* Indicateur "scroll" : masqué en 2 colonnes, affiché uniquement en 1 colonne (< 678px) */
.map-modal-scroll-hint {
    display: none;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.map-modal-scroll-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    animation: map-scroll-bounce 1.5s ease-in-out infinite;
}
@keyframes map-scroll-bounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

.map-modal-label {
    display: inline-block;
    background: #000000;
    color: var(--white);
    padding: 8px 16px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 30px;
    border-radius: 4px;
}

.map-modal-title {
    font-family: "Royale Milano", serif;
    font-size: 2.5rem;
    font-weight: 500;
    margin: 0 0 50px 0;
    color: #000000;
    line-height: 1.2;
}

.map-location-group {
    margin-bottom: 40px;
}

.map-location-region {
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 2px;
    margin: 0 0 20px 0;
    color: #5a5a5a;
    opacity: 1;
}

.map-location-item {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
    align-items: flex-start;
}

.map-icon-black,
.map-icon-white,
.map-icon-square {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 6px;
}

.map-icon-black {
    background: #000000;
}

.map-icon-white {
    background: var(--white);
    border: 2px solid #000000;
}

.map-icon-square {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: #000000;
}

.map-location-item strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #000000;
}

.map-location-item p {
    font-size: 13px;
    line-height: 1.6;
    color: #5a5a5a;
    opacity: 1;
    margin: 0;
}

.map-modal-map {
    padding: 0;
    background: #eee8d6;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    position: relative;
    border-left: 1px solid rgba(0,0,0,0.1);
    overflow: hidden;
    height: 100%;
    border-radius: 0 30px 30px 0;
}

.corsica-map {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    overflow: hidden;
}

.corsica-map-image {
    width: 100%;
    height: 100%;
    min-height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
    opacity: 1;
    border-radius: 0;
    pointer-events: none;
}

.corsica-outline {
    width: 100%;
    height: auto;
    opacity: 0.9;
    display: none; /* Masquer le SVG si une image est utilisée */
}

.map-markers {
    display: none;
}

.map-marker {
    display: none;
}

.marker-icon-black,
.marker-icon-white,
.marker-icon-square {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--text-dark);
    background: var(--text-dark);
}

.marker-icon-white {
    background: var(--white);
}

.marker-icon-square {
    width: 16px;
    height: 16px;
    border-radius: 2px;
    background: var(--text-dark);
}

.marker-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dark);
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.9);
    padding: 4px 8px;
    border-radius: 4px;
}

.map-text-water {
    display: none;
}

/* En dessous de 1024 px : l'image de la carte prend toute la taille de la partie droite */
@media (max-width: 1024px) {
    /* Éviter min-height 720px du desktop : sur iPhone ça force une zone énorme et Safari « zoome » l’image */
    .map-modal .map-modal-grid {
        min-height: 0;
        max-height: min(92vh, 100%);
    }
    .map-modal-map {
        padding: 0;
        min-height: 0;
        align-self: stretch;
    }
    .map-modal-grid .map-modal-map {
        height: auto;
        min-height: 0;
        max-height: 55vh;
    }
    .map-modal .map-modal-map .corsica-map {
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: 55vh;
        align-items: center;
        justify-content: center;
    }
    .map-modal .map-modal-map .corsica-map-image {
        width: 100%;
        height: auto;
        min-height: 0;
        max-height: 55vh;
        object-fit: contain;
        object-position: center center;
    }
}

/* 678–1024px : l’image remplit toute la zone droite (même hauteur que la légende, sans plafond 55vh) */
@media (min-width: 678px) and (max-width: 1024px) {
    .map-modal .map-modal-grid {
        align-items: stretch;
    }

    .map-modal .map-modal-swipe-slide--map {
        min-height: 0;
        align-self: stretch;
    }

    .map-modal-grid .map-modal-map {
        flex: 1 1 auto;
        height: 100%;
        min-height: 0;
        max-height: none !important;
        align-self: stretch;
    }

    .map-modal .map-modal-map {
        position: relative;
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        padding: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    .map-modal .map-modal-map .corsica-map {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100%;
        min-height: 0;
        max-height: none !important;
        display: flex;
        align-items: stretch;
        justify-content: stretch;
        overflow: hidden;
    }

    .map-modal .map-modal-map .corsica-map-image {
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: 1 1 auto;
        object-fit: contain;
        object-position: center center;
        display: block;
        position: relative;
        z-index: 1;
    }
}

/* ≤677px : légende et carte en plein cadre de la fenêtre, swipe horizontal (scroll-snap) */
@media (max-width: 677px) {
    .map-modal-grid {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0 !important;
        max-height: none;
        overflow: hidden;
    }

    .map-modal-separator {
        display: none;
    }

    .map-modal-scroll-hint {
        display: flex;
    }

    .map-modal-scroll-hint .map-modal-scroll-icon {
        animation: none;
    }

    .map-modal-swipe-arrows {
        display: block;
    }

    .map-modal .map-modal-content {
        height: min(94dvh, 94vh);
        max-height: 94vh;
        max-height: 94dvh;
        min-height: 0;
        background-color: #eee8d6;
        align-items: stretch;
    }

    .map-modal .map-modal-grid {
        background-color: #eee8d6 !important;
        flex: 1 1 0;
        min-height: 0;
        width: 100%;
    }

    .map-modal-swipe-viewport {
        flex: 1 1 0;
        min-height: 0;
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        /* Snap plus souple au doigt (proximity + normal) ; flèches animées en JS */
        scroll-snap-type: x proximity;
        scroll-behavior: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        background-color: #eee8d6 !important;
    }

    .map-modal-swipe-viewport::-webkit-scrollbar {
        display: none;
    }

    .map-modal-swipe-slide {
        flex: 0 0 100%;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
        height: 100%;
        min-height: 0;
        scroll-snap-align: start;
        scroll-snap-stop: normal;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
    }

    .map-modal-swipe-slide--legend {
        background: var(--white);
        align-self: stretch;
        min-height: 100%;
    }

    .map-modal-swipe-slide--legend .map-modal-info {
        flex: 1 1 auto;
        align-self: stretch;
        width: 100%;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 0;
        max-height: none !important;
        background-color: var(--white);
    }

    .map-modal-swipe-slide--map {
        background-color: #eee8d6 !important;
        align-self: stretch;
        min-height: 100%;
        flex: 1 1 auto;
    }

    .map-modal-swipe-slide--map .map-modal-map {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none !important;
        border: none;
        border-radius: 0;
        border-top: none;
        align-self: stretch;
        width: 100%;
        background-color: #eee8d6 !important;
        position: relative;
    }

    .map-modal-swipe-slide--map .map-modal-map::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: #eee8d6 !important;
        z-index: 0;
        pointer-events: none;
    }

    .map-modal-swipe-slide--map .corsica-map {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        max-height: none !important;
        width: 100%;
        align-items: stretch;
        justify-content: stretch;
        background-color: #eee8d6 !important;
        line-height: 0;
        font-size: 0;
        position: relative;
        z-index: 1;
    }

    .map-modal-swipe-slide--map .corsica-map-image,
    .map-modal .map-modal-swipe-slide--map .corsica-map-image {
        display: block;
        position: relative;
        z-index: 1;
        width: 100% !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        flex: 1 1 auto;
        object-fit: cover !important;
        object-position: center center;
        background-color: #eee8d6 !important;
    }
}

/* --- RESPONSIVE --- */

/* --- TABLETTE ET MOBILE (max-width: 1024px) - base commune (tablette comme avant) --- */
@media (max-width: 1024px) {
    html {
        -webkit-text-size-adjust: 100%;
    }
    .navbar {
        padding-left: 30px !important;
        padding-right: 30px !important;
        min-height: 100px;
        margin-bottom: 120px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .nav-container {
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
    .navbar .menu-toggle i,
    .navbar .menu-toggle svg,
    .menu-toggle i,
    .menu-toggle svg {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        stroke-width: 2 !important;
        box-sizing: border-box;
    }
    .navbar .lang-selector i,
    .navbar .lang-selector svg,
    .navbar .lang-selector .lang-chevron {
        width: 22px !important;
        height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
    }
    .navbar .reservation-btn i,
    .navbar .reservation-btn svg {
        width: 22px !important;
        height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
    }
    .navbar .lang-selector .lang-current {
        font-size: 12px !important;
    }
    .hero-title,
    .hero-title-main,
    .tarifs-hero-title,
    .villa-hero-title,
    .villas-video-hero .villas-video-title {
        font-size: 50px !important;
    }
    .hero-content {
        padding: 0 30px;
    }
    .location-section {
        padding: 80px 40px;
    }
    .location-container {
        grid-template-columns: 1fr;
        gap: 30px !important;
        padding: 0 20px;
    }
    .location-content {
        order: 1;
    }
    .location-image-card {
        order: 2;
    }
    .contact-form-section .contact-form-container,
    .page-contact-section .contact-form-container,
    .page-tarifs-section .contact-form-container {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }
    .page-contact-section .contact-form-wrapper,
    .page-tarifs-section .contact-form-wrapper {
        max-width: 100% !important;
        width: 100% !important;
    }
    /* Éviter le zoom auto au focus (iOS/Safari) : 16px minimum sur champs Contact/Tarifs */
    .page-contact-section .contact-form-field input,
    .page-contact-section .contact-form-field textarea,
    .page-contact-section .contact-form-field select,
    .page-tarifs-section .contact-form-field input,
    .page-tarifs-section .contact-form-field textarea,
    .page-tarifs-section .contact-form-field select,
    .page-contact-section .contact-form--contact-style .contact-form-field input,
    .page-contact-section .contact-form--contact-style .contact-form-field textarea,
    .page-tarifs-section .contact-form--tarifs-style .contact-form-field input,
    .page-tarifs-section .contact-form--tarifs-style .contact-form-field textarea,
    .page-tarifs-section .contact-form--tarifs-style .contact-form-field select {
        font-size: 16px !important;
    }
    /* iOS / Android : moins de latence au tap, bouton assez grand pour le pouce */
    .page-contact-section .contact-form,
    .page-tarifs-section .contact-form {
        touch-action: manipulation;
    }
    .page-contact-section .contact-form-submit,
    .page-tarifs-section .contact-form-submit {
        min-height: 48px;
        box-sizing: border-box;
        -webkit-tap-highlight-color: rgba(89, 88, 66, 0.12);
    }
    /* Instagram : images plus petites sur tablette (-33% vs 400px desktop) */
    .insta-item {
        width: 270px;
        height: 270px;
    }
    .serif-title {
        font-size: 2rem;
    }
}

/* 768px–1024px : Contact/Tarifs gardent formulaire à côté de l'image (évite le bug au focus/clavier) */
@media (min-width: 768px) and (max-width: 1024px) {
    .page-contact-section .contact-form-container,
    .page-tarifs-section .contact-form-container {
        grid-template-columns: 1fr 1fr !important;
    }
    .page-contact-section .contact-form-left {
        order: 1;
    }
    .page-contact-section .contact-form-right {
        order: 2;
    }
    .page-tarifs-section .contact-form-left {
        order: 2;
    }
    .page-tarifs-section .contact-form-right {
        order: 1;
    }
    /* Image en taille fixe pour ne pas changer au focus/clavier */
    .page-contact-section .contact-form-image-card,
    .page-tarifs-section .contact-form-image-card {
        width: 439px !important;
        height: 738px !important;
        min-width: 439px;
        min-height: 738px;
    }
    .page-contact-section .contact-form-image-card img,
    .page-tarifs-section .contact-form-image-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    /* Éviter le zoom auto au focus (iOS/Safari zoome si font-size < 16px) */
    .page-contact-section .contact-form-field input,
    .page-contact-section .contact-form-field textarea,
    .page-contact-section .contact-form-field select,
    .page-tarifs-section .contact-form-field input,
    .page-tarifs-section .contact-form-field textarea,
    .page-tarifs-section .contact-form-field select {
        font-size: 16px !important;
    }
    /* Formulaire Tarifs en une colonne (reste au focus/clavier) */
    .page-tarifs-section .contact-form-row--double,
    .page-tarifs-section .contact-form--tarifs-style .contact-form-row--double {
        grid-template-columns: 1fr !important;
    }
    .page-tarifs-section .contact-form--tarifs-style .contact-form-row--double .contact-form-field-full {
        grid-column: 1;
    }
}

/* 768px–1024px : même mise en page que desktop pour Location (2 colonnes),
   sans toucher au desktop (≥1025px). */
@media (min-width: 768px) and (max-width: 1024px) {
    .location-section {
        padding: 80px 40px;
    }
    .location-container {
        /* Même grille que desktop : image ~44%, texte ~56% */
        grid-template-columns: 2.2fr 2.8fr !important;
        gap: 30px !important;
        padding: 0 30px;
    }
    /* Image à gauche (comme Nos Villas / desktop) */
    .location-image,
    .location-image-card {
        order: 1;
    }
    /* Texte à droite */
    .location-content {
        order: 2;
    }
    /* Dimensions d'image identiques à Nos Villas (658×714, définies en base) */
    /* Pas de override ici pour laisser les dimensions de base s'appliquer. */
}

/* --- RESPONSIVE DESKTOP (min-width: 1025px) --- */
@media (min-width: 1025px) {
    /* Instagram : taille max 600×600 à partir de 1025px */
    .insta-item {
        width: 600px !important;
        min-width: 600px !important;
        height: 600px !important;
    }
    .location-section {
        padding: 160px 120px; /* Plus de padding pour centrer les blocs */
        height: 640px !important;
        min-height: 640px !important;
        max-height: 640px !important;
        overflow: hidden;
    }
    
    .villas-section {
        padding: 100px 15px 100px 165px !important; /* Même espacement que Location */
        height: 640px !important;
        min-height: 640px !important;
        max-height: 640px !important;
        overflow: hidden;
    }
    
    /* Override pour #location-ideal - hauteur 640px */
    #location-ideal.location-section {
        padding: 100px 165px 100px 165px !important;
        height: 640px !important;
        min-height: 640px !important;
        max-height: 640px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .location-container {
        gap: 30px !important;
    }
    
    #location-ideal .location-container {
        padding: 0 90px 0 90px !important;
    }
    
    .villas-container {
        padding: 0 50px !important;
        gap: 30px !important;
    }
    
    /* Largeur max du bloc texte Location = largeur à 1217 px ; à 1366 px c’est déjà le max, au-dessus ça ne s’élargit plus */
    
    /* Titres et texte Location alignés sur Nos Villas en desktop */
    .location-title {
        font-size: 50px !important; /* même taille que .villas-title */
        font-weight: 500 !important; /* même graisse que .villas-title */
        line-height: 1.2 !important; /* même line-height que .villas-title */
    }
    
    .location-text p {
        font-size: 15px; /* même taille que .villas-text p */
    }
    
    .location-btn {
        font-size: 14px; /* text-sm desktop */
    }
    
}

/* iPad Pro 11\" paysage : mêmes images que desktop, paddings un peu réduits — supprimer espace vide à droite */
@media (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape) {
    html,
    body {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    main,
    .site-main,
    [class*="site-main"] {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box;
    }
    .location-section,
    .villas-section,
    .villa-detail-main-section,
    .villa-detail-section,
    .separator-section,
    .unique-place-section,
    .instagram-section {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    /* LOCATION : padding horizontal presque nul en paysage (contenu proche des bords)
       + hauteur fixe 640px */
    .location-section {
        padding: 70px 12px;
        height: 640px !important;
        min-height: 640px !important;
        max-height: 640px !important;
        overflow: hidden;
    }

    .location-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 12px;
        box-sizing: border-box;
    }

    /* LOCATION IDEAL : même hauteur 640px en paysage */
    #location-ideal.location-section {
        padding-left: 12px !important;
        padding-right: 12px !important;
        height: 640px !important;
        min-height: 640px !important;
        max-height: 640px !important;
        overflow: hidden;
    }
    
    #location-ideal .location-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* NOS VILLAS : même espace haut/bas qu’en Location (≈ 2 cm) — padding vertical doublé vs 70px */
    .villas-section {
        padding: 87px 12px !important;
        height: 640px !important;
        min-height: 640px !important;
        max-height: 640px !important;
        overflow: hidden;
    }

    .villas-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 12px !important;
        box-sizing: border-box;
    }
    
    /* Instagram : réduire seulement sur iPad paysage (pas sur desktop large) */
    .insta-item {
        width: 400px;
        height: 400px;
    }
    
    /* Images Location / Nos Villas : désactivé ici, la progression 1025→1367 (570→690×748) s’applique via le bloc plus bas */
    /* .location-image-card img, .villas-image img { width: 564px; height: 680px; } */
    
    /* Separator et Unique Place : hauteur augmentée de 20 % en paysage (65vh → 78vh, 400px → 480px) */
    .separator-section,
    .unique-place-section {
        height: 78vh !important;
        min-height: 480px !important;
    }
    
    /* Villa détail : même espace bord d’écran → texte/image que Location en paysage */
    .villa-detail-main-section {
        padding: 120px 12px 50px !important;
    }
    .villa-detail-section {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .villa-detail-main-section .villa-detail-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        padding: 0 12px !important;
        box-sizing: border-box;
    }
    .villa-detail-section .villa-detail-container {
        width: 100%;
        max-width: 100%;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 60px;
        align-items: center;
        padding: 0 12px !important;
        box-sizing: border-box;
    }
    .villa-detail-content {
        padding-right: 40px;
        padding-left: 0;
    }
    /* Villa détail main : même logique que Nos villas (ratio 690/748 comme à 1367px+) */
    .villa-detail-main-section .villa-detail-image-wrapper {
        width: 100%;
        aspect-ratio: 690 / 748;
        height: auto;
    }
    .villa-detail-main-section .villa-detail-main-image {
        width: 100%;
        height: 100%;
        min-height: 0;
        object-fit: cover;
    }
    /* Galerie villa détail : comme en portrait — décoller la grande image de la gauche */
    .villa-gallery-section .villa-gallery-container {
        padding-left: 50px;
    }
}

/* À partir de 1366px : supprimer espace vide à droite (même correctif qu’en 1025–1366 paysage) */
@media (min-width: 1366px) {
    html,
    body {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }
    main,
    .site-main,
    [class*="site-main"] {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box;
    }
    .location-section,
    .villas-section,
    .villa-detail-main-section,
    .villa-detail-section,
    .separator-section,
    .unique-place-section,
    .instagram-section {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    /* Galerie : padding gauche = droite à partir de 1367px (éviter que la droite soit plus grande) */
    .villa-gallery-section .villa-gallery-container {
        padding-left: 50px;
        padding-right: 50px;
    }
}

/* --- RESPONSIVE TABLETTE (768px - 1024px) --- */
@media (max-width: 1024px) and (min-width: 768px) {
    .villa-detail-container,
    .contact-form-container {
        gap: 40px;
    }
    .villas-container {
        gap: 30px !important;
    }
    
    /* Réduire la largeur visible de Location / Nos Villas d'environ 10% (hors desktop) */
    .location-container,
    .villas-container {
        width: 90%;
        margin: 0 auto;
    }
    
    /* Garder les styles mobile pour location sur tablette */
    .location-container {
        gap: 30px !important;
    }
    
    /* Navbar 768–1024 : s'adapte à la largeur (pas de taille fixe), logo et hamburger visibles */
    .navbar {
        padding: 20px 24px !important;
        margin-top: -34px !important;
        margin-bottom: 100px !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    .nav-container {
        width: 100% !important;
        max-width: calc(100vw - 48px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 12px;
        box-sizing: border-box;
    }
    
    .nav-logo {
        margin-left: 0 !important;
    }
    .nav-actions {
        margin-right: 0 !important;
    }
    
    /* Logo : en 768–857 plus à gauche (éviter décalage à droite), à partir de 858 comme avant */
    .navbar .logo-complete {
        transform: translate(-24px, 14px) !important;
    }
    .navbar .nav-logo:hover .logo-complete {
        transform: translate(-24px, 14px) scale(1.05) !important;
    }
    .navbar .nav-logo:hover {
        transform: none !important;
    }
    
    /* Annuler les translateX desktop sur icônes (sinon tout se décale à droite en 768–1024, surtout en paysage) */
    .navbar .lang-selector,
    .navbar .reservation-btn,
    .navbar .reservation-btn i,
    .navbar .menu-toggle {
        transform: none !important;
    }
    .navbar .lang-selector-wrapper:hover .lang-selector,
    .navbar .lang-selector:hover {
        transform: none !important;
    }
    .navbar .reservation-btn:hover,
    .navbar .reservation-btn:hover i,
    .navbar .menu-toggle:hover {
        transform: none !important;
    }
    
    .villa-detail-info {
        flex-wrap: wrap;
        gap: 20px;
    }
    
    .villa-detail-info-item {
        flex: 0 0 calc(50% - 10px);
        min-width: 140px;
    }
    
    .villa-feature-single-block {
        padding: 18px 22px;
    }
    
    .villa-detail-content,
    .location-content,
    .villas-content {
        padding-right: 20px;
    }
    
    section {
        padding-left: 30px;
        padding-right: 30px;
    }
    /* Exceptions : séparateur et Unique Place doivent être full-bleed */
    .separator-section,
    .unique-place-section {
        padding-left: 0;
        padding-right: 0;
    }
    
    .villas-list-section,
    .contact-form-section {
        padding-left: 30px;
        padding-right: 30px;
    }
    
    /* iPad / tablette : sections un peu plus compactes (sans impacter desktop) */
    .location-section {
        padding: 60px 24px;
    }
    
    /* #location-ideal : éviter le bloc trop "haut" sur iPad */
    #location-ideal.location-section {
        padding: 60px 24px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    
    /* Nos villas : enlever la hauteur fixe 640px sur iPad et réduire les marges avec l'écran */
    .villas-section {
        padding: 60px 24px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    /* Réduire le padding interne des conteneurs pour rapprocher texte + image des bords */
    .location-container,
    .villas-container {
        padding: 0 24px;
    }
}

/* 768–858px : logo sans décalage excessif (éviter qu’il soit coupé à gauche) */
@media (max-width: 858px) and (min-width: 768px) {
    .navbar .logo-complete {
        transform: translate(-24px, 14px) !important;
    }
    .navbar .nav-logo:hover .logo-complete {
        transform: translate(-24px, 14px) scale(1.05) !important;
    }
}

/* 768–790px : logo un peu plus à gauche (éviter qu'il paraisse trop à droite) */
@media (max-width: 790px) and (min-width: 768px) {
    .navbar .logo-complete {
        transform: translate(-72px, 14px) !important;
    }
    .navbar .nav-logo:hover .logo-complete {
        transform: translate(-72px, 14px) scale(1.05) !important;
    }
}

/* 791–853px : entre les deux réglages le logo restait trop à droite avec -24px seul */
@media (max-width: 853px) and (min-width: 791px) {
    .navbar .logo-complete {
        transform: translate(-60px, 14px) !important;
    }
    .navbar .nav-logo:hover .logo-complete {
        transform: translate(-60px, 14px) scale(1.05) !important;
    }
}

/* 857–1024px : icônes navbar un peu décalées à droite */
@media (min-width: 857px) and (max-width: 1024px) {
    .navbar .nav-actions {
        transform: translateX(24px) !important;
    }
}

/* Tablette en mode portrait uniquement : mêmes conteneurs que paysage,
   mais images Location / Nos Villas réduites d'environ 30 % */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    /* Navbar portrait : tenir dans la largeur pour afficher le menu hamburger (sans toucher logo ni tailles d’icônes) */
    .navbar {
        padding: 12px 12px 12px 48px !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: visible;
    }
    .nav-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
        gap: 10px;
        padding: 0 8px 0 32px;
    }
    .navbar .lang-selector,
    .navbar .reservation-btn,
    .navbar .menu-toggle {
        transform: none !important;
    }
    .navbar .lang-selector-wrapper:hover .lang-selector,
    .navbar .lang-selector:hover,
    .navbar .lang-selector.active {
        transform: none !important;
    }
    .navbar .lang-selector-wrapper {
        position: relative;
        overflow: visible;
    }
    .navbar .lang-dropdown {
        right: auto;
        left: 50%;
        transform: translateX(-50%) translateY(-10px);
        min-width: 160px;
        z-index: 9999;
        position: absolute;
    }
    .navbar .lang-dropdown.active {
        transform: translateX(-50%) translateY(0);
    }
    .navbar .nav-container {
        overflow: visible;
    }
    .site-navbar {
        overflow: visible;
    }
    .nav-actions {
        flex-shrink: 0;
        margin-right: 0;
        margin-left: auto;
    }
    .navbar .menu-toggle {
        flex-shrink: 0;
    }
    /* Décaler le logo vers la droite pour qu’il ne soit plus coupé à gauche (sans changer sa taille) */
    /* rapprocher un peu plus du comportement paysage sur tablette portrait */
    .location-container,
    .villas-container {
        width: 90%;
        margin: 0 auto;
    }
    /* Ajuster le padding gauche pour Location uniquement
       pour compenser visuellement la différence perçue avec Nos Villas */
    .location-section {
        padding-left: 40px;
    }
    /* Section Location en portrait : texte à gauche, image à droite */
    .location-content {
        order: 1;
    }
    .location-image,
    .location-image-card {
        order: 2;
    }
    /* Aligner la hauteur des sections Location / Nos Villas sur ~720px (≈ +12% vs 640px) en portrait tablette */
    .location-section,
    .villas-section {
        height: 720px !important;
        min-height: 720px !important;
        max-height: 720px !important;
    }
    
    /* S'assurer que la variante #location-ideal a bien la même hauteur
       (elle avait auparavant un height:auto !important plus spécifique) */
    #location-ideal.location-section {
        height: 720px !important;
        min-height: 720px !important;
        max-height: 720px !important;
    }
    
    /* Portrait : progression 768→1024 ; largeur 451px à 1024 ; hauteur 701px → 743px à 1024 */
    .location-image-card img,
    .villas-image img {
        width: calc(373px + 78px * clamp(0, (100vw - 768px) / 256px, 1));
        height: calc(701px + 42px * clamp(0, (100vw - 768px) / 256px, 1));
    }
    
    /* Villa détail main : même comportement que Nos villas (même progression 768→1024) */
    .villa-detail-main-section .villa-detail-image-wrapper {
        width: calc(373px + 78px * clamp(0, (100vw - 768px) / 256px, 1));
        aspect-ratio: auto;
        height: calc(701px + 42px * clamp(0, (100vw - 768px) / 256px, 1));
    }
    .villa-detail-main-section .villa-detail-main-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Villa détail : mêmes paramètres que section Location en portrait (sauf padding top/bottom) */
    .villa-detail-main-section {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .villa-detail-section {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .villa-detail-main-section .villa-detail-container,
    .villa-detail-section .villa-detail-container {
        width: 90%;
        margin: 0 auto;
        padding: 0 24px !important;
    }
    .villa-detail-content {
        padding-right: 0;
    }
    
    /* Titres "Nos villas à louer" et "Entre mer et maquis" (au-dessus des paragraphes) : 35px en portrait */
    .location-title,
    #location-ideal .location-title,
    .location-text h2,
    .villas-title,
    .villas-text h2 {
        font-size: 35px !important;
    }
    
    /* Separator et Unique Place : hauteur réduite de 10 % en portrait (65vh → 58.5vh, 400px → 360px) */
    .separator-section,
    .unique-place-section {
        height: 58.5vh !important;
        min-height: 360px !important;
    }
    
    /* Instagram : même taille d’images qu’en mode paysage (400×400px) */
    .insta-item {
        width: 400px !important;
        height: 400px !important;
    }
    
    /* Galerie villa détail : décoller un peu la grande image de la gauche */
    .villa-gallery-section .villa-gallery-container {
        padding-left: 50px;
    }

    /* Contact et Tarifs : pas de 101% (débordement horizontal / liseré blanc sur certains iPhone) */
    body:has(.tarifs-hero-section) .navbar {
        padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
        width: 100% !important;
        max-width: 100% !important;
        right: 0 !important;
        box-sizing: border-box;
    }
    body:has(.tarifs-hero-section) .nav-container {
        padding-right: 12px !important;
    }

    /* Contact et Tarifs : sections formulaire comme Location (portrait) - formulaire à côté de l'image */
    .page-contact-section.contact-form-section,
    .contact-form-section.page-tarifs-section {
        padding: 80px 40px !important;
    }
    .page-contact-section .contact-form-container,
    .page-tarifs-section .contact-form-container {
        grid-template-columns: 1fr 1fr !important;
        width: 90% !important;
        max-width: 90% !important;
        margin: 0 auto !important;
        padding: 0 24px !important;
        gap: 30px !important;
    }
    .page-contact-section .contact-form-left {
        order: 1;
    }
    .page-contact-section .contact-form-right {
        order: 2;
    }
    .page-tarifs-section .contact-form-left {
        order: 2;
    }
    .page-tarifs-section .contact-form-right {
        order: 1;
    }
    .page-contact-section .contact-form-image-card,
    .page-tarifs-section .contact-form-image-card {
        width: 439px !important;
        height: 738px !important;
    }
    .page-contact-section .contact-form-image-card img,
    .page-tarifs-section .contact-form-image-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    /* Formulaire Tarifs en portrait : une seule colonne (cases en dessous des autres, comme Contact) */
    .page-tarifs-section .contact-form-row--double,
    .page-tarifs-section .contact-form--tarifs-style .contact-form-row--double {
        grid-template-columns: 1fr !important;
    }
    .page-tarifs-section .contact-form--tarifs-style .contact-form-row--double .contact-form-field-full {
        grid-column: 1;
    }
}

@media (max-width: 767px) {
    .unique-place-section .unique-place-title {
        font-size: 42px !important;
    }
    .instagram-section .serif-title {
        font-size: 30px !important;
    }
    .instagram-section .insta-handle {
        font-size: 10px !important;
    }
    /* Location, Nos Villas et Villa détail main : même hauteur image (374px, 60vh) */
    .location-image-card img,
    .villas-image img {
        height: 374px !important;
        max-height: 60vh !important;
    }
    /* Contact / Tarifs : mêmes dimensions que Location et Nos villas (< 768px) */
    .page-contact-section .contact-form-image-card,
    .page-tarifs-section .contact-form-image-card {
        width: 100% !important;
        max-width: 100% !important;
        height: 374px !important;
        max-height: 60vh !important;
        aspect-ratio: auto !important;
    }
    .page-contact-section .contact-form-image-card img,
    .page-tarifs-section .contact-form-image-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .villa-detail-main-section .villa-detail-image-wrapper {
        height: 280px !important;
        max-height: 45vh !important;
        width: 100%;
    }
    .villa-detail-main-section .villa-detail-main-image {
        height: 280px !important;
        max-height: 45vh !important;
        width: 100% !important;
        object-fit: cover;
    }
    /* Réduire la hauteur des sections : separator -16,67 % ; unique place même longueur que separator */
    .separator-section,
    .unique-place-section {
        height: 54.2vh !important;
        min-height: 333px !important;
    }
}

/* Villa détail – Section équipements : titre en haut au centre dès qu’on réduit (≤ 1025px), positionné par rapport à la section */
@media (max-width: 1200px) {
    .villa-equipements-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 100px !important;
        position: relative !important;
        min-height: 280px;
    }
    .villa-equipements-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        max-width: 100% !important;
    }
    .villa-equipement-item {
        padding-left: 0 !important;
    }
    .villa-equipement-item .equipement-label {
        padding: 0 4px 0 0 !important;
    }
    .villa-equipements-nav-group-right {
        position: absolute !important;
        top: -120px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        justify-content: center !important;
        order: unset !important;
        align-self: stretch !important;
        z-index: 10 !important;
        box-sizing: border-box !important;
    }
    .villa-equipements-nav-group-right .equipements-title {
        display: block !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        bottom: 0 !important;
        text-align: center !important;
        width: 100% !important;
        font-size: 30px !important;
    }
    .villa-equipements-carousel-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-direction: column !important;
        align-items: stretch !important;
        transform: none !important;
        gap: 24px !important;
    }
    /* Défilement uniquement par JS (boutons + drag/touch), pas de scroll natif → s’arrête à la fin */
    .villa-equipements-carousel-container {
        order: 0 !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        min-height: 260px !important;
        touch-action: pan-y pinch-zoom !important;
    }
    .villa-equipements-items-wrapper {
        touch-action: pan-y pinch-zoom !important;
    }
    .villa-equipements-nav-group-left {
        order: 1 !important;
        align-self: center !important;
        padding-bottom: 0 !important;
        transform: none !important;
    }
}

/* En dessous de 678px : titre "Équipements" reste en haut, pas de défilement vertical dans la section */
@media (max-width: 677px) {
    .villa-equipements-section {
        padding-top: 100px !important;
        padding-bottom: 40px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        overflow-x: hidden !important;
        overflow-y: hidden !important;
    }
    .villa-equipements-container {
        overflow: visible !important;
    }
    .villa-equipements-nav-group-right {
        order: -1 !important;
        position: relative !important;
        z-index: 51 !important;
        transform: translateY(-85px) !important;
        margin-bottom: 16px !important;
        padding: 0 !important;
        width: 100% !important;
    }
    .villa-equipements-nav-group-right .equipements-title {
        position: relative !important;
        z-index: 51 !important;
        display: block !important;
        visibility: visible !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 !important;
    }
}

@media (max-width: 767px) {
    /* Mobile uniquement : éviter overflow horizontal (768px = tablette comme 769px) */
    html,
    body {
        overflow-x: clip;
        max-width: 100%;
    }
    /* Supprimer la barre blanche en haut : début de main en beige (couleur body) */
    main {
        background: linear-gradient(to bottom, var(--beige-loru) 0, var(--beige-loru) 40px, var(--white) 40px) !important;
    }
    
    /* Section équipements : scroll horizontal, hauteur fixe 435px < 768px, pas de défilement vertical */
    .villa-equipements-section {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow-x: hidden;
        overflow-y: hidden;
        padding: 100px 0 40px 16px !important;
        position: relative !important;
        height: 435px !important;
        min-height: 435px !important;
        max-height: 435px !important;
        display: block !important;
        transform: translateY(-8px) !important;
        box-sizing: border-box !important;
        z-index: 50 !important;
        background-color: var(--white) !important;
    }
    /* overflow: visible pour que le titre "Équipements" ne reste pas bloqué/clippé dans le container (comme le menu langue dans la navbar) */
    .villa-equipements-container {
        overflow: visible !important;
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 0 !important;
    }
    .villa-equipements-nav-group-right {
        position: static !important;
        order: -1 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        transform: translateY(-85px) !important;
    }
    .villa-equipements-nav-group-right .equipements-title {
        display: block !important;
        visibility: visible !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        bottom: 0 !important;
        text-align: center !important;
        width: 100% !important;
        font-size: 30px !important;
        color: var(--text-dark) !important;
    }
    .villa-equipements-carousel-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        transform: none !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
        flex: none !important;
        visibility: visible !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    /* Défilement uniquement par JS (boutons + drag/touch) : s’arrête à la fin des équipements */
    .villa-equipements-carousel-container {
        order: 0 !important;
        overflow-x: hidden !important;
        overflow-y: visible !important;
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        height: 280px !important;
        min-height: 280px !important;
        visibility: visible !important;
    }
    .villa-equipements-carousel,
    .villa-equipements-items-row {
        display: flex !important;
        visibility: visible !important;
    }
    .villa-equipements-carousel {
        min-height: 240px !important;
    }
    .villa-equipements-items-wrapper,
    .villa-equipements-items-row {
        min-height: 0 !important;
    }
    .villa-equipement-item,
    .villa-equipement-item .equipement-image,
    .villa-equipement-item .equipement-label {
        opacity: 1 !important;
        visibility: visible !important;
    }
    .villa-equipements-nav-group-left {
        order: 1 !important;
        align-self: center !important;
        padding-bottom: 0 !important;
        transform: translateY(-90px) !important;
        display: flex !important;
        max-width: none !important;
        width: auto !important;
        min-height: 48px !important;
        gap: 8px !important;
        z-index: 50 !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    .villa-equipements-nav,
    .villa-equipements-nav.villa-equipements-prev,
    .villa-equipements-nav.villa-equipements-next {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        top: auto !important;
    }
    
    /* Location, Nos Villas et Villa détail main : même hauteur d'image (374px, 60vh) */
    .location-image-card img,
    .villas-image img {
        width: 100%;
        max-width: 100%;
        height: 374px !important;
        max-height: 60vh !important;
        object-fit: cover;
        border-radius: 16px;
    }
    /* Contact / Tarifs : mêmes dimensions que Location et Nos villas (< 768px) */
    .page-contact-section .contact-form-image-card,
    .page-tarifs-section .contact-form-image-card {
        width: 100% !important;
        max-width: 100% !important;
        height: 374px !important;
        max-height: 60vh !important;
        aspect-ratio: auto !important;
    }
    .page-contact-section .contact-form-image-card img,
    .page-tarifs-section .contact-form-image-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    /* Villa détail : image réduite sur mobile */
    .villa-detail-main-section .villa-detail-image-wrapper {
        width: 100%;
        max-width: 100%;
        height: 280px !important;
        max-height: 45vh !important;
        border-radius: 16px;
        overflow: hidden;
    }
    .villa-detail-main-section .villa-detail-main-image {
        width: 100% !important;
        max-width: 100% !important;
        height: 280px !important;
        max-height: 45vh !important;
        object-fit: cover;
        border-radius: 16px;
        display: block;
    }
    /* Villa détail <768 : même correctif que tablette (évite liseré blanc à droite sur certains iPhone / Safari) */
    body:has(.villa-detail-section),
    body:has(.villa-detail-main-section),
    body.villa-detail-page {
        overflow-x: clip;
        max-width: 100%;
    }
    body:has(.villa-detail-section) main,
    body:has(.villa-detail-main-section) main,
    body:has(.villa-detail-section) .site-main,
    body:has(.villa-detail-main-section) .site-main,
    body.villa-detail-page main,
    body.villa-detail-page .site-main {
        overflow-x: clip;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Galerie : 100vw + marges négatives dépassent souvent la largeur réelle sur iOS */
    .villa-gallery-section {
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        transform: none;
        box-sizing: border-box;
    }
    .location-content {
        max-width: 100%;
    }
    .location-section .location-title,
    #location-ideal .location-title {
        max-width: 100%;
    }
    .location-section .location-text,
    #location-ideal .location-text {
        max-width: 100%;
    }
    
    /* Navbar mobile : même logique qu’au-dessus de 768px (overflow visible + z-index) */
    .site-navbar {
        z-index: 10010 !important;
        overflow: visible !important;
    }
    /* overflow: visible pour que le menu langue puisse se dérouler SOUS la navbar (pas coupé dedans) */
    .navbar { 
        z-index: 10010 !important;
        /* Padding symétrique : 16px à gauche poussait tout le bloc visuellement vers la droite */
        padding: 12px !important;
        margin-top: -34px !important;
        margin-bottom: 80px !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: visible !important;
    }
    
    .nav-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        padding: 0;
        margin-left: 0;
        margin-right: 0;
        overflow: visible !important;
        transform: none;
    }
    
    /* Menu langue < 768px : comme 768–1024 (overflow visible, position, transform explicites) */
    .navbar .lang-selector-wrapper {
        position: relative !important;
        overflow: visible !important;
        z-index: 10003 !important;
    }
    .navbar .lang-dropdown {
        position: absolute !important;
        top: calc(100% + 10px) !important;
        right: 0 !important;
        left: auto !important;
        min-width: 180px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px) !important;
        transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
        z-index: 10002 !important;
    }
    .navbar .lang-dropdown.active {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }
    
    /* Logo : même offset vertical qu’en 768+ (14px) pour éviter un saut quand on franchit le breakpoint */
    .navbar .logo-complete {
        transform: translate(0, 14px) !important;
    }
    .navbar .nav-logo {
        margin-left: -15px;
        margin-right: 0;
    }
    /* Le scale sur le <a> (.nav-logo:hover) faisait monter / bouger le bloc en plus du scale sur l’img */
    .navbar .nav-logo:hover {
        transform: none !important;
    }
    .navbar .nav-logo:hover .logo-complete {
        transform: translate(0, 14px) scale(1.05) !important;
    }
    
    /* Annuler les translate pour tout garder aligné (et pas de décalage au clic) */
    .navbar .lang-selector,
    .navbar .lang-selector-wrapper:hover .lang-selector,
    .navbar .lang-selector:hover,
    .navbar .lang-selector.active,
    .navbar .lang-selector:active,
    .navbar .reservation-btn,
    .navbar .menu-toggle {
        transform: none !important;
        transition: none !important;
    }
    .navbar .lang-selector .lang-chevron {
        transition: transform 0.25s ease !important;
    }
    .navbar .reservation-btn i {
        transform: none !important;
    }
    
    .nav-actions {
        flex-shrink: 0;
        margin-right: 0;
        margin-left: auto;
    }
    
    /* #location-ideal : padding minimal pour que le bloc texte soit large (desktop garde 90px) */
    #location-ideal .location-container {
        padding: 0 8px !important;
    }
    
    /* Section Nos villas : padding et largeur forcés (desktop garde 165px/90px) */
    .villas-section {
        padding: 60px 16px !important;
    }
    .villas-container {
        padding: 0 8px !important;
    }
    .villas-section .villas-content,
    .villas-section .villas-title,
    .villas-section .villas-text {
        max-width: 100% !important;
    }
    /* Titre section villas : "en Corse du Sud" à la ligne en dessous de 768px */
    .villas-section .villas-title .villas-title-line2 {
        display: block !important;
        margin-top: 0.15em;
    }
    .nav-logo {
        gap: 8px;
    }
    
    .logo-script {
        font-size: 28px;
    }
    
    .logo-underline {
        height: 2px;
        margin: 3px 0 5px 0;
    }
    
    .logo-di {
        font-size: 10px;
    }
    
    .logo-palombaggia {
        font-size: 11px;
    }
    
    .navbar .menu-toggle i,
    .navbar .menu-toggle svg,
    .menu-toggle i,
    .menu-toggle svg {
        width: 32px !important;
        height: 32px !important;
        max-width: 32px !important;
        max-height: 32px !important;
        stroke-width: 2 !important;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .navbar .lang-selector i,
    .navbar .lang-selector svg,
    .navbar .lang-selector .lang-chevron {
        width: 22px !important;
        height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .navbar .reservation-btn i,
    .navbar .reservation-btn svg {
        width: 22px !important;
        height: 22px !important;
        max-width: 22px !important;
        max-height: 22px !important;
        flex-shrink: 0;
        box-sizing: border-box;
    }
    
    .reservation-btn span {
        display: inline;
    }

    /* ≤500px : compact (logo + icônes) — imbriqué dans <768 pour gagner sur la cascade */
    @media (max-width: 500px) {
        .navbar {
            padding: 8px 8px 8px 10px !important;
            margin-bottom: 64px !important;
        }
        .nav-container {
            --nav-tight: clamp(0, (375px - 100vw) / 55px, 1);
            gap: calc(6px - 4px * var(--nav-tight)) !important;
            transform: translateX(-8px);
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        .navbar .logo-complete {
            height: 168px !important;
            max-height: 168px !important;
            width: auto;
            transform: translate(-14px, 10px) !important;
        }
        .navbar .nav-logo {
            margin-left: -18px;
        }
        .navbar .nav-logo:hover .logo-complete {
            transform: translate(-14px, 10px) scale(1.05) !important;
        }
        .nav-actions {
            margin-left: auto !important;
            gap: calc(8px - 3px * var(--nav-tight)) !important;
            transform: translateX(calc(-10px * var(--nav-tight)));
            font-size: 12px !important;
        }
        .navbar .lang-selector {
            gap: calc(6px - 2px * var(--nav-tight)) !important;
        }
        .navbar .lang-selector .lang-current {
            font-size: 12px !important;
            letter-spacing: 0.03em;
        }
        .navbar .lang-selector i,
        .navbar .lang-selector .lang-chevron,
        .navbar .lang-selector svg {
            width: 16px !important;
            height: 16px !important;
            max-width: 16px !important;
            max-height: 16px !important;
        }
        .navbar .reservation-btn {
            display: inline-flex;
            align-items: center;
            gap: calc(8px - 3px * var(--nav-tight)) !important;
            font-size: 12px !important;
            letter-spacing: 0.04em;
        }
        .navbar .reservation-btn i,
        .navbar .reservation-btn svg {
            width: 22px !important;
            height: 22px !important;
            max-width: 22px !important;
            max-height: 22px !important;
        }
        .navbar .menu-toggle i,
        .navbar .menu-toggle svg,
        .menu-toggle i,
        .menu-toggle svg {
            width: 22px !important;
            height: 22px !important;
            max-width: 22px !important;
            max-height: 22px !important;
            stroke-width: 1.75 !important;
        }

        @media (min-width: 425px) {
            .navbar .nav-container {
                transform: none !important;
            }
            .navbar .logo-complete {
                transform: translate(0, 10px) !important;
            }
            .navbar .nav-logo {
                margin-left: -8px;
            }
            .navbar .nav-logo:hover .logo-complete {
                transform: translate(0, 10px) scale(1.05) !important;
            }
        }

        @media (max-width: 424px) {
            .navbar .nav-actions {
                transform: translateX(calc(22px + (-20px * var(--nav-tight)))) !important;
            }
        }
    }
    
    /* Améliorer l'espacement général sur mobile */
    section {
        padding-left: 20px;
        padding-right: 20px;
    }
    /* Exceptions : séparateur et Unique Place doivent aller bord à bord */
    .separator-section,
    .unique-place-section {
        padding-left: 0;
        padding-right: 0;
    }
    
    .villas-list-section,
    .location-section,
    .villas-section,
    .contact-form-section {
        padding-left: 16px;
        padding-right: 16px;
    }
    
    .villa-detail-section {
        padding: 40px 24px 24px !important;
        background-color: var(--beige-loru) !important;
    }
    
    .villa-detail-content {
        padding-left: 0;
        padding-right: 0;
    }
    
    .villa-detail-container,
    .location-container,
    .villas-container,
    .contact-form-container {
        padding: 0;
        gap: 30px;
    }
    
    .page-contact-section .contact-form-title {
        font-size: 30px !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Tarifs & Contact : colonne formulaire centrée (titres + bloc) */
    .page-contact-section .contact-form-left,
    .page-tarifs-section .contact-form-left {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center;
    }
    .page-tarifs-section .contact-form-title {
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .page-contact-section .contact-form,
    .page-tarifs-section .contact-form {
        width: 100%;
        max-width: 100%;
        align-self: stretch;
    }
    
    /* Hero Tarifs / Contact : titre bien centré dans la largeur utile */
    .tarifs-hero-section .tarifs-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
    }
    .tarifs-hero-section .tarifs-hero-title {
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Hero page villa : plus de décalage négatif sous 768px */
    .villa-hero-section {
        width: 100%;
        max-width: 100%;
        overflow-x: clip;
        box-sizing: border-box;
    }
    .villa-hero-section .villa-hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-left: max(16px, env(safe-area-inset-left, 0px));
        padding-right: max(16px, env(safe-area-inset-right, 0px));
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .villa-hero-section .villa-hero-title {
        margin-left: 0 !important;
        margin-right: 0 !important;
        text-align: center !important;
        max-width: 100%;
    }
    
    .villa-detail-content,
    .location-content,
    .villas-content {
        padding-right: 0;
    }
    
    .villa-detail-info {
        flex-direction: column;
        gap: 15px;
        margin: 15px 0 0 0;
    }
    
    .villa-detail-info-item {
        flex: 1 1 100%;
        justify-content: flex-start;
        font-size: 12px;
    }
    
    .villa-detail-info-item i {
        width: 16px;
        height: 16px;
    }
    
    .villa-feature-single-block {
        padding: 15px 20px;
        margin-bottom: 10px;
        flex-direction: column;
        gap: 10px;
    }
    
    .villa-feature-single-block .feature-check-icon {
        margin-top: 0;
    }
    
    .side-menu-content {
        width: 80%;
        min-width: 280px;
        padding: 50px 30px 30px;
    }
    
    .villas-video-hero .villas-video-title {
        text-align: center !important;
        width: fit-content !important;
        max-width: min(92vw, 38rem) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-wrap: break-word;
        line-height: 1.12;
    }
    .villas-video-hero .villas-video-content {
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        padding-left: max(16px, env(safe-area-inset-left, 0px), clamp(10px, 4vw, 24px));
        padding-right: max(16px, env(safe-area-inset-right, 0px), clamp(10px, 4vw, 24px));
        box-sizing: border-box;
    }
    
    .location-title,
    #location-ideal .location-title,
    .location-section .location-title,
    .villas-title,
    .villas-section .villas-title {
        font-size: clamp(30px, 6vw, 40px) !important;
        line-height: 1.22 !important;
    }
    .location-subtitle,
    #location-ideal .location-subtitle,
    .location-text h2 {
        font-size: clamp(30px, 6vw, 40px) !important;
    }
    .location-text p {
        font-size: 14px !important;
    }
    
    /* Location : bloc texte plus large + espacements réduits pour moins de hauteur */
    .location-content {
        gap: 20px;
    }
    .location-section .location-text,
    #location-ideal .location-text {
        gap: 16px;
    }
    .location-text h2 {
        margin: 18px 0 10px 0 !important;
    }
    
    .footer-grid { 
        grid-template-columns: 1fr; 
        gap: 40px;
        padding: 0 30px;
    }
    
    /* Footer : séparateurs en horizontal sur mobile */
    .footer-separator {
        width: 45%;
        max-width: 140px;
        height: 1px;
        margin: 20px auto;
        min-height: 1px;
    }
    .footer-separator-line {
        top: 50%;
        bottom: auto;
        left: 0;
        right: 0;
        width: 100%;
        height: 1px;
        transform: translateY(-50%);
    }
    
    /* Instagram : progression 270px → 600px de 320 à 600px viewport, puis fixe 600×600 jusqu'à 768px */
    .instagram-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .insta-carousel-container,
    .insta-carousel-wrapper {
        width: 100%;
        padding: 0;
    }
    .insta-item {
        width: clamp(270px, calc(270px + (100vw - 320px) * 330 / 280), 600px) !important;
        min-width: clamp(270px, calc(270px + (100vw - 320px) * 330 / 280), 600px) !important;
        height: clamp(270px, calc(270px + (100vw - 320px) * 330 / 280), 600px) !important;
        flex-shrink: 0;
        overflow: hidden;
        aspect-ratio: 1;
    }
    .insta-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .insta-carousel-wrapper {
        padding: 0;
    }
    
    .insta-carousel-btn {
        width: 40px;
        height: 40px;
    }
    
    .insta-carousel-btn i {
        width: 20px;
        height: 20px;
    }
    
    .insta-carousel-prev {
        left: 5px;
    }
    
    .insta-carousel-next {
        right: 5px;
    }
    
    .reviews-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .review-card {
        min-height: auto;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 0 30px;
    }
    
    .footer-bottom-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .footer-links {
        gap: 20px;
    }
    
    /* Carte + légende restent en 2 colonnes aussi avant 768px (comme à partir de 768px) */
    .map-modal-info {
        padding: 40px 30px;
        max-height: 70vh;
    }
    
    /* map-modal-map : pas de padding pour que l'image prenne toute la partie droite (règle < 1024px) */
    
    .map-modal-title {
        font-size: 2rem;
    }
    
    /* Ne pas forcer 400px sur la carte : sur iPhone ça amplifie l’effet « zoom » avec object-fit */
    .map-modal .map-modal-map .corsica-map {
        min-height: 0 !important;
    }
    
    .map-text-water {
        display: none;
    }
    
    .location-section,
    .villas-section {
        padding: 96px 24px; /* py-24 px-6 mobile */
    }
    
    /* Villa détail main : /2 (moins d'espace vertical) */
    .villa-detail-main-section {
        padding: 24px 24px 20px !important;
    }
    
    /* Section Nos villas : hauteur auto, image et texte adaptés (desktop inchangé) */
    .villas-section {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    .villas-image-card {
        width: 100%;
        max-width: 100%;
    }
    .villas-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: 374px !important;
        max-height: 60vh !important;
        object-fit: cover;
        object-position: center;
        border-radius: 16px;
    }
    .villas-section .villas-text h2 {
        font-size: clamp(30px, 6vw, 40px) !important;
    }
    .villas-text p {
        font-size: 14px !important;
    }
    
    /* #location-ideal : hauteur auto (surchargé depuis style.css pour mobile) */
    #location-ideal.location-section {
        padding: 60px 20px !important;
        height: auto !important;
        min-height: 350px !important;
        max-height: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    .location-container,
    .villas-container {
        grid-template-columns: 1fr;
        gap: 32px; /* mobile : colonnes empilées */
    }
    
    
    .location-image-card {
        padding: 0;
    }
    
    .separator-section,
    .separator-image {
        padding-left: 0 !important;
    }
    
    /* Unique Place (image avec overlay) : padding-left 0 */
    .unique-place-section,
    .unique-place-image {
        padding-left: 0 !important;
    }
    
    .unique-place-section {
        height: 50vh;
        min-height: 400px;
    }
    
    .villas-image {
        order: 1;
    }
    
    .villas-content {
        order: 2;
    }
    
    .villas-list-header {
        margin-bottom: 40px;
        padding: 0 20px;
    }
    
    .villas-list-subtitle {
        font-size: clamp(8px, 0.15rem + 1.9vw, 10px) !important;
        letter-spacing: 2px;
    }
    
    .villas-list-title {
        font-size: clamp(1.5rem, 0.65rem + 4.5vw, 2.05rem) !important;
    }
    
    .villas-list-text {
        padding: 0 4px;
    }
    .villas-list-text p {
        font-size: 14px !important;
    }
    .villas-list-text h2 {
        font-size: 22px !important;
    }
    
    .villas-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .villa-card-content {
        padding: 30px 25px;
        gap: 20px;
    }
    
    .villa-card-title {
        font-size: 1.5rem;
    }
    
    .villa-card-details {
        gap: 20px;
    }
    
    .villa-detail-item {
        font-size: 12px;
    }
    
    .villas-video-controls {
        padding: 20px 30px;
    }
    
    .villa-single-wrapper {
        padding: 50px 30px;
    }
    
    .villa-single-image {
        height: 400px;
    }
    
    .villa-single-content {
        padding: 25px 25px 30px;
        gap: 12px;
    }
    
    .villa-single-title {
        font-size: 1.5rem;
    }
    
    .villa-single-details {
        gap: 20px;
        font-size: 13px;
    }
    
    /* Villa Detail Page Responsive : comme section Location (photo en haut, texte en bas, même taille image) */
    .villa-detail-white-top {
        display: none;
    }
    
    .villa-detail-main-section .villa-detail-container {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 0;
    }
    
    /* Villa détail main : texte en haut, image en bas (mobile portrait + paysage) */
    .villa-detail-main-section .villa-detail-content {
        order: 1;
        padding-right: 0;
    }
    
    .villa-detail-main-section .villa-detail-image-sticky {
        order: 2;
        position: relative;
        top: 0;
    }
    
    .villa-detail-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .villa-detail-content {
        padding-right: 0;
    }
    
    .villa-detail-image-sticky {
        position: relative;
        top: 0;
        order: 2;
    }
    
    .villa-detail-title {
        font-size: 2.5rem;
    }
    
    .villa-detail-info {
        gap: 15px;
        flex-wrap: wrap;
    }
    
    .villa-detail-info-item {
        flex: 0 0 calc(50% - 7.5px);
        min-width: 120px;
    }
    
    .villa-detail-info-item {
        font-size: 13px;
    }
    
    .villa-detail-section-title {
        font-size: 1.8rem;
        margin: 30px 0 15px 0;
    }
    
    .villa-detail-section-divider {
        margin: 30px 0 25px 0;
    }
    
    .villa-feature-single-block {
        padding: 18px 20px;
        margin-bottom: 12px;
    }
    
    /* Boutons Découvrir / Vérifier : conserver mise en page et tailles (comme desktop) */
    .villa-detail-location-btn {
        width: fit-content;
        align-self: flex-start;
    }
    
    .villa-detail-separator {
        margin: 50px auto 0;
        padding: 0 30px;
    }
    
    .villa-gallery-section {
        padding: 50px 0 80px;
        margin-top: 60px;
        margin-bottom: 0;
    }
    
    .villa-gallery-section .villa-gallery-container {
        /* Centrer la grande image comme sur tablette : marges égales gauche/droite */
        padding: 0 24px;
    }
    
    .villa-gallery-title {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    .villa-gallery-main {
        aspect-ratio: 4 / 3;
        margin: 0 auto;
    }
    
    .villa-gallery-thumbnails-wrapper {
        padding: 20px 15px;
        gap: 10px;
    }
    
    .gallery-nav-btn {
        width: 40px;
        height: 40px;
    }
    
    .gallery-nav-btn i {
        width: 18px;
        height: 18px;
    }
    
    .gallery-thumbnail {
        width: 100px;
        height: 70px;
    }
    
    .villa-gallery-thumbnails {
        gap: 10px;
    }
    
    .villa-availability-btn-wrapper-inline {
        margin-top: 30px;
        justify-content: flex-start;
    }
    
    .villa-availability-btn {
        width: fit-content;
    }
    
    /* Tarifs Page Responsive */
    .tarifs-hero-section {
        height: 50vh;
        min-height: 400px;
    }
    
    .tarifs-content-section {
        padding: 40px 30px;
        margin-top: -50px;
    }
    
    .tarifs-card {
        grid-template-columns: 1fr;
    }
    
    .tarifs-card-left,
    .tarifs-card-right {
        padding: 40px 30px;
    }
    
    .tarifs-card-left {
        border-right: none;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    
    .tarifs-card-title {
        font-size: 1.5rem;
        margin-bottom: 30px;
    }
    
    .tarifs-list {
        gap: 15px;
    }
    
    .tarif-item {
        padding: 12px 0;
    }
    
    .tarifs-footer-info {
        margin-top: 30px;
        padding-top: 25px;
    }
    
    /* Booking Calendar Section Responsive */
    .booking-calendar-section {
        padding: 48px max(12px, env(safe-area-inset-left, 0px)) 56px max(12px, env(safe-area-inset-right, 0px));
    }

    .booking-calendar-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .booking-calendar-display {
        padding: 18px 12px;
        max-width: 100%;
        box-sizing: border-box;
    }

    .calendar-month-header {
        margin-bottom: 20px;
        padding-bottom: 14px;
    }

    .calendar-nav-btn {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
    }

    .calendar-month-title {
        font-size: clamp(1rem, 4.2vw, 1.4rem);
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        line-height: 1.15;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .calendar-grid {
        gap: 4px;
    }

    .calendar-day-header {
        font-size: 9px;
        padding: 6px 0;
        letter-spacing: 0.02em;
    }

    .calendar-day {
        font-size: 11px;
        padding: 2px;
    }
    
    .calendar-day-number {
        font-size: 11px;
    }
    
    .calendar-day-price {
        font-size: 8px;
    }

    .calendar-legend {
        flex-direction: column;
        gap: 15px;
        align-items: flex-start;
    }

    .booking-summary {
        padding: 20px;
    }

    /* Contact Form Section Responsive */
    .contact-form-section {
        padding: 60px 30px;
    }
    
    .contact-form-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    
    .contact-form-title {
        font-size: 45px;
        margin-bottom: 40px;
    }
    
    .contact-form-row {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .contact-form-image-card {
        width: 100%;
        max-width: 600px;
        height: auto;
        aspect-ratio: 600 / 650;
        overflow: hidden;
    }
    
    .contact-form-image-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

/* ============================================
   ANIMATIONS REVEAL AU SCROLL - OPTIMISÉ
   ============================================ */

/* Classe de base pour tous les éléments révélables */
.reveal-element {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform; /* Optimisation GPU */
}


/* Animation pour sections et blocs standards (arrivée du bas) */
.reveal-element.reveal-bottom {
    transform: translateY(30px);
}

.reveal-element.reveal-bottom.active {
    opacity: 1;
    transform: translateY(0);
}

/* Page d'accueil : location, nos villas, unique place, separator — arrivent de plus bas, opacité subtile, s'insèrent sous la section du dessus */
.location-section.reveal-element.reveal-bottom,
.villas-section.reveal-element.reveal-bottom,
.unique-place-section.reveal-element.reveal-bottom,
.separator-section.reveal-element.reveal-bottom {
    transform: translateY(160px);
    opacity: 0.88;
}

.location-section.reveal-element.reveal-bottom.active,
.villas-section.reveal-element.reveal-bottom.active,
.unique-place-section.reveal-element.reveal-bottom.active,
.separator-section.reveal-element.reveal-bottom.active {
    opacity: 1;
    transform: translateY(0);
}

/* Animation pour titres (arrivée du bas, plus subtile) */
.reveal-element.reveal-title {
    transform: translateY(15px);
}

.reveal-element.reveal-title.active {
    opacity: 1;
    transform: translateY(0);
}

/* Animation pour images horloge et contenu gauche (arrivée de la gauche) */
.reveal-element.reveal-left {
    transform: translateX(-50px);
}

.reveal-element.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

/* Désactiver toutes les animations d'apparition (sauf titre hero et navbar) */
.reveal-element,
.reveal-element.reveal-bottom,
.reveal-element.reveal-bottom.active,
.reveal-element.reveal-title,
.reveal-element.reveal-title.active,
.reveal-element.reveal-left,
.reveal-element.reveal-left.active,
.location-section.reveal-element.reveal-bottom,
.location-section.reveal-element.reveal-bottom.active,
.villas-section.reveal-element.reveal-bottom,
.villas-section.reveal-element.reveal-bottom.active,
.unique-place-section.reveal-element.reveal-bottom,
.unique-place-section.reveal-element.reveal-bottom.active,
.separator-section.reveal-element.reveal-bottom,
.separator-section.reveal-element.reveal-bottom.active {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* ≤768px : heros 50px (500–768) ; ≤499 : 40px (45px accueil .hero seulement) + translateX Tarifs/Contact */
@media (max-width: 768px) {
    .hero-title,
    .hero-title-main,
    .hero .hero-title-main,
    .tarifs-hero-title,
    .villa-hero-title,
    .villa-hero-section .villa-hero-title,
    .villas-video-hero .villas-video-title {
        font-size: 50px !important;
    }
    @media (max-width: 499px) {
        .tarifs-hero-title,
        .villa-hero-title,
        .villa-hero-section .villa-hero-title,
        .villas-video-hero .villas-video-title {
            font-size: 40px !important;
        }
        .hero .hero-title,
        .hero .hero-title-main {
            font-size: 45px !important;
        }
    }
    .hero .hero-title-tagline {
        font-size: 10px !important;
    }
    .page-contact-section .contact-form-title,
    .page-tarifs-section .contact-form-title,
    .tarifs-hero-section .tarifs-hero-title,
    .hero .hero-title {
        transform: translateX(-34px) !important;
    }
}

.tarifs-card.revealed {
    opacity: 1 !important;
    transform: none !important;
}
/* .tarifs-hero-content et .villa-hero-content gardent leur animation reveal (comme page villa détail) */

/* Animation d'arrivée des cartes sur la page Les villas (état initial + .revealed géré par JS, voir .villa-card plus haut) */

/* Effet store / shutter au scroll : état initial (bande en haut visible) */
.location-section .location-image-card,
.villas-section .villas-image-card,
.villa-detail-main-section .villa-detail-image-wrapper,
.contact-form-image-card {
    clip-path: inset(0 0 98% 0);
    transition: clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Déclenché au scroll quand l'élément entre dans le viewport (classe ajoutée par JS) */
.location-section .location-image-card.shutter-revealed,
.villas-section .villas-image-card.shutter-revealed,
.villa-detail-main-section .villa-detail-image-wrapper.shutter-revealed,
.contact-form-image-card.shutter-revealed {
    clip-path: inset(0 0 0 0) !important;
}

/* --- PAGES ARTICLES --- */
/* Background blanc pour les pages d'articles */
body:has(.article-detail-section) main {
    background-color: var(--white);
}

/* --- PAGES LÉGALES (MENTIONS LÉGALES & POLITIQUE COOKIES) --- */
/* Background blanc pour main et espace jusqu'à Instagram sur pages légales */
body:has(.legal-page) main {
    background-color: var(--white);
}

body:has(.legal-page) main::after {
    content: '';
    display: block;
    height: 0;
    background-color: var(--white);
}

body:has(.legal-page) .navbar {
    pointer-events: none;
}

body:has(.legal-page) .navbar * {
    pointer-events: auto;
}

/* Désactiver les animations d'arrivée du texte sur les pages legal */
body:has(.legal-page) .legal-container * {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
}

body:has(.legal-page) .legal-back-link,
body:has(.legal-page) .legal-breadcrumb,
body:has(.legal-page) .legal-title,
body:has(.legal-page) .legal-content,
body:has(.legal-page) .legal-section {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

.legal-page {
    padding: 200px 50px 120px;
    background-color: var(--white);
    min-height: calc(100vh - 200px);
    position: relative;
    z-index: 1;
}

.legal-container {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 30px;
    position: relative;
    z-index: 1;
}

.legal-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: "Royale Milano", serif;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dark);
    text-decoration: none;
    transition: opacity 0.3s ease;
    width: fit-content;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
    z-index: 10001 !important;
    pointer-events: auto !important;
}

.legal-back-link i {
    width: 14px;
    height: 14px;
    stroke-width: 2;
    pointer-events: none;
}

.legal-back-link:hover {
    opacity: 0.6;
}

.legal-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Royale Milano", serif;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dark);
    margin-bottom: 20px;
}

.legal-breadcrumb i {
    width: 8px;
    height: 8px;
    stroke-width: 2;
}

.legal-title {
    font-family: "Royale Milano", serif;
    font-weight: 500;
    font-style: italic;
    color: var(--text-dark);
    margin: 0;
    line-height: 1.2;
    display: flex;
    flex-direction: column;
}

.legal-title span:first-child {
    font-size: clamp(3rem, 5vw, 4rem);
    display: block;
}

.legal-title span:last-child {
    font-size: clamp(3.5rem, 6vw, 5rem);
    display: block;
    margin-top: -10px;
}

.legal-title-cookies span:last-child {
    margin-top: 0;
}

.legal-title-underline {
    position: relative;
    display: inline-block;
}

.legal-title-underline::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--text-dark);
}

.legal-breadcrumb-no-icon i {
    display: none;
}

.legal-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 20px;
}

.legal-intro {
    font-family: "Branch Regular", serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-dark);
    margin: 0;
}

.legal-intro-italic {
    font-family: "Branch Regular", serif;
    font-size: 0.95rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-dark);
    margin: 0 0 40px 0;
}

.legal-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.legal-section-title {
    font-family: "Royale Milano", serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 500;
    font-style: italic;
    color: var(--text-dark);
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

.legal-section-title-small {
    font-family: "Branch Regular", serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-dark);
    margin: 0 0 15px 0;
}

.legal-subsection {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.legal-subsection-title {
    font-family: "Branch Regular", serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dark);
    margin: 0;
    opacity: 0.8;
}

.legal-value {
    font-family: "Branch Regular", serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-dark);
    margin: 0;
}

.legal-value a {
    color: var(--text-dark);
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.legal-value a:hover {
    opacity: 0.7;
}

/* --- INFOS PRATIQUES SECTION --- */
.infos-pratiques-section {
    padding: 120px 28px 100px;
    background-color: var(--white);
    min-height: 100vh;
    min-height: 100svh;
}

.infos-pratiques-container {
    max-width: 1100px;
    margin: 0 auto;
}

.infos-pratiques-title {
    text-align: center;
    margin: 0 0 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.infos-pratiques-title .title-script {
    font-family: "Royale Milano", serif;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.2;
}

.infos-pratiques-title .title-main {
    font-family: "Royale Milano", serif;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 700;
    color: var(--text-dark);
    text-transform: none;
    letter-spacing: 2px;
    line-height: 1.2;
}

.infos-pratiques-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin-top: 45px;
}

.infos-article-card {
    width: 97%;
    margin: 0 auto;
    background: var(--white);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 3px 0 16px rgba(0, 0, 0, 0.06), -3px 0 16px rgba(0, 0, 0, 0.06);
}

.infos-article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 4px 0 20px rgba(0, 0, 0, 0.08), -4px 0 20px rgba(0, 0, 0, 0.08);
}

.article-image-link {
    display: block;
    text-decoration: none;
    width: 100%;
}

.article-image {
    width: 100%;
    height: 266px; /* +10% (242px → 266px) */
    overflow: hidden;
    background: #f5f5f5;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.infos-article-card:hover .article-image img {
    transform: scale(1.05);
}

.article-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.article-title {
    font-family: "Branch Regular", serif;
    font-size: 25px;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.4;
    margin: 0;
}

.infos-pratiques-section .infos-article-card .article-description {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px !important;
    font-weight: 400;
    line-height: 1.65;
    color: var(--text-dark);
    opacity: 0.78;
    margin: 0;
    flex: 1;
    display: flex;
    align-items: center;
    text-align: justify;
}

/* Paysage : hero Tarifs & Contact comme hero accueil (100vh, image qui remplit) — navbar blanche inchangée */
@media (orientation: landscape) {
    .tarifs-hero-section {
        height: 100vh !important;
        height: 100svh !important;
        min-height: 400px !important;
        max-height: 100vh !important;
        max-height: 100svh !important;
        overflow: hidden;
    }
    .tarifs-hero-background,
    .tarifs-hero-background img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: center center;
    }
}

/* Mobile paysage uniquement : +57,14 % Location/Nos Villas ; +20 % villa détail main */
@media (max-width: 896px) and (orientation: landscape) {
    .location-image-card img,
    .villas-image img {
        height: 588px !important;
        max-height: 94vh !important;
    }
    /* Contact / Tarifs : mêmes dimensions que Location et Nos villas en paysage (< 896px) */
    .page-contact-section .contact-form-image-card,
    .page-tarifs-section .contact-form-image-card {
        width: 100% !important;
        max-width: 100% !important;
        height: 588px !important;
        max-height: 94vh !important;
        aspect-ratio: auto !important;
    }
    .page-contact-section .contact-form-image-card img,
    .page-tarifs-section .contact-form-image-card img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    .villa-detail-main-section .villa-detail-image-wrapper {
        height: 528px !important;
        max-height: 85vh !important;
    }
    .villa-detail-main-section .villa-detail-main-image {
        height: 528px !important;
        max-height: 85vh !important;
    }
    /* Carousel Instagram : taille /2, carrés (largeur = hauteur) */
    .insta-item {
        width: 50vw !important;
        min-width: 50vw !important;
        height: 50vw !important;
        aspect-ratio: 1;
    }
}

/* Jusqu’à 1024 px : éviter zoom / overflow sur toutes les pages (accueil, villa détail, etc.) */
@media (max-width: 1024px) {
    html,
    body {
        overflow-x: hidden;
    }
}

/* 320 px – 425 px : tout le contenu s'adapte à l'écran (rétraction complète, pas de débordement) */
@media (max-width: 425px) {
    html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        position: relative;
    }
    main,
    .site-main {
        overflow-x: hidden !important;
    }
    main,
    .site-main,
    .site-main > *,
    .location-section,
    .location-container,
    .location-content,
    .location-image,
    .location-image-card,
    .villas-section,
    .villas-container,
    .villas-content,
    .villas-image,
    .villas-image-card,
    .villa-detail-main-section,
    .villa-detail-main-section .villa-detail-container,
    .villa-detail-content,
    .villa-detail-section,
    .villa-detail-section .villa-detail-container,
    .villa-detail-image-sticky,
    .villa-detail-image-wrapper,
    .contact-form-section,
    .page-contact-section .contact-form-container,
    .page-contact-section .contact-form-wrapper,
    .page-tarifs-section .contact-form-container,
    .page-tarifs-section .contact-form-wrapper,
    .tarifs-content-section,
    .tarifs-card,
    .villa-equipements-section,
    .villa-equipements-container,
    .villa-equipements-carousel-wrapper,
    .villa-equipements-carousel-container,
    .instagram-section,
    .instagram-section .instagram-container,
    .separator-section,
    .unique-place-section,
    .hero,
    .hero-bg,
    .villas-video-hero,
    .villas-video-hero .villas-video-bg,
    .navbar,
    .nav-container,
    .footer-section,
    .reviews-section,
    .reviews-container,
    .legal-page .legal-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .location-section,
    .villas-section,
    .villa-detail-main-section,
    .villa-detail-section,
    .contact-form-section,
    .page-contact-section,
    .page-tarifs-section,
    .tarifs-content-section,
    .villa-equipements-section,
    .instagram-section,
    .separator-section,
    .unique-place-section,
    .hero,
    .villas-video-hero,
    .footer-section,
    .reviews-section {
        overflow-x: hidden !important;
    }
    .location-section,
    .villas-section,
    .villa-detail-main-section,
    .villa-detail-section,
    .contact-form-section,
    .page-contact-section,
    .page-tarifs-section,
    .tarifs-content-section,
    .villa-equipements-section,
    .instagram-section,
    .reviews-section {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* Separator et Unique Place : bord à bord (pas de marge latérale) */
    .separator-section,
    .unique-place-section {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .separator-section .separator-image,
    .unique-place-section .unique-place-image {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }
    .unique-place-section .unique-place-media-clip {
        overflow: hidden !important;
    }
    .separator-section .separator-image img,
    .unique-place-section .unique-place-media-clip img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        object-fit: cover;
    }
    .hero-bg,
    .villas-video-hero .villas-video-bg {
        overflow: hidden !important;
    }
    .location-container,
    .villas-container,
    .villa-detail-main-section .villa-detail-container,
    .villa-detail-section .villa-detail-container,
    .page-contact-section .contact-form-container,
    .page-tarifs-section .contact-form-container,
    .villa-equipements-container,
    .instagram-section .instagram-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .villa-detail-main-section .villa-detail-main-image,
    .villa-detail-main-section .villa-detail-image-wrapper,
    .page-contact-section .contact-form-image-card,
    .page-tarifs-section .contact-form-image-card,
    .contact-form-image-card,
    .contact-form-image-card img,
    .page-contact-section .contact-form-image-card img,
    .page-tarifs-section .contact-form-image-card img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        min-width: 0 !important;
    }
    .page-contact-section .contact-form-image-card,
    .page-tarifs-section .contact-form-image-card {
        max-height: none !important;
        aspect-ratio: auto !important;
    }
    .instagram-section .instagram-container {
        overflow-x: hidden !important;
    }
    .insta-item {
        width: 280px !important;
        min-width: 280px !important;
        height: 280px !important;
        max-width: calc(100vw - 24px) !important;
        flex-shrink: 0;
        aspect-ratio: 1;
    }
    .insta-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }
    .page-contact-section .contact-form-wrapper:has(form.contact-form--contact-style),
    .page-contact-section .contact-form-wrapper,
    .page-tarifs-section .contact-form-wrapper {
        max-width: 100% !important;
        width: 100% !important;
    }
    .navbar,
    .nav-container {
        min-width: 0 !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .location-text,
    .location-text *,
    .villas-text,
    .villas-text *,
    .villa-detail-location-description,
    .villa-detail-location-description *,
    .tarifs-content-section *,
    .legal-content,
    .legal-content * {
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }
    .hero .hero-title,
    .hero .hero-title-main {
        font-size: 45px !important;
        max-width: 100% !important;
    }
    .hero-title-tagline {
        font-size: 10px !important;
        max-width: 100% !important;
    }
    /* Location + Nos villas : même spécificité que le bloc <768px (sinon villas seul passait ici et devenait plus petit) */
    .location-section .location-title,
    #location-ideal .location-title,
    .location-title,
    .villas-section .villas-title,
    .villas-title {
        font-size: clamp(30px, 6vw, 40px) !important;
        line-height: 1.22 !important;
        max-width: 100% !important;
    }
    .contact-form-title,
    .villa-detail-title,
    .unique-place-title,
    .separator-title {
        font-size: clamp(1.5rem, 6vw, 2.25rem) !important;
        max-width: 100% !important;
    }
    .tarifs-hero-title {
        font-size: 40px !important;
        max-width: 100% !important;
    }
}

/* 320–426px : Location / Nos villas — hauteur identique au mobile <768px (374px / 60vh) ; seule la largeur rétrécit avec l’écran */
@media (max-width: 426px) {
    .location-image-card img,
    .villas-image img {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 374px !important;
        max-height: 60vh !important;
        object-fit: cover !important;
        object-position: center !important;
        border-radius: 16px;
    }
    @media (orientation: landscape) {
        .location-image-card img,
        .villas-image img {
            height: 588px !important;
            max-height: 94vh !important;
        }
    }
}

/* 768px–1024px : hero pleine largeur + Instagram 400×400 + villa détail contenue */
@media (min-width: 768px) and (max-width: 1024px) {
    .hero-title,
    .hero-title-main,
    .hero .hero-title-main,
    .tarifs-hero-title,
    .villa-hero-title,
    .villa-hero-section .villa-hero-title,
    .villas-video-hero .villas-video-title {
        font-size: 70px !important;
    }
    /* Titres hero (accueil + tarifs / villa / vidéo) tirés vers la gauche */
    .hero .hero-title,
    .tarifs-hero-section .tarifs-hero-title,
    .villa-hero-section .villa-hero-title,
    .villas-video-hero .villas-video-title {
        transform: translateX(-40px) !important;
    }
    .villas-video-hero .villas-video-content {
        padding-left: clamp(16px, 4vw, 40px);
        padding-right: clamp(16px, 4vw, 40px);
        box-sizing: border-box;
    }
    .villas-video-hero .villas-video-title {
        width: fit-content;
        max-width: min(92vw, 38rem);
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        box-sizing: border-box;
        overflow-wrap: break-word;
        word-wrap: break-word;
        line-height: 1.12;
    }
    .hero,
    .hero-bg,
    .villas-video-hero,
    .villas-video-hero .villas-video-bg {
        width: 100% !important;
        max-width: 100% !important;
        left: 0;
        right: 0;
    }
    /* Instagram : progression 500px (à 768) → 600px (à 1024), puis 600×600 à partir de 1025px */
    .insta-item {
        width: calc(500px + (100vw - 768px) * 100 / 256) !important;
        min-width: calc(500px + (100vw - 768px) * 100 / 256) !important;
        height: calc(500px + (100vw - 768px) * 100 / 256) !important;
    }
    /* Page villa détail (et autres) : contenir le contenu, pas d’overflow / zoom */
    body:has(.villa-detail-section) .villa-detail-main-section,
    body:has(.villa-detail-section) .villa-detail-section,
    body:has(.villa-detail-section) .villa-detail-container,
    body.villa-detail-page .villa-detail-main-section,
    body.villa-detail-page .villa-detail-section,
    body.villa-detail-page .villa-detail-container {
        max-width: 100% !important;
        box-sizing: border-box;
    }
    body:has(.villa-detail-section) main,
    body:has(.villa-detail-section) .site-main,
    body.villa-detail-page main,
    body.villa-detail-page .site-main {
        overflow-x: clip;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Villa détail main : même progression que Nos villas (768→1024) */
    .villa-detail-main-section .villa-detail-image-wrapper {
        width: calc(373px + 78px * clamp(0, (100vw - 768px) / 256px, 1));
        aspect-ratio: auto;
        height: calc(701px + 42px * clamp(0, (100vw - 768px) / 256px, 1));
        max-width: 100%;
    }
    .villa-detail-main-section .villa-detail-main-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }
    /* Villa détail main : pas de centrage, 12px entre contenu et bords (comme Location) */
    .villa-detail-main-section {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .villa-detail-main-section .villa-detail-container {
        width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* 768px–1024px paysage : mêmes paddings horizontaux que le réglage global (on ne touche plus aux valeurs ici) */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .location-section,
    .villas-section {
        overflow: visible;
    }
    /* Conteneurs : même largeur et grille qu’en portrait (90 %, 2.2fr 2.8fr) pour que la largeur du texte ne change pas à 858px */
    .location-section .location-container,
    .villas-section .villas-container {
        width: 90% !important;
        max-width: none !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    /* Titres comme en portrait (35px) pour ne pas que le texte grossisse à 858px */
    .location-title,
    #location-ideal .location-title,
    .location-text h2,
    .villas-title,
    .villas-text h2 {
        font-size: 35px !important;
    }
    /* Même proportion image/texte qu’en portrait (44 % / 56 %) */
    .location-container {
        grid-template-columns: 2.2fr 2.8fr !important;
        gap: 30px;
    }
    .location-content {
        order: 1;
    }
    .location-image-card {
        order: 2;
    }
    .villas-container {
        grid-template-columns: 2.2fr 2.8fr !important;
        gap: 30px;
    }
    .villas-content {
        order: 2;
    }
    .villas-image {
        order: 1;
    }
    .villas-section--reversed .villas-content {
        order: 1;
    }
    .villas-section--reversed .villas-image {
        order: 2;
    }
    /* Conteneurs image : overflow visible pour que l'image puisse dépasser sans réduire la colonne texte */
    .location-section .location-image-card,
    .villas-section .villas-image {
        min-height: calc(588px * 1.2632);
        align-items: flex-start;
        overflow: visible;
    }
    /* Paysage : progression 768→1024 ; à 1024px largeur = 559 + 2 % = 570px */
    .location-section .location-image-card img,
    .villas-section .villas-image img {
        width: calc(411px + 159px * clamp(0, (100vw - 768px) / 256px, 1));
        min-width: calc(411px + 159px * clamp(0, (100vw - 768px) / 256px, 1));
        max-width: none;
        object-fit: cover;
        height: calc(588px * 1.2632) !important;
        min-height: calc(588px * 1.2632) !important;
        max-height: 95vh !important;
    }
    /* Villa détail main : même hauteur que Location en paysage (588×1,2632 / 95vh) */
    .villa-detail-main-section .villa-detail-image-wrapper {
        height: calc(588px * 1.2632) !important;
        max-height: 95vh !important;
        width: 100%;
    }
    .villa-detail-main-section .villa-detail-main-image {
        width: 100% !important;
        height: calc(588px * 1.2632) !important;
        max-height: 95vh !important;
        object-fit: cover;
    }
}

/* 768px–1025px paysage : galerie villa — contenu centré */
@media (min-width: 768px) and (max-width: 1025px) and (orientation: landscape) {
    .villa-gallery-section {
        display: flex;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }
    .villa-gallery-section .villa-gallery-container {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 1200px !important;
        width: 100%;
        padding-left: 24px;
        padding-right: 24px;
        box-sizing: border-box;
    }
}

.article-link {
    font-family: "Branch Regular", serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: opacity 0.3s ease;
    margin-top: auto;
}

.article-link:hover {
    opacity: 0.7;
}

.article-link span {
    font-size: 14px;
    line-height: 1;
}

/* Responsive pour Infos Pratiques */
@media (max-width: 1024px) {
    .infos-pratiques-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 767px) {
    .infos-pratiques-section {
        padding: 80px 20px 60px;
    }
    
    .infos-pratiques-title {
        margin-bottom: 50px;
    }
    
    .infos-pratiques-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .article-content {
        padding: 18px;
    }
    
    .article-image {
        height: 198px; /* +10% (180px → 198px) */
    }
}

/* --- ARTICLE DETAIL PAGE --- */
.article-detail-section {
    padding: 140px 50px 100px;
    background-color: var(--white);
    min-height: 100vh;
    min-height: 100svh;
}

.article-detail-container {
    max-width: 900px;
    margin: 0 auto;
}

.article-detail-title {
    font-family: "Branch Regular", serif;
    font-size: clamp(1.5rem, 4vw, 2.25rem);
    font-weight: 500;
    color: var(--text-dark);
    text-align: center;
    margin: 0 0 60px 0;
    line-height: 1.35;
    text-transform: none;
    font-style: normal;
}

.article-detail-image {
    width: 100%;
    margin: 0 0 60px 0;
    border-radius: 8px;
    overflow: hidden;
}

.article-detail-image img {
    width: 100%;
    height: auto;
    display: block;
}

.article-detail-content {
    max-width: 100%;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.article-detail-content p:first-of-type {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--text-dark);
    margin: 0 0 30px 0;
    opacity: 1;
}

.article-detail-content p:first-of-type::first-letter {
    float: left;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 3.25rem;
    font-weight: 500;
    line-height: 0.95;
    padding: 0.12em 0.5rem 0 0;
    color: var(--text-dark);
}

.article-detail-content p {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.75;
    color: var(--text-dark);
    margin: 0 0 25px 0;
    opacity: 0.92;
}

.article-detail-content h2 {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.35rem;
    font-weight: 500;
    color: var(--text-dark);
    margin: 50px 0 20px 0;
    line-height: 1.35;
    text-transform: none;
    font-style: normal;
}

.article-detail-content h3 {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text-dark);
    margin: 2rem 0 12px 0;
    line-height: 1.35;
}

.article-detail-content ul,
.article-detail-content ol {
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1.0625rem;
    line-height: 1.75;
    margin: 0 0 25px 0;
    padding-left: 1.35em;
    color: var(--text-dark);
    opacity: 0.92;
}

.article-detail-content li {
    margin-bottom: 0.5em;
}

.article-detail-content a {
    font-family: inherit;
    color: var(--text-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.article-detail-content strong,
.article-detail-content b {
    font-weight: 600;
}

.article-detail-content em,
.article-detail-content i {
    font-style: italic;
}

.article-detail-content h2:first-of-type {
    margin-top: 40px;
}

/* Responsive Article Detail */
@media (max-width: 767px) {
    .article-detail-section {
        padding: 100px 30px 60px;
    }
    
    .article-detail-title {
        margin-bottom: 40px;
    }
    
    .article-detail-image {
        margin-bottom: 40px;
    }
    
    .article-detail-content p:first-of-type::first-letter {
        font-size: 2.75rem;
        line-height: 0.9;
        padding: 0.1em 0.4rem 0 0;
    }
    
    .article-detail-content p:first-of-type {
        font-size: 1.05rem;
    }
    
    .article-detail-content p {
        font-size: 1rem;
    }
    
    .article-detail-content h2 {
        font-size: 1.2rem;
    }
}

/* Footer Article Detail */
.article-detail-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.article-back-link {
    font-family: "Royale Milano", serif;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dark);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.article-back-link:hover {
    opacity: 0.7;
}

.article-share {
    display: flex;
    align-items: center;
    gap: 15px;
}

.article-share span {
    font-family: "Royale Milano", serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dark);
    opacity: 0.7;
}

.share-icon {
    width: 24px;
    height: 24px;
    color: var(--text-dark);
    opacity: 0.6;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.share-icon:hover {
    opacity: 1;
}

.share-icon svg {
    width: 100%;
    height: 100%;
}

@media (max-width: 767px) {
    .article-detail-footer {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
}

.legal-section p {
    font-family: "Branch Regular", serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-dark);
    margin: 0;
}

.legal-section p a {
    color: var(--text-dark);
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.legal-section p a:hover {
    opacity: 0.7;
}

/* Forcer la typo légale sur contenu WYSIWYG (cookies/mentions), même si l'éditeur injecte des styles inline */
.legal-content p,
.legal-content li,
.legal-content a,
.legal-content span,
.legal-content div {
    font-family: "Branch Regular", serif !important;
}

.legal-italic {
    font-family: "Branch Regular", serif;
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.8;
    color: var(--text-dark);
    margin: 0;
}

/* Responsive pour pages légales */
@media (max-width: 767px) {
    .legal-page {
        padding: 60px 30px 80px;
    }
    
    .legal-container {
        gap: 25px;
    }
    
    .legal-content {
        gap: 30px;
    }
    
    .legal-section {
        gap: 15px;
    }
}

/* À partir de 1255 px : paddings gauche/droite qui augmentent progressivement jusqu’au desktop */
/* 1025–1366 : image = taille 1024 paysage (570×743) à 1025, puis progression jusqu'à 690×748 */
@media (min-width: 1025px) and (max-width: 1366px) {
    main .location-section .location-image-card img,
    main .villas-section .villas-image img {
        width: calc(570px + 120px * clamp(0, (100vw - 1025px) / 341, 1)) !important;
        height: calc(743px + 5px * clamp(0, (100vw - 1025px) / 341, 1)) !important;
        min-width: 570px !important;
        max-width: 690px !important;
        min-height: 743px !important;
        max-height: 748px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape) {
    main .location-section .location-image-card img,
    main .villas-section .villas-image img {
        width: calc(570px + 120px * clamp(0, (100vw - 1025px) / 341, 1)) !important;
        height: calc(743px + 5px * clamp(0, (100vw - 1025px) / 341, 1)) !important;
        min-width: 570px !important;
        max-width: 690px !important;
        min-height: 743px !important;
        max-height: 748px !important;
    }
}

/* 1025–1366 : paddings comme 1024 + grille. Légère différence : image–bord < texte–bord. Location = image à droite ; Nos Villas = image à gauche. */
@media (min-width: 1025px) and (max-width: 1366px) {
    /* Location + #location-ideal : image à DROITE → droite (image) plus petit, gauche (texte) plus grand */
    .location-section,
    #location-ideal.location-section {
        padding: 60px 8px 60px 14px !important; /* right 8 (image), left 14 (texte) */
    }
    /* Nos Villas : image à GAUCHE → gauche (image) plus petit, droite (texte) plus grand */
    .villas-section {
        padding: 60px 14px 60px 8px !important; /* right 14 (texte), left 8 (image) */
    }
    .location-container,
    .villas-container {
        width: 90% !important;
        max-width: min(1400px, calc(922px + (100vw - 1025px) * 2.07826)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
    }
    /* Location (1025–1366) : colonne texte = 380 px (largeur à 1217 px), pas d’espace en plus image–texte */
    .location-section .location-container,
    #location-ideal .location-container {
        padding: 0 20px 0 28px !important; /* right 20 (image), left 28 (texte) */
        grid-template-columns: minmax(0, 380px) calc(570px + 120px * clamp(0, (100vw - 1025px) / 341, 1)) !important;
    }
    /* Nos Villas : image à gauche → padding gauche (image–bord) plus petit */
    .villas-container {
        padding: 0 28px 0 20px !important; /* right 28 (texte), left 20 (image) */
        grid-template-columns: calc(570px + 120px * clamp(0, (100vw - 1025px) / 341, 1)) 1fr !important;
    }
}

@media (min-width: 1255px) {
    /* Location (image à droite) : right 8→120 (image), left 14→120 (texte) */
    .location-section,
    #location-ideal.location-section {
        padding: 60px clamp(8px, calc(8px + (100vw - 1255px) * 0.1684), 120px) 60px clamp(14px, calc(14px + (100vw - 1255px) * 0.1594), 120px) !important;
    }
    /* Nos Villas (image à gauche) : left 8→120 (image), right 14→120 (texte) */
    .villas-section {
        padding: 60px clamp(14px, calc(14px + (100vw - 1255px) * 0.1594), 120px) 60px clamp(8px, calc(8px + (100vw - 1255px) * 0.1684), 120px) !important;
    }
}

/* — Forcer hauteur 855px desktop (900px −5 %) — */
@media (min-width: 1024px) {
    main .location-section,
    main .villas-section,
    .location-section,
    .villas-section {
        height: 855px !important;
        min-height: 855px !important;
        max-height: 855px !important;
        box-sizing: border-box !important;
        overflow: hidden;
    }
    main #location-ideal.location-section,
    #location-ideal.location-section {
        height: 855px !important;
        min-height: 855px !important;
        max-height: 855px !important;
        box-sizing: border-box !important;
        overflow: hidden;
    }
}

/* Correction padding Location + Nos Villas en tablette (768–1024), toutes orientations :
   - Location : padding droit un peu plus que la moitié du gauche
   - Nos Villas : padding gauche un peu plus que la moitié du droit */
@media (min-width: 768px) and (max-width: 1024px) {
    .location-section {
        padding: 60px 8px 60px 14px !important; /* top right bottom left */
    }
    #location-ideal.location-section {
        padding: 60px 8px 60px 14px !important;
    }
    /* Nos Villas : mêmes paddings que Location (14px gauche, 8px droite) */
    .villas-section {
        padding: 60px 8px 60px 14px !important;
    }
}

/* Dernier mot : image 1025–1366 = 570×743 puis progression (priorité sur tout le reste) */
@media (min-width: 1025px) and (max-width: 1366px) {
    main .location-section .location-image-card img,
    main .villas-section .villas-image img,
    .location-section .location-image-card img,
    .villas-section .villas-image img {
        width: calc(570px + 120px * clamp(0, (100vw - 1025px) / 341, 1)) !important;
        height: calc(743px + 5px * clamp(0, (100vw - 1025px) / 341, 1)) !important;
        min-width: 570px !important;
        max-width: 690px !important;
        min-height: 743px !important;
        max-height: 748px !important;
    }
}
@media (min-width: 1025px) and (max-width: 1366px) and (orientation: landscape) {
    main .location-section .location-image-card img,
    main .villas-section .villas-image img,
    .location-section .location-image-card img,
    .villas-section .villas-image img {
        width: calc(570px + 120px * clamp(0, (100vw - 1025px) / 341, 1)) !important;
        height: calc(743px + 5px * clamp(0, (100vw - 1025px) / 341, 1)) !important;
        min-width: 570px !important;
        max-width: 690px !important;
        min-height: 743px !important;
        max-height: 748px !important;
    }
}