@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope.regular.otf') format('opentype'); /* Ajustez le chemin si nécessaire */
    font-weight: normal; /* Poids normal */
    font-style: normal; /* Style normal */
}

/* Définir la police Manrope en gras */
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/manrope.bold.otf') format('opentype'); /* Ajustez le chemin si nécessaire */
    font-weight: bold; /* Poids gras */
    font-style: normal; /* Style normal */
}
/* Définir la police Manrope en gras */
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.ttf') format('opentype'); /* Ajustez le chemin si nécessaire */
    font-weight: normal; /* Poids gras */
    font-style: normal; /* Style normal */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.text-deco-none{
    text-decoration: none;
    color: white;
}
/* Ajoutez ceci dans votre fichier CSS */


/* Styles du corps */
body {
    letter-spacing: 0.7px;
    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,rgba(35, 41, 59, 0.05) 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 */

}
/* Personnalisation de la barre de défilement */
body::-webkit-scrollbar {
    width: 18px; /* Largeur de la barre de défilement */
}

body::-webkit-scrollbar-thumb {
    min-height: 100px;
    background-color: #5752d099; /* Couleur de la poignée de la barre de défilement */
    border-radius: 5px; /* Coins arrondis de la poignée */
}

body::-webkit-scrollbar-track {
    
    background-color: #0000008c; /* Couleur de la piste de la barre de défilement */
    border-radius: 10px; /* Coins arrondis de la piste */
}

body::-webkit-scrollbar-button {
    display: none; /* Cacher les boutons haut et bas de la scrollbar (facultatif) */
}



.favori{
    display: flex;
    align-items: center;
    justify-content: center;
}
.trailer{
    display: flex;
    align-items: center;
    justify-content: center;
}

.favorite-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    vertical-align: middle;
    transition: opacity 0.3s ease, transform 0.3s ease; /* Ajoute une transition douce sur l'opacité et la transformation */
}

/* Au survol de l'icône de favoris */
.favorite-link:hover .favorite-icon {
    content: url('/assets/images/favori_hover.png'); /* Changer l'image sur hover */
    transform: scale(1.1); /* Légère augmentation de la taille sur hover */
}

/* Lorsque l'icône est active */
.favorite-link.active .favorite-icon {
    content: url('/assets/images/favori_hover.png'); /* Utiliser l'image hover si actif */
    transform: scale(1.1); /* Légère augmentation de la taille pour un effet d'activation */
}
.search-link .search-icon {
    
    transition: all 0.3s ease; /* Animation fluide pour le changement d'image */
}

.search-link .search-icon:hover {
    transform: scale(1.1);
    content: url('/assets/images/loupe_hover.png'); /* Change l'image au hover */
}

/* Styles de la navbar */
.navbar {
    min-width: 100%;
    font-size: 1.2em;
    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 */

    position: fixed;
    z-index: 1000;
}
.navbar, .navbar-main {
    position: relative;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    transform: translateY(0); /* Par défaut, aucune transformation */
}

.navbar.fixed, .navbar-main.fixed {
    position: fixed;
    top: -80px;
    transition: all 0.6s ease-in-out;

    opacity: 1; /* Pleinement visible */
    transform: translateY(100%); /* Réinitialisé pour une position fixe */
    background-color: #0c0c0c91; /* Arrière-plan pour l'effet fixe */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Ajouter une ombre */
}

.navbar.hidden, .navbar-main.hidden {
    opacity: 0; /* Complètement invisible */
    transform: translateY(-20px); /* Décale légèrement vers le haut pour l'effet */
    pointer-events: none; /* Désactiver les interactions lorsqu'elle est cachée */
}

.navbar-containtsss{
    min-width: 800px;
    color: rgba(248, 248, 248, 1);
    margin: auto;
    width: 65%;
    display: flex; /* Utilise Flexbox pour la mise en page */
    justify-content: space-between; /* Espace entre les éléments à gauche et à droite */
    align-items: center; /* Centre verticalement les éléments */
    padding: 0px; /* Espacement intérieur de la navbar */
    /* Assure que la navbar est au-dessus des autres éléments */
    transition: top 0.3s; /* Ajoute une transition pour le décalage en haut */

}

