html, body {
    max-width: 100%;
    overflow-x: hidden;
}

#diapo
{
    margin-bottom: 20px;
}
/* Affiche les 4 à la fois */
@media screen and (min-width: 1000px)
{
    #diapo
    {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        overflow: hidden;
    }
    
    .diapo-img
    {
        width: 100%;
        display: flex;
        height: auto;
    }
    
    .diapo-img img 
    {
        width: 25%;
    }

    .secu
    {
        display: none;
    }
}

/* Défilement images pour écran mobile */
@media screen and (max-width: 999px)
{
    .diapo-img
        {
            max-width: 100%;
            max-height: 70%;
            display: flex;
            animation: slide 10s infinite;
        }
        
    .diapo-img > img 
        {
            max-width: 50%;
        }
    
    @keyframes slide{
        0%, 25%
        {
            transform: translateX(0);
        }
        
        30%, 50%
        {
            transform: translateX(-50%);
        }
    
        55%, 75%
        {
            transform: translateX(-100%);
        }

        80%, 90%
        {
            transform: translateX(-150%);
        }
    }
}