:root {
    --background-body: #e4f5fd;
    --sb-logo-primary: white;
    --sb-logo-secondary: white; 
}

/* TODO :: Mettre dans un scss ? */

.d-b2c {
    display: block !important;
}

.nav-link.active { background-color: var(--bs-primary) !important; }

.brand-slide {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}
.brand-slide .brand-zone {
    width: 8rem;
}

#card-search-add {
    width: 100% !important;
    border-radius: 0 !important;
}

.app-b2c .search-card-border{
    background-color: white;
}

#product-search-block {
    background-color: var(--bs-secondary);
    padding: 0;
    padding-top: 0 !important;
    border-bottom: 0;
    min-height: auto !important;
}

.tyreform-search {
    width: 100%;
}

.tyreform-add {
    display: flex;
    justify-content: space-between;
}
.tyreform-options {
    width: 60%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

#search-button, #search-button-b2C {
    min-height: 3rem;
    margin-top: 0.5rem !important;
    margin-right: 0.5rem !important;
    border-radius: 0.8rem;
    border: none;
    text-transform: uppercase;
    font-size: 1.2rem;
    font-weight: bold;
}


@media (max-width: 768px) {
    #search-button-b2C {
        width: 100%;
    }
}

#search-announcement-container {
    height: 20vh;
    overflow: hidden;
    position: relative;
    padding: 1vh 0;
}

.custom-form-control.custom-disable, .custom-form-control.custom-disable .custom-multiselect-trigger {
    background-color: var(--bs-secondary-bg);
    opacity: 1;
    pointer-events: none;
}

/* #search-announcement-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 5vh;
    width: 100%;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--bs-secondary), transparent);
    z-index: 0;
} */


#card-search-principal, #card-search-add {
    background-color: white !important;
}

#card-search-principal {
    margin-bottom: 2rem;
    border-bottom-left-radius: 1.2rem !important;
    border-bottom-right-radius: 1.2rem !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    padding-bottom: 1rem;
    z-index: 1;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.show-more {
    text-align: center;
    cursor: pointer;
    padding: 10px;
    position: absolute;
    bottom: 0;
    width: 100%;
    transition: background-color 0.3s;
}

.show-more:hover {
    background-color: #eaeaea;
}

.show-more i {
    transition: transform 0.3s;
}

#search-announcement-container.expanded .show-more i {
    transform: rotate(180deg);
}

#card-search-add hr {
    display: none;
}

#product-form {
    padding-bottom: 0 !important;
    padding-top: 0rem !important;
}

.search-announcement-b2c-img {
    height: 100%;
    width: 100%;
    top: 0;
    position: absolute;
    left: 0;
    z-index: 0;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;
}
/* 
.search-announcement-b2c-after {
    pointer-events: none;
    background: linear-gradient(to bottom, var(--bs-secondary), transparent);
} */


.column-status {
    width: 1%;
}


.zone-logo-b2c {
    left: 0;
    position: absolute;
}


.zone-logo-b2c .logo-b2c {
    width: 20rem;
    height: 6rem;
    filter: drop-shadow(2px 4px 6px black);
    transition: height 0.3s ease;    
    object-fit: contain;
}
.zone-logo-b2c .logo-b2c.shrinked {
    /* width: 8rem; */
    height: 2.5rem;
}

footer .logo-b2c {
    height: 4rem !important;
    width: 12rem;
    margin: 1rem 0;
    object-fit: contain;
}

#products-zone-container #tyeform_add_zone {
    background-color: white !important;
    border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}


header a {
    color: white;
    font-size: 1rem;
    font-weight: bold;
}


header #header-top-bar-b2c {
    width: 100%;
    font-size: 0.9rem;
    padding: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    position: fixed;
    top: 2.5rem; /* height: header #header-top-tel-b2c */
}

header #header-top-tel-b2c {
    position: fixed;
    top: 0;
    height: 2.5rem;
    font-size: 1rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    background-color: black;
}

header #header-top-tel-b2c a, header #header-top-tel-b2c span {
    color: white;
    font-weight: normal;
}