/* Styles des listes dans la navbar */
.navbar ul {
    list-style-type: none; /* Enlève les puces des listes */
    margin: 0; /* Enlève les marges */
    padding: 0; /* Enlève le padding */
    display: flex; /* Utilise Flexbox pour les éléments de la liste */
    align-items: center; /* Centre verticalement les éléments */
    flex-grow: 1; /* Permet à la liste de prendre l'espace disponible */
}

/* Styles des éléments de la liste dans la navbar */
.navbar li {
    margin: 0 0px; /* Espacement entre les éléments de la liste */
}
.logo-item{
        font-family: Manrope, sans-serif;
    font-weight: bold; 
}

.logo-item a{
    color: rgba(248, 248, 248, 1);
    text-decoration: none; /* Enlève le soulignement */
}
/* Styles du logo */
.logo-item a{
    display: flex; /* Flex pour le logo */
    align-items: center; /* Centre verticalement */
    margin-right: 20px; /* Espacement à droite du logo */
}

/* Styles de l'image du logo */
.logo {
    width: 80px; /* Ajustez la taille du logo selon vos besoins */
    height: auto; /* Conserve le ratio */
    margin-right: 10px; /* Espacement entre l'image et le texte du logo */
    transition: all 0.2s ease;
}
.logo:hover {
    scale: 1.1;
}
/* Styles des liens de navigation */
.nav-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 60px;
    width: 340px;
    padding: 20px 40px;
    gap: 30px;
    margin: auto;
    border-radius: 12px;
    display: flex; /* Utilise Flexbox pour les liens de navigation */
    justify-content: center; /* Centre les liens horizontalement */

}
.nav-links a {
        color: rgba(248, 248, 248, 1);
    text-decoration: none; /* Enlève le soulignement */
}
/* Styles des éléments de la liste dans nav-links */
.nav-links li, .navbar-links li {
    /* Ajoutez ici d'autres styles si nécessaire */
    transition: all 0.2s ease; /* Transition pour tous les changements */
}

/* Styles lors du survol des éléments de la liste */
/* Styles pour l'élément actif */
.nav-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 */
.nav-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 */
}

/* Styles pour l'utilisateur */
.nav-user {

    justify-content: center;
    align-items: center;
    gap: 50px;
    display: flex; /* Utilise Flexbox pour aligner les éléments de l'utilisateur */
    margin-left: auto; /* Pousser le nav-user à droite */
    margin-right: 20px; /* Espacement de 20px du bord droit */
}

/* Styles supplémentaires pour les liens utilisateur */
.nav-user a {
    color: rgba(248, 248, 248, 1);
    text-decoration: none; /* Enlève le soulignement */
}








/*Acceuil  */



@keyframes slideDown {
    0% {
        transform: translateY(-30%) scale(1); /* Commence au-dessus, légèrement agrandi */
        opacity: 0; /* Invisible */
    }
    50% {
        transform: translateY(10%) scale(1); /* Milieu de l'animation, légèrement baissé */
        opacity: 1; /* Visible */
    }
    100% {
        transform: translateY(0) scale(1); /* Position finale */
        opacity: 1; /* Rester visible */
    }
}
.fondaffiche {
    width: 100%;
    height: auto; /* Permet à l'image de garder son ratio tout en étant responsive */
    min-height: 600px;
    max-height: 100%; /* Empêche l'image de dépasser la hauteur du conteneur */
    object-fit: cover; /* Remplit le conteneur tout en préservant le rapport d'aspect */
    object-position: top; /* Aligne l'image vers le haut */
    display: block; /* Évite les espaces sous l'image */
}
.titre_fondaffiche {
    position: absolute; /* Permet de positionner par rapport à .background */
    top: 30%; /* Position finale verticale */
    left: 10%; /* Ajuste la distance depuis la gauche */
    transform: translateY(-50%); /* Pour un vrai centrage vertical */
    min-width: 230px;
    max-width: 300px; /* Assurez-vous que le titre n'est pas trop grand */
    width: 80%; /* Utilisation de 80% pour une meilleure adaptabilité */
    max-height: 160px;
    z-index: 1; /* Assure que le titre est au-dessus de l'image de fond */
    text-align: center; /* Centre le texte à l'intérieur du conteneur */
    color: white; /* Couleur du texte */
    font-size: 2em; /* Ajustez la taille de la police selon vos besoins */
    font-weight: bold; /* Optionnel : rendre le texte en gras */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Ajoute une ombre au texte pour le rendre plus lisible sur des arrière-plans complexes */
    opacity: 0; /* Initialement invisible */
    animation: none;
   
    
}

