/* Animation de fond - étoiles qui bougent */
.stars {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -2;
}

.star {
	position: absolute;
	width: 2px;
	height: 2px;
	background: #ffffff;
	border-radius: 50%;
	animation: twinkle 2s infinite alternate;
}

.star:nth-child(odd) {
	animation-delay: 1s;
}

@keyframes twinkle {
	0% { opacity: 0.3; transform: scale(1); }
	100% { opacity: 1; transform: scale(1.2); }
}

/* Nuages animés */
.clouds {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: -1;
	opacity: 0.1;
}

.cloud {
	position: absolute;
	background: #ffffff;
	border-radius: 50px;
	opacity: 0.3;
	animation: float-cloud 20s infinite linear;
}

.cloud::before,
.cloud::after {
	content: '';
	position: absolute;
	background: #ffffff;
	border-radius: 50px;
}

.cloud1 {
	width: 80px;
	height: 40px;
	top: 20%;
	animation-duration: 25s;
}

.cloud1::before {
	width: 50px;
	height: 50px;
	top: -25px;
	left: 10px;
}

.cloud1::after {
	width: 60px;
	height: 40px;
	top: -15px;
	right: 10px;
}

.cloud2 {
	width: 60px;
	height: 30px;
	top: 40%;
	animation-duration: 30s;
	animation-delay: -10s;
}

.cloud2::before {
	width: 40px;
	height: 40px;
	top: -20px;
	left: 8px;
}

.cloud2::after {
	width: 50px;
	height: 30px;
	top: -10px;
	right: 8px;
}

.cloud3 {
	width: 70px;
	height: 35px;
	top: 60%;
	animation-duration: 35s;
	animation-delay: -20s;
}

.cloud3::before {
	width: 45px;
	height: 45px;
	top: -22px;
	left: 12px;
}

.cloud3::after {
	width: 55px;
	height: 35px;
	top: -12px;
	right: 12px;
}

@keyframes float-cloud {
	0% { transform: translateX(-100px); }
	100% { transform: translateX(calc(100vw + 100px)); }
}

@keyframes star-pulse {
			0% { transform: translateY(-50%) scale(1); }
			100% { transform: translateY(-50%) scale(1.3); }
		}

@keyframes borderShift {
			0%, 100% { background-position: 0% 50%; }
			50% { background-position: 100% 50%; }
		}

@keyframes glow-text {
	0% {
		color: #ffdc74;
		text-shadow:
			2px 2px 0px #2c3e50,
			4px 4px 0px #34495e,
			0 0 10px rgba(116, 185, 255, 0.5);
	}
	100% {
		color: #0984e3;
		text-shadow:
			2px 2px 0px #2c3e50,
			4px 4px 0px #34495e,
			0 0 20px rgba(116, 185, 255, 0.8);
	}
}
/* Génération dynamique des étoiles */
.stars {
	background:
		radial-gradient(2px 2px at 20px 30px, #ffffff, transparent),
		radial-gradient(2px 2px at 40px 70px, #ffffff, transparent),
		radial-gradient(1px 1px at 90px 40px, #ffffff, transparent),
		radial-gradient(1px 1px at 130px 80px, #ffffff, transparent),
		radial-gradient(2px 2px at 160px 30px, #ffffff, transparent),
		radial-gradient(1px 1px at 200px 60px, #ffffff, transparent),
		radial-gradient(2px 2px at 220px 20px, #ffffff, transparent),
		radial-gradient(1px 1px at 280px 90px, #ffffff, transparent),
		radial-gradient(1px 1px at 320px 50px, #ffffff, transparent);
	background-repeat: repeat;
	background-size: 350px 100px;
	animation: sparkle 10s linear infinite;
}

@keyframes sparkle {
	0% { transform: translateX(0); }
	100% { transform: translateX(-350px); }
}