/**
 * VivaWeb Avant/Après — habillage du comparateur.
 *
 * Chargé après css/twentytwenty.css (déclaré en dépendance) afin de pouvoir
 * surcharger le skin d'origine via des custom properties, que les contrôles de
 * style du widget Elementor alimentent sur `.vwab-avant-apres`.
 */

.vwab-avant-apres {
	--vwab-max-width: 100%;
	--vwab-handle-color: #ffffff;
	--vwab-handle-size: 38px;
	--vwab-handle-border: 3px;
	--vwab-label-color: #ffffff;
	--vwab-label-background: rgba(255, 255, 255, 0.2);

	/*
	 * Largeur explicite indispensable : `margin-left/right: auto` empêche
	 * l'étirement d'un élément flex sur son axe transversal (CSS Flexbox §9.6),
	 * le bloc est alors dimensionné en fit-content. Or twentytwenty passe les
	 * images en `position: absolute` à l'initialisation : le fit-content tombe
	 * à zéro et le comparateur disparaît. C'est le cas dans une colonne Kadence
	 * (`.kt-inside-inner-col` est en `display: flex; flex-direction: column`),
	 * comme dans tout parent flex ou grille.
	 */
	width: 100%;
	max-width: var(--vwab-max-width);
	margin-left: auto;
	margin-right: auto;
}

/*
 * État avant initialisation du JS.
 *
 * Le conteneur ne reçoit la classe `twentytwenty-container` qu'au moment de
 * l'init : jusque-là les images restent dans le flux, le bloc a donc une
 * hauteur réelle. Cela évite le décalage de mise en page côté visiteur, et
 * empêche l'éditeur Elementor de remplacer le widget par son placeholder
 * « widget vide » (il le fait dès qu'un widget mesure 0 px de haut).
 *
 * Le combinateur est `~` et non `+` : les optimiseurs de chargement paresseux
 * (WP Rocket, entre autres) insèrent un <noscript> de repli entre les deux
 * images, ce qui suffit à casser un sélecteur d'adjacence directe.
 */
.vwab-avant-apres .vwab-container > img {
	display: block;
	width: 100%;
	height: auto;
}

.vwab-avant-apres .vwab-container:not(.twentytwenty-container) > img ~ img {
	display: none;
}

/* Poignée */

.vwab-avant-apres .twentytwenty-handle {
	width: var(--vwab-handle-size);
	height: var(--vwab-handle-size);
	margin-left: calc((var(--vwab-handle-size) / 2 + var(--vwab-handle-border)) * -1);
	margin-top: calc((var(--vwab-handle-size) / 2 + var(--vwab-handle-border)) * -1);
	border: var(--vwab-handle-border) solid var(--vwab-handle-color);
}

.vwab-avant-apres .twentytwenty-handle:focus-visible {
	outline: 2px solid var(--vwab-handle-color);
	outline-offset: 3px;
}

.vwab-avant-apres .twentytwenty-horizontal .twentytwenty-handle:before,
.vwab-avant-apres .twentytwenty-horizontal .twentytwenty-handle:after,
.vwab-avant-apres .twentytwenty-vertical .twentytwenty-handle:before,
.vwab-avant-apres .twentytwenty-vertical .twentytwenty-handle:after {
	background: var(--vwab-handle-color);
}

.vwab-avant-apres .twentytwenty-horizontal .twentytwenty-handle:before {
	margin-bottom: calc(var(--vwab-handle-size) / 2 + var(--vwab-handle-border));
	box-shadow: 0 var(--vwab-handle-border) 0 var(--vwab-handle-color), 0 0 12px rgba(51, 51, 51, 0.5);
}

.vwab-avant-apres .twentytwenty-horizontal .twentytwenty-handle:after {
	margin-top: calc(var(--vwab-handle-size) / 2 + var(--vwab-handle-border));
	box-shadow: 0 calc(var(--vwab-handle-border) * -1) 0 var(--vwab-handle-color), 0 0 12px rgba(51, 51, 51, 0.5);
}

.vwab-avant-apres .twentytwenty-vertical .twentytwenty-handle:before {
	margin-left: calc(var(--vwab-handle-size) / 2 + var(--vwab-handle-border));
	box-shadow: var(--vwab-handle-border) 0 0 var(--vwab-handle-color), 0 0 12px rgba(51, 51, 51, 0.5);
}

.vwab-avant-apres .twentytwenty-vertical .twentytwenty-handle:after {
	margin-right: calc(var(--vwab-handle-size) / 2 + var(--vwab-handle-border));
	box-shadow: calc(var(--vwab-handle-border) * -1) 0 0 var(--vwab-handle-color), 0 0 12px rgba(51, 51, 51, 0.5);
}

/* Flèches */

.vwab-avant-apres .twentytwenty-left-arrow {
	border-right-color: var(--vwab-handle-color);
	margin-left: calc((var(--vwab-handle-size) / 2 - 2px) * -1);
}

.vwab-avant-apres .twentytwenty-right-arrow {
	border-left-color: var(--vwab-handle-color);
	margin-right: calc((var(--vwab-handle-size) / 2 - 2px) * -1);
}

.vwab-avant-apres .twentytwenty-up-arrow {
	border-bottom-color: var(--vwab-handle-color);
	margin-top: calc((var(--vwab-handle-size) / 2 - 2px) * -1);
}

.vwab-avant-apres .twentytwenty-down-arrow {
	border-top-color: var(--vwab-handle-color);
	margin-bottom: calc((var(--vwab-handle-size) / 2 - 2px) * -1);
}

/* Libellés */

.vwab-avant-apres .twentytwenty-before-label:before,
.vwab-avant-apres .twentytwenty-after-label:before {
	color: var(--vwab-label-color);
	background: var(--vwab-label-background);
}

/* Message de configuration, visible uniquement par les personnes habilitées. */

.vwab-notice {
	padding: 0.75em 1em;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #1d2327;
	font-size: 0.9em;
}

@media (prefers-reduced-motion: reduce) {
	.vwab-avant-apres .twentytwenty-before-label,
	.vwab-avant-apres .twentytwenty-after-label,
	.vwab-avant-apres .twentytwenty-overlay {
		transition-duration: 0s;
	}
}