/* ==========================================================================
   Palais des Princesses – Design system réutilisable
   Classes à ajouter dans Elementor : Avancé > Classes CSS
   Valeurs reprises de la page d'accueil (villa-home.css).
   ========================================================================== */

:root {
    --pdp-cream: #F9F6F1;
    --pdp-beige: #EBE7DF;
    --pdp-brown: #9C6347;
    --pdp-brown-dark: #58362F;
    --pdp-text: #795E58;
    --pdp-olive: #8F9076;
    --pdp-shadow: rgba(35, 38, 41, 0.65);
}

/* --------------------------------------------------------------------------
   1. TYPOGRAPHIE (sur des widgets Titre)
   -------------------------------------------------------------------------- */

/* Titre en script : « St Barts Villa Nyx » */
.pdp-eyebrow .elementor-heading-title {
    font-family: "golden Hope", cursive !important;
    font-size: 36px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--pdp-brown) !important;
}

/* Grand titre de hero : « A story for every stay » */
.pdp-display .elementor-heading-title {
    font-family: "PP Editorial New", Georgia, serif !important;
    font-size: 112px !important;
    font-weight: 200 !important;
    line-height: 1.05 !important;
    color: var(--pdp-cream) !important;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35) !important;
}

/* Titre de section : « Experience a place for every moment » */
.pdp-title .elementor-heading-title {
    font-family: "PP Editorial New", Georgia, serif !important;
    font-size: 72px !important;
    font-weight: 200 !important;
    line-height: 1.2 !important;
    color: var(--pdp-brown-dark) !important;
}

/* Titre de carte de service */
.pdp-card-title .elementor-heading-title {
    font-family: "PP Editorial New", Georgia, serif !important;
    font-size: 28px !important;
    font-weight: 200 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.28px !important;
    color: var(--pdp-cream) !important;
}

/* Paragraphe */
.pdp-text .elementor-heading-title,
.pdp-text.elementor-widget-text-editor {
    font-family: "Slussen Variable", sans-serif !important;
    font-size: 20px !important;
    font-weight: 200 !important;
    line-height: 1.4 !important;
    color: var(--pdp-text) !important;
}

/* Variantes */
.pdp-light .elementor-heading-title,
.pdp-light.elementor-widget-text-editor { color: var(--pdp-cream) !important; }
.pdp-center .elementor-heading-title,
.pdp-center.elementor-widget-text-editor { text-align: center !important; }

/* Largeurs de lecture */
.pdp-w-title { max-width: 710px !important; width: 100% !important; }
.pdp-w-text  { max-width: 640px !important; width: 100% !important; }

/* Paragraphe décalé à droite, comme sur l'accueil */
.pdp-offset {
    max-width: 555px !important;
    width: 100% !important;
    margin-left: 38% !important;
}

.pdp-mb-16 { margin-bottom: 16px !important; }
.pdp-mb-40 { margin-bottom: 40px !important; }

/* --------------------------------------------------------------------------
   2. BOUTONS (sur des widgets EAEL Creative Button)
   -------------------------------------------------------------------------- */

.pdp-btn .eael-creative-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 270px !important;
    min-height: 56px !important;
    padding: 16px 32px !important;
    border: 1.5px solid var(--pdp-brown) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--pdp-brown) !important;
    transition: background-color .3s ease, color .3s ease !important;
}
.pdp-btn .eael-creative-button .cretive-button-text {
    font-family: "Slussen Variable", sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.36px !important;
    color: inherit !important;
}
.pdp-btn .eael-creative-button .creative-button-inner {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
}
.pdp-btn .eael-creative-button-icon-right svg { width: 24px !important; height: 24px !important; }
.pdp-btn .eael-creative-button-icon-right svg path { fill: currentColor !important; }
.pdp-btn .eael-creative-button:hover {
    background: var(--pdp-brown) !important;
    color: var(--pdp-beige) !important;
}

/* Bouton clair, sur photo ou fond olive */
.pdp-btn.pdp-btn--light .eael-creative-button {
    border-color: var(--pdp-beige) !important;
    color: var(--pdp-beige) !important;
}
.pdp-btn.pdp-btn--light .eael-creative-button:hover {
    background: var(--pdp-beige) !important;
    color: var(--pdp-brown) !important;
}

/* --------------------------------------------------------------------------
   3. SECTIONS (sur des conteneurs)
   -------------------------------------------------------------------------- */

.pdp-section {
    --padding-top: 120px;
    --padding-bottom: 120px;
    --padding-left: 64px;
    --padding-right: 64px;
    background-color: var(--pdp-beige) !important;
}
.pdp-section--olive {
    background-color: var(--pdp-olive) !important;
    background-image: url("/wp-content/uploads/villa-assets/Menu-2.webp") !important;
    background-size: cover !important;
    background-position: center !important;
}

/* Bloc d'intro : script + titre à gauche, texte décalé */
.pdp-intro {
    max-width: 1170px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Hero plein écran avec titre en bas à gauche */
.pdp-hero {
    min-height: 100vh !important;
    margin-top: -96px !important;
    position: relative !important;
    justify-content: flex-end !important;
    --padding-top: 160px;
    --padding-bottom: 80px;
    --padding-left: 64px;
    --padding-right: 64px;
    background-size: cover !important;
    background-position: center !important;
}
.pdp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(35,38,41,.55) 0%, rgba(35,38,41,.1) 55%, rgba(35,38,41,.25) 100%);
    z-index: 0;
    pointer-events: none;
}
.pdp-hero > .elementor-element { position: relative; z-index: 1; }

/* Grande image avec titre (« Immerse yourself… ») */
.pdp-band {
    min-height: 640px !important;
    position: relative !important;
    overflow: hidden !important;
    justify-content: flex-end !important;
    --padding-top: 64px;
    --padding-bottom: 64px;
    --padding-left: 64px;
    --padding-right: 64px;
    background-size: cover !important;
    background-position: center !important;
}
.pdp-band::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(35,38,41,.6) 0%, rgba(35,38,41,0) 60%);
    pointer-events: none;
}
.pdp-band > .elementor-element { position: relative; z-index: 1; }
.pdp-band--center { justify-content: center !important; align-items: center !important; }
.pdp-band--center::before { background: rgba(35,38,41,.45); }

/* --------------------------------------------------------------------------
   4. CARTES
   -------------------------------------------------------------------------- */

/* Rangée de 2 grandes cartes */
.pdp-cards {
    display: flex !important;
    gap: 32px !important;
}
.pdp-cards > .e-con { flex: 1 1 0 !important; }

/* Grande carte avec survol (« The Suites ») */
.pdp-hover-card {
    position: relative !important;
    min-height: 660px !important;
    overflow: hidden !important;
    justify-content: space-between !important;
    align-items: center !important;
    text-align: center !important;
    --padding-top: 48px;
    --padding-bottom: 48px;
    --padding-left: 40px;
    --padding-right: 40px;
    background-size: cover !important;
    background-position: center !important;
}
.pdp-hover-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(35,38,41,.35);
    transition: background-color .6s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.pdp-hover-card:hover::before { background: rgba(35,38,41,.7); }
.pdp-hover-card > .elementor-element { position: relative; z-index: 1; }
.pdp-hover-card .pdp-title .elementor-heading-title { color: var(--pdp-cream) !important; font-size: 70px !important; }

@media (min-width: 1025px) {
    .pdp-hover-card .pdp-reveal {
        opacity: 0 !important;
        transition: opacity .8s ease !important;
    }
    .pdp-hover-card:hover .pdp-reveal { opacity: 1 !important; }
}

/* Rangée de cartes de services */
.pdp-services {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}
.pdp-service {
    position: relative !important;
    min-height: 400px !important;
    overflow: hidden !important;
    justify-content: flex-end !important;
    --padding-top: 16px;
    --padding-bottom: 20px;
    --padding-left: 16px;
    --padding-right: 16px;
    background-color: var(--pdp-brown) !important;
    background-size: cover !important;
    background-position: center !important;
}
.pdp-service::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(35,38,41,.55) 0%, rgba(35,38,41,0) 50%);
    pointer-events: none;
}
.pdp-service > .elementor-element { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   5. RESPONSIVE
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
    .pdp-display .elementor-heading-title { font-size: 88px !important; }
    .pdp-offset { margin-left: 25% !important; }
}

@media (max-width: 1024px) {
    .pdp-section { --padding-top: 80px; --padding-bottom: 80px; --padding-left: 45px; --padding-right: 45px; }
    .pdp-hero, .pdp-band { --padding-left: 45px; --padding-right: 45px; }
    .pdp-title .elementor-heading-title { font-size: 56px !important; line-height: 1.1 !important; }
    .pdp-hover-card .pdp-title .elementor-heading-title { font-size: 56px !important; }
    .pdp-text .elementor-heading-title,
    .pdp-text.elementor-widget-text-editor { font-size: 17px !important; }
    .pdp-offset { margin-left: 0 !important; }
    .pdp-cards { flex-direction: column !important; }
    .pdp-hover-card { min-height: 520px !important; }
    .pdp-services {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scrollbar-width: none !important;
    }
    .pdp-services::-webkit-scrollbar { display: none !important; }
    .pdp-services > .e-con { flex: 0 0 240px !important; scroll-snap-align: start !important; }
    .pdp-band { min-height: 480px !important; }
}

@media (max-width: 767px) {
    .pdp-section { --padding-top: 60px; --padding-bottom: 60px; --padding-left: 20px; --padding-right: 20px; }
    .pdp-hero, .pdp-band { --padding-left: 20px; --padding-right: 20px; }
    .pdp-eyebrow .elementor-heading-title { font-size: 26px !important; }
    .pdp-display .elementor-heading-title { font-size: 56px !important; }
    .pdp-title .elementor-heading-title,
    .pdp-hover-card .pdp-title .elementor-heading-title { font-size: 44px !important; }
    .pdp-card-title .elementor-heading-title { font-size: 24px !important; }
    .pdp-btn .eael-creative-button { min-width: 0 !important; width: 100% !important; }
}

