/**
 * YC Gallery — flèches de navigation « précédent / suivant ».
 *
 * SOURCE UNIQUE du dessin des flèches : la lightbox du plugin ET le diaporama
 * du héro du thème yvanchabre chargent cette feuille (handle `ycg-arrows`).
 * Modifier ici change les deux. Le pictogramme est un masque SVG coloré par
 * la couleur de fond du pseudo-élément ; les couleurs viennent des variables
 * CSS posées par l'hôte (réglages YC Gallery → Lightbox → Navigation) :
 *   --ycg-nav-bg, --ycg-nav-bg-over, --ycg-nav-icon, --ycg-nav-icon-over
 * Balise attendue : <div|button class="ycg-lb-arrow ycg-lb-arrow-prev"></div>
 * (helper PHP : ycg_arrow_html( 'prev'|'next' ), variables : ycg_nav_style()).
 */

.ycg-lb-arrow {
	position: absolute;
	box-sizing: border-box;
	width: 45px;
	height: 40px;
	top: 50%;
	margin: 0 10px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background-color: var(--ycg-nav-bg, rgba(0, 0, 0, 0.6));
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.3s, transform 0.5s ease-out;
}

.ycg-lb-arrow::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--ycg-nav-icon, rgba(255, 255, 255, 1));
	transition: background-color 0.3s;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
	pointer-events: none;
}

.ycg-lb-arrow.ycg-lb-arrow-prev {
	left: 0;
	transform: translate(0%, -50%);
}

.ycg-lb-arrow.ycg-lb-arrow-next {
	right: 0;
	transform: translate(0%, -50%);
}

.ycg-lb-arrow.ycg-lb-arrow-prev::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='352,115.4 331.3,96 160,256 331.3,416 352,396.7 201.5,256'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='352,115.4 331.3,96 160,256 331.3,416 352,396.7 201.5,256'/%3E%3C/svg%3E");
}

.ycg-lb-arrow.ycg-lb-arrow-next::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='160,115.4 180.7,96 352,256 180.7,416 160,396.7 310.5,256'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpolygon points='160,115.4 180.7,96 352,256 180.7,416 160,396.7 310.5,256'/%3E%3C/svg%3E");
}

/* Survol (souris seulement : au doigt, :hover resterait collé après le tap). */
@media (hover: hover) {
	.ycg-lb-arrow:hover {
		background-color: var(--ycg-nav-bg-over, rgba(255, 255, 255, 1));
	}

	.ycg-lb-arrow:hover::before {
		background-color: var(--ycg-nav-icon-over, rgba(0, 0, 0, 1));
	}
}

.ycg-lb-arrow:focus-visible {
	outline: 2px solid var(--ycg-nav-icon, rgba(255, 255, 255, 1));
	outline-offset: 2px;
}

/* Flèches glissées hors champ (zoom, petit écran avec contrôles masqués). */
.ycg-lb-arrow.ycg-lb-arrow-prev.ycg-lb-arrow-off {
	transform: translate(-150%, -50%);
}

.ycg-lb-arrow.ycg-lb-arrow-next.ycg-lb-arrow-off {
	transform: translate(150%, -50%);
}