/**
 * Fond tete / pied : degrade bleu + particules SVG animees en CSS.
 * Chaque trait du SVG relie deux particules visibles.
 */

.hero-bkg-animated,
#banner4.hero-bkg-animated,
#monpied .hero-bkg-animated,
body.membre-espace-page #monpied .hero-bkg-animated {
	background-color: #134d6e;
	background-image: linear-gradient(165deg, #0c3d5c 0%, #15557b 38%, #0879af 100%);
}

#banner4.hero-bkg-animated {
	height: 80px !important;
	min-height: 80px;
	max-height: 80px;
}

#monpied .hero-bkg-animated {
	height: auto !important;
	min-height: 180px;
	overflow: hidden;
}

.hero-bkg-animated::before,
.hero-bkg-animated::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(images/svg/hero-bkg-particles.svg) !important;
	background-repeat: repeat;
	background-size: 960px 540px;
	z-index: 0;
	pointer-events: none;
	will-change: background-position, transform;
}

.hero-bkg-animated::before {
	animation: hero-particles-drift-a 80s linear infinite !important;
	opacity: 0.72;
}

.hero-bkg-animated::after {
	background-size: 720px 405px;
	filter: blur(0.2px);
	animation: hero-particles-drift-b 130s linear infinite !important;
	opacity: 0.36;
	transform: scale(1.08);
}

@keyframes hero-particles-drift-a {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 960px 540px;
	}
}

@keyframes hero-particles-drift-b {
	from {
		background-position: 240px -180px;
	}
	to {
		background-position: -480px 225px;
	}
}

#banner4.hero-bkg-animated > .container,
#monpied .container-fluid,
#monpied .hero-bkg-animated #footer,
#monpied .hero-bkg-animated #pied_foot {
	position: relative;
	z-index: 1;
}

@media (max-width: 767px) {
	#monpied .hero-bkg-animated {
		min-height: 200px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hero-bkg-animated::before,
	.hero-bkg-animated::after {
		animation: none !important;
	}
}