/* Styles par défaut pour cacher le menu sur les écrans larges */


/* Partie supérieure de la navbar avec logo et utilisateur */
.navbar-header {
    width: 100%;
    top: 0px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 20px 5px 20px;
}

.navbar-main{display:none;}



/* Actions utilisateur */
.navbar-user-actions {
    display: flex;
    align-items: center;
    
}

.navbar-user-actions li {
    list-style: none;
    margin-left: 20px;
    
}
.navbar-user-actions a {
    text-decoration: none;
    color: white;
    font-size: 1.2em;
}
/* Styles pour la partie inférieure de la navbar */

navbar-links li {
    list-style: none;
    
}





/* Responsive styles pour les écrans entre 1000px et 480px */
@media (max-width: 1000px) and (min-width: 768px) {

    .realisateur_acceuil {
        margin: auto;
        min-width: 80%;
        max-width: 80%;
        position: relative;
        margin-top: 20px;
        padding: 0 20px 0 20px ;
    }
    .carousel-navigation-real{
        display: none;
    }
    .scroll_realisateurs{
        gap: 30px;
        right: 8%
    }
    .scroll_realisateur_acceuil {
        display: flex;
        justify-content: flex-start;
        overflow-x: hidden;
        padding: 20px;
    }
    .prev, .next {
        display:none;
    }
    .hidden {
        transform: translateY(-100%); /* Déplace la navbar vers le haut pour la cacher */
        transition: transform 0.3s ease; /* Transition douce */
    }
    



    .navbar {
        display: none;
    }

    .navbar-main {
       min-width: 100%;
        background-color: rgba(12, 12, 12, 0.8); /* Couleur avec transparence */
        box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Ombre douce */
        backdrop-filter: blur(10px); /* Applique un flou sur le fond */
        -webkit-backdrop-filter: blur(10px); /* Support pour Safari */

        z-index: 1000;
        position: relative; /* Fixe la navbar en haut de l'écran */
        z-index: 1000; /* S'assure qu'elle est au-dessus des autres éléments */
        width: 100%; /* Prend toute la largeur */
        display: block; /* Affiche la navbar par défaut */
        padding-top: 0px; /* Espacement supérieur */
        transition: transform 0.3s ease, background-color 0.3s ease; /* Transition pour l'effet de déplacement et de changement de couleur */
    }
    
    /* Classe pour cacher la navbar */
    .navbar-main.hidden {
        transform: translateY(-100%); /* Déplace la navbar vers le haut pour la cacher */
        background-color: transparent; /* Assurez-vous que le fond est transparent lorsque caché */
    }
    
    


.carousel-item{min-height: 600px;
}
.lire_carousel {
    right: 5%;
}


    /* Ajustements pour aligner les liens horizontalement */
    .navbar-menu {
 
        width: 100%; /* Occupe toute la largeur */
        height: 70px;
        display: flex; /* Utiliser Flexbox */
        justify-content: center; /* Centrer horizontalement */
    }

    .navbar-links {

        max-width: 600px;
        width: 50%;
        min-width: 400px;
        display: flex; /* Aligne les liens horizontalement */
        justify-content: space-around; /* Espacement égal entre les éléments */
           gap: 20px;

        align-items: center;
        font-size: 1.2em;
    }

    .navbar-links li {
        list-style: none;
    }

    .navbar-links a {
        font-size: 1em;
        color: #F8F8F8;
        text-decoration: none;
        padding: 10px;
    }

    /* Styles pour le lien actif ou en survol */
.navbar-links li.active {
    padding: 3px;
    border-radius: 8px;
    border-bottom: 3px solid #5752D0;
    transform: scale(1.1); /* Augmente la taille de l'élément */
}

/* Styles lors du survol des éléments de la liste */
.navbar-links li:hover {
    padding: 6px;
    border-radius: 8px;
    border: 1px solid #5752D0;
    background-color: #5752D0;
    transform: scale(1.1); /* Augmente la taille de l'élément */
}



.titre_fondaffiche{
    top: 10%; /* Position finale verticale */
    left: 5%; /* Ajuste la distance depuis la gauche */
    width: 50%; /* Utilisation de 50% pour une meilleure adaptabilité */
}
.synopsis_carousel{
     top: 40%; 
}



.section_films_carousel_film {
     min-width: 85%; /* Ajustez la largeur selon vos besoins */

}


.carousel-controls_carousel_film{
    gap: 20px;
    right: 8%
}





}