body {
    /* background-color: #efefef; */
    background-color: var(--background-body) ;
    display: flex;
    flex-direction: column;
    align-items: center;
}

header, footer, #page, #home-brands, #home-infos, header #header-top-bar-b2c, header #header-top-tel-b2c, #home-montage {
        max-width: 1355px;
        width: 100%;
        border-bottom: 0;
}

#home-brands .home-brands-zone {
    width: 100%; margin-left: 0;
}

.app-b2c #home-brands {
    box-shadow: none !important;
}

#about-page {
    background-color: var(--bs-gray-200);
}

#promo-carousel .img-card-btc  {
    width: 12rem; height: 12rem; position: relative;
}

#promo-carousel .img-card-btc .img-card-brand {
    position: absolute;
    width: 75%;
    background: white;
    padding: 2px;
}
#promo-carousel .img-card-btc .img-card-product {
    height: 80%;
}

.title-b2c h6 {
    display: none;
}

.app-b2c #card-search .title-b2c h6 {
    padding-top: 2rem;;
    padding-bottom: 0;
}


.app-b2c .title-b2c h6 {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--bs-primary) !important;
    padding-bottom: 2rem;;
}

#home-products {
    display: none;
}

#card-search select.form-border-grey {
    border-width: 1px !important;
}

.card-category-container span {
    display: none;
}

.card-category-container label {
    margin-right: 0.4rem !important;
}

.card-search-top {
    position: relative;
    padding-top: 10rem;
    padding-bottom: 17rem;
}


#cart-preview {
	right: clamp(5px, calc((100vw - 1355px) / 2), 100vw) !important;
}
/* .search-announcement-b2c-container {
    position: relative;
    width: 100%;
    height: 25vh;
    background-color: var(--bs-secondary);

}

.search-announcement-b2c-after {
    position: absolute;
    top: 0;
    left: 0;
    height: 90%;
    width: 100%;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--bs-secondary), transparent);
    z-index: 0;
}

.search-announcement-b2c-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.search-announcement-b2c-title {
    color: white;
    position: absolute;
    top: 3rem;
    left: 1rem;
    font-size: 1.8rem;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.5);
    max-width: 80%;
    padding: 1rem;
}
.search-announcement-b2c-btn {
position: absolute;
    right: 2rem;
    bottom: 2rem;
    font-size: 1.3rem;
} */


.search-announcement-b2c-container {
    position: relative;
    width: 100%;
    /* height: 14vh; */
    padding: 2rem;
    /* background-color: var(--bs-secondary); */

}

.search-announcement-b2c-title {
    position: absolute;
    top: -1rem;
    right: 1rem;
    font-size: 1.75rem;
    font-weight: bold;
    color: white;
    transform: translateY(-100%);
    text-align: end;
    text-shadow: 1px 1px 2px black, 0 0 0.3rem black;
}

/* Style spécifique pour Safari car ce navigateur est pas foutu de gérer le bold correctement */
@supports (-webkit-hyphens: none) {
  .search-announcement-b2c-title {
    font-size: 1.6rem;
  }
}

.search-announcement-b2c-btn {
/* position: absolute; */
    /* right: 2rem; */
    /* bottom: 2rem; */
    font-size: 1.3rem;
}

#home-brands img {
    filter: grayscale(100%);
    transition: filter 0.3s ease;
}

#home-brands img:hover {
    filter: grayscale(0%);
}

.app-mobile #home-brands img {
    filter:none;
}

.info-homepage-b2c-bloc:hover, .app-mobile .info-homepage-b2c-bloc {
    color: var(--primary-lighten-10);
}

.tyreform-label-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 5px;
    font-size: 0.9rem;
    font-weight: bold;
}


.img-profil-fullTyre {
    max-height: 140px;
    object-fit: contain;
    filter: grayscale(100%);
}

.product-icon-marque img,
.brand-img {
    max-height: 40px;
    object-fit: contain;
    filter: none;
}