.titre_fondaffiche.visible {
    opacity: 1; /* Rendre visible */
    animation: slideWipe 1s forwards; /* Appliquer l'animation de balayage */

}

/* Nouvelle animation pour le balayage */
@keyframes slideWipe {
    0% {
        transform: translateX(-100%); /* Commence hors de l'écran à gauche */
        opacity: 0; /* Invisible */
    }
    50% {
        opacity: 1; /* Visible au milieu de l'animation */
    }
    100% {
        transform: translateX(0); /* Position finale, complètement visible */
        opacity: 1; /* Rester visible */
    }
}


.titre_fondaffiche.visible {
    transform: translateY(-50%) scale(1); /* État final de l'animation */
    opacity: 1; /* Rendre visible */
}

.synopsis_carousel{
    font-size: 1.3em;
    position: absolute;
    max-width: 600px;
    width: 30%;
    min-width: 450px;
    top: 60%; /* Position finale verticale */
    left: 6%; /* Ajuste la distance depuis la gauche */
    opacity: 0; /* Commence caché */
    transition: opacity 0.3s ease-in-out; /* Durée de l'animation */
    animation: none;
}
.synopsis_carousel.visible {
    transform: translateY(-50%) scale(1); /* État final de l'animation */
    opacity: 1; /* Rendre visible */
    animation: slideWipe 1s forwards; /* Appliquer l'animation de balayage */
}
.carousel {
    transition: transform 0.7s ease; /* Transition pour un mouvement fluide */
    display: flex; /* Utilise flexbox pour aligner les éléments horizontalement */
    transition: transform 0.5s ease-in-out; /* Transition lors du changement de position */
    width: calc(100% * 5); /* Ajustez si vous avez plus ou moins de films */
}

.carousel-item {
    
    flex: 0 0 20%; /* Chaque item prend 20% de la largeur du conteneur */
    position: relative; /* Nécessaire pour le positionnement absolu des enfants */
    overflow: hidden; /* Cache les éléments en dehors de la zone visible */
    max-height: 680px; /* Hauteur minimale */
    min-height: 400px;
}

/* Pseudo-élément pour créer un effet de dégradé */
.carousel-item::before {
    content: ''; /* Nécessaire pour créer un élément */
    position: absolute; /* Positionné par rapport au conteneur parent */
    top: 0; /* Commence en haut */
    left: 0; /* Commence à gauche */
    right: 0; /* S'étend à droite */
    bottom: 0; /* S'étend en bas */
    background: linear-gradient(to bottom, rgba(15, 16, 20, 0) 0%, rgba(15, 16, 20, 1) 100%); /* Dégradé du transparent au noir */
    pointer-events: none; /* Permet aux clics de passer à travers */
}

.carousel-container {
    position: relative;
    overflow: hidden; /* Cache les éléments en dehors de la zone visible */
    width: 100%;
    max-width: 100vw;
    max-height: 800px; /* Ajustez selon la taille souhaitée */
}


/* .prev:hover, .next:hover{
     background-color: rgb(15 16 20 / 44%); /* Couleur de fond transparente */
/* } */

.prev, .next {
display: none;
}

.prev {
    left: 10px; /* Positionne le bouton précédent à gauche */
}

