/* === LAYOUT === */
.container-bloc-inspiration {margin-left: 0; margin-right: 0;}
.container-bloc-inspiration .inspi-layout {display: flex; flex-direction: column; gap: 3rem;}

/* === VISUEL GAUCHE === */
.container-bloc-inspiration .inspi-visuel {display: none; position: relative; height: 100%;}
.container-bloc-inspiration .inspi-visuel img {width: 100%; height: 100%; display: block; position: absolute; top: -5rem; left: -10rem; overflow: visible; object-fit: cover; }

/* === CONTENU (titre, desc, onglets, bouton) === */
.container-bloc-inspiration .inspi-contenu {width: auto; flex-direction: column; margin-left: 2rem; margin-right: 2rem;}
.container-bloc-inspiration .inspi-titre { font-weight: 800; margin: 0 0 1.5rem; color: var(--couleur-texte);}
.container-bloc-inspiration .inspi-desc p {margin: 0 0 1rem;}

/* Onglets */
.container-bloc-inspiration .inspi-tabs {display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-bottom: 2.5rem;}
@media (max-width: 1024px) {
    .container-bloc-inspiration .inspi-tabs {flex-direction: row; overflow-x: scroll; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; padding-bottom: .5rem;}
    .container-bloc-inspiration .inspi-tabs::-webkit-scrollbar {display: none;}
    .container-bloc-inspiration .inspi-tab {flex-shrink: 0; scroll-snap-align: start;}
}
.container-bloc-inspiration .inspi-tab {display: block; background: none; border: none; border-bottom: 2px solid transparent;  padding: 0 0 1rem; margin-right: 1.5rem; font-size: 1.5rem; color: var(--couleur-texte-light); cursor: pointer; text-align: left; width: max-content; max-width: max-content; position: relative;}


.container-bloc-inspiration .inspi-tab.active {color: var(--couleur-texte);}
.container-bloc-inspiration .inspi-tab::after {content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: .3rem; width: 100%; background-color: var(--couleur-cta); transform: scaleX(0); transform-origin: left; transition: transform 250ms ease;}
.container-bloc-inspiration .inspi-tab.active::after {transform: scaleX(1);}

/* Bouton CTA */
.container-bloc-inspiration .inspi-btn {display: none; margin-top: 2rem; justify-content: center;}
.container-bloc-inspiration .inspi-btn.active {display: inline-flex;}

/* === CARROUSELS === */
.container-bloc-inspiration .inspi-carousels {position: relative; min-width: 0;}
.container-bloc-inspiration .inspi-carousel-wrap {display: none; position: relative; overflow: visible; height: 100%; }
.container-bloc-inspiration .inspi-carousel-wrap.active {display: block;}

/* Overlay flèches */
.container-bloc-inspiration .inspi-arrows-overlay {position: absolute; top: 0; left: 0; right: 0; height: 45rem; pointer-events: none; z-index: 3;}
.container-bloc-inspiration .inspi-prev, .container-bloc-inspiration .inspi-next {position: absolute; top: calc(50% - 2.25rem); transform: none; pointer-events: auto;}
.container-bloc-inspiration .inspi-prev {left: -1rem;}
.container-bloc-inspiration .inspi-next {right: -1rem;}


/* Slider Slick */
.container-bloc-inspiration .inspi-slider, .container-bloc-inspiration .inspi-slider .slick-list, .container-bloc-inspiration .inspi-slider .slick-track {height: 100%;}
.container-bloc-inspiration .inspi-slider .inspi-slide {padding: 0 1.2rem; display: flex; flex-direction: column; cursor: pointer;}

/* Slide */
.container-bloc-inspiration .inspi-slide-image {width: 100%; height: 45rem; overflow: hidden; border-radius: var(--border-radius, 1.2rem); margin-bottom: 1.2rem; background-color: var(--couleur-background-light); background-image: url("/wp-content/themes/iwego-child/images/grappe-couleur.svg"); background-repeat: no-repeat; background-size: 12rem; background-position: center;}
.container-bloc-inspiration .inspi-slide-image img {width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease;}
.container-bloc-inspiration .inspi-slide-titre {font-size: 1.6rem; font-weight: 700; color: var(--couleur-texte); margin: 0; text-align: center;}

/* === MOBILE SCROLL NATIF === */
@media (max-width: 767px) {
    .container-bloc-inspiration .inspi-slider.native-scroll {display: flex; overflow-x: scroll; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; height: auto;}
    .container-bloc-inspiration .inspi-slider.native-scroll::-webkit-scrollbar {display: none;}
    .container-bloc-inspiration .inspi-slider.native-scroll .inspi-slide {flex-shrink: 0; width: 82%; scroll-snap-align: start;}
    .container-bloc-inspiration .inspi-slider.native-scroll .inspi-slide:first-child {margin-left: 1.5rem; padding-left: 2rem;}
    .container-bloc-inspiration .inspi-slider.native-scroll .inspi-slide:last-child {margin-right: 2rem;}
    .container-bloc-inspiration .inspi-slider.native-scroll .inspi-slide-image {height: 28rem;}
    .container-bloc-inspiration .inspi-prev, .container-bloc-inspiration .inspi-next {display: none;}
}

/* === HOVER === */
@media (hover: hover) {
    .container-bloc-inspiration .inspi-prev:hover, .container-bloc-inspiration .inspi-next:hover {background-color: var(--couleur-texte);}
    .container-bloc-inspiration .inspi-slide-image img:hover {transform: scale(1.04);}
    .container-bloc-inspiration .inspi-tab:not(.active):hover {opacity: .7;}
}

/* === TABLETTE === */
@media (min-width: 768px) {

    .container-bloc-inspiration {margin-left: 4rem; margin-right: 4rem;}
    .container-bloc-inspiration .inspi-contenu {width: 100%; margin-left: 0; margin-right: 0;}
}

/* === DESKTOP === */
@media (min-width: 1025px) {
    .container-bloc-inspiration .inspi-layout {flex-direction: row; gap: 6rem;}
    .container-bloc-inspiration .inspi-visuel {display: block; width: 22rem; height: inherit;}
    .container-bloc-inspiration .inspi-contenu {width: 40rem; flex-shrink: 0;}
    .container-bloc-inspiration .inspi-carousels {flex: 1; min-width: 0;}

    .container-bloc-inspiration .inspi-tab {border-bottom: 2px solid transparent; padding: 1rem 0; margin: .3rem 0; font-size: 1.6rem;  width: fit-content;}

}

@media (min-width: 1400px) {

    .container-bloc-inspiration .inspi-contenu {width: 45rem;}
    .container-bloc-inspiration .inspi-visuel {width: 30rem;}
    .container-bloc-inspiration .inspi-visuel img {height: calc(100% + 12rem);}

}

@media (min-width: 1700px) {
    .container-bloc-inspiration .inspi-visuel {width: 38rem;}
    .container-bloc-inspiration .inspi-slide-image {height: 50rem;}
    .container-bloc-inspiration .inspi-arrows-overlay {height: 50rem;}
}