/* ============================================================
   VILLAS RÊVE
   CHARTE GRAPHIQUE & PERSONNALISATION
   Helix Ultimate / SP Page Builder / Vik Booking
   ============================================================ */


/* ============================================================
   01. VARIABLES
   ============================================================ */

:root {

    /* --- Couleurs principales --- */

    --vr-primary: #287A78;
    --vr-primary-dark: #1E6261;
    --vr-primary-light: #E8F2F1;

    /* --- Couleur chaude / coucher de soleil --- */

    --vr-accent: #D58F72;
    --vr-accent-dark: #C2765B;
    --vr-accent-light: #F6E9E3;

    /* --- Neutres --- */

    --vr-heading: #263A3A;
    --vr-text: #596260;
    --vr-text-light: #7A827F;

    --vr-white: #FAF9F6;
    --vr-background: #FFFFFF;
    --vr-background-alt: #F3EFE7;

    --vr-border: #E5E2DA;

    /* --- Ombres --- */

    --vr-shadow-sm:
        0 2px 8px rgba(38, 58, 58, .07);

    --vr-shadow-md:
        0 8px 25px rgba(38, 58, 58, .11);

    --vr-shadow-lg:
        0 15px 40px rgba(38, 58, 58, .15);

    /* --- Rayons --- */

    --vr-radius-sm: 5px;
    --vr-radius-md: 9px;
    --vr-radius-lg: 14px;

    /* --- Transitions --- */

    --vr-transition:
        220ms cubic-bezier(.2,.65,.3,1);
}


/* ============================================================
   02. BASE
   ============================================================ */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--vr-background);
    color: var(--vr-text);

    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

p {
    color: var(--vr-text);
}

a {
    color: var(--vr-primary);
    transition:
        color var(--vr-transition),
        background-color var(--vr-transition),
        border-color var(--vr-transition);
}

a:hover {
    color: var(--vr-primary-dark);
}


/* ============================================================
   03. TITRES
   ============================================================ */

h1,
h2,
h3,
h4,
h5,
h6,
.jpb-addon-title {
    color: var(--vr-heading);
}

.jpb-addon-title {
    font-weight: 500;
    letter-spacing: -0.015em;
}


/* Titre "Les villas" */

#jpb-addon-1783618810276 .jpb-addon-title {
    color: var(--vr-heading);
    font-size: clamp(25px, 2.2vw, 32px);
    line-height: 1.2;
    font-weight: 500;

    margin: 0 0 28px;
}


/* ============================================================
   04. TOPBAR
   ============================================================ */

#sp-header-topbar {
    background: var(--vr-white);
    border-bottom: 1px solid var(--vr-border);

    color: var(--vr-text-light);
}

#sp-header-topbar a {
    color: var(--vr-text-light);
    text-decoration: none;
}

#sp-header-topbar a:hover {
    color: var(--vr-primary);
}


/* Icônes réseaux sociaux */

#sp-header-topbar .social-icons a {
    color: var(--vr-text-light);
    transition:
        color var(--vr-transition),
        transform var(--vr-transition);
}

#sp-header-topbar .social-icons a:hover {
    color: var(--vr-primary);
    transform: translateY(-1px);
}


/* Informations téléphone / email */

#sp-header-topbar .sp-contact-info {
    color: var(--vr-text-light);
}

#sp-header-topbar .sp-contact-info span {
    color: var(--vr-primary);
}


/* ============================================================
   05. HEADER PRINCIPAL
   ============================================================ */

#sp-header {
    background: #faf9f6;

    border-bottom: 1px solid var(--vr-border);

    transition:
        background-color var(--vr-transition),
        box-shadow var(--vr-transition);
}


/* Menu */

#sp-header .sp-megamenu-parent > li > a {
    color: var(--vr-heading);

    font-weight: 450;

    transition:
        color var(--vr-transition);
}

#sp-header .sp-megamenu-parent > li > a:hover {
    color: var(--vr-primary);
}


/* Élément actif */

#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li.current-item > a {
    color: var(--vr-primary);
}


/* Petite ligne sous l'élément actif */

#sp-header .sp-megamenu-parent > li.active > a::after {
    background: var(--vr-primary);
}


