/*!
 * VWEB Avant / Après — Agence VWEB (https://v-web.fr/)
 * Les couleurs et tailles sont des variables CSS : surchargeables par Elementor ou par votre thème.
 */
.vweb-ba {
	--vweb-ba-radius: 12px;
	--vweb-ba-line: #ffffff;
	--vweb-ba-line-width: 3px;
	--vweb-ba-handle-size: 56px;
	--vweb-ba-handle-bg: #ffffff;
	--vweb-ba-handle-color: #3a3633;
	--vweb-ba-label-bg: rgba(60, 58, 56, 0.78);
	--vweb-ba-label-color: #ffffff;
	--vweb-ba-caption-color: #6b6762;
	--vweb-ba-tab-bg: #f1efec;
	--vweb-ba-tab-color: #5a5652;
	--vweb-ba-tab-active-bg: #3a3633;
	--vweb-ba-tab-active-color: #ffffff;

	position: relative;
	width: 100%;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}
.vweb-ba *,
.vweb-ba *::before,
.vweb-ba *::after { box-sizing: border-box; }

.vweb-ba--align-left   { margin-left: 0; margin-right: auto; }
.vweb-ba--align-center { margin-left: auto; margin-right: auto; }
.vweb-ba--align-right  { margin-left: auto; margin-right: 0; }

.vweb-ba__slide { margin: 0; padding: 0; }
.vweb-ba__slide[hidden] { display: none !important; }

/* Zone de comparaison ------------------------------------------------ */
.vweb-ba__stage {
	--vweb-ba-pos: 50%;
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--vweb-ba-radius);
	background: #ece9e5;
	cursor: ew-resize;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;           /* scroll vertical conservé sur mobile */
	-webkit-tap-highlight-color: transparent;
	isolation: isolate;
}
/* Fallback anciens navigateurs sans aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
	.vweb-ba__stage { height: 0; padding-bottom: 66.66%; }
}

.vweb-ba .vweb-ba__img {
	position: absolute;
	inset: 0;
	top: 0; left: 0;
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	object-fit: cover;
	object-position: center;
	pointer-events: none;
	-webkit-user-drag: none;
}

.vweb-ba__after {
	position: absolute;
	inset: 0;
	top: 0; left: 0; right: 0; bottom: 0;
	clip-path: inset(0 0 0 var(--vweb-ba-pos));
	-webkit-clip-path: inset(0 0 0 var(--vweb-ba-pos));
	will-change: clip-path;
}

/* Barre + poignée */
.vweb-ba__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--vweb-ba-pos);
	width: var(--vweb-ba-line-width);
	margin-left: calc(var(--vweb-ba-line-width) / -2);
	background: var(--vweb-ba-line);
	pointer-events: none;
	z-index: 3;
}
.vweb-ba__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--vweb-ba-handle-size);
	height: var(--vweb-ba-handle-size);
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: var(--vweb-ba-handle-bg);
	color: var(--vweb-ba-handle-color);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vweb-ba__handle svg { width: 40%; height: 40%; display: block; }
.vweb-ba__stage:hover .vweb-ba__handle,
.vweb-ba.is-dragging .vweb-ba__handle { transform: translate(-50%, -50%) scale(1.06); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); }

/* Slider accessible (clavier / lecteurs d'écran), invisible */
.vweb-ba__range {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	opacity: 0;
}
.vweb-ba__range:focus-visible ~ .vweb-ba__divider .vweb-ba__handle {
	outline: 3px solid #2271b1;
	outline-offset: 3px;
}

/* Étiquettes */
.vweb-ba__label {
	position: absolute;
	top: 16px;
	z-index: 2;
	padding: 5px 12px;
	border-radius: 5px;
	background: var(--vweb-ba-label-bg);
	color: var(--vweb-ba-label-color);
	font-size: 15px;
	line-height: 1.3;
	font-weight: 500;
	pointer-events: none;
	transition: opacity 0.25s ease;
	white-space: nowrap;
}
.vweb-ba__label--before { left: 16px; }
.vweb-ba__label--after  { right: 16px; }
.vweb-ba__label.is-hidden { opacity: 0; }

/* Légende */
.vweb-ba__caption {
	margin: 14px 0 0;
	text-align: center;
	color: var(--vweb-ba-caption-color);
	font-size: 15px;
	line-height: 1.45;
}

/* Onglets */
.vweb-ba__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 20px;
}
.vweb-ba .vweb-ba__tab {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	margin: 0;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--vweb-ba-tab-bg);
	color: var(--vweb-ba-tab-color);
	font: inherit;
	font-size: 15px;
	line-height: 1.3;
	cursor: pointer;
	white-space: nowrap;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	transition: background-color 0.2s ease, color 0.2s ease;
}
.vweb-ba .vweb-ba__tab:hover { filter: brightness(0.96); }
.vweb-ba .vweb-ba__tab.is-active {
	background: var(--vweb-ba-tab-active-bg);
	color: var(--vweb-ba-tab-active-color);
}
.vweb-ba .vweb-ba__tab:focus-visible { outline: 2px solid #2271b1; outline-offset: 2px; }

/* Mobile ------------------------------------------------------------- */
@media (max-width: 767px) {
	.vweb-ba { --vweb-ba-handle-size: 46px; }
	/* Largeur définie dans un shortcode / bloc : pleine largeur sur mobile (Elementor gère ses propres largeurs par appareil). */
	.vweb-ba[style*="width"] { width: 100% !important; }
	.vweb-ba__label { top: 10px; padding: 4px 9px; font-size: 13px; }
	.vweb-ba__label--before { left: 10px; }
	.vweb-ba__label--after  { right: 10px; }
	.vweb-ba__caption { font-size: 14px; }
	/* Onglets défilables horizontalement comme sur l'exemple */
	.vweb-ba__tabs {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 4px;
		scroll-snap-type: x proximity;
	}
	.vweb-ba__tabs::-webkit-scrollbar { display: none; }
	.vweb-ba .vweb-ba__tab { padding: 9px 18px; font-size: 14px; scroll-snap-align: start; flex: 0 0 auto; }
	/* Centré quand ça tient, défilable sinon */
	.vweb-ba .vweb-ba__tab:first-child { margin-left: auto; }
	.vweb-ba .vweb-ba__tab:last-child  { margin-right: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.vweb-ba__handle, .vweb-ba__label, .vweb-ba__tab { transition: none; }
}