.carousel {
    width: 900px; 
    margin: 50px -150px 50px; 
}

.page-template-page-a-propos .carousel{
    margin: 50px -45px 50px;
}

.carousel-item__image{
    position: relative;
}

.carousel-item__image img {
    width: 100%;
    height: 600px;
    object-fit: cover;
}


.carousel .slider-wrap .slick-arrow {
    background:url("https://selectos.eu/wp-content/uploads/2020/10/Icone-Switch-Carrousel-02.svg");
    background-repeat: no-repeat;
    background-size: 74px 146px;
    width: 74px;
    height: 146px;
    z-index: 2;
}

.carousel .slider-wrap .slick-arrow:hover {
    background:'';
}
.carousel .slider-wrap .slick-next {
    transform: rotate(180deg);
    top: calc(50% - 73px);
    right: -2px;
}

.carousel .slider-nav-wrap .slick-arrow::before {
    content: '';
}

.carousel .slider-nav-wrap .slick-arrow {
    background:url("https://selectos.eu/wp-content/uploads/2020/10/fleche-blanche-carrousel-01.svg"),linear-gradient(270deg,rgba(255,255,255,0) 6%,rgba(255,255,255,0) 12%,rgba(55,125,255,0.8) 100%);
    background-repeat: no-repeat;
    background-size: 50px 31px, cover;
    background-position-y: center;
    background-position-x: left;
    height: 85px;
    width: 68px;
    z-index: 2;
    opacity: 1;
    top: 0;
    transform: translate(0, -0%);
    -webkit-transform: translate(0, -0%);
    -ms-transform: translate(0, -0%);
}

.splide__arrow svg {
    fill: var(--main-color) !important;
}

.splide__arrow:hover,  .splide__arrow:focus{
    background-color:transparent;
}

.splide__pagination__page.is-active{
    background: var(--main-color) !important;
}

.carousel .slider-nav-wrap .slick-prev{
    left:0;
}
.carousel .slider-nav-wrap .slick-next {
    transform: rotate(180deg);
    right: 0px;
}

.slider-nav-wrap {
    margin: 15px 0px 0px 0px;
}

.carousel .slider-nav-wrap .slick-arrow {
    z-index: 1;
}

.prgrsv {
    width: 146px;
    height: 85px;
    overflow: hidden;
} 

.carousel-nav-img .carousel-nav-thumb {
    width: 146px;
    height: 85px;
    object-fit: cover;
}

.slider-nav-wrap .slick-current .carousel-nav-thumb {
    outline: 3px solid #377dff;
    outline-offset: -3px;
}

.carousel .legendeContainer {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: var(--main-color);
    color: white;
}

.carousel .legendeContainer p{
    margin: 0;
    font-size: 12px !important;
    padding: 5px 10px;
}

/* Mobile */
@media only screen and (max-width: 900px) {
    .carousel,.page-template-page-a-propos .carousel{
        width: 100%;
        margin: 10px 0px 10px 0px;
    }

}

@media only screen and (max-width: 700px) {

    .carousel {
        width: 524px;
        margin: 0 auto;
    }

    .carousel-nav-img .carousel-nav-thumb {
        width: 135px;
        height: 74px;
        object-fit: cover;
    }

    .carousel .slider-wrap .slick-arrow {
        height: 124px;
        width: 66px;
        background-size: 67px 124px;
    }

    .carousel .slider-nav-wrap .slick-arrow {
        height: 74px;
        width: 65px;
        background-size: 50px 40px, cover;
    }

    .carousel .slider-wrap .slick-next {
        top: 116px;
    }

    .carousel-item__image img {
        height: 350px;
    }
}

@media only screen and (max-width: 550px) {

    .carousel {
        width: 400px;
        margin: 0 auto;
    }

    .carousel-nav-img .carousel-nav-thumb {
        width: 94px;
        height: 61px;
        object-fit: cover;
    }

    .carousel .slider-nav-wrap .slick-arrow {
        height: 61px;
        width: 45px;
        background-size: 35px 25px, cover;
    }

    .carousel .slider-wrap .slick-arrow{
        height: 56px;
        width: 28px;
        background-size: 28px 56px;
    }

    .carousel .slider-wrap .slick-next {
        top: calc(50% - 28px);
    }

    .carousel-item__image img {
        height: 300px;
    }   
}

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

    .carousel {
        width: 370px;
        margin: 0 auto;
    }

    .carousel-nav-img .carousel-nav-thumb {
        width: 94px;
        height: 61px;
        object-fit: cover;
    }

    .carousel .slider-nav-wrap .slick-arrow {
        height: 61px;
        width: 45px;
        background-size: 35px 25px, cover;
    }

    .carousel .slider-wrap .slick-arrow{
        height: 56px;
        width: 28px;
        background-size: 28px 56px;
    }

    .carousel .slider-wrap .slick-next {
        top: calc(50% - 28px);
    }

    .carousel-item__image img {
        height: 300px;
    }   
}

@media only screen and (max-width: 400px) {

    .carousel {
        width: 100%;
        margin: 0 auto;
    }

    .prgrsv {
        width: 100%;
    }

    .carousel-nav-img .carousel-nav-thumb {
        width: 95%;
        height: 61px;
        object-fit: cover;
    }

    .carousel .slider-nav-wrap .slick-arrow {
        height: 61px;
        width: 45px;
        background-size: 35px 25px, cover;
    }

    .carousel .slider-wrap .slick-arrow{
        height: 56px;
        width: 28px;
        background-size: 28px 56px;
    }

    .carousel .slider-wrap .slick-next {
        top: calc(50% - 28px);
    }

    .carousel-item__image img {
        height: 250px
    }

    .carousel .legende{
    font-size: 12px !important;
    }
}