/**
 * Composant "slider avant/après" réutilisable (voir HS_Devis_Shortcode::
 * render_before_after_slider() et assets/js/hs-devis-before-after-slider.js)
 * — réutilise les variables déjà définies par hs-devis-wizard.css (chargé
 * en dépendance), jamais redéfinies ici.
 */

.hs-bas {
	position: relative;
	width: 100%;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--hs-devis-shadow-card);
	background: #000;
}

.hs-bas__frame {
	position: relative;
	width: 100%;
	/* Ratio 4:3, cohérent avec les illustrations fournies (viewBox 800x600). */
	aspect-ratio: 4 / 3;
	overflow: hidden;
	user-select: none;
	touch-action: pan-y;
}

.hs-bas__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}

.hs-bas__before-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	/* Valeur de repli si le JS ne tourne pas encore (chargement) : moitié
	   révélée, jamais 0% (ne masquerait totalement l'image "avant"). */
	clip-path: inset(0 50% 0 0);
}

.hs-bas__label {
	position: absolute;
	top: 0.9em;
	z-index: 2;
	max-width: 44%;
	box-sizing: border-box;
	padding: 0.35em 0.75em;
	border-radius: 14px;
	background: rgba(26, 22, 19, 0.55);
	color: #fff;
	font-size: 0.72em;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-align: center;
	white-space: normal;
	backdrop-filter: blur(2px);
}

@media screen and (min-width: 480px) {
	.hs-bas__label {
		font-size: 0.8em;
		border-radius: 999px;
	}
}

.hs-bas__label--avant {
	left: 0.9em;
}

.hs-bas__label--apres {
	right: 0.9em;
}

.hs-bas__divider {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 3px;
	background: #fff;
	transform: translateX(-50%);
	z-index: 3;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.hs-bas__handle {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 2.6em;
	height: 2.6em;
	border-radius: 50%;
	background: #fff;
	color: var(--hs-devis-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	cursor: ew-resize;
}

.hs-bas__handle:focus-visible {
	outline: 3px solid var(--hs-devis-primary);
	outline-offset: 2px;
}

.hs-bas__handle .hs-devis-icon {
	width: 1.2em;
	height: 1.2em;
}

/* Points de pagination — pas encore utilisés (un seul exemple par slider
   pour l'instant, voir le docblock de render_before_after_slider()), mais
   la classe existe déjà si un jour plusieurs exemples doivent défiler. */
.hs-bas-dots {
	display: flex;
	justify-content: center;
	gap: 0.5em;
	margin-top: 0.9em;
}

.hs-bas-dots__dot {
	width: 0.5em;
	height: 0.5em;
	border-radius: 50%;
	background: var(--hs-devis-border-input);
}

.hs-bas-dots__dot--active {
	background: var(--hs-devis-primary);
}