/* ---------------------  global style --------------------------------- */
.container {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    overflow-x: scroll;
}


.prev-steep,
.steep,
.next-steep {
    color: #fff;
    text-decoration: none;
    position: relative;
    margin-right: 15px;
    padding: 5px 11px;
    font-size: 90%;
    cursor: not-allowed;
}


.prev-steep::before,
.steep::before,
.next-steep::before,
.prev-steep::after,
.steep::after,
.next-steep::after {
    content: "";
    position: absolute;
    border-style: solid;
    border-width: 14px 5px;
    top: 0px;
}



.prev-steep::before,
.steep::before,
.next-steep::before {
    left: -10px;
}




/* ---------------------  prev steep style --------------------------------- */

.prev-steep::before {
    border-color: rgba(0, 0, 0, 1);
    border-left-color: transparent;
}


.prev-steep::after {
    left: 100%;
    border-color: transparent;
    border-left-color: rgba(0, 0, 0, 1);
}



.prev-steep {
    background-color: rgba(0, 0, 0, 1);
    cursor: pointer;
}



.prev-steep:hover {
    background-color: rgba(158, 124, 69, 1);
}



.prev-steep:hover::before {
    border-color: rgba(158, 124, 69, 1);
    border-left-color: transparent;
}



.prev-steep:hover::after {
    left: 100%;
    border-color: transparent;
    border-left-color: rgba(158, 124, 69, 1);
}

/* ---------------------  steep style --------------------------------- */


.steep::before {
    border-color: rgba(158, 124, 69, 1);
    border-left-color: transparent;
}

.steep::after {
    left: 100%;
    border-color: transparent;
    border-left-color: rgba(158, 124, 69, 1);
}


.steep {
    background-color: rgba(158, 124, 69, 1);
    cursor: pointer;
}


.steep:hover {
    background-color: rgba(0, 0, 0, 1);
}


.steep:hover::before {
    border-color: rgba(0, 0, 0, 1);
    border-left-color: transparent;
}

.steep:hover::after {
    left: 100%;
    border-color: transparent;
    border-left-color: rgba(0, 0, 0, 1);
}


/* ---------------------  next steep style --------------------------------- */

.next-steep::before {
    border-color: rgba(158, 124, 69, .4);
    border-left-color: transparent;
}

.next-steep::after {
    left: 100%;
    border-color: transparent;
    border-left-color: rgba(158, 124, 69, .4);
}


.next-steep{
    cursor: not-allowed;
    background-color: rgba(158, 124, 69, .4);
    color: #fff;
    cursor: not-allowed;
}





/* debut du responsive */

@media screen and (min-width: 1920px) {
}

/* --------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1919px) and (min-width: 1366px) {  
}

/* --------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1365px) and (min-width: 1280px) {
}

/* --------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1279px) and (min-width: 1112px) {
}

/* --------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1111px) and (min-width: 1080px) {
}

/* --------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 1079px) and (min-width: 1024px) {
}

/* ------------------------------------------ partie mobile --------------------------------------------------------- */

@media screen and (max-width: 1023px) and (min-width: 834px) {
    .prev-steep,
        .steep,
    .next-steep {

        padding: 2px 5px;
        font-size: 70%;
    }

    .prev-steep::before,
    .steep::before,
    .next-steep::before,
    .prev-steep::after,
    .steep::after,
    .next-steep::after {
        border-width: 9px 5px;
        top: 0px;
    }


    .prev-steep::before,
    .steep::before,
    .next-steep::before {
        left: -9px;
    }
}

/* --------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 833px) and (min-width: 800px) {
    .prev-steep,
    .steep,
    .next-steep {

        padding: 2px 5px;
        font-size: 70%;
    }

    .prev-steep::before,
    .steep::before,
    .next-steep::before,
    .prev-steep::after,
    .steep::after,
    .next-steep::after {
        border-width: 9px 5px;
        top: 0px;
    }


    .prev-steep::before,
    .steep::before,
    .next-steep::before {
        left: -9px;
    }
}

/* --------------------------------------------------------------------------------------------------- */

@media screen and (max-width: 799px) and (min-width: 768px) {
    .prev-steep,
    .steep,
    .next-steep {

        padding: 2px 5px;
        font-size: 70%;
    }

    .prev-steep::before,
    .steep::before,
    .next-steep::before,
    .prev-steep::after,
    .steep::after,
    .next-steep::after {
        border-width: 9px 5px;
        top: 0px;
    }


    .prev-steep::before,
    .steep::before,
    .next-steep::before {
        left: -9px;
    }
}

/* --------------------------------------------------------------------------------------------- */

@media screen and (max-width: 767px) and (min-width: 736px) {
}

/* ---------------------------------------------------------------------------------------------- */

@media screen and (max-width: 735px) and (min-width: 667px) {
}

/* ---------------------------------------------------------------------------------------------- */

@media screen and (max-width: 666px) and (min-width: 576px) {
}

/* ---------------------------------------------------------------------------------------------- */

@media screen and (max-width: 575px) and (min-width: 568px) {
}

/* ---------------------------------------------------------------------------------------------- */

@media screen and (max-width: 567px) and (min-width: 414px) {
    .prev-steep,
    .steep,
    .next-steep {

        padding: 2px 5px;
        font-size: 70%;
    }

    .prev-steep::before,
    .steep::before,
    .next-steep::before,
    .prev-steep::after,
    .steep::after,
    .next-steep::after {
        border-width: 9px 5px;
        top: 0px;
    }


    .prev-steep::before,
    .steep::before,
    .next-steep::before {
        left: -9px;
    }
}

/* ---------------------------------------------------------------------------------------------- */

@media screen and (max-width: 413px) and (min-width: 375px) {
    .prev-steep,
    .steep,
    .next-steep {

        padding: 2px 5px;
        font-size: 70%;
    }

    .prev-steep::before,
    .steep::before,
    .next-steep::before,
    .prev-steep::after,
    .steep::after,
    .next-steep::after {
        border-width: 9px 5px;
        top: 0px;
    }


    .prev-steep::before,
    .steep::before,
    .next-steep::before {
        left: -9px;
    }
}

/* ---------------------------------------------------------------------------------------------- */

@media screen and (max-width: 374px) and (min-width: 320px) {
    .prev-steep,
    .steep,
    .next-steep {

        padding: 2px 5px;
        font-size: 70%;
    }

    .prev-steep::before,
    .steep::before,
    .next-steep::before,
    .prev-steep::after,
    .steep::after,
    .next-steep::after {
        border-width: 9px 5px;
        top: 0px;
    }


    .prev-steep::before,
    .steep::before,
    .next-steep::before {
        left: -9px;
    }
}

/* ---------------------------------------------------------------------------------------------- */

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

    .prev-steep,
    .steep,
    .next-steep {
        
        padding: 2px 5px;
        font-size: 70%;
    }

    .prev-steep::before,
    .steep::before,
    .next-steep::before,
    .prev-steep::after,
    .steep::after,
    .next-steep::after {
        border-width: 9px 5px;
        top: 0px;
    }


    .prev-steep::before,
    .steep::before,
    .next-steep::before {
        left: -9px;
    }
}