body {
    margin: 0 auto;
    background: linear-gradient(to top, transparent, rgb(13, 13, 12)),
        url("img/logocc.png");
    background-color: rgb(0, 0, 0);
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: white;
    font-family: 'Alegreya', serif;
    font-size: 20px;
}

/* slider */

main {
    padding-top: 40px;
    display: flex;
    justify-content: center;
}

.swiper-slide img {
    width: 100%;
    object-fit: cover;
}

.contenantslide {
    margin-top: -80px;
}

.test2 {
    max-width: 800px;
    margin: auto;
    margin-bottom: 40px;
    padding: 20px;
    padding-top: 0px;
}

.slidemoter {
    margin-top: -20px;

}

/* header */
header {
    position: relative;
    z-index: 5;
}

header a {
    color: #ffffff;
    font-size: 25px;
    text-decoration: none;
}

.act {
    border-bottom: solid white 2px;

}

a {
    color: #ffffff;
    font-size: 25px;
    text-decoration: none;
}




.logo {
    width: 80%;
    margin: auto;
    margin-top: 30px;
    display: flex;
    justify-content: center;

}

ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

li {
    text-align: center;
    margin: 20px 30px 20px 30px;
}

/* fin du header */

/* parte 1 */
/* a bien coder  */
.defilement {
    display: flex;
    justify-content: center;
    align-items: center;

}

.caroussel {
    overflow: hidden;
    width: 625px;

}

.images {
    display: flex;
    animation-duration: 20s;
    animation-name: mesmages;
    animation-iteration-count: infinite;
}

.images img {
    width: 630px;



}

@keyframes mesmages {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-590px);
    }

    50% {
        transform: translateX(-1140px);
    }

    75% {
        transform: translateX(-1730px);
    }

    100% {
        transform: translateX(0);
    }
}

/* parte 1 fin */

/* parte 1.5 */
.menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    font-size: 25px;
}

.menu1,
.menu2,
.menu3,
.menu4 {
    background-color: #201614d9;
    width: 300px;
    height: 150px;
    margin: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    transition: all 0.1s;
}

.menu1:hover,
.menu2:hover,
.menu3:hover,
.menu4:hover {
    background-color: #201614;
    transition: all 0.1s;
    font-size: 40px;
    width: 300px;
    height: 150px;
    margin: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

}







/* parte 1.5 fin */

/* parte 2 */
.degrade3 {
    background: linear-gradient(to bottom, transparent, #201614ec),
        url("bla bla.png");
    margin-bottom: -50px;
    margin-top: 20px;
}

.texplimg {

    background-color: #201614ec;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    padding: 15px;
    margin-bottom: 30px;
}

.texte1 {
    margin: 20px 20px 20px 20px;
    width: 500px;
    margin: 30px;


}

.img5 {
    width: 500px;
    height: 300px;
    background-image: url('img/photofil/fil.jpg');
    background-size: cover;
    margin-top: 50px;

}

.degrade2 {
    background: linear-gradient(to top, transparent, #201614ec),
        url("bla bla.png");
    margin-top: -30px;

}

/* parte 2 fin */

/* footer */
.degrader {
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.909)),
        url("bla bla.png");

}

footer {
    /* background-color: #616161; */
    background-color: rgba(0, 0, 0, 0.909);
    padding-top: 100px;
    padding-bottom: 100px;

    position: relative;


}

.logo2 {
    width: 250px;
    position: absolute;
    right: 60px;
}


/* responsive */

@media all and (max-width: 450px) {

    .contenantslide {
        max-width: 80%;

    }

    .logo2 {

        display: flex;
        justify-content: center;
        text-align: center;
        width: 60%;

    }

    /* anime */

    .defilement {
        display: flex;
        justify-content: center;
        align-items: center;

    }

    .caroussel {
        overflow: hidden;
        width: 320px;

    }

    .images img {
        width: 320px;



    }

    .images {

        display: flex;
        animation-duration: 15s;
        animation-name: mesmages;
        animation-iteration-count: infinite;
    }

    @keyframes mesmages {
        0% {
            transform: translateX(0);
        }

        25% {
            transform: translateX(-320px);
        }

        50% {
            transform: translateX(-640px);
        }

        75% {
            transform: translateX(-960px);
        }

        100% {
            transform: translateX(0);
        }
    }

    .img5 {
        width: 500px;
        height: 300px;
        background-image: url('img/photofil/fil.jpg');
        background-size: 100%;
        background-repeat: no-repeat;
        margin-top: 50px;

    }

    ul {
        display: flex;
        flex-wrap: wrap;


    }

    li {
        width: 100%;
        margin-right: 65px;
        margin-top: 10px;

    }




}

@media all and (min-width: 1700px) {

    .contenantslide {
        margin-top: -100px;
    }

}