/* ==========================================================================
   Écran de chargement de page (préchargeur global du site)
   ==========================================================================
   Recouvre toute la page dès le premier rendu du <body> (voir
   INTEGRATION-preloader.php.md : le markup est injecté via le hook
   wp_body_open, donc avant tout le reste du contenu), et disparaît en
   fondu (anime.js, voir preloader.js) une fois la page chargée. Couleurs
   reprises du dégradé de fond de l'entête de bloc-entete-parcours-fil et
   du dégradé du fil (#D7A1C4 -> #7DAEDC), pour rester cohérent avec
   l'identité visuelle du site plutôt que d'ajouter une nouvelle palette.
   -------------------------------------------------------------------------- */

/*
 * Pendant que le préchargeur est affiché, on bloque le scroll de la page
 * (l'utilisateur ne doit pas pouvoir faire défiler ce qu'il ne voit pas
 * encore) — classe posée/retirée par preloader.js sur <html>.
 */
html.has-site-preloader {
	overflow: hidden;
}

.site-preloader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #ACB8DC 0%, #EDC2D3 100%);
	/* opacity/scale animés en JS (anime.js) — voir preloader.js. Pas de
	   transition CSS ici : anime.js gère toute l'animation de sortie pour
	   rester cohérent avec la demande ("animation anime.js"). */
}

.site-preloader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
}

.site-preloader__logo {
	display: block;
	width: 220px;
	height: auto;
	opacity: 0; /* révélé en fondu par preloader.js au démarrage */
}

.site-preloader__spinner {
	display: block;
	width: 64px;
	height: 64px;
}

/*
 * transform-box: fill-box nécessaire pour que transform-origin: 50% 50%
 * tourne bien autour du CENTRE du cercle (et non du coin du viewport SVG,
 * comportement par défaut pour un élément SVG enfant).
 */
.site-preloader__spinner-arc {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
	/*
	 * L'anneau reste affiché (repère visuel qu'un chargement est en cours)
	 * mais ne tourne pas — voir preloader.js, qui ne lance pas la rotation
	 * anime.js dans ce cas. La disparition en fin de chargement reste un
	 * simple fondu, sans le léger effet d'échelle.
	 */
	.site-preloader__spinner-arc {
		animation: none !important;
	}
}