.top{
    margin-top: 20px;
}
.button-container{
    display: none;
}
.container-page-play {
    display: flex;                /* Active le mode Flexbox pour l'alignement */
    justify-content: center;      /* Centrage horizontal */
    align-items: center;          /* Centrage vertical */
    min-height: 100vh;                /* Prendre toute la hauteur de la fenêtre */
    width: 100%;                  /* Prendre toute la largeur de la fenêtre */
    padding: 20px;                /* Espacement autour du contenu */
    box-sizing: border-box;       /* Assure que le padding est inclus dans la largeur totale */
}
a {
    text-decoration: none;
    color: white;
}
.content-page-play{
    margin: auto;
    width: 80%;                   /* Définir la largeur du contenu à 80% */
    max-width: 1200px;            /* Largeur maximale */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Ombre légère pour l'effet de profondeur */
    border-radius: 8px;           /* Arrondir les coins du conteneur */
}
.iframe-container{
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 400px;
    margin-bottom: 10px;
    background-color: rgb(35 42 59 / 19%);
    border-radius: 8px;
}
.content-page-team-info{
    
    gap: 10px;
    display: flex;
    justify-content: space-between;
}
.container-page-team{
    display: flex;
    flex-direction: column;
  gap: 10px;
}
.container-page-info{
    padding: 20px;
    padding-right: 25px;
    background-color: rgba(35, 42, 59, 1);
    border-radius: 8px;
}
.container-page-sous-titre {
    font-family: Roboto;
    font-size: 1.1em;
    letter-spacing: 1.1px;
    color: #b3b3b3ad;
    margin-top: 20px;
    margin-bottom: 2px;
    padding-left: 10px;
}


.container-page-desc-titre{
    padding: 10px;
    padding-left: 25px;
    background-color: rgba(35, 42, 59, 1);
    border-radius: 8px;
}


.container-page-actor {
    padding: 10px;
    padding-left: 25px;
    background-color: rgba(35, 42, 59, 1);
    border-radius: 8px;
    
}

.container-page-actor .container-acteur-info {
    display: flex;
    margin-top: 15px;
    flex-wrap: wrap; /* Permet de passer à la ligne si nécessaire */
    gap: 15px; /* Espacement entre les acteurs */
}
.container-page-actor p {
    text-align: center;
    width: 100px;
    white-space: nowrap; /* Empêche le texte de se découper sur plusieurs lignes */
    overflow: hidden;    /* Cache le texte qui dépasse */
    text-overflow: ellipsis; /* Ajoute des "..." si le texte dépasse la largeur */
}


.container-page-actor .acteur-info .acteur-photo {
    width: 100px; /* Taille des photos */
    height: 100px;
    object-fit: cover; /* Pour que l'image s'adapte */
    border-radius: 50%; /* Photo ronde */
    margin-bottom: 5px; /* Espacement entre la photo et le nom */
}

.genre-container-play{
    gap: 10px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-items: center;
}
.genre-container-play-unit{
    display: inline-block; /* Réduit la largeur au contenu */
    font-size: 0.9em;
    text-decoration: none;
    color: white;
    background-color: rgba(20, 20, 20, 1);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(38, 38, 38, 1);
     box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Ajout du box-shadow */
    transition: transform 0.2s ease, box-shadow 0.3s ease; /* Transition fluide */
}
.genre-container-play-unit p{
    font-family: Roboto;
    font-weight: 400;
    font-size: 1.2em;
    letter-spacing: 1.5px;
}
.container-page-play-real{
    
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    padding: 10px;
    background-color: rgba(20, 20, 20, 1);
    border: 1px solid rgba(38, 38, 38, 1);
        transition: transform 0.2s ease, box-shadow 0.3s ease; /* Transition fluide */

      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Ajout du box-shadow */
}
.container-page-play-real img {
    width: 50px;
    height: 50px; /* Rendre la hauteur égale à la largeur pour créer un carré */
    object-fit: cover; /* Conserver les proportions sans déformer l'image */
    border-radius: 4px; /* Facultatif : ajoute des coins légèrement arrondis */
}
.star-rating {
    display: flex;
    align-items: center;
    gap: 5px; /* Espacement entre les étoiles */
}

.star {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
}

.star.full {
    background-image: url('/assets/images/star-full.png'); /* Étoile pleine */
}

.star.three-quarters {
    background-image: url('/assets/images/star-three-quarters.png'); /* Étoile 3/4 */
}

.star.half {
    background-image: url('/assets/images/star-half.png'); /* Étoile moitié */
}

