.banner {
    position: relative;
}

.banner .filter {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: rgb(0 0 0 / 20%);
}

.banner .banner-content {
    z-index: 1;
    position: relative;
    height: 200px;
}

@media only screen and (min-width: 600px) {
    .banner .banner-content {
        height: 200px;
    }
}

@media only screen and (min-width: 992px) {
    .banner .banner-content {
        height: 200px;
    }
}

.banner .title-banner {
    font-size: 32px;
    color: var(--main-color);
    position: relative;
    text-align: center;
    margin-bottom: 30px;
    padding-top: 20px;
}

.banner .title-banner::after {
    left: 46.5%;
    z-index: 1;
    width: 7%;
    height: 3px;
    content: "";
    background: var(--main-color-op-05);
    position: absolute;
    bottom: -16px;}

.banner .banner-text {
    font-size: 16px;
    text-align: center;
}

.banner .shop-product-social {
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    margin-bottom: 0;
}

.banner .shop-product-social li {
    margin: 0 8px;
}

.banner .shop-product-social li a {
    color: #dedede;
    font-size: 26px;
    transition: all 0.3s;
}

.banner .shop-product-social .facebook:hover {
    color: #0866ff;
}

.banner .shop-product-social .pinterest:hover {
    color: #e60023;
}

.banner .shop-product-social .linkedin:hover {
    color: #99c3ff;
}

.banner .shop-product-social .mail:hover {
    color: var(--main-color);
}

.breadcrumbV2.breadcrumb a,
.breadcrumbV2.breadcrumb li {
    color: var(--text-color) !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    transition: all 0.3s !important;
    text-transform: none !important;
    text-shadow: none !important;
}

.breadcrumbV2.breadcrumb .active {
    color: var(--main-color) !important;
}

.breadcrumbV2.breadcrumb li::after {
    color: inherit !important;
}

#filARIANE div {
    height: fit-content;
}

@media only screen and (max-width: 792px) {
    .breadcrumbV2.breadcrumb ul{
        margin-left: auto;
        margin-right: auto;
    }
}

.banner .title-banner{
    position: relative;
}

.banner .title-banner::before {
    content: "";
    height: 1px;
    background: #eee;
    width: 200vw;
    position: absolute;
    left: -50vw;
    top: -5px;
}

@media only screen and (max-width: 600px) {
    .banner .fil-ariane-top::after{
        bottom: -26px;
    }
}