.next {
    right: 10px; /* Positionne le bouton suivant à droite */
} 

.carousel-dots {

    text-align: center; /* Centre les points horizontalement */
    margin-top: 10px; /* Espacement au-dessus des points */
}

.dot {

height: 15px; /* Hauteur du point */

width: 15px; /* Largeur du point */

margin: 0 5px; /* Espacement horizontal entre les points */

background-color: #5752d06e; /* Couleur de fond des points inactifs */

border: 1px solid #5752D0;

border-radius: 50%; /* Arrondi pour créer un cercle */

display: inline-block; /* Pour permettre l'alignement horizontal */

cursor: pointer; /* Change le curseur au survol */

transition: background-color 0.3s; /* Transition pour un effet d'animation */
}

.dot.active {
    transform:  scale(1.2); /* État final de l'animation */
    background-color: #5752D0; /* Couleur du point actif */
    border: 1px solid #393766;
}

.dot:hover {

    background-color: #5752d0b5; /* Couleur au survol */
}

.lire_carousel {
    top: 70%; /* Position finale verticale */
    right: 10%; /* Ajuste la distance depuis la gauche */
    position: absolute; /* Permet de positionner les enfants de manière absolue */
    display: flex; /* Utilise flexbox pour un alignement facile */
    justify-content: flex-end; /* Aligne les éléments à droite */
    align-items: center; /* Aligne les éléments verticalement au centre */
    padding: 20px; /* Espacement interne autour du conteneur */
    gap: 20px; /* Espacement entre les éléments */
}

.lecture_carousel_back {
    
    background-color: #5752D0;
    padding: 6px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    gap: 10px;
    font-size: 1.1em;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;  /* Transition pour l'ombre et la transformation */
}
.lecture_carousel_back:hover {
transform: scale(1.05);
    box-shadow: 0 0 10px rgba(87, 82, 208, 0.6), 0 0 30px rgba(87, 82, 208, 0.4); /* Ombre lumineuse */
 /* Effet de lumière */
}

.lecture_carousel {
    position: relative; /* Position par rapport au conteneur parent */
    width: 50px; /* 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 */
}

/* Ajout d'effet de lumière au survol de l'icône de lecture */

.trailer_carousel {
    cursor: pointer;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    position: relative; /* Position par rapport au conteneur parent */
    width: 50px; /* 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 */
}

/* Ajout d'effet de lumière au survol de l'icône de trailer */
.trailer_carousel:hover {
    transform: scale(1.1); /* Agrandit légèrement l'image au survol */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); /* Effet de lumière */
}

/* CSS pour le pop-up */





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

/* Ajout d'effet de lumière au survol de l'icône de favoris */
.favori_carousel:hover {
    transform: scale(1.1); /* Agrandit légèrement l'image au survol */
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8)); /* Effet de lumière */
}
.favori_carousel.scale {
    transform: scale(0.9); /* Réduit la taille lors du clic */
    transition: transform 0.1s ease; /* Transition rapide pour le clic */
}
/* Effets au survol pour une meilleure interactivité */

/* Conteneur général */
/* Conteneur général */
.realisateur_acceuil {
    margin: auto;
    min-width: 890px;
    max-width: 890px;
    position: relative;
    margin-top: 20px;
}

.fog-left,
.fog-right {
    position: absolute;
    bottom: 0;
    width: 50px; /* Largeur de l'effet de brume */
    height: 100%; /* Hauteur de la div */
    pointer-events: none; /* Pour que le curseur passe à travers ces éléments */
    transition: opacity 0.3s ease; /* Ajout d'une transition douce pour l'opacité */
}

/* Fog à gauche est masqué par défaut */
.fog-left {
    left: 0; /* Position à gauche */
    background: linear-gradient(to right, rgba(15, 16, 20, 1), rgba(255, 255, 255, 0)); /* Dégradé de gauche à droite */
    opacity: 0; /* Masquer par défaut */
}

