.kit-ba {
	width: 100%;
	max-width: 100%;
	position: relative;
	z-index: 1;
}

.kit-ba__inner {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 22px;
	background: #f2f2f2;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}

/* Images */

.kit-ba__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.kit-ba__layer img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

.kit-ba__layer--after {
	z-index: 1;
}

.kit-ba__layer--before {
	z-index: 2;
	clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0);
}

/* Ligne centrale */

.kit-ba__layer--before::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--ba-pos);
	transform: translateX(-1px);
	width: 2px;
	background: rgba(255,255,255,0.95);
}

/* Handle */

.kit-ba__handle {
	position: absolute;
	top: 0;
	left: var(--ba-pos);
	transform: translateX(-50%);
	width: 60px;
	height: 100%;
	z-index: 4;
	cursor: ew-resize;
	display: flex;
	align-items: center;
	justify-content: center;
	outline: none;
}

/* Bouton central */

.kit-ba__knob {
	position: relative;
	z-index: 2;
	width: 55px;
	height: 55px;
	border-radius: 999px;
	background: rgba(255,255,255,0.70);
	border: 1px solid rgba(255,255,255,0.95);
	display: flex;
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	box-shadow: 0 10px 24px rgba(0,0,0,0.18);
	transition: transform .18s ease;
}

.kit-ba__knob-icons {
	display: flex;
	align-items: center;
	gap: 4px;
}

.kit-ba__knob-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 12px;
	height: 18px;
}

.kit-ba__knob-icon img,
.kit-ba__knob-icon svg {
	width: 100%;
	height: auto;
	max-height: 18px;
}

/* Hover */

.kit-ba.is-dragging .kit-ba__knob,
.kit-ba__handle:hover .kit-ba__knob {
	transform: scale(1.05);
}

/* Badges */

.kit-ba__badge {
	position: absolute;
	top: 16px;
	padding: 8px 14px;
	border-radius: 999px;
	background: rgba(255,255,255,0.92);
	color: #5b5b5b;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	z-index: 5;
}

.kit-ba__badge--before {
	left: 16px;
}

.kit-ba__badge--after {
	right: 16px;
}

/* ========================= */
/* TABLETTE */
/* ========================= */

@media (max-width:1024px){

	.kit-ba__inner{
		aspect-ratio:4/3;
		border-radius:18px;
	}

	.kit-ba__knob{
		width:50px;
		height:50px;
	}

	.kit-ba__badge{
		font-size:10px;
		padding:7px 12px;
	}

}

/* ========================= */
/* MOBILE */
/* ========================= */

@media (max-width:767px){

	.kit-ba{
		margin-bottom:20px;
	}

	.kit-ba__inner{
		aspect-ratio:1/1;
		min-height:260px;
		border-radius:16px;
	}

	.kit-ba__handle{
		width:70px;
	}

	.kit-ba__knob{
		width:58px;
		height:58px;
	}

	.kit-ba__knob-icon{
		width:14px;
		height:20px;
	}

	.kit-ba__badge{
		top:12px;
		font-size:10px;
		padding:7px 12px;
	}

	.kit-ba__badge--before{
		left:12px;
	}

	.kit-ba__badge--after{
		right:12px;
	}

}

/* ========================= */
/* FIX ELEMENTOR OVERFLOW */
/* ========================= */

@media (max-width:767px){

	.elementor-section,
	.elementor-container,
	.elementor-column,
	.elementor-widget-wrap{
		overflow:visible;
	}

}