/* ============================================================
   06. MOBILE / OFFCANVAS
   ============================================================ */

.offcanvas-menu {
    background: var(--vr-white);
}

.offcanvas-menu .sp-module ul > li > a {
    color: var(--vr-heading);
}

.offcanvas-menu .sp-module ul > li.active > a,
.offcanvas-menu .sp-module ul > li > a:hover {
    color: var(--vr-primary);
}

.offcanvas-overlay {
    background: rgba(38, 58, 58, .35);
}


/* Burger */

.burger-icon span {
    background-color: var(--vr-heading);
}


/* ============================================================
   07. ZONE DE RECHERCHE
   ============================================================ */

/*
   Vik Booking :
   .vbmodhorsearchmaindiv
   .vbo-horizsearch-humanformat-wrap
*/

.vbmodhorsearchmaindiv {
    position: relative;
    z-index: 20;
}


/* Conteneur principal */

.vbo-horizsearch-humanformat-wrap {
    background: rgba(255, 255, 255, .97);

    border: 1px solid rgba(229, 226, 218, .9);
    border-radius: var(--vr-radius-md);

    padding: 1.2rem 1.5rem;

    box-shadow: var(--vr-shadow-lg);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transition:
        box-shadow var(--vr-transition),
        transform var(--vr-transition);
}


/* Labels */

.vbo-horizsearch-humanformat-wrap label {
    color: var(--vr-heading);

    font-size: 11px;
    font-weight: 600;

    letter-spacing: .02em;
}


/* Champs dates */

.vbo-horizsearch-showcalendar {
    background: var(--vr-white);

    color: var(--vr-text);

    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-sm);

    transition:
        border-color var(--vr-transition),
        background-color var(--vr-transition),
        box-shadow var(--vr-transition);
}

.vbo-horizsearch-showcalendar:hover {
    border-color: rgba(40, 122, 120, .5);
    background: #FCFEFD;
}

.vbo-horizsearch-showcalendar:focus,
.vbo-horizsearch-showcalendar:focus-within {
    border-color: var(--vr-primary);

    box-shadow:
        0 0 0 3px rgba(40, 122, 120, .10);
}


/* Icônes calendrier */

.vbo-horizsearch-showcalendar i {
    color: var(--vr-primary);
}


/* Texte "Sélectionner date" */

.vbo-horizsearch-placeholder {
    color: var(--vr-text-light);
}


/* ============================================================
   08. PERSONNES
   ============================================================ */

.vbmodhorsearch-hum-guests-wrap {
    color: var(--vr-text);
}

.vbmodhorsearch-hum-guests-count {
    background: var(--vr-white);

    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-sm);

    transition:
        border-color var(--vr-transition),
        box-shadow var(--vr-transition);
}

.vbmodhorsearch-hum-guests-count:hover {
    border-color: rgba(40, 122, 120, .5);
}

.vbmodhorsearch-hum-guests-elem label {
    color: var(--vr-text-light);
}

.vbmodhorsearch-hum-guests-elem span {
    color: var(--vr-heading);
    font-weight: 600;
}


/* ============================================================
   09. BOUTON RECHERCHER
   ============================================================ */

#vbo-mod-horsearch-sbt-117,
.vbo-pref-color-btn {
    background: var(--vr-primary) !important;
    border: 1px solid var(--vr-primary) !important;

    color: var(--vr-white) !important;

    border-radius: var(--vr-radius-sm);

    font-weight: 500;

    padding: 11px 22px;

    height: 57px;

    transition:
        background-color var(--vr-transition),
        border-color var(--vr-transition),
        transform var(--vr-transition),
        box-shadow var(--vr-transition);
}

#vbo-mod-horsearch-sbt-117:hover,
.vbo-pref-color-btn:hover {
    background: var(--vr-primary-dark) !important;
    border-color: var(--vr-primary-dark) !important;

    color: var(--vr-white) !important;

    transform: translateY(-1px);

    box-shadow: var(--vr-shadow-sm);
}


/* ============================================================
   10. CALENDRIER VIK BOOKING
   ============================================================ */

.vbo-horizsearch-dpicker-cont {
    box-shadow: var(--vr-shadow-lg);
}