/* Fog à droite est visible par défaut */
.fog-right {
    right: 0; /* Position à droite */
    background: linear-gradient(to left, rgba(15, 16, 20, 1), rgba(255, 255, 255, 0)); /* Dégradé de droite à gauche */
    opacity: 1; /* Rendre visible par défaut */
}

/* Scroll horizontal des réalisateurs */
.scroll_realisateur_acceuil {
    display: flex;
    justify-content: start;
    overflow-x: hidden; /* Cache la barre de défilement */
    padding: 20px;
}

/* Style des réalisateurs */
.realisateur {
    margin-right: 20px;
    text-align: center;
}

.realisateur-photo {
    width: 200px;
    height: 150px;
    border-radius: 10px;
    object-fit: cover;
}

.realisateur-nom {
    display: block;
    text-align: center;
    font-size: 1.1em;
    
}
.boite_realisateur{
    display: flex;
    align-items: center;
    
    justify-content: space-between;
}
/* Conteneur des flèches et pagination */
.scroll_realisateurs {
    border-radius: 10px;
    padding: 10px;
    border: 1px solid var(--Bleu-fonc, rgba(35, 42, 59, 1));
    display: flex;
    position: relative;
}
.titre_div_realisateur{
    font-size: 1.8em;
    padding-left: 20px;
}
/* Boutons de défilement */
.scroll-button {
    background-color: rgba(26, 26, 26, 1);
    border: none;
    cursor: pointer;
    height: 50px;
    width: 50px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(31, 31, 31, 1);
}

.scroll-button:hover {
    background-color: rgba(31, 31, 31, 1);
}

/* Style des barres (dots) de navigation */
.carousel-navigation-real {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px; /* Espace entre les flèches */
}

.dot_real1 {
    height: 5px;
    width: 20px;
    border-radius: 5px;
    margin: 0 5px;
    background-color: rgba(51, 51, 51, 1);

    display: inline-block;
    cursor: pointer;
}

.dot_real1.active {
    border-radius: 5px;
    height: 5px;
    width: 25px;
    background-color: #5752D0; /* Active color */
}


.rectangle{
    width: 100%;
    height: 2000px;
}

.section_films_carousel_film {
 /* Centre le carrousel dans son conteneur */
    min-width: 1000px;
    width: 80%; /* Ajustez la largeur selon vos besoins */

}
.carousel_films_carousel_film {
    display: flex;
    justify-content: start;
    overflow-x: hidden; /* Cache la barre de défilement */
    gap: 0px; /* Espacement entre les éléments, ajustez comme nécessaire */
    width: 100%; /* Assurez-vous que la largeur s'ajuste */
}




.carousel-controls_carousel_film{
    border-radius: 10px;
    padding: 10px;
    border: 1px solid var(--Bleu-fonc, rgba(35, 42, 59, 1));
    display: flex;
    position: relative;
}
.carousel-item_sortie_recente {
    min-width: 200px; /* Largeur minimum des éléments, ajustez selon vos besoins */
    margin: 0px; /* Espacement autour des éléments */
    transition: transform 0.3s; /* Animation lors du changement de position */
}



.arrow {
    background-color: rgba(26, 26, 26, 1);
    border: none;
    cursor: pointer;
    height: 50px;
    width: 50px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(31, 31, 31, 1);
}

.arrow:hover {
    background-color: rgba(31, 31, 31, 1);
}
.film-affiche{
    user-select: none; /* Empêche la sélection de texte */
    -webkit-user-select: none; /* Pour Safari */
    -moz-user-select: none; /* Pour Firefox */
    
    width: 200px;
    border-radius: 10px;
}
.arrow:hover {
    background-color: rgba(255, 255, 255, 0.9); /* Effet de survol */
}
.film-titre_carousel_film {
    font-size: 1.8em; /* Taille de la police */
    padding-right: 5px;
    padding-left: 20px; /* Espace à gauche */
    display: block; /* Affiche comme un bloc */
    text-align: end; /* Alignement à droite */
    font-size: 1em; /* Taille de la police (peut-être un doublon, à vérifier) */

    /* Ajoutez les propriétés suivantes */
    white-space: nowrap; /* Empêche le texte de se déplacer à la ligne suivante */
    overflow: hidden; /* Cache le texte qui dépasse */
    text-overflow: ellipsis; /* Affiche "..." à la fin du texte qui dépasse */
}