/* --------------------------------------------------------------------------
   6. VARIANTE : vert sauge uni, sans motif
   -------------------------------------------------------------------------- */
.pdp-section--sage {
    background-color: var(--pdp-olive) !important;
    background-image: none !important;
}

/* --------------------------------------------------------------------------
   7. LIGHTBOX (photos ouvertes en grand)
   -------------------------------------------------------------------------- */
.elementor-lightbox .dialog-lightbox-close-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    top: 24px !important;
    right: 24px !important;
    width: 56px !important;
    height: 56px !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: #EBE7DF !important;
    cursor: pointer !important;
    z-index: 100 !important;
    transition: opacity .3s ease !important;
}
.elementor-lightbox .dialog-lightbox-close-button:hover { opacity: .65 !important; }
.elementor-lightbox .dialog-lightbox-close-button i,
.elementor-lightbox .dialog-lightbox-close-button svg { display: none !important; }
.elementor-lightbox .dialog-lightbox-close-button::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3L21 21M21 3L3 21' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3L21 21M21 3L3 21' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (max-width: 767px) {
    .elementor-lightbox .dialog-lightbox-close-button { top: 12px !important; right: 12px !important; }
}

/* La lightbox passe au-dessus du header sticky (z-index 99999)
   mais reste sous le menu plein écran (2147483000). */
.elementor-lightbox,
.dialog-type-lightbox {
    z-index: 2147482000 !important;
}

/* --------------------------------------------------------------------------
   8. PAGE CHAMBRE : slider plein écran + panneau de texte
   Structure Elementor :
     conteneur .pdp-room
       ├── widget Carrousel d'images .pdp-room-slider
       └── conteneur .pdp-room-panel (titre, texte, bouton…)
   Les boutons « fermer » et « rouvrir » sont ajoutés par pdp-room.js
   -------------------------------------------------------------------------- */
.pdp-room {
    position: relative !important;
    height: 100vh !important;
    min-height: 640px !important;
    margin-top: -96px !important;
    overflow: hidden !important;
    --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px;
    background: #232629 !important;
}
.pdp-room-slider {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 0;
}
.pdp-room-slider > .elementor-widget-container,
.pdp-room-slider .elementor-image-carousel-wrapper,
.pdp-room-slider .swiper,
.pdp-room-slider .swiper-wrapper,
.pdp-room-slider .swiper-slide,
.pdp-room-slider .swiper-slide figure {
    height: 100% !important;
    margin: 0 !important;
}
.pdp-room-slider .swiper-slide-image {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
}
/* léger dégradé pour la lisibilité du header et des flèches */
.pdp-room-slider::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(35,38,41,.35) 0%, rgba(35,38,41,0) 22%, rgba(35,38,41,0) 70%, rgba(35,38,41,.35) 100%);
    pointer-events: none;
    z-index: 2;
}

/* Grandes flèches (même tracé que le carrousel de l'accueil) */
.pdp-room-slider .elementor-swiper-button {
    top: auto !important;
    bottom: 56px !important;
    transform: none !important;
    width: 72px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--pdp-cream) !important;
    z-index: 5 !important;
    cursor: pointer !important;
    transition: transform .3s ease, opacity .3s ease !important;
}
.pdp-room-slider .elementor-swiper-button-next { right: 64px !important; left: auto !important; }
.pdp-room-slider .elementor-swiper-button-prev { right: 152px !important; left: auto !important; }
.pdp-room-slider .elementor-swiper-button i,
.pdp-room-slider .elementor-swiper-button svg { display: none !important; }
.pdp-room-slider .elementor-swiper-button::before {
    content: "";
    width: 64px;
    height: 64px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.6603 7.48149C15.3997 7.05244 15.1667 6.55505 15.1667 6.09094H16.1667C16.1667 6.26284 16.2696 6.5583 16.515 6.96239C16.7484 7.34675 17.0675 7.7606 17.3991 8.14926L17.3997 8.14993C18.24 9.13833 19.2411 9.99697 20.3845 10.6506C21.2807 11.1628 22.2678 11.5909 23 11.5909V12.5909C22.2678 12.5909 21.2797 13.0192 20.3847 13.5312C19.2411 14.1857 18.2399 15.0445 17.3994 16.0314L17.3993 16.0316C17.0677 16.4206 16.7486 16.8351 16.5151 17.2199C16.2695 17.6246 16.1667 17.92 16.1667 18.0909H15.1667C15.1667 17.6276 15.3998 17.1302 15.6602 16.7011C15.9327 16.252 16.2896 15.7919 16.6382 15.3829C17.5467 14.3161 18.6355 13.3801 19.888 12.6633L19.888 12.6632C19.93 12.6392 19.9727 12.6151 20.0159 12.5909H1V11.5909H20.016C19.9728 11.5668 19.9302 11.5427 19.8882 11.5188L19.8882 11.5187C18.6356 10.8027 17.5467 9.8666 16.6381 8.79799C16.2896 8.38959 15.9328 7.93015 15.6603 7.48149Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.6603 7.48149C15.3997 7.05244 15.1667 6.55505 15.1667 6.09094H16.1667C16.1667 6.26284 16.2696 6.5583 16.515 6.96239C16.7484 7.34675 17.0675 7.7606 17.3991 8.14926L17.3997 8.14993C18.24 9.13833 19.2411 9.99697 20.3845 10.6506C21.2807 11.1628 22.2678 11.5909 23 11.5909V12.5909C22.2678 12.5909 21.2797 13.0192 20.3847 13.5312C19.2411 14.1857 18.2399 15.0445 17.3994 16.0314L17.3993 16.0316C17.0677 16.4206 16.7486 16.8351 16.5151 17.2199C16.2695 17.6246 16.1667 17.92 16.1667 18.0909H15.1667C15.1667 17.6276 15.3998 17.1302 15.6602 16.7011C15.9327 16.252 16.2896 15.7919 16.6382 15.3829C17.5467 14.3161 18.6355 13.3801 19.888 12.6633L19.888 12.6632C19.93 12.6392 19.9727 12.6151 20.0159 12.5909H1V11.5909H20.016C19.9728 11.5668 19.9302 11.5427 19.8882 11.5188L19.8882 11.5187C18.6356 10.8027 17.5467 9.8666 16.6381 8.79799C16.2896 8.38959 15.9328 7.93015 15.6603 7.48149Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
.pdp-room-slider .elementor-swiper-button-prev::before { transform: scaleX(-1); }
.pdp-room-slider .elementor-swiper-button-next:hover { transform: translateX(6px) !important; }
.pdp-room-slider .elementor-swiper-button-prev:hover { transform: translateX(-6px) !important; }
.pdp-room-slider .swiper-pagination { display: none !important; }

/* Compteur de photos (ajouté par pdp-room.js) */
.pdp-room-count {
    position: absolute;
    right: 240px;
    bottom: 68px;
    z-index: 5;
    font-family: "Slussen Variable", sans-serif;
    font-size: 15px;
    letter-spacing: 1.2px;
    color: var(--pdp-cream);
}

/* Panneau de texte */
.pdp-room-panel {
    position: absolute !important;
    left: 64px !important;
    bottom: 56px !important;
    width: 520px !important;
    max-width: calc(100% - 40px) !important;
    max-height: calc(100% - 96px - 112px) !important;
    overflow-y: auto !important;
    z-index: 6 !important;
    background: rgba(235, 231, 223, 0.97) !important;
    --padding-top: 48px; --padding-bottom: 40px; --padding-left: 44px; --padding-right: 44px;
    --gap: 0px;
    box-shadow: 0 24px 60px rgba(35, 38, 41, .25);
    transition: opacity .45s ease, transform .45s ease, visibility .45s !important;
    scrollbar-width: thin;
}
.pdp-room-panel .pdp-title .elementor-heading-title { font-size: 56px !important; line-height: 1.05 !important; }
.pdp-room-panel .pdp-text.elementor-widget-text-editor,
.pdp-room-panel .pdp-text .elementor-heading-title { font-size: 17px !important; }

/* Fiche technique dans le panneau */
.pdp-specs ul { list-style: none; margin: 0; padding: 0; }
.pdp-specs li {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(156, 99, 71, .25);
    font-family: "Slussen Variable", sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: var(--pdp-text);
}
.pdp-specs li strong { font-weight: 500; color: var(--pdp-brown-dark); }

/* Bouton fermer (dans le panneau) */
.pdp-room-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 44px;
    height: 44px;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--pdp-brown) !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.pdp-room-close::before {
    content: "";
    width: 22px;
    height: 22px;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3L21 21M21 3L3 21' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 3L21 21M21 3L3 21' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat center / contain;
}
.pdp-room-close:hover { opacity: .6; }

/* Bouton rouvrir */
.pdp-room-open {
    position: absolute;
    left: 64px;
    bottom: 56px;
    z-index: 6;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 14px 28px !important;
    border: 1.5px solid var(--pdp-beige) !important;
    border-radius: 0 !important;
    background: rgba(35, 38, 41, .25) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: var(--pdp-beige) !important;
    font-family: "Slussen Variable", sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 1.3px !important;
    text-transform: uppercase !important;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity .45s ease, transform .45s ease, visibility .45s, background-color .3s ease, color .3s ease;
}
.pdp-room-open::after {
    content: "+";
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
}
.pdp-room-open:hover { background: var(--pdp-beige) !important; color: var(--pdp-brown) !important; }