/* En-tête */

.ui-datepicker .ui-datepicker-header {
    background: var(--vr-primary);
    color: var(--vr-white);

    border-color: var(--vr-primary);
}


/* Mois */

.ui-datepicker .ui-datepicker-title {
    color: var(--vr-white);
}


/* Jours */

.ui-datepicker td a {
    color: var(--vr-heading);
}

.ui-datepicker td a:hover {
    background: var(--vr-primary-light);
    color: var(--vr-primary-dark);
}


/* Aujourd'hui / sélection */

.ui-datepicker td .ui-state-active,
.ui-datepicker td .ui-state-highlight {
    background: var(--vr-primary);
    border-color: var(--vr-primary);

    color: var(--vr-white);
}


/* ============================================================
   11. SECTION DES VILLAS
   ============================================================ */

#section-id-1783618439965 {
    background: var(--vr-background);

    padding-top: 65px;
    padding-bottom: 75px;
}


/* ============================================================
   12. CONTENEUR DES CARTES
   ============================================================ */

#vbo-modrooms-114 {
    overflow: visible;
}

#vbo-modrooms-114 .owl-stage {
    display: flex;
}

#vbo-modrooms-114 .owl-item {
    display: flex;
}


/* ============================================================
   13. CARTE VILLA
   ============================================================ */

.vbmodrooms-item {
    width: 100%;
    background: #faf9f6;
    border-radius: 10px;

}

.vbmodroomsboxdiv {
    height: 100%;

    background: var(--vr-white);

    border: 1px solid var(--vr-border);
    border-radius: var(--vr-radius-md);

    overflow: hidden;

    box-shadow: var(--vr-shadow-sm);

    transition:
        transform 280ms cubic-bezier(.2,.65,.3,1),
        box-shadow 280ms cubic-bezier(.2,.65,.3,1),
        border-color var(--vr-transition);
}

.vbmodroomsboxdiv:hover {
    transform: translateY(-4px);

    border-color: rgba(40, 122, 120, .20);

    box-shadow: var(--vr-shadow-md);
}


/* ============================================================
   14. IMAGE DES VILLAS
   ============================================================ */

.vbmodrooms-img-link {
    display: block;

    overflow: hidden;
}

.vbmodroomsimg {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 10;

    object-fit: cover;

    transition:
        transform 500ms cubic-bezier(.2,.65,.3,1);
}

.vbmodroomsboxdiv:hover .vbmodroomsimg {
    transform: scale(1.025);
}


/* ============================================================
   15. INFORMATIONS VILLA
   ============================================================ */

.vbinf {
    padding: 22px 22px 0;
}


/* Ligne titre + lits */

.vbmodrooms-divblock {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 15px;

    margin-bottom: 12px;
}


/* Nom */

.vbmodroomsname {
    color: var(--vr-heading);

    font-size: 16px;
    line-height: 1.35;

    font-weight: 600;
}


/* Nombre de lits */

.vbmodroomsbeds {
    flex: 0 0 auto;

    color: var(--vr-text-light);

    font-size: 12px;
    white-space: nowrap;
}


/* ============================================================
   16. DESCRIPTION
   ============================================================ */

.vbmodroomsdesc {
    display: block;

    color: var(--vr-text);

    font-size: 13px;
    line-height: 1.65;

    margin-bottom: 18px;
}


/* ============================================================
   17. ICÔNES CARACTÉRISTIQUES
   ============================================================ */

.vbmodrooms-carats {
    margin-top: 5px;
    margin-bottom: 18px;
}

.vbo-room-carats {
    display: flex;

    align-items: center;

    gap: 13px;
}

.vbo-room-carat {
    color: var(--vr-primary);
}

.vbo-icn-carat,
.vbo-pref-color-text {
    color: var(--vr-primary) !important;

    transition:
        color var(--vr-transition),
        transform var(--vr-transition);
}

.vbo-room-carat:hover .vbo-icn-carat {
    color: var(--vr-primary-dark) !important;
    transform: translateY(-1px);
}


/* ============================================================
   18. PRIX
   ============================================================ */

.vbmodroomsroomcost {
    display: flex;

    align-items: baseline;

    gap: 3px;

    color: var(--vr-heading);

    margin-bottom: 18px;
}

