/* ---------------------------------- backend ---------------------------------- */

.blb-vtab-gallery-backend {
    width: 100%;
    overflow-x: auto;
    white-space: nowrap; /* Empêche les éléments de passer à la ligne */
}

.blb-vtab-gallery-container-backend {
    display: inline-block;
}


.blb-vtab-gallery-container-backend .blb-vtab-gallery-item {
    position:initial;
    width:auto;
    padding: 45px;
    display: inline-block;
    width:25vw;
    white-space: normal;
}

.blb-vtab-gallery-container-backend .blb-vtab-gallery-item-title {
    font-size:16px;
}

.blb-vtab-gallery-container-backend .blb-vtab-gallery-item-subtitle {
    font-size:30px;
    margin-bottom:30px
}


.blb-vtab-gallery-container-backend .blb-vtab-gallery-item img {
    max-width:100%;
    object-fit: cover;
}


.blb-vtab-gallery-container-backend a {
    color:inherit;
}


/* ---------------------------------- frontend ---------------------------------- */


.blb-vtab-gallery {
    position: relative;
    overflow: visible;
}

.blb-vtab-gallery-section-title-container {
    max-width: 80%;
}

.blb-vtab-gallery-tabs {
    grid-area: tabs;
    display: flex;
    flex-direction: column;
    gap: var(--fluid-10);
}

.blb-vtab-gallery .blb-vtab-gallery-container {
    display: flex;
    opacity: 0;
    overflow: hidden;
    transition: all 600ms ease;
    gap: 0.5rem;
    grid-area: cards;
    position: relative;
    border-radius: var(--fluid-15);
}

.blb-vtab-gallery.slider-loaded .blb-vtab-gallery-container {
    opacity: initial;
}

.blb-vtab-gallery-shifter {
    width: 100%;
    display: grid;
    grid-template-areas:
        "tabs cards";
    grid-template-columns: calc(41.66% - var(--fluid-5)) 1fr;
    gap: var(--fluid-10);
}


.blb-vtab-gallery-item {
    height: 100%;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
    border-radius: 1rem;
    overflow: hidden;
    background: #FFFFFF;
    padding: var(--fluid-50) var(--fluid-50) calc(var(--fluid-50) + 2rem) var(--fluid-50);
    cursor: pointer;
}

.blb-vtab-gallery-item:nth-child(1n)
{
    background:var(--blb-cyan-200);
}

.blb-vtab-gallery-item:nth-child(2n)
{
    background:var(--blb-vert-200);
}

.blb-vtab-gallery-item:nth-child(3n)
{
    background:var(--blb-bleu-200);
}



.blb-vtab-gallery-item > img {
    height: 100%;
    width: 100%;
    max-width: none;
    object-fit: cover;
    object-position: 50%;
}


/* - tabs - */

.blb-vtab-gallery-tab {
    display: flex;
    column-gap: 0.5rem;
    align-items: center;
    line-height: 1;
    border-radius: 0.5rem;
    padding: var(--fluid-15) var(--fluid-20);
    cursor:pointer;
    max-width: 20rem;
    width: fit-content;
    background:var(--blb-grey-400);
    color:var(--blb-grey-600)
}

.blb-vtab-gallery-tab.active {
    background: var(--blb-vert-200);
    color:var(--blb-grey-800-txt)
}

.blb-vtab-gallery-tab:hover
{
    background: var(--blb-vert-200);
}

.blb-vtab-gallery-tab-title {
    font-size: var(--fs-16);
    margin-bottom: 0;
    margin-bottom: var(--fluid-3);
    font-weight: 600;
}

span.blb-vtab-gallery-tab-icon > img {
    height: var(--fluid-40);
    max-width: var(--fluid-40);
}

.blb-vtab-gallery-tab-subtitle {
    font-size: var(--fs-12);
}


.blb-vtab-gallery-item-title {
    font-size: var(--fs-12);
    margin-bottom:var(--fluid-10);
}

.blb-vtab-gallery-item-text {
    margin-bottom:var(--fluid-30);
}

.blb-vtab-gallery-item-title > span:nth-child(1)
{
    width:var(--fluid-7);
    height:var(--fluid-7);
    background:var(--blb-grey-800-txt);
    display:inline-block;
    border-radius:100%;
    margin-right:var(--fluid-10);
}


a.blb-vtab-gallery-item-lien-button span:nth-child(2) {
    display:inline-block;
    margin-left:var(--fluid-5);
    height: 0;
    width: 0;
    border-top: var(--fluid-5) solid transparent;
    border-bottom: var(--fluid-5) solid transparent;
    border-left: var(--fluid-7) solid var(--blb-grey-800-txt);
}

.blb-vtab-gallery-cta {
    display:inline-block;
    font-size: var(--fs-12);
    border: 1px solid var(--blb-grey-800-txt, #2B3038);
    position:relative;
    padding:var(--fluid-10) var(--fluid-20) var(--fluid-10) var(--fluid-20);
    border-radius: var(--fluid-5);
    font-size:var(--fs-12);
    text-transform:uppercase;
    color:#FFFFFF;
    font-weight:500;
    background: var(--blb-grey-800-txt, #2B3038);
}

a.blb-vtab-gallery-cta-button span:nth-child(1)
{
    border-right: 1px solid #FFFFFF;
    padding-right: var(--fluid-12);
}

a.blb-vtab-gallery-cta-button span:nth-child(2) {
    display:inline-block;
    margin-left:var(--fluid-12);
    height: 0;
    width: 0;
    border-top: var(--fluid-5) solid transparent;
    border-bottom: var(--fluid-5) solid transparent;
    border-left: var(--fluid-7) solid #FFFFFF;
}

.blb-vtab-gallery-cta:hover {
    background:var(--blb-grey-900-bg);
}


/* ---------------------------------- responsive ---------------------------------- */

@media screen and (max-width: 1500px) {
    .blb-vtab-gallery-controls .prev {
        left: 0;
    }

    .blb-vtab-gallery-controls .next {
        right: 0;
    }
}

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

    .blb-vtab-gallery-shifter {
        grid-template-columns: 1fr;
        grid-template-areas:
        "tab"
        "cards";
    }

    .blb-vtab-gallery-container {
        margin-top:15px;
    }


    .blb-vtab-gallery-tabs {
        flex-direction: row;
        flex-wrap:wrap;
    }

}


@media screen and (max-width: 768px) {
    .blb-vtab-gallery-controls>div>img {
        transform: scale(.65);
    }

    .blb-vtab-gallery-item {
        padding: var(--fluid-30) var(--fluid-30) calc(var(--fluid-30) + 2rem) var(--fluid-30);
    }

}