/* 1AS - Boutons Flèches : styles de base (front) */

.sw-abf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border: 0;
	margin: 0;
	cursor: pointer;
	line-height: 1;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, opacity .3s ease, visibility .3s ease, transform .25s ease;
	-webkit-appearance: none;
	appearance: none;
}

.sw-abf-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.sw-abf-icon {
	display: block;
	transition: transform .25s ease;
}

/* Rotation selon la direction (SVG de base pointe vers le haut) */
.sw-abf-dir-down .sw-abf-icon   { transform: rotate(180deg); }
.sw-abf-dir-left .sw-abf-icon   { transform: rotate(-90deg); }
.sw-abf-dir-right .sw-abf-icon  { transform: rotate(90deg); }

/* Apparition apres scroll */
.sw-abf-btn.sw-abf-hidden {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* Animation "bounce" au survol : suit la direction de la fleche */
@media (prefers-reduced-motion: no-preference) {
	.sw-abf-anim-bounce.sw-abf-dir-up:hover .sw-abf-icon,
	.sw-abf-anim-bounce.sw-abf-dir-up:focus-visible .sw-abf-icon {
		animation: sw-abf-bounce-up .6s ease infinite;
	}
	.sw-abf-anim-bounce.sw-abf-dir-down:hover .sw-abf-icon,
	.sw-abf-anim-bounce.sw-abf-dir-down:focus-visible .sw-abf-icon {
		animation: sw-abf-bounce-down .6s ease infinite;
	}
	.sw-abf-anim-bounce.sw-abf-dir-left:hover .sw-abf-icon,
	.sw-abf-anim-bounce.sw-abf-dir-left:focus-visible .sw-abf-icon {
		animation: sw-abf-bounce-left .6s ease infinite;
	}
	.sw-abf-anim-bounce.sw-abf-dir-right:hover .sw-abf-icon,
	.sw-abf-anim-bounce.sw-abf-dir-right:focus-visible .sw-abf-icon {
		animation: sw-abf-bounce-right .6s ease infinite;
	}
	.sw-abf-anim-zoom:hover,
	.sw-abf-anim-zoom:focus-visible {
		transform: scale(1.12);
	}
}

@keyframes sw-abf-bounce-up {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-4px); }
}
@keyframes sw-abf-bounce-down {
	0%, 100% { transform: rotate(180deg) translateY(0); }
	50%      { transform: rotate(180deg) translateY(-4px); }
}
@keyframes sw-abf-bounce-left {
	0%, 100% { transform: rotate(-90deg) translateY(0); }
	50%      { transform: rotate(-90deg) translateY(-4px); }
}
@keyframes sw-abf-bounce-right {
	0%, 100% { transform: rotate(90deg) translateY(0); }
	50%      { transform: rotate(90deg) translateY(-4px); }
}