#search-response {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#search-response #catalog-table {
    min-width: auto !important;
}

table#catalog-table {
    --bs-table-active-bg: transparent !important;
    --bs-table-striped-bg: transparent !important;
    --bs-table-hover-bg: transparent !important;
}

.labelling-zone {
    flex-direction: row !important;
}

.card-with-background {
    background: var(--bs-gray-200) !important ;
    padding-top: 7rem !important; /* si je met moins l'espece mon compte est collé */
    border-bottom: var(--bs-dark, #212529) solid 1px;
}

.stock-text {display: none;}
.product-panier select {width: fit-content !important;}
/* .product-panier .add-cart {} */

.img-profil-fullTyre {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.brand-img {
    background-color: white;
}

.brand-text {
    font-family: "Azonix";
  letter-spacing: 0.1rem;
  color: var(--bs-white);
  background-color: var(--bs-black);
  border-radius: 0rem 0.3rem 0rem 0.3rem;
  border-top: var(--bs-black) 1px solid;
  border-right: var(--bs-black) 1px solid;
}

.text-b2c {
    color: var(--bs-secondary);
}

.delivery-choices  {
    background-color: var(--bs-gray-200);
}
.lh-normal {
    line-height: normal !important;
}

#catalog-table thead, thead.table-cards-mobile-head {display: none !important;}
.btn-summary-ex {display: none !important;}
#catalog-table td, table.table-striped tbody tr,
#catalog-table td:hover, table.table-striped tbody tr:hover,
#catalog-table td:active, table.table-striped tbody tr:active {background-color: transparent !important; border: none !important;}


.btn-summary.selected.btn-primary {
        background: transparent;
    border: none;
    color: black;
}

.btn-summary.selected.btn-primary i , .btn-summary.selected.btn-primary::after{display: none !important;}

.slick-slide {
    border-right: solid 0.2rem var(--bs-gray-200);
}

.card-category-container .card-category {
    background-color: var(--bs-gray-400);
}

.card-category-container .card-category.card-category-active {
    background-color: white !important;
    color: black !important;

}


/* Surcharges mobile.css */
#home-brands, #home-infos, footer, #home-montage {
    display: block !important;
}

 #page {
    min-height: auto !important;
 }

header #small-screen-header #top-bar {
    border-bottom: none;
}

#small-screen-header-collapse {
    background-color: rgba(var(--bs-primary-rgb), 0.9);
}

@media (max-width: 1355px) {   
    #page {
        margin-top: 4rem;
        background-color: var(--bs-gray-200);
    }
    .search-announcement-b2c-img {
        height: calc(100% + 4rem);
        top: -4rem; 
    }
    #products-zone-container #tyeform_add_zone {
        background-color: transparent !important;
    }
    
    #about-page {
        padding-top: 4rem;
    }
}

.tyreform-line-sm, .tyreform-line-sm.tyreform-options {
    display: flex;
    flex-direction: row !important;
    width: 100% !important;
}

.tyreform-line-sm .form-group {
    width: 100%;
}

@media (max-width: 1000px) {  
    .tyreform-line {
        flex-direction: column;
        margin-bottom: 0 !important;
    }
    .tyreform-line .tyreform-options {
        width: 100%;
        flex-direction: column;
    }
    .tyreform-line-sm {
        margin-bottom: 2vmin;
    }

    .tyreform-label-container {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 0.5rem;
        margin-bottom: 5px;
        font-size: 0.9rem;
        color: white;
        font-weight: bold;
        text-shadow: 1px 1px 1px black, 0 0 0.1em black, 0 0 0.2em black;
    }

    .tyreform-label-container i {
        color: white !important;
    }

    .app-b2c .search-card-border {
        background-color: transparent;
    }

    #card-search-principal {
        background-color: rgba(0, 0, 0, 0.2) !important;
        /* backdrop-filter: blur(2px); explose les enfants en position: fixed; mieux le before dessous */
        box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 5px;
    }

    .card-category-container {
        background-color: rgba(0, 0, 0, 0.2) !important;
        /* backdrop-filter: blur(2px); explose les enfants en position: fixed; mieux le before dessous */
        padding: 0.6rem;
        padding-bottom: 0;
        display: flex;
        height: auto;
        gap: 0.2rem;
        border-top-left-radius: 1.2rem !important;
        border-top-right-radius: 1.2rem !important;
    }
    
    #card-search-principal::before, .card-category-container::before {
        content: "";
        inset: 0;
        backdrop-filter: blur(2px);
        pointer-events: none;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: -1;
    }

    .card-category-container .card-category {
        height: 3rem;
        border-radius: 0.5rem;
    }
}

