/**
 * ET Astra — les douze loaders, et l'écran d'attente qui les porte.
 *
 * Chaque modèle tient dans un élément et ses parties vides : aucune image,
 * aucune police, rien à charger. Trois jetons les règlent tous — la couleur,
 * la taille, la vitesse —, ce qui permet à l'écran des réglages de montrer les
 * douze animations vivantes sans rien dupliquer.
 *
 * Qui demande moins d'animations dans son système voit un point fixe : le
 * loader dit encore « ça travaille », sans rien faire bouger.
 *
 * @package ET_Astra
 */

/* Les valeurs par défaut vivent à la racine, et non sur le loader lui-même :
   une propriété déclarée sur l'élément l'emporte sur celle qu'il hérite, si
   bien qu'une taille posée par le serveur sur l'écran d'attente n'aurait
   jamais atteint l'animation qu'il contient. */
:root {
	--eta-load-couleur: currentColor;
	--eta-load-taille: 48px;
	--eta-load-vitesse: 1;
}

.eta-loader {
	position: relative;
	display: inline-block;
	width: var(--eta-load-taille);
	height: var(--eta-load-taille);
	color: var(--eta-load-couleur);
	vertical-align: middle;
}

.eta-loader__part {
	position: absolute;
	box-sizing: border-box;
}

/* ─────────── 1. Anneau ─────────── */

.eta-loader--anneau .eta-loader__part {
	inset: 0;
	border: calc(var(--eta-load-taille) / 8) solid currentColor;
	border-top-color: transparent;
	border-radius: 50%;
	opacity: .9;
	animation: eta-load-tour calc(900ms * var(--eta-load-vitesse)) linear infinite;
}

/* ─────────── 2. Double anneau ─────────── */

.eta-loader--double .eta-loader__part {
	inset: 0;
	border: calc(var(--eta-load-taille) / 10) solid currentColor;
	border-right-color: transparent;
	border-left-color: transparent;
	border-radius: 50%;
	animation: eta-load-tour calc(1100ms * var(--eta-load-vitesse)) linear infinite;
}

.eta-loader--double .eta-loader__part:nth-child(2) {
	inset: 22%;
	border-width: calc(var(--eta-load-taille) / 12);
	animation-direction: reverse;
	animation-duration: calc(800ms * var(--eta-load-vitesse));
	opacity: .6;
}

/* ─────────── 3. Trois points ─────────── */

.eta-loader--points .eta-loader__part,
.eta-loader--rebond .eta-loader__part {
	top: 50%;
	width: calc(var(--eta-load-taille) / 4);
	height: calc(var(--eta-load-taille) / 4);
	margin-top: calc(var(--eta-load-taille) / -8);
	background: currentColor;
	border-radius: 50%;
}

.eta-loader--points .eta-loader__part:nth-child(1),
.eta-loader--rebond .eta-loader__part:nth-child(1) { left: 0; }
.eta-loader--points .eta-loader__part:nth-child(2),
.eta-loader--rebond .eta-loader__part:nth-child(2) { left: calc(37.5% - var(--eta-load-taille) / 8 + var(--eta-load-taille) / 8); }
.eta-loader--points .eta-loader__part:nth-child(3),
.eta-loader--rebond .eta-loader__part:nth-child(3) { right: 0; }

.eta-loader--points .eta-loader__part {
	animation: eta-load-pulse calc(1200ms * var(--eta-load-vitesse)) ease-in-out infinite;
	animation-delay: calc(var(--eta-load-rang, 0) * 160ms * var(--eta-load-vitesse));
}

/* ─────────── 4. Points rebondissants ─────────── */

.eta-loader--rebond .eta-loader__part {
	animation: eta-load-saut calc(900ms * var(--eta-load-vitesse)) cubic-bezier(.36, 0, .64, 1) infinite;
	animation-delay: calc(var(--eta-load-rang, 0) * 120ms * var(--eta-load-vitesse));
}

/* ─────────── 5. Égaliseur ─────────── */

.eta-loader--barres .eta-loader__part {
	bottom: 0;
	width: 12%;
	height: 100%;
	background: currentColor;
	border-radius: calc(var(--eta-load-taille) / 20);
	transform-origin: 50% 100%;
	left: calc(var(--eta-load-rang, 0) * 22%);
	animation: eta-load-barre calc(1000ms * var(--eta-load-vitesse)) ease-in-out infinite;
	animation-delay: calc(var(--eta-load-rang, 0) * 110ms * var(--eta-load-vitesse));
}

/* ─────────── 6. Pouls ─────────── */

.eta-loader--pouls .eta-loader__part {
	inset: 0;
	background: currentColor;
	border-radius: 50%;
	opacity: .55;
	animation: eta-load-onde calc(1600ms * var(--eta-load-vitesse)) cubic-bezier(0, .2, .8, 1) infinite;
}

.eta-loader--pouls .eta-loader__part:nth-child(2) {
	animation-delay: calc(800ms * var(--eta-load-vitesse));
}

/* ─────────── 7. Carrés ─────────── */

.eta-loader--carres .eta-loader__part {
	width: 40%;
	height: 40%;
	background: currentColor;
	border-radius: calc(var(--eta-load-taille) / 12);
	animation: eta-load-carres calc(1800ms * var(--eta-load-vitesse)) ease-in-out infinite;
	animation-delay: calc(var(--eta-load-rang, 0) * 140ms * var(--eta-load-vitesse));
}

.eta-loader--carres .eta-loader__part:nth-child(1) { top: 0; left: 0; }
.eta-loader--carres .eta-loader__part:nth-child(2) { top: 0; right: 0; }
.eta-loader--carres .eta-loader__part:nth-child(3) { bottom: 0; right: 0; }
.eta-loader--carres .eta-loader__part:nth-child(4) { bottom: 0; left: 0; }

