/* trailer-popup.css */

.trailer-popup {
    display: none; /* Masquer par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
      background-color: rgba(0, 0, 0, 0.7);    z-index: 1000; /* Assurez-vous que le pop-up est au-dessus d'autres contenus */
    overflow: auto; /* Permet le défilement si nécessaire */
}

.trailer-content {
    background: rgba(15, 16, 20, 1);
    border-radius: 10px;
    max-width: 800px;
    margin: auto; /* Centre le pop-up verticalement et horizontalement */
    padding: 20px;
    position: relative;
    max-height: 80vh; /* Limite la hauteur à 80% de la vue */
    overflow-y: auto; /* Permet le défilement vertical */
}

/* Personnalisation de la scrollbar pour les navigateurs WebKit (Chrome, Safari) */
.trailer-content::-webkit-scrollbar {
    width: 12px; /* Largeur de la scrollbar */
}

/* Couleur de la barre */
.trailer-content::-webkit-scrollbar-thumb {
    background: rgba(60, 60, 60, 0.8); /* Couleur de la partie déplaçable */
    border-radius: 10px; /* Arrondir les coins */
}

/* Couleur de la barre lorsqu'elle est survolée */
.trailer-content::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 100, 100, 1); /* Couleur de la partie déplaçable au survol */
}

/* Couleur de la barre de défilement */
.trailer-content::-webkit-scrollbar-track {
    background: rgba(15, 16, 20, 0.5); /* Couleur de la piste de la scrollbar */
    border-radius: 10px; /* Arrondir les coins */
}

/* Personnalisation pour Firefox */
.trailer-content {
    scrollbar-width: thin; /* Rend la scrollbar plus fine */
    scrollbar-color: rgba(60, 60, 60, 0.8) rgba(15, 16, 20, 0.5); /* [partie déplaçable] [piste] */
}






.bande-annonce-content {
    border-radius: 10px; /* Coins arrondis */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Ombre légère pour un effet flottant */
    text-align: center; /* Centre le texte à l'intérieur */
    margin: 10px; /* Marge autour de l'élément */
    width: 75%;
    margin-bottom: 30px;
}

.trailer_bande-annonce {
    border-radius: 20px;
    border-bottom: 2px solid #4535a0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Ombre légère pour un effet flottant */
    padding: 10px; /* Ajoute un peu d'espace autour du contenu */
    color: white; /* Couleur du texte en blanc pour contraster avec le fond rouge */
    font-size: 2em; /* Taille de la police */
    margin: 0; /* Supprime la marge par défaut du h2 */
}

.trailer-fermer {
    position: absolute;
    background-color: #5752D0; /* Couleur de fond par défaut */
    min-width: 50px;
    width: 10%;
    max-width: 70px;
    min-height: 20px;
    height: 10%;
    max-height: 50px;
    border-radius: 20px;
    /* top: 2%; */
    right: 5%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 3em;
    cursor: pointer;
    color: #fff; /* Couleur du texte */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; /* Ajout des transitions */
}
.film-title{
    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 */
    padding: 10px 10px 0 20px;
    border-radius: 15px;
    height: 50px;
    /* align-items: center; */            /* Centre verticalement le contenu */
    border-bottom: 3px solid rgb(69 53 160); /* Bordure inférieure */
    width: 55%;
    font-size: 1.3em;
}
.play-favoicon{
    margin: 3% 0 4% 0 ;
    display: flex;
    justify-content:center;
    align-items: center;
    gap: 2%;
}
.favoicon-trailer-overlay {
    padding: 8px;
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 30%;
    transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.1s ease, opacity 0.2s ease; /* Animation de transformation, couleur, ombre et opacité */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ombre par défaut */
    opacity: 1; /* Opacité par défaut */
}
.favoicon-trailer-overlay:hover {
    transform: scale(1.1); /* Agrandit légèrement l'image au survol */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)); /* Effet de lumière */
}
.favoicon-trailer-overlay:active {
    transform: scale(0.9); /* Réduit la taille lors du clic */
    transition: transform 0.1s ease; /* Transition rapide pour le clic */
}







.play: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 */
}

.play {
  
    cursor: pointer;
    text-align: center;             /* Centre le texte dans l'élément */
              /* Marge en haut, auto pour le centre, marge en bas */
    width: 70%;                     /* Largeur de l'élément */
    height: 50px;                   /* Hauteur de l'élément */
    display: flex;                  /* Utilise Flexbox */
    align-items: center;            /* Centre verticalement le contenu */
    justify-content: center;        /* Centre horizontalement le contenu */
    border-radius: 15px;            /* Coins arrondis */
    background-color: #433f94;      /* Couleur de fond */
    border-bottom: 3px solid rgb(69 53 160); /* Bordure inférieure */
    box-shadow: 0 2px 10px rgb(95 78 191 / 46%); /* Ombre légère */
    color: white;                   /* Couleur du texte */
    font-size: 1.3em;               /* Taille de la police */
    transition: transform 0.3s, box-shadow 0.3s;

}
#play-title {
  gap: 15px;
       display: flex;                  /* Utilise Flexbox */
    align-items: center;            /* Centre verticalement le contenu */
    justify-content: center;        /* Centre horizontalement le contenu */

}
.play .lecture_carousel1 {
    display: flex;                  /* Utilise Flexbox */
    align-items: center;            /* Centre verticalement le contenu */
    justify-content: center;        /* Centre horizontalement le contenu */

    width:50px;
    
}



