@import url('https://fonts.googleapis.com/css2?family=Ruthie&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --cresta-domi-primary: #476a54;
    --cresta-domi-secondary: #a59943;
    --cresta-domi-yellow: #eec767;
    --cresta-domi-light: #f0efe6;

    /* V3*/
    --hunter-green: #476a54ff;
    --moss-green: #a59943ff;
    --flax: #f7e698ff;
    --space-cadet: #1f2041ff;
    --cool-gray: #7d84b2ff;
    --vista-blue: #6D74A4ff;
}

body {
    scroll-behavior: smooth;
    font-family: "Poppins";
}

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--cresta-domi-light);
}

::-webkit-scrollbar-thumb {
    background-color: var(--cresta-domi-primary);
    border-radius: 50px;
    transition: background-color .3s ease;
}

::-webkit-scrollbar-track {
    background: #727272;
}

/* Styles pour le header contenant l'image de fond */
body .home-header {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

body.admin-bar .home-header {
    max-height: calc(100vh - 32px);
    height: calc(100vh - 32px);
    overflow: hidden;
}

body.admin-bar .home-header-content {
    max-height: calc(100vh - 32px);
    height: calc(100vh - 32px);
}

body .home-header-content {
    position: relative;
    width: 100vw;
    /* Utilisez la largeur complète de la fenêtre d'affichage */
    height: 100dvh;
    /* Utilisez la hauteur complète de la fenêtre d'affichage */
    
    /*background-image: url('https://domi.cresta-dev.fr/wp-content/uploads/2024/10/header_background.svg');*/
    background-size: cover;
    background-position: center;
}

body .home-header-content::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #1ba8e1, #c2e8f7);
    opacity: 1; /* Adjust opacity as needed */
    z-index: -1;
}

body .home-header-content .background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    object-fit: cover;
    object-position: center;
    z-index: 2;
    transition: transform 0.3s ease-out;
    animation: fadeIn .5s ease-in-out forwards;
}

/* Styles pour le logo centré */
body .home-logo {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40vw;
    max-width: 394px;
    height: auto;
    display: block;
    /* Assurez-vous que l'élément se comporte comme un bloc */
    box-sizing: border-box;
    z-index: 3;
    transition: transform 0.3s ease-out;
    opacity: 0;
    /* Démarre avec une opacité de 0 */
    /*animation: fadeIn .5s ease-in-out forwards;*/
    /* Animation pour passer à 1 */
    /* Délai d'1 seconde pour commencer après le logo */
}

body.loaded .home-logo {
	animation: fadeIn .5s ease-in-out forwards;
}
@media (max-width: 767px) {
    body .home-logo {
        top: 45%;
        /* Ajuste la position pour s'adapter à des écrans plus petits */
        width: 80vw;
        /* Augmente la taille en fonction de la largeur de l'écran */
    }
}

@media (min-width: 767.98px) and (max-width: 1024px) {
    body .home-logo {
        top: 40%;
        /* Ajuste la position pour un écran plus large que 767px */
        width: 60vw;
        /* Taille proportionnelle à la largeur de l'écran */
    }
}

@keyframes fadeIn {
    from {
        opacity: 0.1;
    }

    to {
        opacity: 1;
    }
}

@media screen and (orientation: portrait) {
    .home-header-content {
        /* height: calc(100vh - 100px - 1rem); */
    }

    .home-logo {
        top: 40%;
        width: 65vw;
        max-width: 394px;
        height: auto;
        display: block;
        /* Assurez-vous que l'élément se comporte comme un bloc */
        box-sizing: border-box;
    }
}

/* Styles pour la "souris" animée */
body .mouse {
    width: 30px;
    height: 50px;
    border: 2px solid #fff;
    border-radius: 30px;
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    opacity: 0;
    /* Démarre avec une opacité de 0 */
    /*animation: fadeIn 2s ease-in-out forwards;*/
    /* Animation pour passer à 1 en 2s */
    /*animation-delay: .6s;*/
    /* Délai d'1.5 seconde pour commencer après le logo */
}
body.loaded .mouse {
	animation: fadeIn .5s ease-in-out forwards;
}
body.loaded .mouse::before {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    border-radius: 50%;
    opacity: 1;
    animation: wheel 2s infinite;
}

@keyframes wheel {
    to {
        opacity: 0;
        top: 30px;
    }
}

/* WELCOME */
body .welcome-right {
    position: relative;
}

body .welcome-right-image-container {
    position: unset;
    overflow: hidden;
}

