.video-background-container {
          background-image: url('#');
          background-size: cover;
          background-position: center;
      }
      
.video-background-container {
          position: relative; /* Establishes a positioning context for the video and overlay */
          width: 100%;
          height: 100%; /* Example: full viewport height */
          overflow: hidden;
      }
      
      .video-background-container video {
          position: relative; /* Fixes the video to the viewport background */
          right: 0;
          bottom: 0;
          min-width: 100%;
          min-height: 100%;
          max-width: 100%;
          max-height: 100%;
          /* Ensures the video covers the full area while maintaining aspect ratio */
          object-fit: cover; 
          z-index: -1; /* Puts the video behind other content */
      }

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    padding: 15px 35px;
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid #ffffff;
    border-radius: 50px;
    cursor: pointer;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
    opacity: 1;
    visibility: visible;
    white-space: nowrap; /* Empêche le texte de sauter à la ligne */
}

.play-btn.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@media (max-width: 768px) {
    /* Le style pop-up s'active UNIQUEMENT si la classe .is-playing est présente */
    .video-background-container.is-playing {
        position: fixed !important; 
        top: 0;
        left: 0;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 9999; 
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(0, 0, 0, 0.8) !important; 
        backdrop-filter: blur(8px); 
    }

    /* La vidéo ne passe en mode entier (contain) que pendant la lecture */
    .video-background-container.is-playing video {
        position: relative !important;
        width: 90% !important;   
        height: auto !important;  
        max-height: 70vh !important; 
        object-fit: contain !important; /* Affiche la vidéo en entier sans coupure */
        border-radius: 12px; 
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); 
        z-index: 1 !important; 
    }

    .video-background-container.is-playing .play-btn {
        z-index: 10000 !important; 
        padding: 12px 25px;   /* Bouton légèrement plus petit sur mobile */
        font-size: 0.95rem;   /* Texte plus adapté aux pouces */
    }
}