/* États ouvert / fermé */
.pdp-room.is-closed .pdp-room-panel {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(24px) !important;
    pointer-events: none !important;
}
.pdp-room.is-closed .pdp-room-open { opacity: 1; visibility: visible; transform: none; }

/* Dans l'éditeur Elementor : panneau toujours visible pour pouvoir le modifier */
.elementor-editor-active .pdp-room.is-closed .pdp-room-panel { opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; }

@media (max-width: 1024px) {
    .pdp-room-panel { left: 45px !important; }
    .pdp-room-open { left: 45px; }
    .pdp-room-slider .elementor-swiper-button-next { right: 45px !important; }
    .pdp-room-slider .elementor-swiper-button-prev { right: 125px !important; }
    .pdp-room-count { right: 215px; }
}
@media (max-width: 767px) {
    .pdp-room { height: 100svh !important; min-height: 560px !important; margin-top: -75px !important; }
    .pdp-room-panel {
        left: 12px !important;
        right: 12px !important;
        bottom: 12px !important;
        width: auto !important;
        max-width: none !important;
        max-height: 62% !important;
        --padding-top: 36px; --padding-bottom: 28px; --padding-left: 24px; --padding-right: 24px;
    }
    .pdp-room-panel .pdp-title .elementor-heading-title { font-size: 40px !important; }
    .pdp-room-open { left: 12px; bottom: 16px; }
    .pdp-room-slider .elementor-swiper-button { top: 96px !important; bottom: auto !important; width: 52px !important; }
    .pdp-room-slider .elementor-swiper-button::before { width: 44px; height: 44px; }
    .pdp-room-slider .elementor-swiper-button-next { right: 12px !important; }
    .pdp-room-slider .elementor-swiper-button-prev { right: 72px !important; }
    .pdp-room-count { right: auto; left: 16px; top: 110px; bottom: auto; }
}

/* Le panneau et le bouton « rouvrir » passent au-dessus du header sticky (99999),
   mais restent sous la lightbox et le menu plein écran.
   .pdp-room ne doit pas créer de contexte d'empilement, sinon le z-index des enfants resterait bloqué. */
.pdp-room { z-index: auto !important; isolation: auto !important; }
/* Le panneau reste SOUS le header (et son sous-menu), mais ne monte jamais jusqu'à lui :
   sa hauteur est limitée à l'espace libre sous le header (~130 px) + la barre d'admin si présente. */
.pdp-room-panel { z-index: 50 !important; max-height: calc(100vh - 130px - 56px - 24px) !important; }
.pdp-room-open  { z-index: 50; }
body.admin-bar .pdp-room-panel { max-height: calc(100vh - 32px - 130px - 56px - 24px) !important; }
@media (max-width: 767px) {
    .pdp-room-panel { max-height: min(62%, calc(100svh - 90px - 24px)) !important; }
    body.admin-bar .pdp-room-panel { max-height: min(62%, calc(100svh - 46px - 90px - 24px)) !important; }
}

/* --------------------------------------------------------------------------
   9. HEADER : menu sur une seule ligne + sous-menus
   -------------------------------------------------------------------------- */
.elementor-location-header .elementor-nav-menu--main > .elementor-nav-menu {
    flex-wrap: nowrap !important;
}
.elementor-location-header .elementor-nav-menu--main .elementor-item {
    white-space: nowrap !important;
}
.elementor-location-header .elementor-widget-nav-menu,
.elementor-location-header .elementor-nav-menu--main {
    flex-shrink: 0 !important;
}

/* Petite flèche des éléments qui ont un sous-menu */
.elementor-location-header .elementor-nav-menu--main .sub-arrow {
    padding-left: 6px !important;
}

/* Sous-menu : même police que le menu, fond beige, jamais coupé */
.elementor-location-header .elementor-nav-menu--main .sub-menu,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu--dropdown {
    background: #EBE7DF !important;
    border: 1px solid #C6B19E !important;
    border-radius: 0 !important;
    box-shadow: 0 16px 40px rgba(35, 38, 41, .12) !important;
    padding: 8px 0 !important;
    min-width: 240px !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
.elementor-location-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu--dropdown a {
    font-family: "Slussen Variable", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    line-height: 1.3 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    color: #9C6347 !important;
    background: transparent !important;
    padding: 12px 24px !important;
    border: 0 !important;
    transition: color .25s ease, background-color .25s ease !important;
}
.elementor-location-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover,
.elementor-location-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item.highlighted,
.elementor-location-header .elementor-nav-menu--main .sub-menu a.elementor-item-active {
    color: #58362F !important;
    background: rgba(156, 99, 71, .08) !important;
}

/* Écrans moyens : on resserre un peu les liens pour tout garder sur une ligne */
@media (min-width: 1025px) and (max-width: 1440px) {
    .elementor-location-header .elementor-nav-menu--main .elementor-item {
        padding-left: 12px !important;
        padding-right: 12px !important;
        letter-spacing: 1px !important;
    }
}

/* Le sous-menu ne doit jamais être rogné par les conteneurs du header */
.elementor-location-header,
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner,
.elementor-location-header .elementor-widget-nav-menu,
.elementor-location-header .elementor-widget-nav-menu > .elementor-widget-container,
.elementor-location-header .elementor-nav-menu--main {
    overflow: visible !important;
}
.elementor-location-header .elementor-nav-menu--main .sub-menu li {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}
.elementor-location-header .elementor-nav-menu--main .sub-menu a.elementor-sub-item {
    display: flex !important;
    height: auto !important;
    min-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* --------------------------------------------------------------------------
   10. BILINGUE : langue active dans le header
   -------------------------------------------------------------------------- */
.elementor-location-header .pdp-lang-current .elementor-button-text {
    text-decoration: underline !important;
    text-underline-offset: 6px !important;
    text-decoration-thickness: 1px !important;
}

/* --------------------------------------------------------------------------
   11. BOUTONS : classes utilitaires (Avancé > Classes CSS)
       btn-arrow  → ajoute la flèche (boutons EAEL et boutons Elementor)
       btn-light  → texte + contour crème (sur photo ou fond sombre)
       btn-brown  → texte + contour marron (sur fond clair)
   Sélecteurs volontairement très précis pour passer devant les anciens styles de l'accueil.
   -------------------------------------------------------------------------- */
html body .elementor-element.btn-arrow .eael-creative-button-icon-right svg,
html body .elementor-element.btn-arrow .eael-creative-button-icon-right svg path { fill: currentColor !important; }
html body .elementor-element.btn-arrow .eael-creative-button-icon-right svg { width: 24px !important; height: 24px !important; }

/* Flèche pour le widget Bouton natif d'Elementor */
html body .elementor-widget-button.btn-arrow .elementor-button-content-wrapper { display: inline-flex !important; align-items: center !important; gap: 12px !important; }
html body .elementor-widget-button.btn-arrow .elementor-button-content-wrapper::after {
    content: "";
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.6603 7.48149C15.3997 7.05244 15.1667 6.55505 15.1667 6.09094H16.1667C16.1667 6.26284 16.2696 6.5583 16.515 6.96239C16.7484 7.34675 17.0675 7.7606 17.3991 8.14926L17.3997 8.14993C18.24 9.13833 19.2411 9.99697 20.3845 10.6506C21.2807 11.1628 22.2678 11.5909 23 11.5909V12.5909C22.2678 12.5909 21.2797 13.0192 20.3847 13.5312C19.2411 14.1857 18.2399 15.0445 17.3994 16.0314L17.3993 16.0316C17.0677 16.4206 16.7486 16.8351 16.5151 17.2199C16.2695 17.6246 16.1667 17.92 16.1667 18.0909H15.1667C15.1667 17.6276 15.3998 17.1302 15.6602 16.7011C15.9327 16.252 16.2896 15.7919 16.6382 15.3829C17.5467 14.3161 18.6355 13.3801 19.888 12.6633L19.888 12.6632C19.93 12.6392 19.9727 12.6151 20.0159 12.5909H1V11.5909H20.016C19.9728 11.5668 19.9302 11.5427 19.8882 11.5188L19.8882 11.5187C18.6356 10.8027 17.5467 9.8666 16.6381 8.79799C16.2896 8.38959 15.9328 7.93015 15.6603 7.48149Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M15.6603 7.48149C15.3997 7.05244 15.1667 6.55505 15.1667 6.09094H16.1667C16.1667 6.26284 16.2696 6.5583 16.515 6.96239C16.7484 7.34675 17.0675 7.7606 17.3991 8.14926L17.3997 8.14993C18.24 9.13833 19.2411 9.99697 20.3845 10.6506C21.2807 11.1628 22.2678 11.5909 23 11.5909V12.5909C22.2678 12.5909 21.2797 13.0192 20.3847 13.5312C19.2411 14.1857 18.2399 15.0445 17.3994 16.0314L17.3993 16.0316C17.0677 16.4206 16.7486 16.8351 16.5151 17.2199C16.2695 17.6246 16.1667 17.92 16.1667 18.0909H15.1667C15.1667 17.6276 15.3998 17.1302 15.6602 16.7011C15.9327 16.252 16.2896 15.7919 16.6382 15.3829C17.5467 14.3161 18.6355 13.3801 19.888 12.6633L19.888 12.6632C19.93 12.6392 19.9727 12.6151 20.0159 12.5909H1V11.5909H20.016C19.9728 11.5668 19.9302 11.5427 19.8882 11.5188L19.8882 11.5187C18.6356 10.8027 17.5467 9.8666 16.6381 8.79799C16.2896 8.38959 15.9328 7.93015 15.6603 7.48149Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Bouton clair (crème) */
html body .elementor .elementor-element.btn-light .eael-creative-button,
html body .elementor .elementor-element.btn-light .elementor-button {
    background: transparent !important;
    background-color: transparent !important;
    border: 1.5px solid #EBE7DF !important;
    color: #EBE7DF !important;
}
html body .elementor .elementor-element.btn-light .eael-creative-button *,
html body .elementor .elementor-element.btn-light .elementor-button * { color: inherit !important; }
html body .elementor .elementor-element.btn-light .eael-creative-button:hover,
html body .elementor .elementor-element.btn-light .elementor-button:hover {
    background: #EBE7DF !important;
    background-color: #EBE7DF !important;
    color: #9C6347 !important;
}

/* Bouton marron */
html body .elementor .elementor-element.btn-brown .eael-creative-button,
html body .elementor .elementor-element.btn-brown .elementor-button {
    background: transparent !important;
    border: 1.5px solid #9C6347 !important;
    color: #9C6347 !important;
}
html body .elementor .elementor-element.btn-brown .eael-creative-button *,
html body .elementor .elementor-element.btn-brown .elementor-button * { color: inherit !important; }
html body .elementor .elementor-element.btn-brown .eael-creative-button:hover,
html body .elementor .elementor-element.btn-brown .elementor-button:hover {
    background: #9C6347 !important;
    color: #EBE7DF !important;
}

/* --------------------------------------------------------------------------
   12. ISLAND EXPERIENCES : plus de cartes empilées qui se chevauchent
   -------------------------------------------------------------------------- */
html body .sticky-card,
html body .elementor-element-596d4a27 > .e-con {
    position: relative !important;
    top: auto !important;
    z-index: auto !important;
}
html body .sticky-wrap { display: flex !important; flex-direction: column !important; gap: 64px !important; }
@media (max-width: 767px) { html body .sticky-wrap { gap: 40px !important; } }

/* --------------------------------------------------------------------------
   13. MENU PLEIN ÉCRAN : fond beige au lieu du vert
       Pour changer la couleur, modifier seulement --pdp-menu-bg ci-dessous.
   -------------------------------------------------------------------------- */
#vnx-menu-overlay {
    --pdp-menu-bg: #9C6347;
    --pdp-menu-text: rgba(235, 231, 223, 0.8);
    --pdp-menu-strong: #EBE7DF;
    --pdp-menu-hover: #F9F6F1;
    background: var(--pdp-menu-bg) !important;
}
#vnx-menu-overlay .vnx-menu-root-container,
#vnx-menu-overlay .elementor-element.vnx-menu-root-container,
#vnx-menu-overlay .elementor > .e-con:first-child {
    background: var(--pdp-menu-bg) !important;
    background-color: var(--pdp-menu-bg) !important;
}
#vnx-menu-overlay .vnx-menu-heading-item .elementor-heading-title,
#vnx-menu-overlay .vnx-menu-links a { color: var(--pdp-menu-text) !important; }
#vnx-menu-overlay .vnx-menu-heading-item:hover .elementor-heading-title,
#vnx-menu-overlay .vnx-menu-heading-item.vnx-active .elementor-heading-title,
#vnx-menu-overlay .vnx-menu-heading-item a.vnx-active,
#vnx-menu-overlay .vnx-menu-links a:hover,
#vnx-menu-overlay .vnx-menu-links a.vnx-active,
#vnx-menu-overlay .vnx-menu-links .vnx-active .elementor-heading-title { color: var(--pdp-menu-hover) !important; }

#vnx-menu-overlay .vnx-menu-book,
#vnx-menu-overlay .vnx-menu-book .elementor-button,
#vnx-menu-overlay .elementor-element-vnx_book_btn .elementor-button {
    border-color: var(--pdp-menu-strong) !important;
    color: var(--pdp-menu-strong) !important;
}
#vnx-menu-overlay .vnx-menu-book:hover,
#vnx-menu-overlay .vnx-menu-book .elementor-button:hover,
#vnx-menu-overlay .elementor-element-vnx_book_btn .elementor-button:hover {
    background: var(--pdp-menu-strong) !important;
    color: var(--pdp-menu-bg) !important;
}
#vnx-menu-overlay .vnx-menu-close::before,
#vnx-menu-overlay .vnx-menu-close::after,
#vnx-menu-overlay .elementor-element-vnx_close_btn::before,
#vnx-menu-overlay .elementor-element-vnx_close_btn::after,
#vnx-menu-overlay .vnx-menu-close .elementor-button::before,
#vnx-menu-overlay .vnx-menu-close .elementor-button::after { background: var(--pdp-menu-strong) !important; }

