/* === LAYOUT === */
.container-bloc-decouvrir {display: flex; flex-direction: column; width: 100%; position: relative; overflow: hidden;}

/* === VISUEL GAUCHE === */
.container-bloc-decouvrir .decouvrir-visuel {display: none; width: 100%; overflow: hidden; flex-shrink: 0;}
.container-bloc-decouvrir .decouvrir-visuel img {width: 100%; height: 100%; object-fit: contain; object-position: bottom center;}

/* === CONTENU DROITE === */
.container-bloc-decouvrir .decouvrir-contenu {flex: 1; min-width: 0;}
.container-bloc-decouvrir .decouvrir-titre {margin: 0 0 1rem; color: var(--couleur-texte); padding: 0 2rem; }


/* === ONGLETS === */
.container-bloc-decouvrir .decouvrir-onglets {display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 3rem; gap: 3rem; padding-left: 2rem;}
.container-bloc-decouvrir .decouvrir-onglets .slick-list {overflow: visible;}
.container-bloc-decouvrir .decouvrir-onglet {background: none; border: none; width: max-content; max-width: max-content; padding: 0 0 1rem; margin-right: 1.5rem; font-size: 1.5rem; color: var(--couleur-texte); cursor: pointer; position: relative; opacity: .5; transition: opacity 200ms; white-space: nowrap;}
.container-bloc-decouvrir .decouvrir-onglet::after {content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 3px; background-color: var(--couleur-cta); transform: scaleX(0); transition: transform 250ms ease;}
.container-bloc-decouvrir .decouvrir-onglet.active {opacity: 1;}
.container-bloc-decouvrir .decouvrir-onglet.active::after {transform: scaleX(1);}

/* === CAROUSELS === */
.container-bloc-decouvrir .decouvrir-carousels {position: relative;}
.container-bloc-decouvrir .decouvrir-carousel {display: none; position: relative;}
.container-bloc-decouvrir .decouvrir-carousel.active {display: block;}


.container-bloc-decouvrir .decouvrir-slider .slick-list {overflow: visible;}

/* Opacité réduite sur les slides non actifs (slide partiel visible) */
.container-bloc-decouvrir .decouvrir-slider .slick-slide {transition: opacity 350ms ease; pointer-events: none; width: 25rem;}
.container-bloc-decouvrir .decouvrir-slider .slick-slide.slick-active {pointer-events: auto;}

/* === FLÈCHES CUSTOM === */
.container-bloc-decouvrir .decouvrir-prev, .container-bloc-decouvrir .decouvrir-next {position: absolute; top: calc(17.5rem - 2.25rem); z-index: 3; display: none;}
.container-bloc-decouvrir .decouvrir-prev {left: 1.5rem;}
.container-bloc-decouvrir .decouvrir-next {right: 1.5rem;}

/* === CARDS === */
.container-bloc-decouvrir .decouvrir-slide {padding: 0 .8rem;}
.container-bloc-decouvrir .decouvrir-card {display: flex; flex-direction: column; background-color: #fff; height: 100%; transition: transform 300ms ease;}
.container-bloc-decouvrir .decouvrir-card-image {width: 100%; height: 28rem; border-radius: var(--border-radius); overflow: hidden; 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-decouvrir .decouvrir-card-image img {width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease;}
.container-bloc-decouvrir .decouvrir-card-contenu {padding: 1.5rem 0; flex: 1; display: flex; flex-direction: column;}
.container-bloc-decouvrir .decouvrir-card-titre {font-weight: 700; margin: 0 0 .8rem; font-size: 1.6rem;}
.container-bloc-decouvrir .decouvrir-card-description {font-size: 1.4rem; color: var(--couleur-texte); opacity: .75; margin: 0; line-height: 1.6;}

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

/* === HOVER === */
@media (hover: hover) {
    .container-bloc-decouvrir .decouvrir-prev:hover, .container-bloc-decouvrir .decouvrir-next:hover {background-color: var(--couleur-texte);}
    .container-bloc-decouvrir .decouvrir-card:hover .decouvrir-card-image img {transform: scale(1.05);}
    .container-bloc-decouvrir .decouvrir-onglet:not(.active):hover {opacity: .8;}
}

/* === TABLETTE === */
@media (min-width: 768px) {
    .container-bloc-decouvrir .decouvrir-onglet {max-width: 100%; width: auto; padding: 1rem 0;}
    .container-bloc-decouvrir .decouvrir-onglets .slick-list {overflow: hidden;}
}

/* === DESKTOP === */
@media (min-width: 1025px) {
    .container-bloc-decouvrir {flex-direction: row; min-height: 50rem;}
    .container-bloc-decouvrir .decouvrir-visuel {display: block; width: 28rem; max-height: none; position: sticky; top: 0; align-self: flex-start;}
    .container-bloc-decouvrir .decouvrir-visuel img {height: 100%; max-height: 60rem; object-fit: contain; object-position: bottom 0 left -5rem;}
    .container-bloc-decouvrir .decouvrir-contenu { overflow: hidden;}
    .container-bloc-decouvrir .decouvrir-slide {padding: 0 3.5rem 0 0;}
    /* Flèches repositionnées au centre vertical de l'image (aspect-ratio 4/3 ≈ 25% du haut) */
    .container-bloc-decouvrir .decouvrir-prev {left: -2rem;}
    .container-bloc-decouvrir .decouvrir-next {right: calc(12rem - 2.25rem + 3.5rem); left: auto;}
    .container-bloc-decouvrir .decouvrir-titre, .container-bloc-decouvrir .decouvrir-onglets {padding: 0 0 0 3rem;}
    .container-bloc-decouvrir .decouvrir-carousels {padding-left: 3rem;}
    .container-bloc-decouvrir .decouvrir-card-titre {font-size: 2rem;}
    .container-bloc-decouvrir .decouvrir-slider .slick-slide {width: auto; opacity: 0.35; }
    .container-bloc-decouvrir .decouvrir-slider .slick-slide.slick-active {opacity: 1;}
    .container-bloc-decouvrir .decouvrir-prev, .container-bloc-decouvrir .decouvrir-next {display: inline-block;}
    .container-bloc-decouvrir .decouvrir-onglet {margin-right: 0;}
    
    /* Peek : le padding-right réduit la largeur de calcul Slick,
   le 3e slide commence avant le bord et dépasse dans la zone de padding */
    .container-bloc-decouvrir .decouvrir-slider {padding-right: 12rem;}
    .container-bloc-decouvrir .decouvrir-card-image {height: 35rem;}

}

@media (min-width: 1400px) {
    .container-bloc-decouvrir .decouvrir-visuel {width: 38rem;}
}

@media (min-width: 1700px) {
    .container-bloc-decouvrir .decouvrir-visuel {width: 48rem;}
}