body .welcome-right .welcome-right-image-container img {
    width: 100%;
    /* Prend toute la largeur du parent */
    height: 100%;
    /* Prend toute la hauteur du parent */
    object-fit: cover;
    /* Recouvre entièrement le conteneur parent sans déformer l'image */
    object-position: center;
    /* Centre l'image dans le conteneur */
    position: absolute;
    /* Permet à l'image de s'ajuster exactement à l'intérieur du parent */
    top: 0;
    left: 0;
    border-radius: 15px;

    /* Ajout de l'animation */
    animation: moveUpAndDown 8s ease-in-out infinite;
    /* Animation continue */
}

/* Définir les keyframes pour l'animation */
@keyframes moveUpAndDown {
    0% {
        transform: translateY(0);
        /* Position de départ */
    }

    50% {
        transform: translateY(-1rem);
        /* Déplacement vers le haut */
    }

    100% {
        transform: translateY(0);
        /* Retour à la position de départ */
    }
}

body .welcome-right::before {
    content: '';
    position: absolute;
    top: 2rem;
    left: -2rem;
    width: 100%;
    height: 100%;
    background-color: var(--cresta-domi-primary);
    z-index: -1;
    animation: moveUpAndDown 8s ease-in-out infinite;
    animation-delay: .5s;
}

/* Home Prestations */
body .home-prestations-container {
    position: relative;
}

body .home-prestations-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
    background-color: var(--cresta-domi-light);
    z-index: -1;
}

/* Style de la carte cliquable */
body .home-card {
    position: relative;
    /* Position relative pour les éléments enfants absolus */
    display: flex;
    width: 340px;
    /* Largeur fixe de la carte, ajustez si nécessaire */
    height: 425px;
    text-decoration: none;
    top: 0;
    transition: top .3s ease;
}

/* Style de l'image */
body .home-card img {
    width: 100%;
    display: block;
    /* Supprime l'espace sous l'image */
    object-fit: cover;
    object-position: center;
    border-radius: 15px;
}

/* Overlay pour l'icône et le bouton */
body .home-card-overlay {
    position: absolute;
    /* Position absolue pour centrer l'icône et le bouton */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Aligne les éléments verticalement */
    justify-content: flex-end;
    /* Aligne les éléments en bas */
    align-items: center;
    /* Centre les éléments horizontalement */
    border-radius: 15px;
    background-color: rgba(0, 0, 0, 0.4);
    /* Overlay foncé */
    transition: background-color 0.3s ease;
    /* Transition douce de l'overlay */
}

/* Icône centrée dans l'overlay */
body .home-card-overlay .icon {
    margin-bottom: auto;
    /* Aligne l'icône en haut de l'overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4rem;
    /* Largeur de l'icône */
    height: 4rem;
    /* Hauteur de l'icône */
    margin-top: 20px;
    /* Espacement du haut */
    background-color: var(--cool-gray);
    border-radius: 50px;
    transition: background-color .3s ease;
    position: relative;
    /* Nécessaire pour le pseudo-élément */
    overflow: hidden;
    /* Cache le débordement */
}

body .home-card-overlay .icon::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    border: 2px dashed #fff;
    transition: transform .5s ease;
    /* Transition pour la rotation */
}

body .home-card-overlay .icon svg {
    height: 2rem;
    width: 2rem;
    fill: white;
}

/* Bouton de texte en bas de l'overlay */
body .home-card-button {
    position: relative;
    font-family: "Raleway", Sans-serif;
    bottom: -2.075rem;
    background-color: #fff;
    /* Couleur de fond du bouton */
    color: var(--cool-gray);
    ;
    /* Couleur du texte du bouton */
    border: 1px solid var(--cool-gray);
    padding: 1rem 2rem;
    text-align: center;
    border-radius: 4rem;
    font-weight: bold;
    /* Texte en gras */
    font-size: 1.15rem;
    /* Taille du texte */
    width: calc(100% - 4rem);
    /* S'assure que le bouton est centré et espacé */
    box-sizing: border-box;
    /* Assure que le padding est pris en compte dans la largeur totale */
    transition: background-color .3s ease, border .3s ease;
}

body .home-card:hover {
    top: -10px;
}

body .home-card:hover .home-card-overlay .icon {
    background-color: var(--vista-blue);
}

body .home-card:hover .home-card-overlay .icon::before {
    transform: rotate(180deg);
    /* Rotation de 360 degrés */
}

body .home-card:hover .home-card-button {
    background-color: var(--vista-blue);
    /* Couleur de fond du bouton */
    border: 1px solid var(--vista-blue);
    color: white;
}

/* Effet de survol pour l'overlay */
body .home-card:hover .home-card-overlay {
    background-color: rgba(0, 0, 0, 0.25);
    /* Fonce l'overlay sur le hover */
}