.star.quarter {
    background-image: url('/assets/images/star-quarter.png'); /* Étoile 1/4 */
}

.star.empty {
    background-image: url('/assets/images/star-empty.png'); /* Étoile vide */
}
    .content-page-play h2{
        display: none;
    }

.container-page-suggestions2{
    display: none;
            padding: 10px;
    padding-left: 25px;
    background-color: rgba(35, 42, 59, 1);
    border-radius: 8px;
}

.container-page-suggestions1{
        padding: 10px;
    padding-left: 25px;
    background-color: rgba(35, 42, 59, 1);
    border-radius: 8px;
}
.suggestion-list{
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    
}
.suggestion-list a{
    text-decoration: none;
}


.suggestion-img {
  border-radius: 8px;
    min-width: 100px;
    width: 15vw;
    max-width: 150px;
    display: block; /* S'assure que l'image est un élément de bloc */
    margin-bottom: 8px; /* Espace entre l'image et le texte */
}

.suggestion-item {
    min-width: 100px;
       transition: background-color 0.3s ease, transform 0.3s ease; /* Transition pour un effet doux */
    width: 15vw; /* La largeur de la liste suit la taille de l'image */
    max-width: 150px; /* Limite la taille de la liste */
    overflow: hidden; /* Empêche tout débordement de texte */
    border-radius: 8px;
}
.suggestion-item:hover {
  background-color: rgba(87, 82, 208, 0.2); /* Couleur de fond légèrement translucide */
    transform: translateY(-5px); /* Légère translation vers le haut */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Ombre pour un effet de profondeur */

}
.suggestion-item:hover img {
 border-radius: 0px;
}
.suggestion-item p {
    color: white;
    padding-left: 10px;
    padding-bottom: 5px;
    text-decoration: none;
    white-space: nowrap; /* Empêche le texte de se décomposer sur plusieurs lignes */
    overflow: hidden; /* Cache le texte qui dépasse */
    text-overflow: ellipsis; /* Ajoute des points de suspension à la fin si le texte dépasse */
    font-size: 0.9em; /* Réduit légèrement la taille du texte si nécessaire */
}
.suggestion-item .year{
    color: #b3b3b3ad;
}



.container-page-info{
    min-width: 330px;
    width: 100%;
    max-width: 460px;
}
.container-page-play-trailer {
    border-radius: 8px;
    gap: 10px;
    padding: 10px;
    display: inline-flex;
    align-items: center;
    background-color: #433f94;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); /* Ajout du box-shadow */
    transition: transform 0.2s ease, box-shadow 0.3s ease; /* Transition fluide */
}

.container-page-play-trailer:hover, .genre-container-play-unit:hover, .container-page-play-real:hover {
    transform: scale(1.02); /* Utilisation de transform au lieu de scale directement */
    box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.4); /* Accentuer l'ombre au survol */
    cursor: pointer;
}

.trailer-thumbnail img{
    border-radius: 4px;
    display: flex;
    align-items: center;
    width: 100px;
}
.container-page-play-trailer p{
    color: #808080;
}
.container-page-play-trailer span{
    color: #ffffff;
}

@media (max-width: 1000px) {
    .container-page-suggestions2{
    display: block;
}

.container-page-suggestions1{
    display: none;
}
    .top{
    margin-top: 0px;
}
        .content-page-play h2{
            display: block;
        background-color: rgb(21 26 38 / 41%);
        text-align: center;
        padding: 10px;
        border-radius: 8px;
    }
    .container-page-play {
    display: flex;                /* Active le mode Flexbox pour l'alignement */
    align-items: flex-start;         /* Centrage vertical */
    width: 100%;                  /* Prendre toute la largeur de la fenêtre */
    padding: 20px;                /* Espacement autour du contenu */
    box-sizing: border-box;       /* Assure que le padding est inclus dans la largeur totale */
}
    .container-page-play {
        padding: 5px;                /* Espacement autour du contenu */
    }
    .content-page-play  {
        width: 95%;                   /* Définir la largeur du contenu à 80% */
        border-radius: 4px;           /* Arrondir les coins du conteneur */
    }
    .iframe-container{
        gap: 5px;
        min-height: 250px;
        height: 50%;
        max-height: 350px;
        margin-bottom: 5px;
        border-radius: 6px;
    }
        .content-page-team-info{
        gap: 10px;
        display: flex;
        justify-content: flex-start;
            flex-direction: column;
    }
        .container-page-team{
        display: flex;
        gap: 10px;
    }
    .container-page-info{
        padding: 20px;
        padding-right: 25px;
        background-color: rgba(35, 42, 59, 1);
        border-radius: 8px;
    }
    .container-page-desc-titre h3{
        display: none;
    }
        .container-page-info{
            max-width: 100%;
        }
}