#vnx-menu-overlay .vnx-menu-head,
#vnx-menu-overlay .elementor-element-vnx_head { border-bottom-color: rgba(235, 231, 223, .25) !important; }
#vnx-menu-overlay .vnx-menu-foot,
#vnx-menu-overlay .elementor-element-vnx_foot { border-top-color: rgba(235, 231, 223, .25) !important; }
#vnx-menu-overlay .vnx-menu-foot a,
#vnx-menu-overlay .vnx-menu-foot .elementor-heading-title { color: var(--pdp-menu-text) !important; }
#vnx-menu-overlay .vnx-menu-foot a:hover { color: var(--pdp-menu-hover) !important; }

/* --------------------------------------------------------------------------
   14. BILINGUE : blocs réservés à une langue (Avancé > Classes CSS)
       pdp-only-fr → visible seulement en français
       pdp-only-en → visible seulement en anglais
   -------------------------------------------------------------------------- */
html[lang^="en"] .pdp-only-fr { display: none !important; }
html:not([lang^="en"]) .pdp-only-en { display: none !important; }
/* Dans l'éditeur Elementor, tout reste visible pour pouvoir le modifier */
body.elementor-editor-active .pdp-only-fr,
body.elementor-editor-active .pdp-only-en { display: revert !important; outline: 1px dashed rgba(156, 99, 71, .5); }

/* --------------------------------------------------------------------------
   15. MOBILE / TABLETTE
   -------------------------------------------------------------------------- */
/* Colonnes « photo » (conteneur vide avec image de fond) placées à côté d'une colonne de texte :
   une fois empilées, elles gardent une hauteur visible. */
@media (max-width: 1024px) {
    .e-con:has(> .e-con .elementor-widget-heading) > .e-con:not(:has(*)) {
        min-height: 420px !important;
        background-size: cover !important;
        background-position: center !important;
    }
}
@media (max-width: 767px) {
    .e-con:has(> .e-con .elementor-widget-heading) > .e-con:not(:has(*)) { min-height: 280px !important; }
}

/* Logo du header : ne dépasse jamais l'écran */
.elementor-location-header .elementor-widget-theme-site-logo,
.elementor-location-header .elementor-widget-image { min-width: 0 !important; }
.elementor-location-header .elementor-widget-theme-site-logo img { max-width: 100% !important; height: auto !important; }
@media (max-width: 1024px) {
    .elementor-location-header .elementor-widget-theme-site-logo img { width: 300px !important; }
}
@media (max-width: 767px) {
    .elementor-location-header .elementor-widget-theme-site-logo img {
        width: 220px !important;
        max-width: calc(100vw - 110px) !important;
    }
}

/* Mobile : on n'affiche que la langue vers laquelle on peut basculer (FR sur les pages anglaises, EN sur les françaises) */
@media (max-width: 767px) {
    .elementor-location-header .elementor-widget-button.pdp-lang-current { display: none !important; }
}

/* Tablette / mobile : dans une rangée « photo + carte de texte », la carte passe toujours AVANT la photo.
   Les rangées où la photo est à gauche sur ordinateur (cartes marron) sont ainsi remises dans le bon ordre :
   catégorie → photo, puis catégorie suivante → photo. */
@media (max-width: 1024px) {
    .e-con:has(> .e-con .elementor-widget-heading) > .e-con:not(:has(*)) { order: 2 !important; }
    .e-con:has(> .e-con:not(:has(*))) > .e-con:has(.elementor-widget-heading) { order: 1 !important; }
}

/* Mobile : les boutons ne débordent jamais de leur carte */
@media (max-width: 767px) {
    html body .elementor .elementor-element.elementor-widget-eael-creative-button,
    html body .elementor .elementor-element.elementor-widget-eael-creative-button .eael-creative-button-wrapper { max-width: 100% !important; }
    html body .elementor .elementor-element.elementor-widget-eael-creative-button .eael-creative-button {
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 14px 20px !important;
    }
    html body .elementor .elementor-element.elementor-widget-eael-creative-button .eael-creative-button .cretive-button-text {
        font-size: 14px !important;
        letter-spacing: 1px !important;
        white-space: normal !important;
        text-align: center !important;
    }
    /* Cartes de texte à côté d'une photo : marges intérieures réduites */
    .e-con:has(> .e-con:not(:has(*))) > .e-con:has(.elementor-widget-heading) {
        --padding-top: 36px !important;
        --padding-bottom: 36px !important;
        --padding-left: 24px !important;
        --padding-right: 24px !important;
    }
    /* Sécurité : aucun élément ne peut élargir la page (clip ne gêne pas le header sticky) */
    html, body { overflow-x: clip !important; }
}