footer.bg-primary {
    background-color: black !important;
    background: none;
}

#products-zone-container .btn-summary.btn-summary-mp {
    color: var(--bs-black) !important;
    border: none;
    background: var(--bs-gray-200) !important;
    background-color: var(--bs-gray-200) !important;
}

#products-zone-container .sticky-0 {
    top: 4rem !important
}

#count-cart-detail {display: block;}
@media (max-width: 1355px) {
    .app-b2c .card-with-background { padding-top: 0 !important; }
    .app-b2c #product-search-block { padding-top: 0 !important;  }
    #products-zone-container #product-form {
        padding-top: 0rem !important;
    }
    .card-search-top {
        padding-top: 7rem;
        padding-bottom: 8rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    .search-announcement-b2c-title {
        top: -4rem;
    }
    #count-cart-detail {display: none;}
}

@media (min-width: 1356px) {
    button.cart-button {
        border: none;
        background: transparent;
        box-shadow: none !important;
        color: white;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }
}
.card-b2c-container {
    height: 13rem;
}
.card-b2c {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    justify-content: space-between;
    width: 100%;
}
.card-b2c .card-b2c-left {
    display: flex;
}
.card-b2c-left-img {
    width: 10rem;
    position: relative;
}

.card-b2c-left-text {
    display: flex;
    flex-direction: column;
    padding: 0rem 1rem;
    gap: 0.5rem;
}
.card-b2c-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
}
.card-b2c-right-price {
    text-align: right;
}

.card-b2c .card-b2c-left-text .designation-text {
    max-width: 40rem;
}

@media (max-width: 1355px) {
    .card-b2c-container {
        height: 17rem;
    }
    .card-b2c {
        flex-direction: column;
        gap: 0;
    }
    .card-b2c-right {
        flex-direction: row;
    }
    .card-b2c-right-price {
        text-align: left;
    }
    .card-b2c-right-panier button {
        width: 100%;
    }
    .product-icon-marque img, .brand-img {
               max-width: 90%;
    }
    .brand-text {
        font-size: 1.2vw;
    }
    .card-b2c-left-img {
        width: 7rem;
    }
    .card-b2c .card-b2c-left-text .designation-text {
        max-width: none;
    }
}

@media (max-width: 768px) {
    .card-b2c .card-b2c-left-text {
        padding: 0;
    }
    .card-b2c .card-b2c-left-text .designation-text {
        font-size: 1rem !important;
    }
    .search-announcement-b2c-title { 
        font-size: 3.7vw;
        top: -5rem;
    }
    .brand-slide .brand-zone {
        width: 5rem;
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
    }
    #products-zone-container .btn-summary.btn-summary-mp {
        background-color: var(--bs-white) !important;
        background: var(--bs-white) !important;
    }
}

@media (max-width: 550px) {
    .search-announcement-b2c-title { 
        top: -6rem;
    }
}

.img-phone {
    height: 1.5rem;
}

@media (min-width: 400px) and (max-width: 1355px) {
    #products-zone-container .btn-summary-container {
        width: 50%;
    }

    .app-b2c #products-zone-container #filters_options {
        position: relative;
        top: 0 !important;
        width: 50%;
        background-color: var(--bs-white);
        justify-content: center;
    }
}
@media (min-width: 400px) and (max-width: 576px) {
    #products-zone-container #sortColumnsContainer span {
        display: none;
    }
}