/* Sagamento Toolkit — Arrow (indicateur de défilement)
   Réglages par défaut, surchargeables via style="--sg-arrow-color: #000" etc.
   sur .sg-scroll-arrow (ex. depuis un filtre PHP qui ajoute un attribut). */

.sg-scroll-arrow {
	--sg-arrow-color: #3324A9;
	--sg-arrow-size: 32px;
	--sg-arrow-bounce: 10px;
	--sg-arrow-duration: 1.6s;
	--sg-arrow-fade: 300ms;

	position: fixed;
	left: 50%;
	bottom: 24px;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(var(--sg-arrow-size) * 1.6);
	height: calc(var(--sg-arrow-size) * 1.6);
	color: var(--sg-arrow-color);
	transform: translateX(-50%);
	cursor: pointer;
	opacity: 1;
	transition: opacity var(--sg-arrow-fade) ease;
	animation: sg-arrow-bounce var(--sg-arrow-duration) ease-in-out infinite;
}

.sg-scroll-arrow.sg-arrow-hidden {
	opacity: 0;
	/* Une fois masquée, elle ne doit plus intercepter les clics destinés
	   au contenu qu'elle survolait. */
	pointer-events: none;
}

.sg-scroll-arrow svg {
	width: var(--sg-arrow-size);
	height: var(--sg-arrow-size);
	display: block;
	/* Lisible même par-dessus une image ou un fond de couleur proche. */
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
}

.sg-scroll-arrow:focus-visible {
	outline: 2px solid var(--sg-arrow-color);
	outline-offset: 4px;
	border-radius: 50%;
}

@keyframes sg-arrow-bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(var(--sg-arrow-bounce));
	}
}

@media (prefers-reduced-motion: reduce) {
	.sg-scroll-arrow {
		animation: none;
	}
}

/* Masquée sur smartphone : sur ces écrans la flèche gêne souvent plus
   qu'elle n'aide (moins d'espace, contenu déjà "scrollable" évident). */
@media (max-width: 782px) {
	.sg-scroll-arrow {
		display: none;
	}
}