/* Page chambres */
body .rooms-header {
    position: relative;
    z-index: -1;
    margin-top: -80px;
    padding: 0;
}

/* */
.fit-content {
    max-width: fit-content;
}

body .activite-list {
    position: relative;
}

body .activite-list::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    /* 50% de la hauteur du conteneur */
    opacity: 1;
}

body .activite-list.hunter-green::before {
    background-color: var(--hunter-green);
}

body .activite-list.moss-green::before {
    background-color: var(--moss-green);
}

body .activite-list.flax::before {
    background-color: var(--flax);
}

body .activite-list.space-cadet::before {
    background-color: var(--space-cadet);
}

body .activite-list.cool-gray::before {
    background-color: var(--cool-gray);
}

body .activite-list.vista-blue::before {
    background-color: var(--vista-blue);
}

/* OPENSYSTEM */

/* Styles pour le bouton de recherche avec la loupe et override des styles existants */
body .home-open-system-container a.OsMoteurBtnRecherche,
body .home-open-system-container a.OsMoteurBtnRecherche:link,
body .home-open-system-container a.OsMoteurBtnRecherche:active,
body .home-open-system-container a.OsMoteurBtnRecherche:visited,
body .home-open-system-container .btn-recherche {
    background-color: var(--cresta-domi-primary) !important;
    color: white !important;
    padding: 1rem 2rem !important;
    text-decoration: none !important;
    border-radius: 40px !important;
    font-weight: bold !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 1rem !important;
    transition: all .3s ease !important;
    text-transform: capitalize !important;
    letter-spacing: normal !important;
    display: inline-flex !important;
    /* Pour aligner l'icône et le texte */
    align-items: center !important;
    /* Alignement vertical centré */
}

/* Ajout de la loupe avant le texte du bouton */
body .home-open-system-container a.OsMoteurBtnRecherche::before,
body .home-open-system-container .btn-recherche::before {
    content: "\f002";
    /* Unicode pour la loupe dans Font Awesome */
    font-family: 'Font Awesome 5 Free' !important;
    /* Famille Font Awesome */
    font-weight: 900 !important;
    /* Style gras pour l'icône */
    margin-right: 8px !important;
    /* Espace entre la loupe et le texte */
    font-size: 1rem !important;
    /* Taille de la loupe (ajustable) */
    display: inline-block !important;
    /* Assurer l'affichage de l'icône */
    vertical-align: middle !important;
    /* Aligner l'icône avec le texte */
}

body .home-open-system-container a.OsMoteurBtnRecherche:hover {
    background-color: var(--cresta-domi-secondary) !important;
}

/* OS Chambre levant */
body.page-id-254 .OsUnicampPopIn.os-overlay.Lock .close,
body.page-id-254 .OsPanierPopIn.os-overlay.panier-resultat .close,
body.page-id-254 .OsPanierPopIn.os-overlay.Lock .close,
body.page-id-254 .OsPanierPopIn .close,
body.page-id-254 .OsPanierPopIn.os-overlay.Lock .close,
body.page-id-254 .OsProduit.api.os-overlay .close {
    background-color: #D6B1A5 !important;
}

