/* Styles pour le conteneur de la vidéo */
.video-embed-widget-container {
    position: relative; /* Nécessaire pour le positionnement relatif */
    width: 50%; /* Largeur initiale de 1/2 page */
    max-width: 100%; /* S'assure qu'il ne dépasse pas le conteneur parent */
    left: 50%; /* Déplace le bord gauche au centre du parent */
    transform: translateX(-50%); /* Ramène l'élément de 50% de sa propre largeur vers la gauche pour le centrer */
    transform-origin: center center; /* Assure que toute transformation (comme le scale) part du centre */
    overflow: hidden; /* Cache le débordement des coins arrondis */
    border-radius: 8px; /* Coins arrondis */
    transition: all 0.5s ease-in-out; /* Animation fluide pour toutes les propriétés */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ombre légère pour un meilleur rendu */
    cursor: pointer; /* Indique que l'élément est interactif */
    aspect-ratio: 16 / 9; /* Maintient le ratio 16:9 pour les vidéos 16:9 */
}

/* Styles pour la balise vidéo elle-même */
.video-embed-widget-video {
    width: 100%;
    height: 100%;
    display: block; /* Supprime l'espace sous la vidéo */
    object-fit: cover; /* Assure que la vidéo couvre le conteneur sans distorsion */
    border-radius: 8px; /* Applique les coins arrondis à la vidéo aussi */
}

/* Effet au survol (Hover) */
.video-embed-widget-container:hover {
    width: 100%; /* S'agrandit à 100% de la largeur du conteneur parent */
    border-radius: 0; /* Supprime les coins arrondis lors de l'agrandissement */
    box-shadow: none; /* Supprime l'ombre lors de l'agrandissement */
}

/* Ajustement pour les petits écrans (responsive) */
@media (max-width: 768px) {
    .video-embed-widget-container {
        width: 90%; /* Plus large sur mobile pour une meilleure visibilité */
    }
}

/* --- Styles pour le bouton Play/Pause personnalisé --- */

/* Conteneur du bouton Play/Pause */
.video-embed-widget-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centre le bouton */
    width: 80px; /* Taille du bouton */
    height: 80px;
    background-color: rgba(0, 0, 0, 0.6); /* Fond semi-transparent */
    border-radius: 50%; /* Forme circulaire */
    display: flex; /* Utilise flexbox pour centrer l'icône SVG */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    z-index: 10; /* Assure qu'il est au-dessus de la vidéo */
}

/* Effet de survol sur le bouton Play/Pause */
.video-embed-widget-play-button:hover {
    background-color: rgba(0, 0, 0, 0.8); /* Assombrit le fond au survol */
}

/* Styles des icônes SVG */
.video-embed-widget-play-button svg {
    width: 40px; /* Taille de l'icône */
    height: 40px;
    fill: #ffffff; /* Couleur de l'icône */
    position: absolute; /* Permet de superposer les icônes */
    transition: opacity 0.3s ease; /* Transition pour l'opacité des icônes */
}

/* Petite translation pour aligner visuellement le triangle Play */
.video-embed-widget-play-button .play-icon {
    transform: translateX(5%);
}

/* Masque l'icône Pause par défaut */
.video-embed-widget-play-button .pause-icon {
    display: none;
    opacity: 0;
}

/* Cache le bouton Play/Pause UNIQUEMENT lorsque la vidéo est en lecture */
.video-embed-widget-container.playing .video-embed-widget-play-button {
    opacity: 0; /* Rend le bouton invisible */
    pointer-events: none; /* Désactive les événements de souris sur le bouton caché */
}

/* Affiche l'icône Pause et masque l'icône Play lorsque la vidéo est en lecture */
.video-embed-widget-container.playing .video-embed-widget-play-button .play-icon {
    display: none;
    opacity: 0;
}
.video-embed-widget-container.playing .video-embed-widget-play-button .pause-icon {
    display: block;
    opacity: 1;
}

/* Rend le bouton Play/Pause visible au survol du conteneur (si la vidéo n'est pas en lecture) */
.video-embed-widget-container:hover .video-embed-widget-play-button {
    opacity: 1; /* Assure que le bouton est visible au survol */
    pointer-events: auto; /* Réactive les événements de souris */
}