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

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

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


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


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

.blb-htabsideimage-gallery-container-backend .blb-htabsideimage-gallery-item {
    padding: 30px;
}

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

.blb-htabsideimage-gallery-container-backend .blb-htabsideimage-gallery-item {
    width:50%;
}


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


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

.blb-htabsideimage-gallery-tabs {
    grid-area: tabs;
    display: flex;
    flex-direction: row;
    gap: var(--fluid-10);
    justify-content: center;
    margin-bottom: var(--fluid-15);
    padding-bottom: var(--fluid-15);
    flex-wrap: wrap;
    position:relative;
    /*border-bottom: 1px dotted var(--blb-grey-600);*/
}

.blb-htabsideimage-gallery-tabs:after {
    content:"";
    position:absolute;
    left:0;
    right:0;
    top: 100%;
    height: 14px;
    background-image: radial-gradient( ellipse, var(--blb-grey-600) 1px, var(--blb-grey-600) 1px, transparent 1px);
    background-size: 8px 8px;
    background-position: 0px 0;
    background-repeat: repeat-x;
}

.blb-htabsideimage-gallery .blb-htabsideimage-gallery-container {
    display: flex;
    opacity: 0;
    overflow: hidden;
    transition: all 600ms ease;
    gap: 0.5rem;
    grid-area: cards;
    position: relative;
    height: 39rem;
    overflow: hidden;
    grid-area: cards;
}


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

.blb-htabsideimage-gallery-content {
    width: 100%;
    display: grid;
    grid-template-areas:
        "tabs"
        "cards";
    grid-template-columns: 1fr;
    gap: var(--fluid-10);
    overflow: hidden;
}

.blb-htabsideimage-gallery-image-items {
    display: grid;
    grid-template-areas:
        "image cards";
    grid-template-columns: calc(25% - var(--fluid-10)) 75%;
    gap: var(--fluid-10);
}

.blb-htabsideimage-image-container {
    border-radius: 0.5rem;
    overflow: hidden;
    grid-area: image;
    height: 23.7vw;
}

.blb-htabsideimage-image {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.blb-htabsideimage-imageslider-container {
    display: flex;
    overflow: hidden;
    height: 100%;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
}


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

.blb-htabsideimage-gallery-item {
    height: 100%;
    width: calc(77.778% - var(--fluid-10));
    height: 31rem;
    position: absolute;
    left: 0;
    top: 0;
    -ms-transition: all 600ms ease;
    -o-transition: all 600ms ease;
    transition: all 600ms ease;
    overflow: hidden;
    cursor: pointer;
    gap: var(--fluid-10);
    padding: var(--fluid-100);
    border-radius: 0.5rem;
}


.blb-profile-gallery-item {

}

.blb-htabsideimage-gallery-item:nth-child(1n)
{
    background: var(--blb-cyan-200, #9ED6EF);
}

.blb-htabsideimage-gallery-item:nth-child(2n)
{
    background: var(--blb-vert-200, #D8F6FB);
}

.blb-htabsideimage-gallery-item:nth-child(3n)
{
    background: var(--blb-bleu-200, #79A8FB);
}


.blb-htabsideimage-gallery-title {
    font-weight: 600;
}

.blb-htabsideimage-gallery-text {
    font-size: var(--fs-12);
    margin-bottom: var(--fluid-30);
}

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

a.blb-htabsideimage-gallery-cta-button span:nth-child(1)
{
    border-right: 1px solid var(--blb-grey-800-txt);
    padding-right: var(--fluid-12);
}

a.blb-htabsideimage-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 var(--blb-grey-800-txt);
}

.blb-htabsideimage-gallery-cta:hover {
    background:var(--blb-grey-800-txt);
    color:white;
}

.blb-htabsideimage-gallery-cta:hover span:nth-child(1)
{
    border-right-color: white;
}

.blb-htabsideimage-gallery-cta:hover span:nth-child(2) {
    border-left-color: white;
}


/* - tabs - */

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

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

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

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

.blb-htabsideimage-gallery-number {
    font-size: var(--fs-12);
}

.blb-htabsideimage-gallery-number > 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);
}



/* ---------------------------------- controls ---------------------------------- */


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

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

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

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

    .blb-htabsideimage-gallery-image-items {
        grid-template-areas:
            "image"
            "cards";
        grid-template-columns: 1fr;
    }

    .blb-htabsideimage-image-container {
        height: auto;
    }

    .blb-htabsideimage-gallery-item {
        padding:var(--fluid-60);
        width:calc(93% - var(--fluid-10));;
    }

    .blb-htabsideimage-gallery-tabs {
        justify-content:left;
    }

    .blb-htabsideimage-image > img {
        max-width: 400px;
        border-radius:1rem;
    }

}

@media screen and (max-width: 768px) {
    .blb-htabsideimage-gallery-controls>div>img {
        transform: scale(.65);
    }
    .blb-htabsideimage-gallery-item {
        padding:var(--fluid-30);
    }
}