body.page-id-254 .OsProduitRefuge .osproduitrefuge .ligneajout .btn-valider,
body.page-id-254 .OsFormulaire.os-overlay .BoutonSuivant a,
body.page-id-254 .OsFormulaire.os-overlay .BoutonSuivant a:link,
body.page-id-254 .OsFormulaire.os-overlay .BoutonSuivant a:active,
body.page-id-254 .OsFormulaire.os-overlay .BoutonSuivant a:visited,
body.page-id-254 .OsPanierPopIn.os-overlay .Bouton.BoutonAjouter a,
body.page-id-254 .OsPanierPopIn.os-overlay .Bouton.BoutonAjouter a:link,
body.page-id-254 .OsPanierPopIn.os-overlay .Bouton.BoutonAjouter a:active,
body.page-id-254 .OsPanierPopIn.os-overlay .Bouton.BoutonAjouter a:visited,
body.page-id-254 .BlocOverlayCttvert .BlocBoutons .BoutonSuivant a,
body.page-id-254 .BlocOverlayCttvert .BlocBoutons .BoutonSuivant a:link,
body.page-id-254 .BlocOverlayCttvert .BlocBoutons .BoutonSuivant a:active,
body.page-id-254 .BlocOverlayCttvert .BlocBoutons .BoutonSuivant a:visited,
body.page-id-254 .BlocOverlayCttvert .BoutonReserver a,
body.page-id-254 .BlocOverlayCttvert .BoutonReserver a:link,
body.page-id-254 .BlocOverlayCttvert .BoutonReserver a:active,
body.page-id-254 .BlocOverlayCttvert .BoutonReserver a:visited,
body.page-id-254 .OsUnicampPopIn.os-overlay .BoutonAjouter a,
body.page-id-254 .OsUnicampPopIn.os-overlay .BoutonAjouter a:link,
body.page-id-254 .OsUnicampPopIn.os-overlay .BoutonAjouter a:active,
body.page-id-254 .OsUnicampPopIn.os-overlay .BoutonAjouter a:visited,
body.page-id-254 .OsProduit.api .OsProduitPlanning .BtnReserver,
body.page-id-254 .OsProduit.api .OsProduitPlanning .BtnReserver:link,
body.page-id-254 .OsProduit.api .OsProduitPlanning .BtnReserver:active,
body.page-id-254 .OsProduit.api .OsProduitPlanning .BtnReserver:visited,
body.page-id-254 .OverlayChoixSupplements.os-overlay a.SubmitReserverChambres,
body.page-id-254 .OverlayChoixSupplements.os-overlay a.SubmitReserverChambres:link,
body.page-id-254 .OverlayChoixSupplements.os-overlay a.SubmitReserverChambres:active,
body.page-id-254 .OverlayChoixSupplements.os-overlay a.SubmitReserverChambres:visited,
body.page-id-254 .OsWProduitBillet .OsTarifBillet .btn-valider span,
body.page-id-254 .BlocMoteurResa .BlocFinalisation .BlocBoutonReserver a,
body.page-id-254 .BlocMoteurResa .BlocFinalisation .BlocBoutonReserver a:link,
body.page-id-254 .BlocMoteurResa .BlocFinalisation .BlocBoutonReserver a:active,
body.page-id-254 .BlocMoteurResa .BlocFinalisation .BlocBoutonReserver a:visited,
body.page-id-254 .OsProduit.api.OPLM .ContenuDetailLocMat .BtnReserver a,
body.page-id-254 .OsProduit.api.OPLM .ContenuDetailLocMat .BtnReserver a:link,
body.page-id-254 .OsProduit.api.OPLM .ContenuDetailLocMat .BtnReserver a:active,
body.page-id-254 .OsProduit.api.OPLM .ContenuDetailLocMat .BtnReserver a:visited,
body.page-id-254 .OsProduit.api.os-overlay.OPLM .BtnReserver a,
body.page-id-254 .OsProduit.api.os-overlay.OPLM .BtnReserver a:link,
body.page-id-254 .OsProduit.api.os-overlay.OPLM .BtnReserver a:active,
body.page-id-254 .OsProduit.api.os-overlay.OPLM .BtnReserver a:visited,
body.page-id-254 .OsProduit.api .OsMoteurResultat .ContenuDetailChambre .btn-reserver a,
body.page-id-254 .OsProduit.api .OsMoteurResultat .ContenuDetailChambre .btn-reserver a:link,
body.page-id-254 .OsProduit.api .OsMoteurResultat .ContenuDetailChambre .btn-reserver a:active,
body.page-id-254 .OsProduit.api .OsMoteurResultat .ContenuDetailChambre .btn-reserver a:visited,
body.page-id-254 .OsMoteurResultatBody .BtnReserver a,
body.page-id-254 .OsMoteurResultatBody .BtnReserver a:link,
body.page-id-254 .OsMoteurResultatBody .BtnReserver a:active,
body.page-id-254 .OsMoteurResultatBody .BtnReserver a:visited,
body.page-id-254 .BlocReserver a,
body.page-id-254 .BlocReserver a:link,
body.page-id-254 .BlocReserver a:active,
body.page-id-254 .BlocReserver a:visited,
body.page-id-254 .OsProduit.api .ContenuDetailBillet .BtnReserver a,
body.page-id-254 .OsProduit.api .ContenuDetailBillet .BtnReserver a:link,
body.page-id-254 .OsProduit.api .ContenuDetailBillet .BtnReserver a:active,
body.page-id-254 .OsProduit.api .ContenuDetailBillet .BtnReserver a:visited,
body.page-id-254 .oslisteproduitesi .btn-resa,
body.page-id-254 .osproduitesi .btn-valider {
    background-color: #D6B1A5 !important;
    color: white !important;
    padding: 1rem 2rem !important;
    text-decoration: none !important;
    border-radius: 40px !important;
    font-weight: bold !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 1rem !important;
    transition: all .3s ease !important;
    /* text-transform: capitalize !important; */
    letter-spacing: normal !important;
}


