/*
 * Bouton global « retour en haut » (maquette Figma : cercle blanc, bordure grey-light, double-chevron
 * grey-dark vers le haut). Overlay fixe : zero CLS. Masque par defaut (invisible, hors tabulation, aucune
 * interaction) ; revele par retour-haut.js au-dela du seuil. Structure et effets verrouilles, sur tokens.
 */

.mx-to-top {
	position: fixed;
	/* Coin bas-droite, avec marge de securite (safe-area sur mobile a encoche). */
	right: max( var(--wp--preset--spacing--40), env( safe-area-inset-right ) ); /* 24 */
	bottom: max( var(--wp--preset--spacing--40), env( safe-area-inset-bottom ) ); /* 24 */
	z-index: 90; /* au-dessus du contenu, sous le bandeau cookies / d'eventuelles modales */

	width: 40px; /* cote Figma */
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--wp--preset--spacing--20); /* 8 */

	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--grey-light);
	border-radius: 999px; /* cercle plein (rounded 300 Figma) */
	cursor: pointer;

	/* Etat masque : invisible, hors tabulation (visibility), aucune interaction (pointer-events). */
	opacity: 0;
	visibility: hidden;
	transform: translateY( 8px );
	pointer-events: none;
	transition: opacity var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
	            transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
	            visibility 0s linear var(--wp--custom--motion--base);
}

/* Etat visible (pose par le JS au-dela du seuil) : fondu + leger glissement, transform/opacity only. */
.mx-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition: opacity var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
	            transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
	            visibility 0s;
}

/* Survol / focus (pointeur fin) : accent orange sur l'icone + leger lift. */
@media ( hover: hover ) {
	.mx-to-top.is-visible:hover {
		transform: translateY( -2px );
		border-color: var(--wp--preset--color--grey-dark);
	}
	.mx-to-top:hover .mx-to-top__icon {
		background-color: var(--wp--preset--color--orange-dark);
	}
}

.mx-to-top:focus-visible {
	outline: 2px solid var(--wp--preset--color--yellow);
	outline-offset: 3px;
}

/* Icone : chevron « haut » (asset dedie fourni par JN, deja oriente), colorise en grey-dark. */
.mx-to-top__icon {
	width: 24px; /* cote Figma */
	height: 24px;
	flex: 0 0 auto;
	background-color: var(--wp--preset--color--grey-dark);
	-webkit-mask: url("../icons/icon-arrow-up.svg") center / contain no-repeat;
	mask: url("../icons/icon-arrow-up.svg") center / contain no-repeat;
	transition: background-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

/* Reduced-motion : apparition ET remontee instantanees (pas de transition). */
@media ( prefers-reduced-motion: reduce ) {
	.mx-to-top,
	.mx-to-top.is-visible,
	.mx-to-top__icon {
		transition: none !important;
	}
}