html,
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    /* Même bleu nuit que les bords de la vidéo + quelques étoiles, pour les écrans très larges/hauts */
    background:
        radial-gradient(1px 1px at 12% 22%, #fff8, transparent 60%),
        radial-gradient(1px 1px at 82% 14%, #fff6, transparent 60%),
        radial-gradient(1.5px 1.5px at 6% 78%, #fff7, transparent 60%),
        radial-gradient(1px 1px at 93% 66%, #fff5, transparent 60%),
        radial-gradient(1px 1px at 30% 90%, #fff4, transparent 60%),
        radial-gradient(1px 1px at 70% 8%, #fff5, transparent 60%),
        radial-gradient(ellipse at center, #14141f 0%, #080a15 70%);
}

/* Cas normal (16:9, 16:10, 4:3...) : la vidéo remplit tout l'écran, légèrement rognée */
video {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 100vh;
    transform: translate(-50%, -50%);
    object-fit: cover;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* Écrans très larges (21:9, 32:9...) : on limite le rognage pour ne pas couper le trou noir,
   et les côtés se fondent dans le fond étoilé au lieu d'une bande noire nette */
@media (min-aspect-ratio: 2/1) {
    video {
        width: 200vh;
        height: 112.5vh;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    }
}

/* Écrans très hauts (téléphone en portrait) : pareil, mais en haut et en bas */
@media (max-aspect-ratio: 3/4) {
    video {
        width: 220vw;
        height: 123.75vw;
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
        mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%);
    }
}