/* OS Chambre le(pon)ant */
body.page-id-422 .OsUnicampPopIn.os-overlay.Lock .close,
body.page-id-422 .OsPanierPopIn.os-overlay.panier-resultat .close,
body.page-id-422 .OsPanierPopIn.os-overlay.Lock .close,
body.page-id-422 .OsPanierPopIn .close,
body.page-id-422 .OsPanierPopIn.os-overlay.Lock .close,
body.page-id-422 .OsProduit.api.os-overlay .close {
    background-color: #8E9DCC !important;
}


body.page-id-422 .OsProduitRefuge .osproduitrefuge .ligneajout .btn-valider,
body.page-id-422 .OsFormulaire.os-overlay .BoutonSuivant a,
body.page-id-422 .OsFormulaire.os-overlay .BoutonSuivant a:link,
body.page-id-422 .OsFormulaire.os-overlay .BoutonSuivant a:active,
body.page-id-422 .OsFormulaire.os-overlay .BoutonSuivant a:visited,
body.page-id-422 .OsPanierPopIn.os-overlay .Bouton.BoutonAjouter a,
body.page-id-422 .OsPanierPopIn.os-overlay .Bouton.BoutonAjouter a:link,
body.page-id-422 .OsPanierPopIn.os-overlay .Bouton.BoutonAjouter a:active,
body.page-id-422 .OsPanierPopIn.os-overlay .Bouton.BoutonAjouter a:visited,
body.page-id-422 .BlocOverlayCttvert .BlocBoutons .BoutonSuivant a,
body.page-id-422 .BlocOverlayCttvert .BlocBoutons .BoutonSuivant a:link,
body.page-id-422 .BlocOverlayCttvert .BlocBoutons .BoutonSuivant a:active,
body.page-id-422 .BlocOverlayCttvert .BlocBoutons .BoutonSuivant a:visited,
body.page-id-422 .BlocOverlayCttvert .BoutonReserver a,
body.page-id-422 .BlocOverlayCttvert .BoutonReserver a:link,
body.page-id-422 .BlocOverlayCttvert .BoutonReserver a:active,
body.page-id-422 .BlocOverlayCttvert .BoutonReserver a:visited,
body.page-id-422 .OsUnicampPopIn.os-overlay .BoutonAjouter a,
body.page-id-422 .OsUnicampPopIn.os-overlay .BoutonAjouter a:link,
body.page-id-422 .OsUnicampPopIn.os-overlay .BoutonAjouter a:active,
body.page-id-422 .OsUnicampPopIn.os-overlay .BoutonAjouter a:visited,
body.page-id-422 .OsProduit.api .OsProduitPlanning .BtnReserver,
body.page-id-422 .OsProduit.api .OsProduitPlanning .BtnReserver:link,
body.page-id-422 .OsProduit.api .OsProduitPlanning .BtnReserver:active,
body.page-id-422 .OsProduit.api .OsProduitPlanning .BtnReserver:visited,
body.page-id-422 .OverlayChoixSupplements.os-overlay a.SubmitReserverChambres,
body.page-id-422 .OverlayChoixSupplements.os-overlay a.SubmitReserverChambres:link,
body.page-id-422 .OverlayChoixSupplements.os-overlay a.SubmitReserverChambres:active,
body.page-id-422 .OverlayChoixSupplements.os-overlay a.SubmitReserverChambres:visited,
body.page-id-422 .OsWProduitBillet .OsTarifBillet .btn-valider span,
body.page-id-422 .BlocMoteurResa .BlocFinalisation .BlocBoutonReserver a,
body.page-id-422 .BlocMoteurResa .BlocFinalisation .BlocBoutonReserver a:link,
body.page-id-422 .BlocMoteurResa .BlocFinalisation .BlocBoutonReserver a:active,
body.page-id-422 .BlocMoteurResa .BlocFinalisation .BlocBoutonReserver a:visited,
body.page-id-422 .OsProduit.api.OPLM .ContenuDetailLocMat .BtnReserver a,
body.page-id-422 .OsProduit.api.OPLM .ContenuDetailLocMat .BtnReserver a:link,
body.page-id-422 .OsProduit.api.OPLM .ContenuDetailLocMat .BtnReserver a:active,
body.page-id-422 .OsProduit.api.OPLM .ContenuDetailLocMat .BtnReserver a:visited,
body.page-id-422 .OsProduit.api.os-overlay.OPLM .BtnReserver a,
body.page-id-422 .OsProduit.api.os-overlay.OPLM .BtnReserver a:link,
body.page-id-422 .OsProduit.api.os-overlay.OPLM .BtnReserver a:active,
body.page-id-422 .OsProduit.api.os-overlay.OPLM .BtnReserver a:visited,
body.page-id-422 .OsProduit.api .OsMoteurResultat .ContenuDetailChambre .btn-reserver a,
body.page-id-422 .OsProduit.api .OsMoteurResultat .ContenuDetailChambre .btn-reserver a:link,
body.page-id-422 .OsProduit.api .OsMoteurResultat .ContenuDetailChambre .btn-reserver a:active,
body.page-id-422 .OsProduit.api .OsMoteurResultat .ContenuDetailChambre .btn-reserver a:visited,
body.page-id-422 .OsMoteurResultatBody .BtnReserver a,
body.page-id-422 .OsMoteurResultatBody .BtnReserver a:link,
body.page-id-422 .OsMoteurResultatBody .BtnReserver a:active,
body.page-id-422 .OsMoteurResultatBody .BtnReserver a:visited,
body.page-id-422 .BlocReserver a,
body.page-id-422 .BlocReserver a:link,
body.page-id-422 .BlocReserver a:active,
body.page-id-422 .BlocReserver a:visited,
body.page-id-422 .OsProduit.api .ContenuDetailBillet .BtnReserver a,
body.page-id-422 .OsProduit.api .ContenuDetailBillet .BtnReserver a:link,
body.page-id-422 .OsProduit.api .ContenuDetailBillet .BtnReserver a:active,
body.page-id-422 .OsProduit.api .ContenuDetailBillet .BtnReserver a:visited,
body.page-id-422 .oslisteproduitesi .btn-resa,
body.page-id-422 .osproduitesi .btn-valider {
    background-color: #8E9DCC !important;
    color: white !important;
    padding: 1rem 2rem !important;
    text-decoration: none !important;
    border-radius: 40px !important;
    font-weight: bold !important;
    font-family: 'Raleway', sans-serif !important;
    font-size: 1rem !important;
    transition: all .3s ease !important;
    /* text-transform: capitalize !important; */
    letter-spacing: normal !important;
}