.boite_carousel_film{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between ;
}










/* Conteneur général */
.section_films_carousel_film {
    max-width: 100%;
    position: relative;
    margin: auto;
}

.fog-left_carousel_film,
.fog-right_carousel_film {
    position: absolute;
    bottom: 0;
    width: 50px; /* Largeur de l'effet de brume */
    height: 85%; /* Hauteur de la div */
    pointer-events: none; /* Pour que le curseur passe à travers ces éléments */
    transition: opacity 0.3s ease; /* Ajout d'une transition douce pour l'opacité */
}

/* Fog à gauche est masqué par défaut */
.fog-left_carousel_film {
    left: 0; /* Position à gauche */
    background: linear-gradient(to right, rgba(15, 16, 20, 1), rgba(255, 255, 255, 0)); /* Dégradé de gauche à droite */
    opacity: 0; /* Masquer par défaut */
}

/* Fog à droite est visible par défaut */
.fog-right_carousel_film {
    right: 0; /* Position à droite */
    background: linear-gradient(to left, rgba(15, 16, 20, 1), rgba(255, 255, 255, 0)); /* Dégradé de droite à gauche */
    opacity: 1; /* Rendre visible par défaut */
}

/* Scroll horizontal des réalisateurs */


/* Style des réalisateurs */


.film-affiche {
    width: 200px;
    height: 300px;
    border-radius: 10px;
    object-fit: cover;
    padding: 5px;
}

.parent-container-note-evalue-image {
    position: relative; /* Position relative pour le conteneur */
    display: inline-block; /* Pour s'adapter à la taille de l'image */
}



.note-evalue {
    cursor: pointer;
    position: absolute; /* Positionner la note par rapport au parent */
    font-size: 0.9em;
    top: -5px; /* Ajustez cette valeur selon où vous voulez que la note apparaisse */
    right: 8px; /* Ajustez cette valeur selon la distance du bord de l'image */
    background-color: #5752D0; /* Fond coloré pour la lisibilité */
    color: #ffffff; /* Couleur du texte de la note */
    padding: 5px 8px; /* Un peu d'espace autour du texte */
    border: 2px solid #5752D0; /* Bordure colorée pour l'effet tampon */
    border-radius: 5px; /* Arrondir les coins */
    z-index: 10; /* S'assurer qu'il est au-dessus de l'image */
    font-weight: bold; /* Mettre la note en gras */
    text-align: center; /* Centrer le texte */
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%); /* Ajustez la forme ici */
    filter: blur(0.5px); /* Ajout d'un léger flou */
    transition: transform 0.2s ease; /* Transition pour une animation douce */
}
.note-evalue:hover {
    transform: scale(1.05); /* Légère augmentation de la taille au survol */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 4px 20px rgba(0, 0, 0, 0.5); /* Ombres plus prononcées */
}

.boite_carousel_film{
    margin-top: 20px;
    display: flex;
    align-items: center;
    margin-bottom: 1%;
    justify-content: space-between;
}
/* Conteneur des flèches et pagination */
.carousel-controls_carousel_film {
    border-radius: 10px;
    padding: 10px;
    border: 1px solid var(--Bleu-fonc, rgba(35, 42, 59, 1));
    display: flex;
    position: relative;
}
.titre_section_carousel_film{
    font-family: Roboto;
    font-weight: 500;
    font-size: 1.8em;
    padding-left: 20px;
    
}
/* Boutons de défilement */
.arrow {
    background-color: rgba(26, 26, 26, 1);
    border: none;
    cursor: pointer;
    height: 50px;
    width: 50px;
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(31, 31, 31, 1);
}

