.wpcb-carousel-wrap {
	width: 100%;
	/* Pas de marge imposee : dans un page builder (Elementor...), l'espacement
	   entre sections doit rester controle par le conteneur/colonne parent,
	   sinon on obtient un ecart blanc indesirable entre deux carrousels
	   empiles (ex: mise en page "timeline" plein ecran). */
	margin: 0;
	line-height: 0;
}

.wpcb-carousel {
	width: 100%;
	overflow: hidden;
	border-radius: var( --wpcb-radius, 6px );
}

.wpcb-carousel .swiper-slide {
	position: relative;
	overflow: hidden;
	border-radius: var( --wpcb-radius, 6px );
	border: var( --wpcb-border-width, 0 ) solid var( --wpcb-border-color, transparent );
	box-sizing: border-box;
	/* La hauteur doit etre explicite ICI (sur le slide), pas seulement via
	   max-height sur l'image : un pourcentage de hauteur (height:100%) sur
	   un enfant ne se resout que si son parent a une hauteur definie, sinon
	   il est ignore par le navigateur et retombe sur "auto". Resultat sans
	   ce correctif : hauteur incoherente d'une image a l'autre selon leur
	   ratio d'origine, et object-fit qui ne cadre plus correctement.
	   Le "min(..., 70vh)" evite un rognage excessif sur petit ecran. */
	height: min( var( --wpcb-height, 450px ), 70vh );
}

.wpcb-carousel .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wpcb-carousel .wpcb-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 24px 20px 18px;
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.75 ) 0%, rgba( 0, 0, 0, 0.35 ) 55%, rgba( 0, 0, 0, 0 ) 100% );
	text-align: left;
	pointer-events: none;
}

.wpcb-carousel .wpcb-caption-title {
	margin: 0 0 4px;
	font-size: var( --wpcb-title-size, 22px );
	font-weight: var( --wpcb-title-weight, 700 );
	font-family: var( --wpcb-title-font, inherit );
	line-height: 1.25;
	color: var( --wpcb-title-color, #fff );
}

.wpcb-carousel .wpcb-caption-subtitle {
	margin: 0;
	font-size: var( --wpcb-subtitle-size, 15px );
	font-weight: 400;
	font-family: var( --wpcb-subtitle-font, inherit );
	color: var( --wpcb-subtitle-color, #fff );
}

.wpcb-carousel .swiper-button-prev,
.wpcb-carousel .swiper-button-next {
	color: var( --wpcb-arrow-color, #fff );
	background: var( --wpcb-arrow-bg, rgba( 0, 0, 0, 0.35 ) );
	width: var( --wpcb-arrow-size, 40px );
	height: var( --wpcb-arrow-size, 40px );
	border-radius: 50%;
	z-index: 20;
	cursor: pointer;
}

.wpcb-carousel .swiper-button-prev::after,
.wpcb-carousel .swiper-button-next::after {
	font-size: calc( var( --wpcb-arrow-size, 40px ) * 0.4 );
}

.wpcb-carousel .swiper-button-disabled {
	opacity: 0.35;
	cursor: default;
}

.wpcb-carousel .swiper-pagination {
	z-index: 20;
}

.wpcb-carousel .swiper-pagination-bullet {
	background: var( --wpcb-dot-color, #fff );
	width: var( --wpcb-dot-size, 8px );
	height: var( --wpcb-dot-size, 8px );
	opacity: 0.6;
}

.wpcb-carousel .swiper-pagination-bullet-active {
	background: var( --wpcb-dot-active-color, #fff );
	opacity: 1;
}