.OsUnicampPopIn.os-overlay.Lock .close,
.OsPanierPopIn.os-overlay.panier-resultat .close,
.OsPanierPopIn.os-overlay.Lock .close,
.OsPanierPopIn .close,
.os-overlay ,
.OsPanierPopIn.os-overlay.Lock .close,
.OsProduit.api.os-overlay .close {
    -webkit-border-radius: 30px 30px 0 0 !important;
    border-radius: 30px 30px 0 0 !important;
    background-position: right 25px center !important;
}

.OsPanierPopIn.os-overlay,
.OsUnicampPopIn.os-overlay,
.os-overlay,
.OsProduit.api.os-overlay {
    -webkit-border-radius: 0 0 30px 30px !important;
    border-radius: 0 0 30px 30px !important;
}

body .cresta-dispo-wrapper .OsProduit.api .OsProduitPlanning #OsPlanning.OptPlanningLigne .OsPlanningDatePicker,
body .cresta-dispo-wrapper .OsProduit.api .OsProduitPlanning #OsPlanning.OptPlanningLigne .OsPlanningForm{
	padding: 1rem;
}

body .open-system-cresta-wrapper {
    width: 100%;
}

body .cresta-dispo-wrapper {
	max-width: 1140px;
    margin: auto;
}
/* CHAMBRES MODAL */
body.no-scroll {
  overflow: hidden;
}

  body .cresta-domi-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 99999;
  transition: opacity 0.3s ease;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
}

body #cresta-domi-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  font-size: 3rem;
  z-index: 99999999;
  cursor: pointer;
  color: white;
  border: none;
  opacity: 0.7;
  transition: opacity .3s ease; 
}
body #cresta-domi-close:hover {
	opacity: 1;
}
body .cresta-domi-container {
	display: flex;
	width: 70%;
	justify-content: space-between;
	padding: 2rem;
	gap: 2rem;
}

body .cresta-domi-subcontainer {
  flex: 1;
  text-align: center;
}
body .cresta-domi-subcontainer:hover {
    cursor: pointer;
}

body .cresta-domi-image {
  width: 100%;
  height: auto;
  border-radius: 25px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  scale: 1;
  transition: all .3s ease; 
}

body .cresta-domi-subtitle {
  font-size: 1.85rem;
	font-weight: 600;
	opacity: .85;
  margin-top: 1rem;
  font-family: "Raleway", sans-serif;
  color: #ddd;
	transition: all .4s ease; 
}

body .cresta-domi-subcontainer:hover .cresta-domi-subtitle {
	color: #D6B1A5;
}


body .cresta-domi-subcontainer:hover .cresta-domi-subtitle {
	color: #8E9DCC;
}
body .cresta-domi-subcontainer:hover .cresta-domi-subtitle {
	/*font-size: 1.95rem*/
	opacity: 1;
	
}
body .cresta-domi-subcontainer:hover .cresta-domi-image {
  scale: 1.025;
}
body .cresta-domi-modal-title-container {
  width: 100%;
  text-align: center;
  padding: 1rem 0;
  z-index: 999999;
}

