/* --- STRUCTURE GLOBALE --- */
#primary {
    width: 100vw;
}
.desktop {
display: contents;
}
.mobile {
display: none;
}
.main-content {
margin-top: 80px;
margin-bottom: 80px;
max-width: 1080px;
margin-left: auto;
margin-right: auto;
}

.main-content-txt {
    margin-top: 120px;
    margin-bottom: 120px;
    max-width: 850px;
    margin-left: auto;
    margin-right: auto;
}

.main-content-center {
    text-align: center;
}
/* État initial pour tous les éléments à animer */
.full-content-centre, .main-content, .main-map {
    opacity: 0;
    transform: translateY(20px);
    will-change: opacity, transform;
}

/* La classe que le JS va ajouter */
.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.full-slider {
width: 100%;
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
background-color: #111;
height: 100vh;
height: 100svh;
transition: height 2s cubic-bezier(0.19, 1, 0.22, 1);
animation: slideDown 2s cubic-bezier(0.19, 1, 0.22, 1) 0.8s forwards;
}

/* Pseudo-élément avec Zoom + Opacité */
.full-slider::before {
    content: "";
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    opacity: 0.8; /* Ton réglage d'opacité */
    z-index: 1;
    
    /* Ajout de l'animation de zoom */
    animation: zoomBackground 20s ease-in-out infinite alternate;
}

.full-content-scrool {
    position: absolute;
    bottom: 30px; /* Distance par rapport au bas de l'écran */
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
        transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 1;
}
/* La classe ajoutée par le JS */
.full-content-scrool.is-hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(20px); /* Légère translation vers le bas */
    pointer-events: none; /* Empêche de cliquer dessus une fois invisible */
}
.arrow {
    width: 15px;
    height: 15px;
    border-right: 2px solid #ffffff; /* Couleur de la flèche */
    border-bottom: 2px solid #ffffff;
    transform: rotate(45deg);
    animation: scroll-arrow 2s infinite;
}

@keyframes scroll-arrow {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-10px, -10px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(10px, 10px);
    }
}

/* On s'assure que le contenu est bien visible au-dessus de l'image */
.full-content-centre {
    position: relative;
    z-index: 2; /* Supérieur au z-index du ::before */
    text-align: center;
}

/* L'animation de zoom avant/arrière */
@keyframes zoomBackground {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.12); /* Zoom léger de 12% */
    }
}
.full-content-centre {
    position: relative;
    z-index: 9;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.full-content-centre img {
height: auto;
width: 300px;
}

.full-content-centre p {
    color: #fff;
    margin-top: 15px;
}

/* --- SECTION HISTOIRE (DEUX COLONNES) --- */
.main-story {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colonnes égales 50/50 */
    align-items: stretch; /* Les deux colonnes font la même hauteur */
}

.main-story-photo {
position: relative;
width: 100%;
height: 100%;
min-height: 650px;
overflow: hidden;
background: #111;
}

.main-story-photo .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1.5s ease-in-out;
z-index: 1;
order: 1;
}

.main-story-photo .slide.active {
    opacity: 1;
    z-index: 2;
}
.main-story-photo-credit {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 7;
mix-blend-mode: difference;
}
.main-story-photo-credit p{
    color: #fff;
    padding: 0px;
    margin: 0px;
    font-size: 11px;
}
.main-story-txt {
background-color: #F1E6DE;
padding: 60px;
display: flex;
flex-direction: column;
justify-content: center;
order: 2;
border-radius: 0px 5px 5px 0px;
}

/* --- GALERIE & AUTRES --- */
.main-galerie {
    background-color: #eeff00;
    width: 100%;
    min-height: 300px;
    margin-bottom: 80px;
}

/* --- SECTION MAP --- */
.main-map {
    position: relative;
    width: 100vw;
    height: 520px;
    overflow: hidden; /* Important pour masquer le débordement du zoom */
    background-color: #eeeeee;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* On crée un calque pour le fond */
.main-map::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background-image: var(--bg-map);
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease; /* Animation fluide */
    pointer-events: none; /* Pour que le clic traverse jusqu'au contenu */
}

/* Effet au survol : on agrandit le calque de fond */
.main-map:hover::before {
    transform: scale(1.01); /* Ajustez la valeur (1.05, 1.1, etc.) */
}

/* On s'assure que le contenu reste au-dessus du fond */
.main-map-center {
    position: relative;
    z-index: 2;
}
.main-map-center {
position: relative;
z-index: 2;
text-align: center;
}
.reservation {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999; /* Au-dessus de tout */
    background-color: #F1E6DE;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* État caché par défaut */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

/* État actif quand on clique sur Réserver */
.reservation.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.reservation-content {
    text-align: center;
}

/* Si la maintenance est active, on force l'affichage */
.reservation.is-maintenance-active {
    display: flex !important; /* Force l'affichage si vous utilisez display: none */
    opacity: 1 !important;    /* Force l'opacité si vous utilisez une transition */
    visibility: visible !important;
    pointer-events: all !important;
}

/* Optionnel : masquer le bouton de fermeture en mode maintenance 
   pour que l'utilisateur ne puisse pas quitter l'écran */
.reservation.is-maintenance-active .close-overlay {
    display: none;
}

.infos-reserver{
    margin-top: 40px;
}


.close-reservation span:first-child { transform: rotate(45deg); }
.close-reservation span:last-child { transform: rotate(-45deg); }

.close-reservation:hover span { transform: scale(1.1) rotate(0deg); } /* Effet au survol */


.carte-jour {
width: 100%;
background-color: #111;
overflow-y: auto;
}

.overlay-menu{
width: 100%;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #111;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
cursor: pointer;
overflow-y: auto;
}
.overlay-menu.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.overlay-menu .carte-content {
padding: 0px 0;
justify-content: center;
}
.overlay-content {
    text-align: center;
    cursor: default; /* Remet le curseur normal sur le contenu */
}

/* Style commun pour le bouton fermer */
.close-overlay {
position: fixed;
top: 20px;
right: 40px;
width: 30px;
height: 30px;
cursor: pointer;
z-index: 1;
mix-blend-mode: difference;
}
.close-overlay span {
position: absolute;
top: 15px;
width: 100%;
height: 1px;
background-color: #fff;
mix-blend-mode: difference;
}

.close-overlay span:first-child { transform: rotate(45deg); }
.close-overlay span:last-child { transform: rotate(-45deg); }