.vbmodroomsroomcost .vbo_currency {
    font-size: 13px;
    font-weight: 500;
}

.vbmodroomsroomcost .vbo_price {
    color: var(--vr-heading);

    font-size: 20px;
    font-weight: 650;
}


/* ============================================================
   19. BOUTON "DÉTAILS"
   ============================================================ */

.vbmodroomsview {
    display: block;
}

.vbmodroomsview a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;

    min-height: 42px;

    background: var(--vr-primary);
    border: 1px solid var(--vr-primary);

    color: var(--vr-white) !important;

    border-radius: var(--vr-radius-sm);

    font-size: 13px;
    font-weight: 500;

    text-decoration: none;

    transition:
        background-color var(--vr-transition),
        border-color var(--vr-transition),
        transform var(--vr-transition),
        box-shadow var(--vr-transition);
}

.vbmodroomsview a:hover {
    background: var(--vr-primary-dark);
    border-color: var(--vr-primary-dark);

    color: var(--vr-white) !important;

    transform: translateY(-1px);

    box-shadow: var(--vr-shadow-sm);
}


/* ============================================================
   20. FOOTER
   ============================================================ */

#sp-bottom {
    background: var(--vr-background-alt);

    border-top: 1px solid var(--vr-border);

    color: var(--vr-text);

    padding-top: 70px;
    padding-bottom: 55px;
}


/* Titres footer */

#sp-bottom .jpb-addon-title {
    color: var(--vr-heading);

    font-size: 17px;
    line-height: 1.35;

    font-weight: 500;
}


/* Texte */

#sp-bottom p {
    color: var(--vr-text);
}


/* Liens */

#sp-bottom a {
    color: var(--vr-text);
}

#sp-bottom a:hover {
    color: var(--vr-primary);
}


/* Icônes footer */

#sp-bottom .ui-icon svg {
    stroke: var(--vr-primary);
}


/* ============================================================
   21. FOOTER COPYRIGHT
   ============================================================ */

#sp-footer {
    background: var(--vr-heading);

    color: rgba(255,255,255,.65);

    border-top: 0;
}

#sp-footer a {
    color: rgba(255,255,255,.75);
}

#sp-footer a:hover {
    color: var(--vr-white);
}


/* ============================================================
   22. SÉLECTION DE TEXTE
   ============================================================ */

::selection {
    background: var(--vr-primary);
    color: var(--vr-white);
}


/* ============================================================
   23. FOCUS ACCESSIBILITÉ
   ============================================================ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--vr-primary);
    outline-offset: 3px;
}


/* ============================================================
   24. RESPONSIVE
   ============================================================ */

@media (max-width: 991.98px) {

    #section-id-1783618439965 {
        padding-top: 45px;
        padding-bottom: 55px;
    }

    .vbinf {
        padding: 18px 18px 0;
    }

    .vbmodroomsname {
        font-size: 15px;
    }

    .vbmodroomsdesc {
        font-size: 13px;
    }

}


@media (max-width: 767.98px) {

    #sp-header-topbar {
        display: none;
    }

    #section-id-1783618439965 {
        padding-top: 40px;
        padding-bottom: 45px;
    }

    #jpb-addon-1783618810276 .jpb-addon-title {
        font-size: 25px;
        margin-bottom: 20px;
    }

    .vbo-horizsearch-humanformat-wrap {
        border-radius: var(--vr-radius-md);

        box-shadow: var(--vr-shadow-md);
    }

    .vbmodrooms-divblock {
        flex-direction: column;

        gap: 5px;
    }

    .vbmodroomsbeds {
        font-size: 12px;
    }

    .vbmodroomsdesc {
        font-size: 13px;
        line-height: 1.6;
    }

}


/* ============================================================
   25. PETITS ÉCRANS
   ============================================================ */

@media (max-width: 575.98px) {

    .vbinf {
        padding: 16px 16px 0;
    }

    .vbmodroomsname {
        font-size: 15px;
    }

    .vbmodroomsroomcost .vbo_price {
        font-size: 19px;
    }

    .vbmodroomsview a {
        min-height: 44px;
    }

}