body h2.cresta-domi-modal-title {
  font-size: 3rem;
  color: #fff;
  font-family: "Philosopher", sans-serif;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  white-space: nowrap; /* Empêche les sauts de ligne */
}
/* ============================
   En-tête du site (Navigation)
============================ */
body .site-header {
    position: fixed;
    width: 90%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 25px;
    box-shadow: rgba(0, 0, 0, 0) 0 0 0;
    background: #ffffff;
    color: #222222;
    z-index: 1000;
    margin-top: 0.5rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 3rem;
}

/* Ajuste la position de l'en-tête si la barre d'administration est présente */
body.admin-bar .site-header {
    top: 32px;
    /* Ajuste pour la hauteur de la barre d'admin sur les écrans de bureau */
}

@media screen and (max-width: 782px) {
    body #wpadminbar {
        position: fixed;
    }
    body.admin-bar .site-header {
        top: 46px;
        /* Ajuste pour la hauteur de la barre d'admin sur les petits écrans */
    }
}

/* Styles lorsque l'en-tête a été défilé */
body .site-header.scrolled {
    width: 100%;
    border-radius: 0 0 12px 12px;
    margin-top: 0;
    box-shadow: rgba(0, 0, 0, 0.2) 0 1px 6px;
}

/* Styles pour l'en-tête lorsqu'il est ouvert sur mobile/tablette */
@media screen and (max-width: 1385px) {
    body .site-logo {
        display: flex;
        justify-content: center;
    }
    body .site-header.nav-open {
        border-radius: 25px 25px 0 0;
    }
}

/* Logo du site */
body .site-logo {
    flex: 1;
}

body .site-logo img {
    height: 32px;
    transition: all 0.3s ease;
    transform: scale(1);
}

body .site-logo img:hover {
    transform: scale(1.035);
}

/* Logo réduit après défilement */
body .site-header.scrolled .site-logo img {
    height: 28px;
}

/* Navigation principale */
body .main-navigation {
    flex: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

body .main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 3rem;
}

body .main-navigation ul li {
    margin: 0 15px;
    position: relative;
}

body .main-navigation ul li a {
    color: var(--cresta-domi-primary);
    text-decoration: none;
    font-weight: bold;
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    transition: color 0.3s ease;
    position: relative;
    display: block;
}

body .main-navigation ul li a:hover {
    color: var(--moss-green);
}

/* Sous-menu (styles généraux, seront modifiés dans les media queries) */
body .main-navigation ul li ul.sub-menu {
    display: none;
    position: absolute;
    transform: translateX(-50%);
    width: 280px;
    border-radius: 0 0 25px 25px;
    background: #ffffff;
    padding: 10px;
    list-style: none;
    left: 50%;
    top: 100%;
    z-index: 999;
    padding-top: 25px;
}

body .main-navigation ul li ul.sub-menu li {
    position: relative;
    margin: 0;
}

body .main-navigation ul li ul.sub-menu li a {
    color: var(--cresta-domi-primary);
    padding: 10px;
    display: block;
    transition: color 0.3s ease;
}

body .main-navigation ul li ul.sub-menu li a:hover {
    color: var(--cresta-domi-secondary);
}

/* Icône de chevron pour les sous-menus */
body .main-navigation ul li.menu-item-has-children > a::after {
    content: "\f078"; /* Font Awesome fa-chevron-down */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    display: inline-block;
    margin-left: 8px;
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

body .main-navigation ul li.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* Bouton de réservation */
body .reserve-btn {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

body .reserve-btn a {
    background-color: var(--cresta-domi-primary);
    color: white;
    padding: 1rem 2rem;
    text-decoration: none;
    border-radius: 40px;
    font-weight: bold;
    font-family: 'Raleway', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
}

body .reserve-btn a i {
    padding-right: 0.5rem;
}

body .reserve-btn a:hover {
    background-color: var(--cresta-domi-secondary);
}

/* ============================
   Swiper (Carrousel)
============================ */
body .swiper-container {
    overflow-x: hidden;
}

body .swiper-button-next::after,
body .swiper-button-prev::after {
    content: "";
}

/* Navigation à l'intérieur du swiper */
body .swiper-navigation-inside .swiper-button-next,
body .swiper-navigation-inside .swiper-button-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
}

body .swiper-navigation-inside .swiper-button-next {
    right: 10px;
}

body .swiper-navigation-inside .swiper-button-prev {
    left: 10px;
}

/* Navigation à l'extérieur du swiper */
body .swiper-navigation-outside .swiper-button-next,
body .swiper-navigation-outside .swiper-button-prev {
    position: relative;
    margin-top: 20px;
    display: inline-block;
    top: auto;
    transform: none;
}

body .swiper-navigation-outside {
    text-align: center;
}

/* Cartes du swiper */
body .swiper-card {
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 20px;
    transition: transform 0.3s ease;
}

body .swiper-card:hover {
    transform: translateY(-10px);
}

body .swiper-card-image {
    height: 250px;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    margin-bottom: 20px;
}

body .swiper-card-content {
    padding: 15px;
}

body .swiper-card-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

body .swiper-card-locality {
    font-size: 14px;
    font-weight: 500;
    color: #888;
    margin-bottom: 15px;
}

body .swiper-card-description {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

body .swiper-card-link {
    display: inline-block;
    padding: 10px 20px;
    background-color: #ccc;
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    transition: background-color 0.3s ease;
}

body .swiper-card-link:hover {
    background-color: #333;
}

/* Pagination du swiper */
body .swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
    height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
    display: inline-block;
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    background: white;
    opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
}

body .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background: white;
    opacity: 1;
}

