body  {
    margin: 0;
    padding: 0;
    background-color: black;
}

.marges {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.container {
    cursor: url('../img/curseur-inactif.png'), auto;
    width: 100%;
    height: 100%;
    position: relative;
    top:0;
    left: 0;
}

.ratio-w {
    width: calc(100vh * 16 / 9);
    height: 100vh;
}

.ratio-h {
    width: 100%;
    height: calc(100vw / 16 * 9);;
}

.container div {
    width: 16.6666%;
    height: 20%;
    float: left;
    background-size: contain;
}

.container .panneau {
    height: 40%;
    cursor: url('../img/curseur-panneau.png'), auto;
    background-image: url("../img/panneau.jpg");
}

.container .tempete {
    width: 66.6664%;
    height: 40%;
    background-image: url("../img/tempete.jpg");
}

.container .disparition {
    width: 33.3332%;
    height: 40%;
    background-image: url("../img/disparition.jpg");
}

.container .megots {
    height: 40%;
    background-image: url("../img/megots.png");
}

.container .glaces {
    width: 49.9998%;
    background-image: url("../img/fonteglace.jpg");
}

.container .plastique {
    width: 33.3332%;
    height: 40%;
    background-image: url("../img/plastique.jpg");
}

.container .empty1 {
    width: 33.3332%;
    height: 40%;
    background-color: rgb(186, 226, 252);
}

.container .empty2 {
    width: 49.9998%;
    background-image: url("../img/basgauche_00000.png");
    position: absolute;
    bottom: 0;
    left: 0;
}

.container video {
    cursor: url('../img/curseur-actif.png'), auto;
    border: none;
}

.container .pop-up video {
    cursor: default;
}

.container .panneau video {
    cursor: url('../img/curseur-panneau.png'), auto;
}

.container div video {
    width: 100%;
}