.arrow:hover {
    background-color: rgba(31, 31, 31, 1);
}

/* Style des barres (dots) de navigation */
.carousel-navigation-real {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 10px; /* Espace entre les flèches */
}

.dot_real {
    height: 5px;
    width: 20px;
    border-radius: 5px;
    margin: 0 5px;
    background-color: rgba(51, 51, 51, 1);

    display: inline-block;
    cursor: pointer;
}

.dot_real.active {
    border-radius: 5px;
    height: 5px;
    width: 25px;
    background-color: #5752D0; /* Active color */
}






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

.carousel_film:hover {
    transform: scale(1.00); /* Échelle agrandie lors du survol */
}

.film-overlay { 
    user-select: none; /* Empêche la sélection de texte */
    -webkit-user-select: none; /* Pour Safari */
    -moz-user-select: none; /* Pour Firefox */
    position: absolute; /* Positionne l'overlay */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    background: rgba(35, 42, 59, 0.97); /* Couleur de fond */
    color: #fff; /* Couleur du texte */
    opacity: 0; /* Masqué par défaut */
    visibility: hidden; /* Masqué par défaut */
    display: flex; /* Utilise flexbox pour aligner les éléments */
    flex-direction: column; /* Aligne les éléments verticalement */
    justify-content: flex-start; /* Aligne les éléments en haut */
    text-align: left; /* Aligne le texte à gauche */
}

.carousel_film:hover .film-overlay {
    opacity: 1; /* Affiche l'overlay au survol */
    visibility: visible; /* Rendre l'overlay visible */
    transition: opacity 0.3s ease, visibility 0s; /* Réinitialise la transition de visibilité */
}


/* Pour l'effet de retour à l'état initial */
.carousel_film:not(:hover) .film-overlay {
    display: none;
    opacity: 0; /* Masque l'overlay à l'état normal */
    visibility: hidden; /* Masque l'overlay à l'état normal */
}







.film-description_carousel1 {
    padding-left: 10px;
    width: 95%;
    height: 20%;
    font-size: 0.9em;
    line-height: 1.2em;

}

.trailer_carousel1 {
    cursor: pointer;
    background-color: #fff;
    border-radius: 35%;
    padding: 5px;
    position: relative;
    width: 35px;  /* Largeur de l'image de trailer */
 /* Assurez-vous d'avoir une hauteur fixe */
    transition: transform 0.3s, filter 0.3s;
}


.trailer_carousel1:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}

.favori_carousel1 {
    cursor: pointer;
    background-color: #fff;
    border-radius: 35%;
    padding: 5px;
    position: relative;
    width: 35px; /* Largeur de l'image de favoris */
/* Assurez-vous d'avoir une hauteur fixe */
    transition: transform 0.3s, filter 0.3s;
}
.favori_carousel1:hover {
    transform: scale(1.1); /* Agrandit légèrement l'image au survol */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8)); /* Effet de lumière */
}
.favori_carousel1.scale {
    transform: scale(0.9); /* Réduit la taille lors du clic */
    transition: transform 0.1s ease; /* Transition rapide pour le clic */
}




.lecture_carousel_back1 {
    background-color: #5752D0;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    gap: 5px;
    font-size: 1em;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;  /* Transition pour l'ombre et la transformation */
}
.lecture_carousel_back1:hover {
transform: scale(1.05);
    box-shadow: 0 0 10px rgba(87, 82, 208, 0.6), 0 0 30px rgba(87, 82, 208, 0.4); /* Ombre lumineuse */
 /* Effet de lumière */
}

.lecture_carousel1 {
    position: relative; /* Position par rapport au conteneur parent */
    width: 30px; /* 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 */
}
.button_hover_affiche {
    padding: 3px;
    margin-bottom: 5%;
    display: flex; /* Utilise flexbox pour un alignement facile */
    justify-content:space-around;
}
.film-titre_carousel_film_overlay{
    margin-bottom: 5%;
    margin-top: 5%;
    font-family: Manrope;
    padding-left: 10px;
font-size: 1.2em;
font-weight: 700;
        white-space: nowrap; /* Empêche le texte de passer à la ligne */
        overflow: hidden; /* Cache le texte qui dépasse */
        text-overflow: ellipsis; /* Ajoute des points de suspension à la fin du texte */
        width: 80%; 
text-align: left;

}


