/* Fond noir pour la page entière */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Fond noir */
}

/* Conteneur vidéo plein écran */
.video-container {
    position: fixed;
    top: 0;
    left: 0;
    
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
    z-index: 1000; /* Toujours au-dessus du contenu */
    transition: transform 1s ease-in-out; /* Transition fluide */
}

/* Vidéo en plein écran */
.video-background {
    width: 50%;
    height: 50%;
    object-fit: cover; /* Garde le ratio tout en remplissant */
}

/* Transition pour faire remonter la vidéo */
.video-container.fade-out {
    transform: translateY(-100%); /* Fait remonter l'écran */
}

@media (max-width: 768px) {
.video-background {
    width: 35%;
    height: 35%;
    object-fit: cover; /* Garde le ratio tout en remplissant */
}

}