/* =========================================================
   SOURIRE PRESTIGE — Avant / Après
   ========================================================= */

.sp-compare {
	position: relative;
	aspect-ratio: 3 / 2;
	border-radius: var(--radius-md);
	overflow: hidden;
	cursor: ew-resize;
	user-select: none;
	background: var(--sp-grey-100);
}
.sp-compare__after, .sp-compare__before { position: absolute; inset: 0; }
.sp-compare__after img, .sp-compare__before img,
.sp-compare__after .sp-placeholder, .sp-compare__before .sp-placeholder { width: 100%; height: 100%; object-fit: cover; }
.sp-compare__before { clip-path: inset(0 50% 0 0); }
.sp-compare.is-dragging { cursor: grabbing; }

.sp-compare__handle {
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	width: 2px;
	background: var(--sp-white);
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	touch-action: none;
}
.sp-compare__handle::before, .sp-compare__handle::after {
	content: '';
	position: absolute;
	left: 50%; transform: translateX(-50%);
	width: 1px; height: 100%;
	background: rgba(255,255,255,0.6);
}
.sp-compare__handle .sp-icon {
	position: relative;
	width: 44px; height: 44px;
	padding: 12px;
	background: var(--sp-white);
	border-radius: 50%;
	box-shadow: var(--shadow-card);
	color: var(--sp-black);
}

.sp-compare__tag { position: absolute; bottom: var(--space-4); pointer-events: none; }
.sp-compare__tag--before { left: var(--space-4); }
.sp-compare__tag--after { right: var(--space-4); }

.sp-compare__zoom {
	position: absolute;
	top: var(--space-4); right: var(--space-4);
	width: 40px; height: 40px;
	border-radius: 50%;
	background: rgba(255,255,255,0.9);
	display: flex; align-items: center; justify-content: center;
	color: var(--sp-black);
	transition: background var(--duration-fast) var(--ease-premium);
}
.sp-compare__zoom:hover { background: var(--sp-white); }
.sp-compare__zoom .sp-icon { width: 18px; height: 18px; }

/* ---- Galerie : grille de cartes arrondies, lightbox au clic ---- */
.sp-ba-gallery__hint { max-width: 60ch; margin-bottom: var(--space-7); }
.sp-ba-gallery__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: var(--space-5);
}
.sp-ba-gallery__item {
	display: block;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--sp-white);
	border: 1px solid var(--sp-border);
	box-shadow: var(--shadow-card);
	transition: transform var(--duration-base) var(--ease-premium), box-shadow var(--duration-base) var(--ease-premium);
}
.sp-ba-gallery__item img { display: block; width: 100%; height: auto; }
.sp-ba-gallery__item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }