/* ==========================================================================
   HEADER STYLES
   ========================================================================== */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #000; /* Couleur de fond du header */
    padding: 20px 40px; /* Espacement intérieur haut/bas et gauche/droite */
    /* Fixe le header en haut de la fenêtre */
    width: 100%; /* Prend toute la largeur de la fenêtre */
    z-index: 1000; /* Assure qu'il est au-dessus des autres éléments */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur les petits écrans */
}

/* LOGO */
.logo {
    font-family: 'Georgia', serif;
    font-size: 30px;
    color: #fff; /* Couleur du texte du logo */
}

/* ==========================================================================
   NAVIGATION DESKTOP
   ========================================================================== */

.nav-desktop {
    display: none; /* Caché par défaut sur les petits écrans */
    flex-direction: column; /* Alignement vertical des liens en mode mobile */
    gap: 30px; /* Espacement entre les liens en mode mobile */
    background-color: #000; /* Couleur de fond de la navigation en mode mobile */
    position: absolute; /* Positionné absolument par rapport au header */
    top: 80px; /* Positionné sous le header en mode mobile */
    left: 0;
    width: 100%;
    text-align: center;
    padding: 20px 0;
    z-index: 1000; /* Assure qu'il est au-dessus du contenu */
}

.nav-desktop.show {
    display: flex; /* Affiche la navigation en mode mobile (toggle) */
}

.nav-desktop a {
    color: #fff; /* Couleur des liens */
    text-decoration: none;
    margin: 0 15px; /* Espacement horizontal des liens en mode desktop */
    font-weight: 500;
    transition: color 0.3s ease; /* Animation de la couleur au survol */
}

.nav-desktop a:hover {
    color: #f0b400; /* Couleur des liens au survol */
}

/* ==========================================================================
   BOUTON HEADER (RÉSERVER)
   ========================================================================== */

.btn-header {
    display: none; /* Caché par défaut sur les petits écrans */
    background-color: #f0b400; /* Couleur de fond du bouton */
    color: black; /* Couleur du texte du bouton */
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
}

.nav-desktop.show + .btn-header {
    display: inline-block; /* Affiche le bouton en mode mobile (après la nav) */
}

/* ==========================================================================
   MENU BURGER ICON
   ========================================================================== */

.menu-toggle {
    display: flex; /* Affiche l'icône burger sur les petits écrans */
    flex-direction: column;
    cursor: pointer;
    z-index: 1100; /* Assure qu'il est au-dessus du menu overlay */
}

.menu-toggle span {

    height: 3px;
    width: 25px;
    background: white;
    margin: 4px 0;
    transition: 0.4s; /* Animation des barres du burger */
}

/* ANIMATION BURGER EN CROIX (QUAND ACTIF) */
.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ==========================================================================
   MENU BURGER FULLPAGE OVERLAY
   ========================================================================== */

#menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    background-color: #111; /* Couleur de fond de l'overlay */
    display: none; /* Caché par défaut */
    z-index: 2000; /* Assure qu'il est au-dessus du contenu */
    flex-direction: row;
}

/* QUAND ACTIF */
#menu-overlay.show {
    display: flex; /* Affiche l'overlay */
}

/* MENU À GAUCHE (LIENS) */
.menu-left {
    margin: 150px 50px; /* Espacement autour des liens */
    width: 33.33%;
    padding: 80px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px; /* Espacement entre les liens dans l'overlay */
}

.menu-left a {
    font-size: 36px;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.menu-left a:hover {
    color: #f0b400;
}
/* ==========================================================================
   CARROUSEL STYLES
   ========================================================================== */

.splide {
    position: relative;
    width: 100%;
    max-width: 100%; /* Largeur maximale du carrousel */
    margin: auto; /* Centrer le carrousel */
    padding-left: 0px; /* Ajout d'une marge à gauche */
    padding-right: 100px; /* Ajout d'une marge à droite */
}

.splide__slide {
    height: 100%; /* Hauteur de chaque slide égale à 100% du carrousel */
}

.splide__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Pour que l'image couvre bien la slide */
    border-radius: 10%;

}

/* Flèches de navigation */
.splide__arrow {
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 15px ;
    border: none;
    cursor: pointer;
    z-index: 2;
}

.splide__arrow--prev {
    left: 10px;
}

.splide__arrow--next {
    right: 10px;
}

.splide__arrow:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* ==========================================================================
   RESPONSIVE CARROUSEL (TABLETTES ET SMARTPHONES)
   ========================================================================== */

@media (max-width: 768px) {
    .splide {
        width: 100%;
        max-width: none; /* Enlève la largeur maximale pour mobile/tablette */
    }

    .splide__slide {
        height: 300px; /* Réduit la hauteur du carrousel sur les petits écrans */
    }
}
.close-menu {
    font-size: 40px;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    color: #fff; /* couleur de la croix */
    z-index: 10;
}

#menu-overlay.open {
    display: block; /* Pour afficher le menu */
}

#menu-overlay {
    display: none; /* Par défaut, le menu est caché */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   RESPONSIVE NAVIGATION (TABLETTES ET SMARTPHONES)
   ========================================================================== */

@media (max-width: 768px) {
    header {
        justify-content: space-between; /* Aligne le premier et le dernier élément sur la ligne */
        padding: 15px 20px;
    }

    .nav-desktop {
        top: 70px; /* Ajuste la position sous le header réduit */
    }

    .menu-toggle {
        display: flex; /* Affiche l'icône burger */


        .btn-header {
            display: none; /* Cache le bouton "Réserver" en mode mobile (peut être réintégré dans le menu overlay) */
        }
    }

    .header-right {
        display: flex;
        align-items: center;
        margin-left: auto; /* Pousse à droite */
        gap: 20px;
    }
}