/* === LAYOUT === */
.container-bloc-sejour {width: 100%; padding: 4rem 0;}

/* === TITRE === */
.container-bloc-sejour .sejour-titre {text-align: left; margin: 0 0 1rem; padding: 0 2rem;}

/* === ONGLETS === */
.container-bloc-sejour .sejour-onglets {display: flex; justify-content: center; gap: 0 4rem; margin-bottom: 3rem; padding-left: 2rem;}
.container-bloc-sejour .sejour-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-light); cursor: pointer; position: relative; opacity: .5; transition: opacity 200ms; white-space: nowrap;}
.container-bloc-sejour .sejour-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-sejour .sejour-onglet.active {opacity: 1; color: var(--couleur-texte);}
.container-bloc-sejour .sejour-onglet.active::after {transform: scaleX(1);}

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

/* Peek des deux côtés (infinite) */
.container-bloc-sejour .sejour-carousel {overflow: hidden;}
.container-bloc-sejour .sejour-slider {padding: 0 9rem;}
.container-bloc-sejour .sejour-slider .slick-list {overflow: visible;}

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

/* === FLÈCHES === */
.container-bloc-sejour .sejour-prev, .container-bloc-sejour .sejour-next {display: none !important; position: absolute; top: calc(24rem - 2.25rem); z-index: 3; display: flex; align-items: center; justify-content: center;}
.container-bloc-sejour .sejour-prev {left: 1rem;}
.container-bloc-sejour .sejour-next {right: 1rem;}
.container-bloc-sejour .sejour-prev.slick-disabled, .container-bloc-sejour .sejour-next.slick-disabled {opacity: 0; pointer-events: none;}

/* === CARDS === */
.container-bloc-sejour .sejour-slide {padding: 0 1rem;}
.container-bloc-sejour .sejour-card {display: flex; flex-direction: column; background-color: #fff; overflow: hidden; height: 100%;}
.container-bloc-sejour .sejour-card-image {width: 100%;  overflow: hidden; background-color: #8E0135; background-image: url('/wp-content/themes/iwego-child/images/grappe-blanche-alpha.svg'); background-repeat: no-repeat; background-size: 12rem; background-position: center; border-radius: var(--border-radius); height: 28rem;}
.container-bloc-sejour .sejour-card-image img {width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease;}
.container-bloc-sejour .sejour-card-contenu {padding: 1.5rem 2rem 2rem;}
.container-bloc-sejour .sejour-card-titre {font-size: 1.6rem; font-weight: 700; margin: 0 0 .6rem; text-align: center;}
.container-bloc-sejour .sejour-card-commune {font-size: 1.3rem; color: var(--couleur-texte-light); opacity: .6; margin: 0; text-align: center;}
.container-bloc-sejour .sejour-btn {margin: 0 2rem; width: auto;}

/* === SLIDE UNIQUE (sans Slick) === */
.container-bloc-sejour .sejour-slider.no-slick {display: flex; justify-content: center; padding: 0;}
.container-bloc-sejour .sejour-slider.no-slick .sejour-slide {opacity: 1; pointer-events: auto; width: 28rem;}
@media (min-width: 1400px) {.container-bloc-sejour .sejour-slider.no-slick .sejour-slide {width: 38rem;}}
@media (min-width: 1700px) {.container-bloc-sejour .sejour-slider.no-slick .sejour-slide {width: 42rem;}}

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

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

/* === TABLETTE === */
@media (min-width: 768px) {
    .container-bloc-sejour .sejour-onglet { max-width: 100%; width: auto; padding: 1rem 0;}
    .container-bloc-sejour .sejour-slider .slick-slide {width: 28rem; opacity: 0.3; }
    .container-bloc-sejour .sejour-slider .slick-slide.slick-active {opacity: 1;}
    .container-bloc-sejour .sejour-btn {margin: 0 auto; width: max-content;}
}

/* === DESKTOP === */
@media (min-width: 1025px) {
    .container-bloc-sejour {padding: 6rem 0;}
    .container-bloc-sejour .sejour-titre {font-size: 5rem; margin-bottom: 3.5rem; text-align: center;}
    .container-bloc-sejour .sejour-slider {padding: 0 12rem;}
    .container-bloc-sejour .sejour-slide {padding: 0 1.2rem;}
    .container-bloc-sejour .sejour-prev {left: auto; right: calc(50% - 2.25rem); transform: translateX(-55.8rem);} /*38rem + (38rem/2) + 1.2rem > slick-slide + (slick-slide/2) + padding */
    .container-bloc-sejour .sejour-next {right: auto; left: calc(50% - 2.25rem); transform: translateX(55.8rem);} 
    .container-bloc-sejour .sejour-prev:not([style*="display: none"]), .container-bloc-sejour .sejour-next:not([style*="display: none"]) {display: inline-block !important;}
    .container-bloc-sejour .sejour-onglets {padding: 0 2rem; margin-right: 0;}
    
}

@media (min-width: 1400px) {
    .container-bloc-sejour .sejour-slider {padding: 0 14rem;}
    .container-bloc-sejour .sejour-card-titre {font-size: 2rem;}
    .container-bloc-sejour .sejour-slider .slick-slide {width: 38rem; }
    .container-bloc-sejour .sejour-card-image {height: 48rem;}
}

@media (min-width: 1700px) {
    .container-bloc-sejour .sejour-slider .slick-slide {width: 42rem;}
    .container-bloc-sejour .sejour-prev {left: auto; right: calc(50% - 2.25rem); transform: translateX(-61.8rem);} /*42rem + (42rem/2) - 1.2rem > slick-slide + (slick-slide/2) + padding */
    .container-bloc-sejour .sejour-next {right: auto; left: calc(50% - 2.25rem); transform: translateX(61.8rem);} 
    .container-bloc-sejour .sejour-prev, .container-bloc-sejour .sejour-next {top: calc(24rem - 2.25rem);}
}