#bandeau {
    display: flex;
    position: absolute;
    top: 0;
    justify-content: center;
    text-align: center;
    width: 100%;
    height: 300px;
    margin: 0;
    overflow: hidden;
    background-color: var(--gris);
}
#slideshow, #masque {
    position: absolute;
    top: 0;
    width: 2000px;
    height: 300px;
    text-align: center;
    overflow: hidden;
}
#slideshow {
    /*left: calc((50% - 1000px));*/
}
#sContent {
    display: flex;
    position: absolute;
    width: 10000px;
    margin: 0;
    padding: 0;
    animation-name: AutoSlide;
    animation-duration: 120s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-direction: normal;
}
#sContent li {
    display: inline;
}
ul, li {
    list-style: none;
}
@keyframes AutoSlide {
    0%, 8% /*, 100% */{
        left: -500px; /*1ère image*/
    }
    12%, 20% {
        left: -1500px; /*2ème image*/
    }
    24%, 32% {
        left: -2500px; /*3ème image*/
    }
    36%, 44% {
        left: -3500px; /*4ème image*/
    }
    48%, 56% {
        left: -4500px; /*5ème image*/
    }
    60%, 68% {
        left: -5500px; /*6ème image*/
    }
    72%, 80% {
        left: -6500px; /*7ème image*/
    }
    88%, 100% {
        left: -7500px; /*8ème image*/
    }
}

#masque {
    display: inline-flex;
}
#masque_gauche, #masque_droite {
    width: 500px;
    background-color: var(--gris);
    opacity: 0.8;
}
#masque_gauche, #masque_droite, #masque_centre {
    height: 100%;
    display: inline;
}
#masque_centre {
    width: 1000px;
    text-align: center;
    font-family: "Noto Serif JP", serif;
    font-size: 60px;
    font-weight: bold;
    text-shadow: 3px 3px 5px black;
    line-height: 80px;
    padding-top: 20px;
    color: white;
}