/*
 * Comparateur avant/après.
 *
 * Chargé uniquement sur les pages qui en affichent un (functions.php) :
 * c'est ce qu'une extension générique ne sait pas faire.
 */

img-comparison-slider {
	--divider-width: 2px;
	--divider-color: #fff;
	--divider-shadow: 0 0 12px rgba(0, 0, 0, 0.35);
	--default-handle-opacity: 1;

	display: block;
	width: 100%;
	line-height: 0;
	background: var(--raf-beige, #e8e1d3);
}

/*
 * Tant que le composant n'est pas défini (script en cours de chargement, ou
 * JavaScript indisponible), le navigateur empile les deux images. On n'affiche
 * alors que la première : le visiteur voit une photo correcte au lieu d'un
 * doublon, et la mise en page ne bouge pas ensuite.
 *
 * Une fois le composant défini, c'est lui qui gère l'empilement — on laisse
 * donc les deux images visibles, la seconde donnant sa hauteur au conteneur.
 */
img-comparison-slider:not(:defined) {
	position: relative;
	overflow: hidden;
}

img-comparison-slider:not(:defined) [slot="second"],
img-comparison-slider:not(:defined) [slot="handle"],
img-comparison-slider:not(:defined) .raf-comparateur__etiquette {
	display: none;
}

img-comparison-slider img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

/* Étiquettes Avant / Après */

.raf-comparateur__etiquette {
	position: absolute;
	bottom: 0.85rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	line-height: 1;
	padding: 0.35rem 0.7rem;
	border-radius: 3px;
	color: #fff;
	pointer-events: none;
}

.raf-comparateur__etiquette--avant {
	left: 0.85rem;
	background: rgba(7, 30, 33, 0.75);
}

.raf-comparateur__etiquette--apres {
	right: 0.85rem;
	background: rgba(65, 106, 81, 0.9);
}

/* Poignée */

.raf-comparateur__poignee {
	width: 52px;
	height: 52px;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
}

.raf-comparateur__poignee circle {
	fill: #fff;
}

.raf-comparateur__poignee path {
	fill: none;
	stroke: #071e21;
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Le composant est pilotable au clavier : le focus doit se voir. */
img-comparison-slider:focus-visible {
	outline: 3px solid var(--raf-accent, #416a51);
	outline-offset: 3px;
}