/* Écran d'attente du site public (09/11/2026).
   Fichier commun à tous les styles de couleur (`color-style/*.css`), chargé après eux :
   il remplace leur fond en ellipse (couleur principale allégée dans les coins) et leurs
   trois points. Il ne lit que les variables du tenant, aucune couleur propre à un site :
   il tient sur fond sombre (SymbioPlay) comme sur fond clair (Diva Yoga).
   Gabarit : resources/views/site_app.blade.php, bloc « Pre Loader ». */

.preloader {
	--preloader-fond: var(--couleur-fond-content, #0d0620);
	--preloader-accent: var(--primary-color, #e05c70);
	--preloader-accent-fort: var(--primary-enhanced-color, #ab2546);
	--preloader-sortie: cubic-bezier(0.16, 1, 0.3, 1);

	overflow: hidden;
	gap: 28px;
	background: var(--preloader-fond);
	isolation: isolate;
}

/* Deux lueurs de la couleur principale qui dérivent autour du logo : la lumière
   vient du centre et s'éteint avant les bords. Dégradés radiaux plutôt qu'un flou
   (filter: blur), trop coûteux sur les téléphones modestes. */
.preloader::before,
.preloader::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	border-radius: 50%;
	pointer-events: none;
	opacity: 0;
	will-change: transform, opacity;
}

.preloader::before {
	--preloader-lueur: 0.44;
	width: 38vmax;
	height: 38vmax;
	margin: -19vmax 0 0 -19vmax;
	background: radial-gradient(circle closest-side, var(--preloader-accent), transparent);
	background: radial-gradient(circle closest-side, var(--preloader-accent), color-mix(in srgb, var(--preloader-accent) 40%, transparent) 38%, color-mix(in srgb, var(--preloader-accent) 10%, transparent) 68%, transparent);
	animation:
		preloader-apparition 1.4s var(--preloader-sortie) 0.1s forwards,
		preloader-derive-a 6.5s ease-in-out infinite alternate;
}

.preloader::after {
	--preloader-lueur: 0.52;
	width: 26vmax;
	height: 26vmax;
	margin: -13vmax 0 0 -13vmax;
	background: radial-gradient(circle closest-side, var(--preloader-accent-fort), transparent);
	background: radial-gradient(circle closest-side, var(--preloader-accent-fort), color-mix(in srgb, var(--preloader-accent-fort) 40%, transparent) 38%, color-mix(in srgb, var(--preloader-accent-fort) 10%, transparent) 68%, transparent);
	animation:
		preloader-apparition 1.6s var(--preloader-sortie) 0.3s forwards,
		preloader-derive-b 8.5s ease-in-out infinite alternate;
}

/* Le logo entre en se posant, puis respire ; deux ondes fines partent de lui
   en alternance, comme un signal qui se propage. */
.preloader .logo {
	position: relative;
	display: block;
	padding: 0;
	background: none;
	box-shadow: none;
	animation: preloader-logo-entree 0.9s var(--preloader-sortie) both;
}

.preloader .logo::before,
.preloader .logo::after {
	content: "";
	position: absolute;
	z-index: -1;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	margin: -100px 0 0 -100px;
	border: 1px solid var(--preloader-accent);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	animation: preloader-onde 3.2s cubic-bezier(0.22, 1, 0.36, 1) 0.9s infinite;
}

.preloader .logo::after {
	animation-delay: 2.5s;
}

.preloader img {
	display: block;
	max-width: 170px;
	height: auto;
	animation: preloader-logo-souffle 3.2s ease-in-out 0.9s infinite;
}

/* Les trois points deviennent un trait de lumière qui court sous le logo, et
   trois étincelles qui s'en échappent vers le logo. Le trait est un dégradé qui
   glisse en fond (pas de débordement masqué) pour laisser monter les étincelles. */
.preloader .lds-ellipsis {
	position: relative;
	width: 140px;
	height: 2px;
	border-radius: 2px;
	background:
		linear-gradient(90deg, transparent, var(--preloader-accent) 40%, var(--preloader-accent-fort) 70%, transparent) no-repeat,
		rgba(128, 128, 128, 0.15);
	background:
		linear-gradient(90deg, transparent, var(--preloader-accent) 40%, var(--preloader-accent-fort) 70%, transparent) no-repeat,
		color-mix(in srgb, var(--preloader-accent) 16%, transparent);
	background-size: 45% 100%, 100% 100%;
	filter: drop-shadow(0 0 5px var(--preloader-accent));
	opacity: 0;
	animation:
		preloader-fondu 0.6s ease-out 0.45s forwards,
		preloader-trait 1.3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.preloader .lds-ellipsis div,
.preloader .lds-ellipsis div:nth-child(1),
.preloader .lds-ellipsis div:nth-child(2),
.preloader .lds-ellipsis div:nth-child(3) {
	position: absolute;
	top: -1px;
	left: 22%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--preloader-accent);
	opacity: 0;
	animation: preloader-etincelle 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.6s infinite;
}

.preloader .lds-ellipsis div:nth-child(2) {
	left: 52%;
	width: 3px;
	height: 3px;
	animation-delay: 1.4s;
	animation-duration: 2.8s;
}

.preloader .lds-ellipsis div:nth-child(3) {
	left: 76%;
	animation-delay: 2.1s;
	animation-duration: 2.2s;
}

/* Le bouton « Recharger la page » arrive en douceur quand le script l'affiche. */
.preloader #reloadButton {
	margin-top: 4px;
	padding: 9px 20px;
	border: 1px solid rgba(128, 128, 128, 0.35);
	border: 1px solid color-mix(in srgb, var(--preloader-accent) 45%, transparent);
	border-radius: 999px;
	background: transparent;
	background: color-mix(in srgb, var(--preloader-accent) 8%, transparent);
	color: inherit;
	font-size: 14px;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition:
		background-color 0.2s cubic-bezier(0.23, 1, 0.32, 1),
		border-color 0.2s cubic-bezier(0.23, 1, 0.32, 1),
		transform 0.16s cubic-bezier(0.23, 1, 0.32, 1);
	animation: preloader-logo-entree 0.6s var(--preloader-sortie) both;
}

.preloader #reloadButton:focus-visible {
	border-color: var(--preloader-accent);
	background: color-mix(in srgb, var(--preloader-accent) 16%, transparent);
}

