/* Modale */
.video-modal {
    display: none; /* Masqué par défaut */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fond sombre */
    z-index: 1000; /* Modale au-dessus de tout */
}

.video-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 90%; /* La largeur de la modale est de 90% de l'écran */
    height: 90%; /* La hauteur de la modale est de 90% de l'écran */
    max-width: 1200px; /* La largeur max est limitée à 1200px */
    max-height: 800px; /* La hauteur max est limitée à 800px */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}

.video-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

iframe {
    width: 100%;
    height: 100%;
    border: none; /* Supprimer la bordure de l'iframe */
}

.close-button {
    position: absolute;
    top: -15px; /* Dépassement vers le haut de la modale */
    right: -15px; /* Dépassement vers la droite de la modale */
    width: 40px; /* Largeur de la croix */
    height: 40px; /* Hauteur de la croix */
    background-color: rgba(0, 0, 0, 0.8); /* Fond circulaire noir */
    color: white; /* Couleur de la croix */
    font-size: 30px; /* Taille de la croix */
    font-weight: bold; /* Rendre la croix plus visible */
    border-radius: 50%; /* Forme circulaire */
    display: flex;
    justify-content: center;
    align-items: center; /* Centrer la croix dans le cercle */
    cursor: pointer;
    z-index: 1001; /* S'assurer que la croix soit au-dessus de la vidéo */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Ajouter une transition pour la couleur et la rotation */
}

.close-button:hover {
    background-color: #f00; /* Fond rouge lorsqu'on survole */
    transform: rotate(45deg); /* Rotation de 45° dans le sens des aiguilles d'une montre */
}

/* Effet d'overlay lors de l'ouverture de la modale */
.video-modal:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fond semi-transparent sur toute la page */
    z-index: -1; /* Placer l'overlay derrière la vidéo */
}