/* Conteneur vidéo */
.video-container {
    position: relative;
    max-width: 200px; /* Taille maximale de la largeur */
    margin: 20px auto; /* Centre horizontalement */
    text-align: center; /* Centre le contenu dans le conteneur */
    background-color: black; /* Fond pour uniformité */
    border: 1px solid #ccc; /* Optionnel : bordure autour de la vidéo */
    overflow: hidden; /* Empêche les débordements */
}

/* Vidéo */
.video-container video {
    width: 200px; /* La vidéo remplit le conteneur */
    height: auto; /* Respecte le ratio d’aspect */
    max-width: 200px; /* Empêche la vidéo de dépasser le conteneur */
    object-fit: contain; /* Assure que la vidéo est bien ajustée */
}

/* Plein écran - Ajout de centrage */
.video-container video:fullscreen,
.video-container video:-webkit-full-screen {
    max-width: 100vw; /* Limite la largeur à celle de la fenêtre */
    max-height: 100vh; /* Limite la hauteur à celle de la fenêtre */
    object-fit: contain; /* Conserve le ratio d’aspect en plein écran */
    display: flex; /* Active Flexbox pour le centrage */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    margin: 0 auto; /* Ajoute un centrage explicite */
}

/* Ajout d'espacement entre les vidéos */
hr {
    background-color: dimgray;
    height: 1px;
    border: none;
    margin: 20px 0;
}

.force-center {
    display: flex !important; /* Active Flexbox et force son application */
    justify-content: center !important; /* Centre horizontalement */
    align-items: center !important; /* Centre verticalement */
    text-align: center !important; /* Centre le texte et le contenu inline */
    height: 100% !important; /* Assure la prise en compte de la hauteur */
    width: 200px !important; /* Assure la prise en compte de la largeur */
    margin: 0 !important; /* Supprime les marges */
    padding: 0 !important; /* Supprime les paddings */
    position: relative !important; /* Préserve le positionnement si nécessaire */
}