.mobile-navbar {
    display: none; /* Cacher le menu par défaut */
}

/* Styles pour le menu fixe en bas de page uniquement sur les écrans mobiles */
@media (max-width: 768px) {
    body {
        font-family: Manrope, sans-serif; /* Utiliser une police sans-serif propre */
        line-height: 1.6; /* Augmenter l'interligne pour la lisibilité */
        color: rgba(248, 248, 248, 1);
        padding: 0; /* Retirer le padding autour du corps */
    
        /* Nouveau background */
        background:
        conic-gradient(from 135deg,rgba(35, 41, 59, 0.05) 90deg,#0000 0) 80px calc(80px/2),
        conic-gradient(from 135deg,#0f1014 90deg,#0000 0),
        conic-gradient(from 135deg at 50% 0,rgb(10 23 64 / 5%) 90deg,#0000 0) #0f1014;
    background-size: 100px 58px;
    min-height: 100vh; /* S'assure que le body prend toute la hauteur de la vue */
    display: flex;
    flex-direction: column; /* Permet de positionner le footer en bas */
    
    }
.fog-left,
.fog-right{display:none;}
    .titre_div_realisateur{
        display: none;
    }
    
    .realisateur_acceuil {
        margin: auto;
        min-width: 95%;
        max-width: 95%;
        position: relative;
        margin-top: 20px;
        padding: 0 20px 0 20px ;
    }
    .navbar{
        display: none;
    }
    .div_retangle_mobile{
        width:100%;
        height: 40px;
        background-color: rgba(15, 16, 20, 1);
    }
    /* Navbar */
/* Conteneur principal de la navbar mobile */
    
.mobile-navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    z-index: 1000;
    background-color: #0f1014;
    transition: padding 0.3s ease, border-bottom 0.3s ease; /* Ajout d'une transition pour padding et border-bottom */
}

.carousel-item {
    transition: bottom 0.5s ease; /* Transition pour l'effet */
    min-height: 250px;
}

.carousel-item.at-top {
    bottom: 10px; /* Positionne à 10px du bas uniquement quand on est en haut */
}


/* Section centrale avec les liens Accueil, Films, Genres */
.center-menu {
    display: flex;
    justify-content: center;
    flex-grow: 1;
}

.menu-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    gap: 30px;
    padding: 15px 30px;
    transition: background-color 0.3s ease, border 0.3s ease; /* Ajout d'une transition pour background et border */
}
.fixed-position {
    position: fixed;
    top: 0;
}

.menu-item {
    list-style: none;
    transition: all 0.2s ease;
}

.menu-item a {
    color: rgba(248, 248, 248, 1);
    text-decoration: none;
    font-size: 1.3em;
}

.menu-item.active {
    border-radius: 8px;
    padding-left: 8px;
    padding-right: 8px;
    border-bottom: 3px solid #5752D0;
    transform: scale(1.1);
}

.menu-item:hover {
    background-color: #5752D0;
    border-radius: 8px;
    padding: 8px;
    transform: scale(1.1);
}

/* Style pour le menu hamburger */
.hamburger-menu {
    position: relative;
    right: 12px;
    z-index: 1; /* Assure que le menu est au-dessus des autres éléments */
}

/* Style pour l'icône du hamburger */
.hamburger-icon {
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

/* Les barres du hamburger */
.bar {
    width: 30px; /* Largeur des barres */
    height: 4px; /* Épaisseur des barres */
    background-color: #FFF; /* Couleur des barres */
    margin: 3px 0; /* Espace entre les barres */
    transition: all 0.3s ease; /* Transition pour un effet fluide */
}

/* Style pour le fond transparent */
.overlay {
    display: none; /* Cacher par défaut */
    position: fixed; /* Positionnement fixe */
    top: 0;
    left: 0;
    width: 100%; /* Prend toute la largeur */
    height: 100vh; /* Prend toute la hauteur de la fenêtre */
    background-color: rgba(0, 0, 0, 0.7); /* Couleur de fond noir transparent */
    z-index: 999; /* Doit être au-dessus de tout sauf le menu */
}

/* Style pour le menu déroulant */
.dropdown-content {
    display: none; /* Cacher par défaut */
    position: fixed; /* Positionnement fixe */
    right: 0; /* Aligné à droite */
    top: 0; /* Aligné en haut */
    height: 100vh; /* Hauteur de la fenêtre */
    width: 65%; /* Largeur du menu */
    background-color: #0F1014; /* Couleur de fond du menu */
    border-left: 3px solid #5752D0; /* Bordure de gauche */
    z-index: 1000; /* Au-dessus des autres contenus */
    transform: translateX(100%); /* Position hors de l'écran à droite */
    transition: transform 0.5s ease; /* Transition pour le déploiement */
}

/* Style pour l'affichage du menu déroulant */
.dropdown-content.show {
    display: block; /* Affiche le menu */
    transform: translateX(0); /* Déplace le menu pour l'afficher */
}

/* Style pour les éléments de la liste dans le menu */
.dropdown-content ul {
  
    list-style-type: none; /* Enlève les puces */
    padding: 0;
    margin-top: 50%;
}

/* Style pour les éléments de la liste */
.dropdown-content ul li {
    padding: 15px 20px; /* Espace à l'intérieur des éléments */
    text-align: left; /* Alignement à gauche */
}

/* Liens du menu */
.dropdown-content ul li a {
    color: #FFF; /* Couleur des liens */
    text-decoration: none; /* Enlève le soulignement */
    display: flex; /* Utilisation de flex pour centrer les images */
    align-items: center; /* Aligne verticalement */
}

/* Style pour les images des liens */
.dropdown-content ul li a img {
    width: 50px; /* Largeur des images */
    height: 50px; /* Hauteur des images */
    border-radius: 50%; /* Bords arrondis */
    margin-right: 20px; /* Espace à droite des images */
}

/* Couleur de fond au survol des liens */
.dropdown-content ul li a:hover {
    background-color: #5752D0; /* Couleur au survol */
}

/* Style pour le bouton de fermeture */
.close-btn {
    position: absolute; /* Positionnement absolu par rapport au menu */
    top: 20px; /* Espace en haut */
    right: 20px; /* Espace à droite */
    background: none; /* Pas de fond */
    border: none; /* Pas de bordure */
    color: #FFF; /* Couleur du texte */
    font-size: 24px; /* Taille du texte */
    cursor: pointer; /* Curseur de pointeur */
    z-index: 1001; /* Au-dessus du contenu */
}
.lecture_carousel {
    position: relative; /* Position par rapport au conteneur parent */
    width: 35px; /* Largeur de l'image de lecture */
    height: auto; /* Garde les proportions */
    padding-left: 10px;
    transition: transform 0.3s, filter 0.3s; /* Ajoute une animation douce pour l'effet de survol */
}

.no-scroll {
    overflow: hidden; /* Masque le défilement de la div parente */
}

.lire_carousel {
    gap: 10px; /* Espacement entre les éléments */
}

.trailer_carousel, .favori_carousel {
    cursor: pointer;
    background-color: #fff;
    border-radius: 10px;
    padding: 8px;
    position: relative; /* Position par rapport au conteneur parent */
    width: 45px; /* Largeur de l'image de trailer */
    height: auto; /* Garde les proportions */
    transition: transform 0.3s, filter 0.3s; /* Ajoute une animation douce pour l'effet de survol */
}


.film-affiche {
    min-width: 140px;
    width: 120px;
    max-width: 2000px;
    height: 200px;
    border-radius: 0px;
    object-fit: cover;
    overflow:hidden;
}

#film-container {
    overflow-x: auto; /* Autoriser le défilement horizontal */
    white-space: nowrap; /* Pour que les enfants ne se mettent pas à la ligne */
}

    .lire_carousel{
        right: 10px;
    }
    .lecture_carousel_back span{
        display: none;
    }
    
    .scroll_realisateur_acceuil {
        width: 98%;
        display: flex;
        justify-content: flex-start;
        overflow-x: hidden;
    }
    .scroll_realisateurs{
        display: none;
    }
    .prev, .next{
        display: none;
    }
    .titre_fondaffiche {
            top: 30%; /* Position finale verticale */
        left: 3%; /* Ajuste la distance depuis la gauche */
        max-width: 190px;
        min-width: 100px;
        max-height:100px;
        width: 50%; /* Utilisation de 50% pour une meilleure adaptabilité */
    }
    .fondaffiche {
    width: 100%;
    min-height: 100%;
    }

    .section_films_carousel_film{
        margin-top: 0px;
        margin-right: 0px;
        padding-right: 5px;
        min-width: 98%;
    }

    .synopsis_carousel{
        display: none;
    }



.carousel_film {
   width: auto;
   transition: transform 0.3s ease; /* Transition pour la mise à l'échelle */
}

    /*Réalisateur css Acceuil */
    .realisateur-nom {
        padding-left: 10px;
        display: block;
        text-align: start;
        font-size: 0.8em;
    }
    .realisateur-photo {
        width: 120px;
        height: 100px;
        border-radius: 5px;
        object-fit: cover;
    }

.boite_carousel_film{
    margin-top: 5px;

}

.favori-center-titre{
    margin-bottom: 40px;
}
.carousel-dots{
    display: none;
}
.titre_section_carousel_film{
    font-size: 1.2em;
}

.film-titre_carousel_film{
    display: none;
}




.carousel-controls_carousel_film{
    display:none;
}
    


.film-overlay {display: none;}

.carousel_film:hover .film-overlay {
 display: none;}
.pagination-mobile{
    display: flex;;
    align-items: center;
    justify-content: center;
}
.pagination{
        flex-wrap: wrap;
}
.page-link.h{
    display: none;
}
}