@media (hover: hover) and (pointer: fine) {
	.preloader #reloadButton:hover {
		border-color: var(--preloader-accent);
		background: color-mix(in srgb, var(--preloader-accent) 16%, transparent);
	}
}

.preloader #reloadButton:active {
	transform: scale(0.97);
}

@keyframes preloader-apparition {
	to {
		opacity: var(--preloader-lueur, 0.3);
	}
}

@keyframes preloader-derive-a {
	0% {
		transform: translate(-24%, -12%) scale(0.95);
	}

	50% {
		transform: translate(6%, -18%) scale(1.12);
	}

	100% {
		transform: translate(20%, 16%) scale(1.2);
	}
}

@keyframes preloader-derive-b {
	0% {
		transform: translate(26%, 18%) scale(1.15);
	}

	50% {
		transform: translate(-8%, 22%) scale(0.95);
	}

	100% {
		transform: translate(-22%, -20%) scale(0.85);
	}
}

@keyframes preloader-onde {
	0% {
		opacity: 0;
		transform: scale(0.9);
	}

	15% {
		opacity: 0.35;
	}

	100% {
		opacity: 0;
		transform: scale(2.2);
	}
}

@keyframes preloader-logo-entree {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.96);
		filter: blur(6px);
	}

	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

@keyframes preloader-logo-souffle {
	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.8;
		transform: scale(1.04);
	}
}

@keyframes preloader-fondu {
	to {
		opacity: 1;
	}
}

@keyframes preloader-trait {
	0% {
		background-position: -85% 0, 0 0;
	}

	100% {
		background-position: 185% 0, 0 0;
	}
}

@keyframes preloader-etincelle {
	0% {
		opacity: 0;
		transform: translate(0, 0) scale(0.5);
	}

	20% {
		opacity: 0.95;
	}

	100% {
		opacity: 0;
		transform: translate(4px, -24px) scale(1);
	}
}

/* Mouvement réduit demandé par le système : lueurs fixes, logo posé, trait plein et immobile. */
@media (prefers-reduced-motion: reduce) {
	.preloader::before,
	.preloader::after {
		animation: preloader-apparition 0.01s forwards;
	}

	.preloader .logo,
	.preloader img,
	.preloader #reloadButton {
		animation: none;
	}

	.preloader .logo::before,
	.preloader .logo::after {
		display: none;
	}

	.preloader .lds-ellipsis {
		background-size: 100% 100%, 100% 100%;
		animation: preloader-fondu 0.01s forwards;
	}

	.preloader .lds-ellipsis div {
		display: none;
	}
}