/* Par défaut, toutes les sections sont masquées sur grand écran */
@media (max-width: 768px) {

    .container-page-suggestions2{
        margin-top: 10px;
    }
            .content-page-team-info{
        gap: 0px;
        display: flex;
        justify-content: flex-start;
            flex-direction: column;
    }
        .container-page-team{
        display: flex;
        gap: 0px;
    }
        .content-page-play  {
        width: 100%;                   /* Définir la largeur du contenu à 80% */
        border-radius: 4px;           /* Arrondir les coins du conteneur */
    }

    .container-page-suggestions2{
        padding: 0px;
    }
    .suggestion-item {
    min-width: 130px;
       transition: background-color 0.3s ease, transform 0.3s ease; /* Transition pour un effet doux */
    width: 15vw; /* La largeur de la liste suit la taille de l'image */
    max-width: 150px; /* Limite la taille de la liste */
    overflow: hidden; /* Empêche tout débordement de texte */
    border-radius: 8px;
}
    .suggestion-img {
  border-radius: 8px;
    min-width: 130px;
    width: 15vw;
    max-width: 150px;
    display: block; /* S'assure que l'image est un élément de bloc */
    margin-bottom: 8px; /* Espace entre l'image et le texte */
}
    .suggestion-list {display:flex;
                     justify-content: center;
                     align-items: center;}
.button-container{
    padding-left: 10px;
    display: flex;
    gap: 5px;
    justify-content: flex-start;
    align-items: center;
}
    
        .container-page-play > .content-page-play {
        width: 100%;                   /* Définir la largeur du contenu à 80% */
        border-radius: 4px;           /* Arrondir les coins du conteneur */
    }
  .container-page-desc-titre,
  .container-page-actor,
  .container-page-info {
    display: none;
  }

  .visible {
    display: block !important;
  }


    .container-page-sous-titre{
    padding-left: 20px;
    font-size: 1.3em;
    margin-bottom: 5px;
        margin-top: 10px;
}

.container-page-actor .container-page-sous-titre{
    display: none;
}
    .container-acteur-info{
        margin-top: 15px;
    }

    .container-page-actor .container-acteur-info {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Permet de passer à la ligne si nécessaire */
    gap: 20px; /* Espacement entre les acteurs */
}


/* Styles de base pour les boutons */
.toggle-btn {
    border-radius: none;
    padding: 10px 10px;
    border: none;
    background-color: rgb(23 32 40);
    color: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1em;
    transition: all 0.3s ease;  /* Transition fluide pour les effets */
    position: relative;  /* Nécessaire pour utiliser '::after' */
}

/* Styles lorsque le bouton est actif */
.afficher-bouton-actif {
    border-radius: 8px 8px 0 0;
    background-color: rgba(35, 42, 59, 1);  /* Couleur du bouton actif */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);  /* Ombre pour le relief */
    font-family: Roboto;
    font-size: 1.1em;
    letter-spacing: 1.1px;
    color: #b3b3b3ad;
}

/* Créer l'illusion que le bouton se relie à l'élément suivant */
.afficher-bouton-actif::after {
    border-radius: none;
    content: "";  /* Crée un pseudo-élément */
    position: absolute;
    bottom: -20px;  /* Décale l'élément pseudo en bas du bouton */
    left: 0;
    width: 100%;
    height: 22px;  /* Hauteur de la "jonction" */
    background-color: rgba(35, 42, 59, 1);  /* Même couleur que le bouton actif */
    border-radius: 0 0 5px 5px;  /* Bord arrondi en bas pour correspondre au bouton */
    transition: height 0.3s ease;  /* Transition fluide */
}

.container-page-desc-titre .container-page-sous-titre{
    display: none;
}
.container-page-desc-titre p {
    margin-top: 15px;
}

/* Optionnel : Ajouter un effet au survol pour plus d'interaction */


}
.overlay {
    display: none; /* Masqué par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.overlay-content {
    position: relative;
    max-width: 800px;
    width: 90%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.overlay iframe {
    width: 100%;
    min-height: 350px;
}

a .container-page-play-real{
    text-decoration:none;
    color: white
}
@media (max-width: 460px) {
    .button-container{
    padding-left: 0px;
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
}
}