/* Effet :hover */
.trailer-fermer:hover {
    background-color: #4535a0; /* Couleur de fond au survol */
    transform: scale(1.1); /* Agrandissement légèrement au survol */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Ombre portée */
}


h2 {
    margin: 0 0 10px 0; /* Marges pour le titre */
}

iframe {
    width: 100%; /* S'adapte à la largeur du conteneur */
    height: 315px; /* Hauteur fixe de l'iframe */
    border: none; /* Supprime les bordures de l'iframe */
}
#trailer_bande-annonce1{
    display: none;
}

#play-title{
display: flex;
    }


.film-description_trailer-container {
    cursor: pointer;
    margin-bottom: 5px;
    color: #fff5f5e8; 
    transition: max-height 0.3s ease; /* Animation lors du dépliement */
}
.film-description_trailer-container-info{
    margin-bottom: 20px;
    color: #676767;
    display: flex; /* Affiche les informations à côté */
    flex-direction: column; /* Affiche les informations en colonne */
    justify-content: center; /* Centre les éléments verticalement */
    flex-basis: 200px; /* Largeur fixe pour la colonne d'infos */
}
/* Classe pour l'animation du curseur */
.cursor-clicked {
    cursor: url('https://example.com/your-custom-cursor.png'), auto; /* Remplacez par le chemin de votre curseur personnalisé */
    transform: scale(1.1); /* Augmente légèrement la taille lors du clic */
    transition: transform 0.1s; /* Animation pour l'effet d'échelle */
}


.film-description_trailer-container.expanded {
    max-height: none; /* Permet au texte de s'afficher complètement */
}

.read-more {
     color: #6565658c; /* Couleur du lien "Lire la suite" */
    cursor: pointer; /* Indique que c'est cliquable */
    font-weight: bold; /* Met le texte en gras */
}

.full-description {
    display: none; /* Masque la description complète par défaut */
}

.film-description_trailer-container.expanded .full-description {
    display: inline; /* Affiche la description complète quand la classe "expanded" est ajoutée */
}

.film-description_trailer-container.expanded .read-more {
    display: none; /* Masque "Lire la suite" quand le texte est déplié */
}






.similar-films-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.similar-film {
    box-shadow: 0px 0px 4px rgb(0 0 0); /* Ombre légère */
    cursor: pointer;
    width: 20%;
    max-width: 180px;
    text-align: right;
    margin: 7px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    /* Ajouter une ombre */
       transition: box-shadow 0.3s, scale 0.2s; /* Transition douce lors du hover */
}

.similar-film:hover {
    scale: 1.04;
    background-color: #5752d04d;
    
}

.similar-film img {
    max-width: 150px;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

.similar-film h4 {
    font-size: 0.9em;
    padding-left: 20px;
    padding-right: 10px;
    color: #ffffffd4;
    font-weight: 500;
    /* line-height: 1em; */ /* Ajustez si nécessaire */
    white-space: nowrap; /* Ne pas permettre le passage à la ligne */
    overflow: hidden; /* Masquer le texte qui déborde */
    text-overflow: ellipsis; /* Ajouter des points de suspension */
    max-width: 100%; /* Assurez-vous que le conteneur peut définir la largeur */
}





/* CSS pour désactiver le défilement */
.no-scroll {
    overflow: hidden; /* Désactiver le défilement */
 /* Prend toute la hauteur */
}
.footer_trailer{
    display: none;
}
@media (max-width: 768px) {
    .footer_trailer{
    display: block;
}
    main{
        margin-top: 10px;
    }
    iframe {
        margin-bottom: 20px;
    width: 100%; /* S'adapte à la largeur du conteneur */
    height: 220px; /* Hauteur fixe de l'iframe */
    border: none; /* Supprime les bordures de l'iframe */
    }
    .trailer-content {
        padding: 0px;
        border-radius: 0px;
        min-width: 100%;
        min-height: 100vh;
    }
    #trailer_bande-annonce, #title{
        display: none;
    }
    #trailer_bande-annonce1, #play-title{
    display: flex;
    font-size: 1.4em
    }
    #play-title{
        gap: 15px;
    }

    
    .trailer-fermer {
        min-width: 60px;
        min-height: 0px;
        height: 50px;
        /* top: 10%; */
  }

    .film-description_trailer-container {
        font-size: 1.1em;
    }
    .short-description{
        color: #fff5f5a3;
        max-width: 400px;
    }

    
    .similar-film {
    box-shadow: 0px 0px 4px rgb(0 0 0); /* Ombre légère */
    cursor: pointer;
    width: 45%;
    max-width: 180px;
    text-align: right;
    margin: 7px;
    /* Ajouter une ombre */
       transition: box-shadow 0.3s, scale 0.2s; /* Transition douce lors du hover */
}

.similar-film:hover {
    scale: 1.01;
    box-shadow: 0px 0px 15px rgb(87, 82, 208, 50%); /* Ombre plus prononcée au survol */
}

.similar-film img {
    max-width: 180px;
    width: 100%;
    height: auto;
    border-radius: 2px;
}

.similar-film h4 {
    display: none;
    }
}