/********************************
*
*	Animation loading
*	https://css-loaders.com/dots/
*
*********************************/
/* HTML: <div class="loader"></div> */

.loader_conteneur {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--noir);
}

.loader {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	visibility: hidden;

	height: 40px;
	aspect-ratio: 1.5;
	--c: no-repeat linear-gradient(var(--glace) 0 0);
	background: var(--c), var(--c), var(--c), var(--c);
	background-size: 33.4% 50%;
	animation: loader_anim 2s infinite 1s linear;
}

.loader_txt {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -30px);
	font-family: 'RedditMono';
	color: var(--glace);
	width: max-content;
}

@keyframes loader_anim {
	0% {
		visibility: visible;
		background-position: 0 0, 50% 0, 0 100%, 50% 100%
	}

	12.5% {
		background-position: 0 0, 100% 0, 0 100%, 50% 100%
	}

	25% {
		background-position: 0 0, 100% 0, 0 100%, 50% 0
	}

	37.5% {
		background-position: 0 0, 100% 0, 50% 100%, 50% 0
	}

	50% {
		background-position: 0 100%, 100% 0, 50% 100%, 50% 0
	}

	62.5% {
		background-position: 0 100%, 100% 0, 50% 100%, 0 0
	}

	75% {
		background-position: 0 100%, 100% 100%, 50% 100%, 0 0
	}

	87.5% {
		background-position: 0 100%, 100% 100%, 50% 0, 0 0
	}

	100% {
		background-position: 0 100%, 50% 100%, 50% 0, 0 0
	}
}