/**
 * Fond dégradé animé COM 64.
 * Taches floues bleu azur, bleu clair et blanc qui traversent lentement #EEF1FD,
 * avec un grain léger. Posé derrière toute la page par le thème enfant.
 * Dérogation RGAA 13.8 accordée par Cédric pour ce seul arrière-plan ;
 * l'animation s'arrête quand le système du visiteur demande moins d'animations.
 */

body.com64-fond-actif {
	background: #EEF1FD;
}

/* Zone colorée fixée à l'écran (décision de Cédric) : l'animation reste sous les yeux
   du visiteur pendant tout le défilement, cadrée comme en haut de page. */
.com64-fond {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	/* Hauteur de la maquette : l'écran montre toujours ce que montre le haut de page.
	   Fixé, le calque n'allonge jamais une page courte. */
	height: 1528px;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(#000 75%, transparent);
	mask-image: linear-gradient(#000 75%, transparent);
}

.com64-fond span {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	will-change: transform;
}

/* Mêmes proportions que la maquette validée par Cédric (taille plafonnée à celle de la maquette) */
.com64-fond span:nth-child(1) {
	width: min(58%, 664px); aspect-ratio: 1; right: -14%; top: -30%;
	background: rgba(0, 102, 255, .16);
	animation: com64-derive1 16s ease-in-out infinite alternate;
}

.com64-fond span:nth-child(2) {
	width: min(48%, 549px); aspect-ratio: 1; left: -12%; top: 18%;
	background: rgba(120, 190, 255, .30);
	animation: com64-derive2 20s ease-in-out infinite alternate;
}

.com64-fond span:nth-child(3) {
	width: min(52%, 595px); aspect-ratio: 1; left: 30%; bottom: -36%;
	background: rgba(231, 246, 255, 1);
	animation: com64-derive3 24s ease-in-out infinite alternate;
}

.com64-fond span:nth-child(4) {
	width: min(30%, 343px); aspect-ratio: 1; right: 18%; top: 38%;
	background: rgba(255, 255, 255, .9);
	animation: com64-derive2 18s ease-in-out infinite alternate-reverse;
}

/* Grain très léger, autorisé par la charte */
.com64-fond::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: .05;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@keyframes com64-derive1 {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(-55%, 25%) scale(1.15); }
	100% { transform: translate(-95%, 5%) scale(.9); }
}

@keyframes com64-derive2 {
	0%   { transform: translate(0, 0) scale(1); }
	50%  { transform: translate(45%, -20%) scale(1.1); }
	100% { transform: translate(85%, 10%) scale(1.2); }
}

@keyframes com64-derive3 {
	0%   { transform: translate(0, 0); }
	50%  { transform: translate(-30%, -25%); }
	100% { transform: translate(25%, -35%); }
}

/* Mobile : flou plus léger et une tache de moins, pour ménager le processeur */
@media (max-width: 767px) {
	.com64-fond span { filter: blur(48px); }
	.com64-fond span:nth-child(4) { display: none; }
}