/* --------------------------------------------------------------------------
   16. ÉCRANS PORTABLES (1025 – 1440 px, ex. HD 1366 × 768)
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1440px) {
    /* Typographie */
    .pdp-display .elementor-heading-title { font-size: 88px !important; }
    .pdp-title .elementor-heading-title { font-size: 58px !important; }
    .pdp-hover-card .pdp-title .elementor-heading-title { font-size: 56px !important; }
    .pdp-text .elementor-heading-title,
    .pdp-text.elementor-widget-text-editor { font-size: 18px !important; }

    /* Espacements */
    .pdp-section { --padding-top: 96px; --padding-bottom: 96px; --padding-left: 48px; --padding-right: 48px; }
    .pdp-hero, .pdp-band { --padding-left: 48px; --padding-right: 48px; }
    .pdp-offset { margin-left: 30% !important; }

    /* Cartes */
    .pdp-hover-card { min-height: 540px !important; }
    .pdp-service { min-height: 340px !important; }
    .pdp-band { min-height: 520px !important; }

    /* Pages chambres : panneau plus compact, hauteur d'écran 768 px */
    .pdp-room-panel {
        left: 48px !important;
        bottom: 40px !important;
        width: 440px !important;
        --padding-top: 36px; --padding-bottom: 32px; --padding-left: 36px; --padding-right: 36px;
    }
    .pdp-room-panel .pdp-title .elementor-heading-title { font-size: 46px !important; }
    .pdp-room-panel .pdp-eyebrow .elementor-heading-title { font-size: 30px !important; }
    .pdp-room-panel .pdp-text.elementor-widget-text-editor,
    .pdp-room-panel .pdp-text .elementor-heading-title { font-size: 16px !important; }
    .pdp-specs li { padding: 7px 0; font-size: 15px; }
    .pdp-room-open { left: 48px; bottom: 40px; }
    .pdp-room-slider .elementor-swiper-button { bottom: 40px !important; }
    .pdp-room-slider .elementor-swiper-button-next { right: 48px !important; }
    .pdp-room-slider .elementor-swiper-button-prev { right: 136px !important; }
    .pdp-room-count { right: 224px; bottom: 52px; }

    /* Header : logo plus petit pour laisser respirer le menu */
    .elementor-location-header .elementor-widget-theme-site-logo img { width: 320px !important; }
}

/* Header sur écrans portables : la colonne de droite (FR / EN / Réservation) s'adapte au lieu de garder 460 px */
@media (min-width: 1025px) and (max-width: 1440px) {
    html body .elementor-location-header .e-con:has(> .elementor-widget-eael-creative-button) {
        width: auto !important;
        --width: auto !important;
        flex: 0 1 auto !important;
        min-width: 0 !important;
        gap: 8px !important;
        --gap: 8px !important;
    }
    html body .elementor-location-header .elementor-widget-eael-creative-button .eael-creative-button {
        min-width: 0 !important;
        width: auto !important;
        padding: 14px 22px !important;
    }
    html body .elementor-location-header .elementor-widget-eael-creative-button .cretive-button-text {
        font-size: 15px !important;
        letter-spacing: 1.2px !important;
        white-space: nowrap !important;
    }
    html body .elementor-location-header .elementor-widget-button .elementor-button {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    /* Le header garde ses marges latérales et ne déborde jamais */
    html body .elementor-location-header > .e-con,
    html body .elementor-location-header .elementor > .e-con {
        max-width: 100% !important;
        overflow: visible !important;
    }
}

/* --------------------------------------------------------------------------
   17. MOBILE : cartes de services en carrousel horizontal + listes sur une colonne
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .pdp-services {
        --flex-direction: row !important;
        --flex-wrap: nowrap !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px !important;
    }
    .pdp-services > .e-con {
        flex: 0 0 42% !important;
        width: 42% !important;
        max-width: none !important;
        --width: 42% !important;
    }
}
@media (max-width: 767px) {
    /* Une carte bien visible + le début de la suivante, pour inviter à faire glisser */
    .pdp-services { gap: 12px !important; margin-right: -20px !important; padding-right: 20px !important; }
    .pdp-services > .e-con {
        flex: 0 0 78% !important;
        width: 78% !important;
        --width: 78% !important;
        min-height: 360px !important;
    }
    /* Toutes les listes de texte sur une seule colonne */
    .pdp-text.elementor-widget-text-editor,
    .pdp-text.elementor-widget-text-editor > .elementor-widget-container {
        column-count: 1 !important;
        columns: auto !important;
    }
    .pdp-text.elementor-widget-text-editor ul { padding-left: 20px !important; }
    .pdp-text.elementor-widget-text-editor li { margin-bottom: 6px; }
}

/* --------------------------------------------------------------------------
   18. LANGUE : dans le menu plein écran, plus dans le header sur mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .elementor-location-header .elementor-widget-button:has(.elementor-button[hreflang]) { display: none !important; }
}
#vnx-menu-overlay .pdp-menu-lang {
    display: flex;
    justify-content: flex-start;
    gap: 24px;
    padding: 20px 52px;
    border-top: 1px solid rgba(235, 231, 223, .25);
}
#vnx-menu-overlay .pdp-menu-lang a {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: "Slussen Variable", sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--pdp-menu-text) !important;
    text-decoration: none;
    transition: color .25s ease;
}
#vnx-menu-overlay .pdp-menu-lang a:hover { color: var(--pdp-menu-hover) !important; }
#vnx-menu-overlay .pdp-menu-lang img { width: 22px; height: auto; border-radius: 2px; box-shadow: 0 0 0 1px rgba(235, 231, 223, .3); }
@media (max-width: 767px) { #vnx-menu-overlay .pdp-menu-lang { padding: 18px 20px; } }

/* --------------------------------------------------------------------------
   19. HEADER : mêmes marges latérales à l'état normal et à l'état sticky (vnx-scrolled)
   -------------------------------------------------------------------------- */
@media (min-width: 1201px) {
    .elementor-location-header > .elementor-element-a7d4e87,
    .elementor-location-header.vnx-scrolled > .elementor-element-a7d4e87 {
        --padding-left: 64px; --padding-right: 64px;
        padding-left: 64px !important; padding-right: 64px !important;
    }
}
@media (min-width: 768px) and (max-width: 1200px) {
    .elementor-location-header > .elementor-element-a7d4e87,
    .elementor-location-header.vnx-scrolled > .elementor-element-a7d4e87 {
        --padding-left: 45px; --padding-right: 45px;
        padding-left: 45px !important; padding-right: 45px !important;
    }
}
@media (max-width: 767px) {
    .elementor-location-header > .elementor-element-a7d4e87,
    .elementor-location-header.vnx-scrolled > .elementor-element-a7d4e87 {
        --padding-left: 20px; --padding-right: 20px;
        padding-left: 20px !important; padding-right: 20px !important;
    }
}

/* --------------------------------------------------------------------------
   20. HERO VIDÉO DE L'ACCUEIL : la vidéo remplit le hero, le voile et le titre passent au-dessus
       (remplace l'ancienne astuce « z-index: -1 » héritée de Villa NYX)
   -------------------------------------------------------------------------- */
html body .elementor-element.elementor-element-fe21a3d {
    position: relative !important;
    isolation: isolate !important;
    background-image: none !important;
}
html body .elementor-element.elementor-element-fe21a3d > .elementor-widget-video.hero {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    z-index: 0 !important;
}
html body .elementor-element-fe21a3d .hero .elementor-widget-container,
html body .elementor-element-fe21a3d .hero .e-hosted-video,
html body .elementor-element-fe21a3d .hero .elementor-wrapper {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
}
html body .elementor-element-fe21a3d .hero video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}
/* Voile sombre pour la lisibilité du titre */
html body .elementor-element.elementor-element-fe21a3d::before {
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    z-index: 1 !important;
    background: rgba(35, 38, 41, 0.25) !important;
    pointer-events: none !important;
}
/* Titre au premier plan */
html body .elementor-element.elementor-element-fe21a3d > .e-con { z-index: 2 !important; }
/* Le widget vidéo du hero doit toujours être affiché (il était masqué par un réglage display:none) */
html body .elementor-element.elementor-element-fe21a3d > .elementor-widget-video.hero { display: block !important; visibility: visible !important; opacity: 1 !important; }
/* Une vidéo par appareil : on respecte les options Avancé > Responsive > Masquer sur … d'Elementor */
@media (min-width: 1025px) {
    html body .elementor-element.elementor-element-fe21a3d > .elementor-widget-video.hero.elementor-hidden-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    html body .elementor-element.elementor-element-fe21a3d > .elementor-widget-video.hero.elementor-hidden-tablet { display: none !important; }
}
@media (max-width: 767px) {
    html body .elementor-element.elementor-element-fe21a3d > .elementor-widget-video.hero.elementor-hidden-mobile { display: none !important; }
}
/* La vidéo du hero contient un filet clair à gauche et des bandes noires en haut et en bas :
   on l'agrandit légèrement pour les sortir du cadre. À retirer si la vidéo est recadrée à la source. */
html body .elementor-element-fe21a3d .hero:not(.elementor-hidden-desktop) video {
    transform: scale(1.14) !important;
    transform-origin: 50% 46% !important;
}

/* --------------------------------------------------------------------------
   21. MENU PLEIN ÉCRAN : tout tient dans la hauteur de l'écran (langue comprise)
   -------------------------------------------------------------------------- */
