/* Bouton « Retour en haut de page » (classes/class-back-to-top.php),
   affiché au-delà de 100px de scroll par assets/js/back-to-top.js.
   z-index juste sous le header (10) : le menu plein écran, les sous-menus et
   le méga menu, piégés dans son contexte d'empilement, passent par-dessus. */
.back-to-top {
	position: fixed;
	right: var(--wp--preset--spacing--30);
	bottom: var(--wp--preset--spacing--30);
	z-index: 9;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--soft);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
				transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
				visibility 0.25s,
				background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover {
	background-color: var(--wp--custom--color--primary-hover);
}

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

/* Flèche de la charte (même SVG que le menu, cf. core-navigation.css) en
   masque pour prendre la couleur du texte, pivotée vers le haut */
.back-to-top::before {
	content: "";
	display: block;
	width: 22px;
	height: 17px;
	background-color: currentColor;
	-webkit-mask: url("../img/fleche-petite-bleue.svg") no-repeat center / contain;
	mask: url("../img/fleche-petite-bleue.svg") no-repeat center / contain;
	transform: rotate(-90deg);
	transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.back-to-top:hover::before {
	transform: rotate(-90deg) translateX(3px);
}

/* Focus posé sur <body> après la remontée (back-to-top.js) : pas de cadre
   autour de toute la page */
body[tabindex="-1"]:focus {
	outline: none;
}

@media (width <= 768px) {
	.back-to-top {
		right: 1rem;
		bottom: 1rem;
		width: 44px;
		height: 44px;
	}
}

/* CTA fixée en bas d'écran (parts/cta-mobile*.html, 103px, affichée jusqu'à
   1024px) : le bouton passe au-dessus */
@media (width <= 1024px) {
	body:has(.wp-block-group.cta-mobile) .back-to-top {
		bottom: calc(103px + var(--wp--preset--spacing--10));
	}
}

@media (prefers-reduced-motion: reduce) {
	.back-to-top,
	.back-to-top::before {
		transition: none;
	}
}