/* ─────────── 8. Grille ─────────── */

.eta-loader--grille {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8%;
}

.eta-loader--grille .eta-loader__part {
	position: static;
	background: currentColor;
	border-radius: calc(var(--eta-load-taille) / 16);
	animation: eta-load-pulse calc(1300ms * var(--eta-load-vitesse)) ease-in-out infinite;
	animation-delay: calc(var(--eta-load-rang, 0) * 90ms * var(--eta-load-vitesse));
}

/* ─────────── 9. Spirale ─────────── */

.eta-loader--spirale .eta-loader__part {
	inset: 0;
	border: calc(var(--eta-load-taille) / 9) dashed currentColor;
	border-radius: 50%;
	opacity: .85;
	animation: eta-load-tour calc(2600ms * var(--eta-load-vitesse)) linear infinite;
}

/* ─────────── 10. Horloge ─────────── */

.eta-loader--horloge .eta-loader__part {
	top: 0;
	left: calc(50% - var(--eta-load-taille) / 24);
	width: calc(var(--eta-load-taille) / 12);
	height: 30%;
	background: currentColor;
	border-radius: var(--eta-load-taille);
	transform-origin: 50% calc(var(--eta-load-taille) / 2);
	transform: rotate(calc(var(--eta-load-rang, 0) * 30deg));
	animation: eta-load-eteint calc(1200ms * var(--eta-load-vitesse)) linear infinite;
	animation-delay: calc(var(--eta-load-rang, 0) * 100ms * var(--eta-load-vitesse));
}

/* ─────────── 11. Ondes ─────────── */

.eta-loader--ondes .eta-loader__part {
	inset: 0;
	border: calc(var(--eta-load-taille) / 14) solid currentColor;
	border-radius: 50%;
	animation: eta-load-onde calc(1800ms * var(--eta-load-vitesse)) cubic-bezier(0, .2, .8, 1) infinite;
	animation-delay: calc(var(--eta-load-rang, 0) * 600ms * var(--eta-load-vitesse));
}

/* ─────────── 12. Infini ─────────── */

.eta-loader--infini::before,
.eta-loader--infini::after {
	position: absolute;
	top: calc(50% - var(--eta-load-taille) / 4);
	width: calc(var(--eta-load-taille) / 2);
	height: calc(var(--eta-load-taille) / 2);
	border: calc(var(--eta-load-taille) / 12) solid currentColor;
	border-radius: 50%;
	opacity: .35;
	content: "";
}

.eta-loader--infini::before { left: 0; }
.eta-loader--infini::after { right: 0; }

.eta-loader--infini .eta-loader__part {
	top: calc(50% - var(--eta-load-taille) / 12);
	left: calc(50% - var(--eta-load-taille) / 12);
	width: calc(var(--eta-load-taille) / 6);
	height: calc(var(--eta-load-taille) / 6);
	background: currentColor;
	border-radius: 50%;
	offset-path: path("M 0,0 a 12,12 0 1,1 0,0.1 M 0,0 a 12,12 0 1,0 0,-0.1");
	animation: eta-load-huit calc(2000ms * var(--eta-load-vitesse)) linear infinite;
}

/* ─────────── Les mouvements ─────────── */

@keyframes eta-load-tour {
	to { transform: rotate(360deg); }
}

@keyframes eta-load-pulse {
	0%, 80%, 100% { opacity: .25; transform: scale(.7); }
	40% { opacity: 1; transform: scale(1); }
}

@keyframes eta-load-saut {
	0%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(calc(var(--eta-load-taille) / -3)); }
}

@keyframes eta-load-barre {
	0%, 100% { transform: scaleY(.28); opacity: .5; }
	50% { transform: scaleY(1); opacity: 1; }
}

@keyframes eta-load-onde {
	0% { opacity: .6; transform: scale(.25); }
	100% { opacity: 0; transform: scale(1); }
}

@keyframes eta-load-carres {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .3; transform: scale(.6); }
}

@keyframes eta-load-eteint {
	0% { opacity: 1; }
	100% { opacity: .12; }
}

@keyframes eta-load-huit {
	0% { offset-distance: 0%; }
	100% { offset-distance: 100%; }
}

/* ─────────── L'écran d'attente ─────────── */

.eta-loader-ecran {
	position: fixed;
	inset: 0;
	z-index: 99998;
	display: grid;
	gap: 16px;
	place-content: center;
	place-items: center;
	background: var(--eta-load-fond, #fff);
	opacity: 0;
	transition: opacity .25s ease;
}

.eta-loader-ecran[hidden] {
	display: none;
}

.eta-loader-ecran.is-vu {
	opacity: 1;
}

.eta-loader-ecran__texte {
	margin: 0;
	font-size: 14px;
	letter-spacing: .04em;
	color: var(--eta-load-couleur, currentColor);
}

/* Le loader d'une transition : il ne paraît qu'après son délai, pour ne pas
   clignoter sur une page qui arrive tout de suite. */
.eta-trans__loader {
	position: absolute;
	top: 50%;
	left: 50%;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: opacity .2s ease;
}

.eta-trans.is-sortie .eta-trans__loader {
	opacity: 1;
	transition-delay: var(--eta-load-delai, 400ms);
}

/* Moins d'animations : le loader se fige, il ne disparaît pas — il dit encore
   que quelque chose se passe. */
@media (prefers-reduced-motion: reduce) {

	.eta-loader .eta-loader__part,
	.eta-loader--infini::before,
	.eta-loader--infini::after {
		animation: none !important;
		opacity: .7;
	}

	.eta-loader-ecran {
		transition: none;
	}
}