.image_carousel_film_overlay {
    
    height: auto; /* Ajuste la hauteur automatiquement pour éviter de rognage */
    width: 95%;
    border-radius: 10px;
    display: block; /* Utilise block pour que l'image prenne tout l'espace disponible */
    margin: 0 auto; /* Centre l'image horizontalement */
     /* Position relative pour le contrôle */
    margin-top: 5px; /* Aligne l'image en haut */
}

main {
    flex: 1; /* Fait en sorte que le main pousse le footer vers le bas */
    padding: 20px;
    position: relative;
}
.pagination-mobile{
    display: none;;
}

.avatar-img{
    width: 60px; border: 2px solid #fff; height: 60px; border-radius: 50%; vertical-align: middle;
    transition: all 0.3s ease; /* Animation fluide pour le changement d'image */

}
li.active .avatar-img {
    border: 2px solid #5752D0;
}
.avatar-img:hover{
    scale: 1.1;
    border: 2px solid #5752D0;
}



footer {
    border-top: 1px solid #ffffff33;
    margin-top: 5vh;
    background-color: #00000047; /* Couleur de fond */
    color: #fff; /* Couleur du texte */
    padding: 50px 20px;
    width: 100%; /* Occupe toute la largeur */
    box-sizing: border-box; /* Inclut le padding dans la largeur */
}

/* Conteneur principal pour organiser les sections */
.footer-content {
    display: flex; /* Aligne les sections horizontalement */
    flex-wrap: wrap; /* Permet de passer à la ligne sur les petits écrans */
    justify-content: space-around; /* Espacement égal entre les sections */
    align-items: flex-start; /* Aligne en haut */
    gap: 20px; /* Espacement entre les sections */
    max-width: 1200px; /* Largeur maximale pour les grands écrans */
    margin: auto; /* Centre le footer horizontalement */
}

/* Style des blocs individuels dans le footer */
.footer-content > div {
    flex: 1; /* Les sections prennent une largeur égale */
    min-width: 250px; /* Largeur minimale pour éviter les trop petits blocs */
    max-width: 400px; /* Largeur maximale pour chaque section */
}

/* Titres des sections */
.footer-content h3 {
    font-size: 1.5rem; /* Taille des titres */
    margin-bottom: 15px; /* Espacement en dessous des titres */
    color: #f4f4f4; /* Couleur légèrement plus claire */
}

/* Liens de navigation */
.footer-content ul {
    list-style: none; /* Supprime les puces */
    padding: 0; /* Supprime les marges internes */
    margin: 0; /* Supprime les marges externes */
}

.footer-content ul li {
    margin-bottom: 10px; /* Espacement entre les éléments */
}

.footer-content ul li a {
    color: #bbb; /* Couleur des liens */
    text-decoration: none; /* Supprime le soulignement */
    transition: color 0.3s ease; /* Animation de transition pour la couleur */
}

.footer-content ul li a:hover {
    color: #fff; /* Changement de couleur au survol */
}






/* Pied de page */
.footer-bottom {
    margin-top: 30px;
    font-size: 0.9rem; /* Taille de texte plus petite */
    color: #bbb; /* Couleur légèrement plus claire */
}

.footer-bottom a {
    color: #bbb;
    text-decoration: none;
}

.footer-bottom a:hover {
    color: #fff;
}

/* Responsive Design */
@media (max-width: 768px) {
    .about{
        display: none;
    }
    .footer-content {
        flex-direction: column; /* Passe en colonne sur les petits écrans */
        align-items: center; /* Centre les sections */
        text-align: center; /* Centre le texte */
    }

    .footer-content > div {
        max-width: 100%; /* Les sections prennent toute la largeur */
    }

}