#vnx-menu-overlay .vnx-menu-root-container,
#vnx-menu-overlay .elementor-element.vnx-menu-root-container,
#vnx-menu-overlay .elementor-element-vnx_root {
    min-height: 100vh !important;
    min-height: 100dvh !important;
}
/* Écrans peu hauts (portables 768 px, etc.) */
@media (min-width: 901px) and (max-height: 860px) {
    #vnx-menu-overlay .vnx-menu-head,
    #vnx-menu-overlay .elementor-element-vnx_head { padding-top: 14px !important; padding-bottom: 14px !important; }
    #vnx-menu-overlay .vnx-menu-body,
    #vnx-menu-overlay .elementor-element-vnx_body { padding-top: 28px !important; padding-bottom: 28px !important; }
    #vnx-menu-overlay .vnx-menu-heading-item .elementor-heading-title,
    #vnx-menu-overlay .vnx-menu-links a { font-size: 36px !important; }
    #vnx-menu-overlay .vnx-menu-col-1,
    #vnx-menu-overlay .vnx-menu-col-2,
    #vnx-menu-overlay .elementor-element-vnx_links_col1,
    #vnx-menu-overlay .elementor-element-vnx_links_col2 { gap: 12px !important; }
    #vnx-menu-overlay .vnx-preview,
    #vnx-menu-overlay .elementor-element-vnx_preview_wrap { height: 52vh !important; min-height: 300px !important; }
    #vnx-menu-overlay .pdp-menu-lang { padding-top: 14px !important; padding-bottom: 14px !important; }
}
/* Mobile : liens plus compacts */
@media (max-width: 900px) {
    #vnx-menu-overlay .vnx-menu-heading-item .elementor-heading-title,
    #vnx-menu-overlay .vnx-menu-links a { font-size: 30px !important; line-height: 1.12 !important; }
    #vnx-menu-overlay .vnx-menu-links,
    #vnx-menu-overlay .vnx-menu-col-1,
    #vnx-menu-overlay .vnx-menu-col-2,
    #vnx-menu-overlay .elementor-element-vnx_links,
    #vnx-menu-overlay .elementor-element-vnx_links_col1,
    #vnx-menu-overlay .elementor-element-vnx_links_col2 { gap: 10px !important; }
    #vnx-menu-overlay .vnx-menu-body,
    #vnx-menu-overlay .elementor-element-vnx_body { padding-top: 24px !important; padding-bottom: 24px !important; }
}
@media (max-width: 900px) and (max-height: 700px) {
    #vnx-menu-overlay .vnx-menu-heading-item .elementor-heading-title,
    #vnx-menu-overlay .vnx-menu-links a { font-size: 26px !important; }
}

/* Menu plein écran : sous-liens sous un grand lien (classe « vnx-menu-sub » sur un widget Éditeur de texte)
   Affichés en retrait, un par ligne, en serif plus petit, précédés d'un fin trait */
#vnx-menu-overlay .vnx-menu-sub { margin: -4px 0 4px 0 !important; }
#vnx-menu-overlay .vnx-menu-sub p { margin: 0 !important; display: flex !important; flex-direction: column !important; gap: 6px !important; }
#vnx-menu-overlay .vnx-menu-sub a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding-left: 6px !important;
    font-family: "PP Editorial New", Georgia, serif !important;
    font-size: 24px !important;
    font-weight: 300 !important;
    font-style: italic !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.25 !important;
    color: var(--pdp-menu-text, rgba(235, 231, 223, .8)) !important;
    text-decoration: none !important;
    transition: color .25s ease, transform .25s ease !important;
}
#vnx-menu-overlay .vnx-menu-sub a::before {
    content: "";
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: .6;
    flex-shrink: 0;
}
#vnx-menu-overlay .vnx-menu-sub a:hover { color: var(--pdp-menu-hover, #F9F6F1) !important; transform: translateX(4px); }
@media (max-width: 900px) {
    #vnx-menu-overlay .vnx-menu-sub a { font-size: 20px !important; }
}

/* --------------------------------------------------------------------------
   22. HEADER : mêmes marges verticales à l'état normal et sticky + logo rose sur fond beige
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .elementor-location-header > .elementor-element-a7d4e87,
    .elementor-location-header.vnx-scrolled > .elementor-element-a7d4e87 {
        --padding-top: 16px; --padding-bottom: 16px;
        padding-top: 16px !important; padding-bottom: 16px !important;
    }
}
@media (max-width: 767px) {
    .elementor-location-header > .elementor-element-a7d4e87,
    .elementor-location-header.vnx-scrolled > .elementor-element-a7d4e87 {
        --padding-top: 12px; --padding-bottom: 12px;
        padding-top: 12px !important; padding-bottom: 12px !important;
    }
}
/* Logo blanc sur la photo (header transparent), logo rose sur le header sticky beige */
.elementor-location-header.vnx-scrolled .elementor-widget-theme-site-logo img {
    content: url("/wp-content/uploads/2026/09/logo-palais-des-princesses-spa-rose.png");
}
/* Largeur explicite du logo (indispensable pour le remplacement blanc → rose au défilement) */
.elementor-location-header .elementor-widget-theme-site-logo img { height: auto !important; max-width: 100% !important; }
@media (min-width: 1441px) {
    .elementor-location-header .elementor-widget-theme-site-logo img { width: 440px !important; }
}
@media (min-width: 1025px) and (max-width: 1440px) {
    .elementor-location-header .elementor-widget-theme-site-logo img { width: 320px !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-location-header .elementor-widget-theme-site-logo img { width: 300px !important; }
}
@media (max-width: 767px) {
    .elementor-location-header .elementor-widget-theme-site-logo img { width: 220px !important; max-width: calc(100vw - 110px) !important; }
}

/* --------------------------------------------------------------------------
   23. HEADER : aucun déplacement vertical entre l'état normal et sticky
   -------------------------------------------------------------------------- */
.elementor-location-header .elementor-element-2b21ee4,
.elementor-location-header.vnx-scrolled .elementor-element-2b21ee4,
.elementor-location-header .elementor-element-440265c,
.elementor-location-header.vnx-scrolled .elementor-element-440265c {
    --padding-top: 0px; --padding-bottom: 0px;
    padding-top: 0 !important; padding-bottom: 0 !important;
}
.elementor-location-header .elementor-element-f3d4922,
.elementor-location-header.vnx-scrolled .elementor-element-f3d4922 {
    padding-top: 0 !important; padding-bottom: 0 !important;
}
/* Tous les éléments du header centrés verticalement sur la même ligne que le logo */
.elementor-location-header > .elementor-element-a7d4e87 { align-items: center !important; --align-items: center; }
.elementor-location-header .elementor-element-2b21ee4,
.elementor-location-header .elementor-element-440265c { align-self: center !important; align-items: center !important; }

/* La petite flèche des sous-menus suit toujours la couleur du lien (beige puis marron) */
.elementor-location-header .elementor-nav-menu--main .sub-arrow,
.elementor-location-header .elementor-nav-menu--main .sub-arrow svg { color: inherit !important; fill: currentColor !important; }
.elementor-location-header.vnx-scrolled .elementor-nav-menu--main .elementor-item .sub-arrow svg { fill: #9C6347 !important; }
.elementor-location-header.vnx-scrolled .elementor-nav-menu--main .elementor-item:hover .sub-arrow svg { fill: #795E58 !important; }

#vnx-menu-overlay .vnx-menu-root-container > .pdp-menu-lang,
#vnx-menu-overlay .elementor-element-vnx_root > .pdp-menu-lang { margin-top: auto !important; width: 100% !important; box-sizing: border-box !important; }

/* --------------------------------------------------------------------------
   24. MENU PLEIN ÉCRAN — MOBILE / iPhone (≤ 900 px) — v1.2.9
       Cadre à la hauteur réellement visible (Safari iOS, barres comprises) :
       l'en-tête, la langue et le pied restent toujours à l'écran ;
       seule la zone des liens défile si l'écran est vraiment trop bas.
       --pdp-menu-h = window.innerHeight, fourni par le script du menu (functions.php).
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    html body #vnx-menu-overlay {
        top: 0 !important;
        bottom: auto !important;
        height: 100% !important;
        height: var(--pdp-menu-h, 100%) !important;
    }
    html body #vnx-menu-overlay > .elementor {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    /* Racine : plus de min-height 100vh (= plus haut que l'écran visible sur iPhone) */
    html body #vnx-menu-overlay .elementor-element.vnx-menu-root-container,
    html body #vnx-menu-overlay .vnx-menu-root-container,
    html body #vnx-menu-overlay .elementor-element-vnx_root {
        --min-height: 0px;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        height: auto !important;
        justify-content: flex-start !important;
        overflow: hidden !important;
    }
    html body #vnx-menu-overlay .vnx-menu-root-container > .e-con-inner {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }
    /* En-tête, langue et pied : taille fixe, jamais écrasés ni poussés hors écran */
    html body #vnx-menu-overlay .vnx-menu-head,
    html body #vnx-menu-overlay .elementor-element-vnx_head,
    html body #vnx-menu-overlay .pdp-menu-lang,
    html body #vnx-menu-overlay .vnx-menu-foot,
    html body #vnx-menu-overlay .elementor-element-vnx_foot {
        flex: 0 0 auto !important;
    }
    html body #vnx-menu-overlay .vnx-menu-root-container .pdp-menu-lang,
    html body #vnx-menu-overlay .elementor-element-vnx_root .pdp-menu-lang { margin-top: 0 !important; }
    /* Zone des liens : prend la place restante et défile seule si besoin */
    html body #vnx-menu-overlay .vnx-menu-body,
    html body #vnx-menu-overlay .elementor-element-vnx_body {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding-top: clamp(14px, calc(var(--pdp-menu-h, 700px) * .034), 24px) !important;
        padding-bottom: clamp(14px, calc(var(--pdp-menu-h, 700px) * .034), 24px) !important;
    }
    /* Grands liens : taille adaptée à la hauteur visible (42 px maxi → 26 px mini) — v1.2.10 */
    html body #vnx-menu-overlay .vnx-menu-heading-item .elementor-heading-title,
    html body #vnx-menu-overlay .vnx-menu-heading-item a {
        font-size: clamp(26px, min(calc(var(--pdp-menu-h, 700px) * .06), 10.5vw), 42px) !important;
        line-height: 1.12 !important;
    }
    html body #vnx-menu-overlay .vnx-menu-sub a {
        font-size: clamp(18px, calc(var(--pdp-menu-h, 700px) * .036), 24px) !important;
    }
    html body #vnx-menu-overlay .vnx-menu-sub p {
        gap: clamp(6px, calc(var(--pdp-menu-h, 700px) * .014), 12px) !important;
    }
    /* Espace SPA → Services : les deux colonnes s'empilent sans marges internes ;
       l'écart entre colonnes = l'écart entre liens */
    html body #vnx-menu-overlay .vnx-menu-links,
    html body #vnx-menu-overlay .elementor-element-vnx_links,
    html body #vnx-menu-overlay .vnx-menu-col-1,
    html body #vnx-menu-overlay .vnx-menu-col-2,
    html body #vnx-menu-overlay .elementor-element-vnx_links_col1,
    html body #vnx-menu-overlay .elementor-element-vnx_links_col2,
    html body #vnx-menu-overlay .vnx-menu-links > .e-con-inner,
    html body #vnx-menu-overlay .vnx-menu-col-1 > .e-con-inner,
    html body #vnx-menu-overlay .vnx-menu-col-2 > .e-con-inner {
        --padding-top: 0px;
        --padding-bottom: 0px;
        --min-height: 0px;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-height: 0 !important;
        justify-content: flex-start !important;
        gap: clamp(8px, calc(var(--pdp-menu-h, 700px) * .028), 22px) !important;
        row-gap: clamp(8px, calc(var(--pdp-menu-h, 700px) * .028), 22px) !important;
    }
    html body #vnx-menu-overlay .vnx-menu-col-1 > .elementor-widget:not(.vnx-menu-sub),
    html body #vnx-menu-overlay .vnx-menu-col-2 > .elementor-widget:not(.vnx-menu-sub),
    html body #vnx-menu-overlay .vnx-menu-col-1 > .e-con-inner > .elementor-widget:not(.vnx-menu-sub),
    html body #vnx-menu-overlay .vnx-menu-col-2 > .e-con-inner > .elementor-widget:not(.vnx-menu-sub) {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    /* Pied : au-dessus de la barre d'accueil de l'iPhone */
    html body #vnx-menu-overlay .vnx-menu-foot,
    html body #vnx-menu-overlay .elementor-element-vnx_foot {
        padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    }
}
@media (max-width: 900px) and (max-height: 620px) {
    html body #vnx-menu-overlay .vnx-menu-head,
    html body #vnx-menu-overlay .elementor-element-vnx_head { padding-top: 10px !important; padding-bottom: 10px !important; }
    html body #vnx-menu-overlay .pdp-menu-lang { padding-top: 12px !important; padding-bottom: 12px !important; }
    html body #vnx-menu-overlay .vnx-menu-foot,
    html body #vnx-menu-overlay .elementor-element-vnx_foot {
        padding-top: 12px !important;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
        gap: 4px !important;
    }
}
/* Écrans tactiles : pas de survol « collé » après un toucher (Transport éclairci et décalé) */
@media (hover: none), (pointer: coarse) {
    html body #vnx-menu-overlay .vnx-menu-sub a,
    html body #vnx-menu-overlay .pdp-menu-lang a {
        -webkit-tap-highlight-color: transparent;
    }
    html body #vnx-menu-overlay .vnx-menu-sub a:hover,
    html body #vnx-menu-overlay .vnx-menu-sub a:focus {
        color: var(--pdp-menu-text, rgba(235, 231, 223, .8)) !important;
        transform: none !important;
    }
    html body #vnx-menu-overlay .pdp-menu-lang a:hover,
    html body #vnx-menu-overlay .pdp-menu-lang a:focus {
        color: var(--pdp-menu-text, rgba(235, 231, 223, .8)) !important;
    }
    /* Retour visuel seulement pendant l'appui */
    html body #vnx-menu-overlay .vnx-menu-sub a:active,
    html body #vnx-menu-overlay .pdp-menu-lang a:active {
        color: var(--pdp-menu-hover, #F9F6F1) !important;
    }
}

