/********************
	Part - Style général des carousel
********************/
.carousel .direction {
    z-index : auto
}

.carousel .carousel-item {
    height : 100%
}

.carousel .carousel-item .caption {
    position  : absolute;
    color     : #fff;
    max-width : 340px
}

.carousel .carousel-item .caption .caption-description p {
    color : #fff
}

.carousel .carousel-control {
    opacity : 1
}

.carousel .carousel-control .icon-next:before,
.carousel .carousel-control .icon-prev:before {
    content : ""
}

.carousel .carousel-control .icon-next i,
.carousel .carousel-control .icon-prev i {
    font-size : 3.125rem;
    color     : #fff
}

.carousel .carousel-control .icon-next:hover i,
.carousel .carousel-control .icon-prev:hover i {
    color : #2fb5d2
}

.carousel .carousel-control .icon-prev {
    left : 1rem
}

.carousel .carousel-control .icon-next {
    right : 2rem
}

.carousel .carousel-control.left,
.carousel .carousel-control.right {
    background : none
}

@media (max-width : 767px) {
    .carousel .carousel-item .caption {
        bottom : 5px;
        left   : 40px
    }

    .carousel .carousel-item figure {
        margin : 0
    }
}

@media (min-width : 768px) {
    .carousel .carousel-item .caption {
        bottom : 28px;
        left   : 90px
    }

    .carousel .carousel-item img {
        width : 100%;
    }
}

/********************
	Part - Style général des slider slick
********************/
.slick-slider {
    display : none !important;
}

.slick-slider.slick-initialized {
    display   : flex !important;
    flex-wrap : wrap;
}

.default-container .slick-slider {
    position    : static;
    /*width       : 94%;*/
    /*margin      : 0 auto;*/
    display     : flex;
    align-items : center;
}

.slick-slider .slick-arrow {
    background      : var(--color-black-default);

    cursor          : pointer;
    position        : absolute;

    border          : none;

    width           : 56px;
    padding-bottom  : 56px;
    height          : 0;
    border-radius   : 50%;

    z-index         : 10;

    /*padding         : 3px 7px;*/
    display         : flex;
    align-items     : center;
    justify-content : center;

    top             : 50%;
    transform       : translate3d(0, -50%, 0);
}

.slick-slider .slick-arrow svg {
    position  : absolute;
    top       : 50%;
    left      : 50%;
    transform : translate3d(-50%, -50%, 0);
    fill      : transparent;
    stroke    : var(--color-white-default);
}

.slick-slider .slick-arrow.slick-prev {
    left : 0;
}

.slick-slider .slick-arrow.slick-next {
    right : 0;
}

.slick-slider .slick-list {
    min-width : 100%;
}

.slick-slider .slick-track {
    display : flex;
}

.slick-slider.slick-vertical .slick-track {
    display : block;
}

.slick-slider .slick-track .slick-slide {
    height : auto;
}

.slick-slider .slick-slide > div,
.slick-slide > div .product-miniature {
    height : 100%;
}

/********************
	Part - Style général des dots slick
********************/
.slick-list + .slick-dots {
    margin-top : 35px;
}

.slick-dots {
    display         : flex;
    justify-content : center;
    align-items     : center;
    width           : 100%;
}

.slick-dots li + li {
    margin-left : 7px;
}

.slick-dots button {
    border        : none;
    font-size     : 0;
    background    : var(--color-black-default);
    border-radius : 50%;
    padding       : 0;
    width         : 10px;
    height        : 10px;
    transition    : all .3s;
}

.slick-dots .slick-active button {
    background : var(--color-primary);
}

/********************
	Part - Style général des items swiper
********************/
.default-container .swiper-container {
    position : static;
    width    : 94%;
    margin   : 0 auto;
}

.swiper-slide {
    height : auto;
}

.swiper-slide > .product-miniature {
    height : 100%;
}