/* Squelette affiché avant que l'application ne démarre (voir src/app.html) : même mise en page
   que la barre latérale et la page, pour qu'aucun saut n'ait lieu quand les données arrivent.
   Fichier séparé : la CSP de l'interface refuse les styles en ligne. */
#chargement {
	--fond: #f8fafc;
	--bloc: #e2e8f0;
	--carte: #ffffff;
	--bord: #e2e8f0;
	min-height: 100vh;
	display: flex;
	background: var(--fond);
}
html.dark #chargement {
	--fond: #0b1120;
	--bloc: #1e293b;
	--carte: #111a2e;
	--bord: #1e293b;
}
#chargement .menu-sq {
	display: none;
	width: 16rem;
	flex: none;
	border-right: 1px solid var(--bord);
	background: var(--carte);
}
#chargement .page-sq {
	flex: 1;
	min-width: 0;
	max-width: 72rem;
	margin: 0 auto;
	padding: 1rem;
	box-sizing: border-box;
}
#chargement .bloc {
	background: var(--bloc);
	border-radius: 0.5rem;
	margin-bottom: 1rem;
	animation: pulse-sq 1.4s ease-in-out infinite;
}
#chargement .titre-sq {
	height: 2rem;
	width: 40%;
}
#chargement .carte-sq {
	height: 7rem;
}
@keyframes pulse-sq {
	50% {
		opacity: 0.5;
	}
}
@media (prefers-reduced-motion: reduce) {
	#chargement .bloc {
		animation: none;
	}
}
@media (min-width: 768px) {
	#chargement .menu-sq {
		display: block;
	}
	#chargement .page-sq {
		padding: 1.5rem 2rem;
	}
}