#product-video-container {
    position: fixed;
    left: 10px;
    bottom: 10px;
    width: calc(100vh * 9 / 16);
    /* Utilisez 100vh pour déterminer la largeur basée sur la hauteur */
    height: 100vh;
    /* Utilisez la hauteur entière de l'écran pour un affichage en portrait */
    max-width: 180px;
    /* Limitez la largeur pour ne pas avoir une vidéo trop grande */
    max-height: calc(180px * 16 / 9);
    /* Limitez la hauteur basée sur la largeur maximale et le ratio */
    border-radius: 8px;
    overflow: hidden;
    z-index: 1000;
    /* S'assurer que le conteneur est au-dessus des autres éléments */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Alignez le texte attractif vers le bas */
}

.product-video {
    width: 100%;
    /* Garantissez que la vidéo remplit la largeur du conteneur */
    height: auto;
    /* La hauteur s'ajuste pour maintenir le ratio */
    object-fit: contain;
    /* S'assurer que la vidéo s'adapte au conteneur sans être coupée */
}

.video-text {
    position: absolute;
    /* Positionnez le texte de manière absolue */
    bottom: 100%;
    /* Placez le texte juste au-dessus de la vidéo */
    left: 0;
    width: 100%;
    /* Le texte devrait s'étendre sur toute la largeur du conteneur vidéo */
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 14px;
    padding: 10px;
    text-align: center;
    display: flex;
    /* Utilisez flex pour centrer le contenu */
    align-items: center;
    /* Centrez verticalement le texte dans la boîte */
    justify-content: center;
    /* Centrez horizontalement le texte dans la boîte */
}

.close-video {
    position: absolute;
    top: 5px;
    right: 5px;
    background: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    z-index: 1010;
    /* Au-dessus de la vidéo et du texte */
}

@media (max-width: 768px) {
    #product-video-container {
        width: 80px;
        /* Taille du rond sur mobile */
        height: 80px;
        /* Taille du rond sur mobile */
        bottom: 80px;
        /* Placement ajusté pour la visibilité */
        border-radius: 50%;
        /* Rond */
        justify-content: center;
        /* Centrer l'icône dans le rond */
    }

    .product-video,
    .video-text {
        display: none;
        /* Masquer la vidéo et le texte en vue mobile initiale */
    }

    .video-icon {
        display: block;
        /* Assurer que l'icône est visible sur mobile */
        width: 100%;
        text-align: center;
        font-size: 30px;
        /* Taille de l'icône de lecture */
        color: white;
    }
}