.c {
    position: relative;
    /*width: calc(90vh/2);*/
    /*height: calc((90vmin * 9 / 16)/2);*/
    width:100%;
    height:auto;
    max-height:420px;
    margin: auto;
    overflow: hidden;
    box-shadow: 0 1.25em 1em -0.5em #0005;
}

.hLinksAccueil{
    position: absolute;
    z-index:10;
    top:30px;
    right:30px;
}

.i {
    width: 100%;
    height: 100%;
    background-color: #000;
}

.i .img {
    width: auto;
    height: 49vh;
    -o-object-fit: contain;
    object-fit: contain;
    -o-object-position: 0% 50%;
    object-position: 0% 50%;
    transition: transform 1s;
    transform:scale(1.1,1.1);
    margin:0 auto;
}
.c:hover .img {
    /*transform: translateX(-3%);*/
    transform:scale(1.3,1.3);
    transition-duration: 1s;
}

:root {
    --s1-w: 40vmin;
    --s2-w: 60vmin;
    --s3-w: 10vmin;
}

@-webkit-keyframes move-x {
    50% {
        transform: translateX(var(--x1));
    }
    100% {
        transform: translateX(var(--x2));
    }
}

@keyframes move-x {
    50% {
        transform: translateX(var(--x1));
    }
    100% {
        transform: translateX(var(--x2));
    }
}
.s11,
.s21,
.s31 {
    position: absolute;
    top: 0;
    bottom: 0;
    -webkit-animation: gg 0.5s ease-out forwards;
    animation: gg 0.5s ease-out forwards;
    pointer-events: none;
}
.c1:hover .s1,
.c1:hover .s2,
.c1:hover .s3 {
    -webkit-animation-name: move-x;
    animation-name: move-x;
}

.s11 {
    left: 100%;
    z-index: 1;
    width: var(--s1-w);
    background-color: rgba(16,16,0,0.6);
    mix-blend-mode: difference;
    --x1: -110vmin;
    --x2: -50vmin;
}

.s21 {
    z-index: 2;
    width: calc(var(--s2-w) * 2);
    left: calc(100% + var(--s1-w));
    background-color: rgba(0,0,0,0.6);
    --x1: -110vmin;
    --x2: -90vmin;
}

.s31 {
    z-index: 2;
    width: 10vmin;
    right: 100%;
    background-color: rgba(0,0,0,0.6);
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s;
    --x1: 0;
    --x2: 95%;
}

/*body {*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    align-items: center;*/
/*    justify-content: space-evenly;*/
/*    min-height: 100vh;*/
/*    margin: 0;*/
/*    background: #333;*/
/*    color: #cca;*/
/*}*/

/*h1 {*/
/*    text-align: center;*/
/*}*/