/* --------------------------------------------------------------------------
   25. MENU PLEIN ÉCRAN MOBILE — v1.2.11
       Les liens occupent toute la hauteur disponible entre l'en-tête et la langue :
       l'espace libre est réparti à parts égales entre les grands liens,
       quel que soit leur nombre (6 avec Contact). Restauration/Transport restent collés à Services.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    html body #vnx-menu-overlay .vnx-menu-body,
    html body #vnx-menu-overlay .elementor-element-vnx_body {
        display: flex !important;
        flex-direction: column !important;
    }
    html body #vnx-menu-overlay .vnx-menu-links,
    html body #vnx-menu-overlay .elementor-element-vnx_links {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 0 auto !important;
        gap: clamp(6px, calc(var(--pdp-menu-h, 700px) * .012), 10px) !important;
        row-gap: clamp(6px, calc(var(--pdp-menu-h, 700px) * .012), 10px) !important;
    }
    /* Les deux colonnes ne font plus écran : tous les liens partagent le même espace */
    html body #vnx-menu-overlay .vnx-menu-col-1,
    html body #vnx-menu-overlay .vnx-menu-col-2,
    html body #vnx-menu-overlay .elementor-element-vnx_links_col1,
    html body #vnx-menu-overlay .elementor-element-vnx_links_col2,
    html body #vnx-menu-overlay .vnx-menu-links > .e-con-inner,
    html body #vnx-menu-overlay .vnx-menu-col-1 > .e-con-inner,
    html body #vnx-menu-overlay .vnx-menu-col-2 > .e-con-inner {
        display: contents !important;
    }
    /* Espace libre réparti au-dessus de chaque grand lien, sauf le tout premier */
    html body #vnx-menu-overlay .vnx-menu-links .elementor-element.elementor-widget.vnx-menu-heading-item:not(.vnx-menu-sub) { margin-top: auto !important; }
    html body #vnx-menu-overlay .vnx-menu-col-1 > .elementor-element.vnx-menu-heading-item:first-child:not(.vnx-menu-sub),
    html body #vnx-menu-overlay .vnx-menu-col-1 > .e-con-inner > .elementor-element.vnx-menu-heading-item:first-child:not(.vnx-menu-sub),
    html body #vnx-menu-overlay .elementor-element-vnx_links_col1 > .elementor-element.vnx-menu-heading-item:first-child:not(.vnx-menu-sub) { margin-top: 0 !important; }
    html body #vnx-menu-overlay .vnx-menu-links .vnx-menu-sub { margin: 0 !important; }
}

/* --------------------------------------------------------------------------
   26. MENU MOBILE : sélecteur de langue + 20 px en bas et à gauche — v1.2.12
       (18/20 px → 38/40 px ; + zone de sécurité de la barre d'accueil iPhone)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    html body #vnx-menu-overlay .pdp-menu-lang {
        padding-left: 40px !important;
        padding-bottom: calc(38px + env(safe-area-inset-bottom, 0px)) !important;
    }
}
@media (max-width: 767px) and (max-height: 620px) {
    html body #vnx-menu-overlay .pdp-menu-lang {
        padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* --------------------------------------------------------------------------
   27. HEADER : logo agrandi en haut de page (header transparent) — v1.2.14
       Agrandi par transform depuis le haut : la hauteur du header ne change pas,
       le logo déborde vers le bas. Au défilement (header beige), retour à la taille normale.
       Réglage : modifier --pdp-logo-scale ci-dessous (1 = taille normale).
   -------------------------------------------------------------------------- */
/* v1.2.15 : agrandissement seulement là où l'espace entre le menu et FR/EN le permet
   (à 1366 px, le coefficient 1,2 faisait chevaucher GALERIE et FR) */