/* ============================
   Menu Hamburger (Mobile)
============================ */
body .hamburger {
    display: none;
    cursor: pointer;
    font-size: 24px;
}

body .hamburger i {
    color: var(--cresta-domi-primary);
}

/* ============================
   Responsive (Petits écrans et Grand écran)
============================ */

/* Styles pour les petits écrans */
@media screen and (max-width: 1385px) {
    /* Masquer la navigation principale et afficher le hamburger */
    body .main-navigation {
        display: none;
    }

    body .hamburger {
        display: block;
    }

    /* Menu mobile ouvert */
    body .main-navigation.open {
        display: flex;
        position: absolute;
        top: 68px;
        left: 0;
        width: 100%;
        background: #ffffff;
        flex-direction: column;
        align-items: center;
        padding: 2rem;
        border-radius: 0 0 25px 25px;
    }

    body .main-navigation.open ul {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    body .main-navigation.open ul li {
        margin: 0;
        width: 100%;
    }

    /* Masquer le bouton de réservation par défaut et l'afficher dans le menu ouvert */
    body .reserve-btn {
        display: none;
    }

    body .main-navigation.open .reserve-btn {
        display: block;
        margin-top: 2rem;
    }

    body .main-navigation.open .reserve-btn a {
        width: 100%;
        text-align: center;
        padding: 0.75rem;
    }

    /* Sous-menus dans le menu mobile */
    body .main-navigation ul li ul.sub-menu {
        display: none;
        opacity: 0;
        position: static; /* Position statique pour éviter le décalage */
        transform: none;
        width: 100%;
        border-radius: 0;
        background: none;
        padding-left: 0; /* Supprimer l'indentation */
        transition: all 0.3s ease;
    }

    /* Affiche les sous-menus lorsque le parent est cliqué */
    body .main-navigation ul li.menu-item-has-children.open > ul.sub-menu {
        display: block;
        opacity: 1;
    }

    /* Ajuster l'icône de chevron pour refléter l'état ouvert/fermé */
    body .main-navigation ul li.menu-item-has-children > a::after {
        transform: rotate(0deg);
    }

    body .main-navigation ul li.menu-item-has-children.open > a::after {
        transform: rotate(180deg);
    }

    /* Optionnel : Ajouter un indicateur pour les éléments avec sous-menu */
    body .main-navigation ul li.menu-item-has-children > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Indentation pour les sous-menus */
    body .main-navigation ul li ul.sub-menu li a {
        padding-left: 0; /* Pas d'indentation pour alignement */
    }

    /* Appliquer un border-radius spécifique à l'en-tête lorsqu'il est ouvert */
    body .site-header.nav-open {
        border-radius: 25px 25px 0 0;
    }
}

/* Styles pour les grands écrans */
@media screen and (min-width: 1386px) {
    /* Réinitialiser les styles des sous-menus pour les grands écrans */
    body .main-navigation ul li ul.sub-menu {
        display: none;
        position: absolute;
        transform: translateX(-50%);
        width: 280px;
        border-radius: 0 0 25px 25px;
        background: #ffffff;
        padding: 10px;
        list-style: none;
        left: 50%;
        top: 100%;
        z-index: 999;
        padding-top: 25px;
    }

    /* Afficher les sous-menus au survol */
    body .main-navigation ul li:hover > ul.sub-menu {
        display: block;
        opacity: 1;
        transition: all 0.3s ease;
    }

    /* Rotation de l'icône de chevron sur le hover */
    body .main-navigation ul li.menu-item-has-children:hover > a::after {
        transform: rotate(180deg);
    }
}