@media (min-width: 1600px) {
    .elementor-location-header { --pdp-logo-scale: 1.15; }  /* 440 px → environ 506 px */
}
@media (min-width: 1800px) {
    .elementor-location-header { --pdp-logo-scale: 1.3; }   /* 440 px → environ 572 px */
}
/* En dessous de 1600 px : taille normale (pas d'agrandissement) */
@media (min-width: 1025px) {
    .elementor-location-header .elementor-widget-theme-site-logo,
    .elementor-location-header .elementor-widget-theme-site-logo .elementor-widget-container,
    .elementor-location-header .elementor-widget-theme-site-logo a {
        overflow: visible !important;
    }
    .elementor-location-header .elementor-widget-theme-site-logo img {
        transform: scale(var(--pdp-logo-scale, 1));
        transform-origin: 50% 0;
        transition: transform .35s ease;
        will-change: transform;
    }
    .elementor-location-header.vnx-scrolled .elementor-widget-theme-site-logo img {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   28. HEADER PORTABLE (1025 – 1366 px) : espaces réduits — v1.2.18
       (remplace l'essai 1.2.16/1.2.17 : taille et espacement des liens du menu inchangés)
       Causes repérées dans villa-header.css :
       - colonne gauche (hamburger + menu) en « space-between » : le menu est poussé loin du hamburger ;
       - widget du bouton Réservation large de 520 px, bouton calé à droite : vide entre EN et le bouton.
       Sélecteurs par classes : header FR et header EN.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1366px) {
    /* Hamburger → Chambres */
    html body .elementor-location-header .e-con:has(> .elementor-widget-nav-menu) {
        --justify-content: flex-start !important;
        justify-content: flex-start !important;
        --gap: 16px !important;
        gap: 16px !important;
        column-gap: 16px !important;
    }
    /* EN → RÉSERVATION : le widget du bouton prend la largeur du bouton, pas 520 px */
    html body .elementor-location-header .elementor-widget-eael-creative-button {
        --container-widget-width: auto !important;
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
    }
    html body .elementor-location-header .e-con:has(> .elementor-widget-eael-creative-button) {
        --justify-content: flex-end !important;
        justify-content: flex-end !important;
        --gap: 28px !important;
        gap: 28px !important;
        column-gap: 28px !important;
    }
}

/* --------------------------------------------------------------------------
   29. HEADER : la langue de la page n'est plus affichée — v1.2.19
       Pages françaises : seul « EN » reste ; pages anglaises : seul « FR ».
       (classe pdp-lang-current posée par le script des langues, functions.php)
   -------------------------------------------------------------------------- */
html body .elementor-location-header .elementor-widget-button.pdp-lang-current {
    display: none !important;
}

/* --------------------------------------------------------------------------
   30. MENU PLEIN ÉCRAN : logo plus grand sur ordinateur et tablette — v1.2.20
       (était 320 px partout au-dessus de 900 px ; mobile inchangé, 200 px)
   -------------------------------------------------------------------------- */
@media (min-width: 901px) {
    html body #vnx-menu-overlay .vnx-menu-logo img,
    html body #vnx-menu-overlay .elementor-element-vnx_logo_img img {
        width: 360px !important;
        max-width: 50vw !important;
    }
}
@media (min-width: 1025px) {
    html body #vnx-menu-overlay .vnx-menu-logo img,
    html body #vnx-menu-overlay .elementor-element-vnx_logo_img img { width: 420px !important; }
}
@media (min-width: 1441px) {
    html body #vnx-menu-overlay .vnx-menu-logo img,
    html body #vnx-menu-overlay .elementor-element-vnx_logo_img img { width: 520px !important; }
}
/* Écrans peu hauts (ex. 1366 × 768) : un peu plus petit pour que les liens tiennent */
@media (min-width: 901px) and (max-height: 860px) {
    html body #vnx-menu-overlay .vnx-menu-logo img,
    html body #vnx-menu-overlay .elementor-element-vnx_logo_img img { width: 380px !important; }
}

/* --------------------------------------------------------------------------
   31. ACCUEIL (FR et EN) — logo « façon Mamounia » sur ordinateur — v1.2.22
       En haut de page : grand logo blanc posé dans la photo, centré sous la barre du header.
       Au défilement (header beige) : il remonte dans la barre, taille normale, logo rose.
       Uniquement l'accueil et à partir de 1025 px ; autres pages, tablette et mobile inchangés.
       Réglages : --pdp-home-logo-scale (taille) et --pdp-home-logo-y (descente sous la barre).
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
    body.home .elementor-location-header,
    body.page-id-14 .elementor-location-header,
    body.page-id-1553 .elementor-location-header {
        --pdp-home-logo-scale: 1.6;     /* 320 px → environ 512 px (1025 – 1440 px) */
        --pdp-home-logo-y: 11vh;
    }
}
@media (min-width: 1441px) {
    body.home .elementor-location-header,
    body.page-id-14 .elementor-location-header,
    body.page-id-1553 .elementor-location-header {
        --pdp-home-logo-scale: 1.45;    /* 440 px → environ 640 px */
        --pdp-home-logo-y: 12vh;
    }
}
@media (min-width: 1025px) {
    /* Le grand logo doit pouvoir sortir de la barre sans être coupé */
    body.home .elementor-location-header .e-con,
    body.page-id-14 .elementor-location-header .e-con,
    body.page-id-1553 .elementor-location-header .e-con,
    body.home .elementor-location-header .elementor-widget-theme-site-logo,
    body.page-id-14 .elementor-location-header .elementor-widget-theme-site-logo,
    body.page-id-1553 .elementor-location-header .elementor-widget-theme-site-logo {
        --overflow: visible;
        overflow: visible !important;
    }
    html body.home .elementor-location-header .elementor-widget-theme-site-logo img,
    html body.page-id-14 .elementor-location-header .elementor-widget-theme-site-logo img,
    html body.page-id-1553 .elementor-location-header .elementor-widget-theme-site-logo img {
        transform-origin: 50% 0;
        transform: translateX(var(--pdp-home-logo-dx, 0px)) translateY(var(--pdp-home-logo-y, 11vh)) scale(var(--pdp-home-logo-scale, 1.5));
        filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .35));
        transition: transform .55s cubic-bezier(.22, .61, .36, 1), filter .55s ease;
        will-change: transform;
    }
    html body.home .elementor-location-header.vnx-scrolled .elementor-widget-theme-site-logo img,
    html body.page-id-14 .elementor-location-header.vnx-scrolled .elementor-widget-theme-site-logo img,
    html body.page-id-1553 .elementor-location-header.vnx-scrolled .elementor-widget-theme-site-logo img {
        transform: none;
        filter: none;
    }
}
/* v1.2.23 : --pdp-home-logo-dx est calculé par le thème (functions.php) pour centrer le grand logo
   sur la largeur de l'écran ; les colonnes gauche/droite du header n'ont pas la même largeur. */

/* --------------------------------------------------------------------------
   32. HEADER : bouton Réservation / Book now — fond qui se remplit de gauche à droite au survol — v1.2.25
       Haut de page : remplissage crème ; header beige (sticky) : remplissage marron.
   -------------------------------------------------------------------------- */
html body .elementor-location-header .elementor-widget-eael-creative-button .eael-creative-button {
    background-color: transparent !important;
    background-image: linear-gradient(#EBE7DF, #EBE7DF) !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: 0% 100% !important;
    transition: background-size .45s cubic-bezier(.65, 0, .35, 1), color .3s ease .1s, border-color .3s ease !important;
}
html body .elementor-location-header .elementor-widget-eael-creative-button .eael-creative-button:hover,
html body .elementor-location-header .elementor-widget-eael-creative-button .eael-creative-button:focus-visible {
    background-color: transparent !important;
    background-size: 100% 100% !important;
}
html body .elementor-location-header.vnx-scrolled .elementor-widget-eael-creative-button .eael-creative-button {
    background-image: linear-gradient(#9C6347, #9C6347) !important;
}
html body .elementor-location-header.vnx-scrolled .elementor-widget-eael-creative-button .eael-creative-button:hover,
html body .elementor-location-header.vnx-scrolled .elementor-widget-eael-creative-button .eael-creative-button:focus-visible {
    background-color: transparent !important;
}
@media (prefers-reduced-motion: reduce) {
    html body .elementor-location-header .elementor-widget-eael-creative-button .eael-creative-button { transition: none !important; }
}

/* --------------------------------------------------------------------------
   33. BOUTON WHATSAPP FLOTTANT — v1.2.27
       Marron du site, icône beige ; toutes les pages FR/EN ; masqué pendant le loader
       et quand le menu plein écran est ouvert ; sous la lightbox des photos.
   -------------------------------------------------------------------------- */
.pdp-wa {
    position: fixed;
    right: 24px;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    z-index: 9990;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #9C6347;
    color: #EBE7DF;
    box-shadow: 0 6px 20px rgba(60, 35, 25, .28);
    text-decoration: none;
    opacity: 0;
    transform: translateY(12px) scale(.9);
    animation: pdpWaIn .5s ease 1.2s forwards;
    transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.pdp-wa svg { width: 30px; height: 30px; display: block; }
.pdp-wa:hover, .pdp-wa:focus-visible {
    background: #7F4E37;
    color: #F9F6F1;
    box-shadow: 0 8px 26px rgba(60, 35, 25, .36);
    transform: translateY(-2px) scale(1.05);
}
.pdp-wa:focus-visible { outline: 2px solid #EBE7DF; outline-offset: 3px; }
@keyframes pdpWaIn { to { opacity: 1; transform: none; } }
html.vnx-menu-open .pdp-wa, body.vnx-menu-open .pdp-wa, html.pdp-loading .pdp-wa { display: none !important; }
@media (max-width: 767px) {
    .pdp-wa { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
    .pdp-wa svg { width: 27px; height: 27px; }
}
@media (prefers-reduced-motion: reduce) {
    .pdp-wa { animation: none; opacity: 1; transform: none; transition: none; }
}
@media print { .pdp-wa { display: none !important; } }

/* --------------------------------------------------------------------------
   34–35. SURTITRES : petites capitales Slussen, 14 px — v1.2.31 (choix utilisateur, remplace Golden Hopes)
          Classe pdp-eyebrow + surtitres de l'accueil (IDs de villa-home.css)
          + titres repérés automatiquement (pdp-eyebrow-auto, script dans functions.php).
   -------------------------------------------------------------------------- */
html body .pdp-eyebrow .elementor-heading-title,
html body .pdp-room-panel .pdp-eyebrow .elementor-heading-title,
html body .pdp-eyebrow-auto .elementor-heading-title,
html body .elementor-element-5adc28a .elementor-heading-title,
html body .elementor-element-bec591d .elementor-heading-title,
html body .elementor-element-6d24dc2 .elementor-heading-title,
html body .elementor-element-9f5e2e1 .elementor-heading-title,
html body .elementor-element-ecbf6d5 .elementor-heading-title {
    font-family: "Slussen Variable", "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    letter-spacing: .24em !important;
    text-transform: uppercase !important;
    line-height: 1.7 !important;
}
@media (max-width: 767px) {
    html body .pdp-eyebrow .elementor-heading-title,
    html body .pdp-room-panel .pdp-eyebrow .elementor-heading-title,
    html body .pdp-eyebrow-auto .elementor-heading-title,
    html body .elementor-element-5adc28a .elementor-heading-title,
    html body .elementor-element-bec591d .elementor-heading-title,
    html body .elementor-element-6d24dc2 .elementor-heading-title,
    html body .elementor-element-9f5e2e1 .elementor-heading-title,
    html body .elementor-element-ecbf6d5 .elementor-heading-title {
        font-size: 13px !important;
        letter-spacing: .2em !important;
    }
}