/* Fond global */
html, body {
  height: 100%;
  margin: 0;
  font-family: 'Lato', sans-serif;
  color: white;
  background: radial-gradient(ellipse at bottom, #1B2735 0%, #090A0F 100%);
  overflow-x: hidden;
}

/* Les trois calques d’étoiles */
#stars, #stars2, #stars3 {
  position: fixed;  /* Fixé à l’écran, pas au contenu */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: transparent;
  z-index: 0;  /* derrière le contenu */
}

/* Étoiles petites */
#stars {
  width: 1px;
  height: 1px;
  box-shadow: 
    1234px 543px #FFF, 532px 1543px #FFF, 934px 1832px #FFF, 
    1823px 732px #FFF, 1453px 1232px #FFF, 453px 832px #FFF,
    1532px 345px #FFF, 1934px 523px #FFF, 245px 1243px #FFF;
  animation: animStar 50s linear infinite;
}

#stars::after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 1px;
  height: 1px;
  box-shadow: inherit;
}

/* Étoiles moyennes */
#stars2 {
  width: 2px;
  height: 2px;
  box-shadow: 
    432px 1324px #FFF, 932px 432px #FFF, 1723px 1432px #FFF, 
    132px 932px #FFF, 623px 523px #FFF, 1832px 232px #FFF;
  animation: animStar 100s linear infinite;
}

#stars2::after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 2px;
  height: 2px;
  box-shadow: inherit;
}

/* Étoiles grosses */
#stars3 {
  width: 3px;
  height: 3px;
  box-shadow: 
    532px 324px #FFF, 932px 1432px #FFF, 1832px 832px #FFF, 
    232px 132px #FFF, 723px 623px #FFF;
  animation: animStar 150s linear infinite;
}

#stars3::after {
  content: " ";
  position: absolute;
  top: 2000px;
  width: 3px;
  height: 3px;
  box-shadow: inherit;
}

/* Animation lente vers le haut */
@keyframes animStar {
  from { transform: translateY(0px); }
  to { transform: translateY(-2000px); }
}

/* Titre sur la page d’accueil */
#title {
  text-align: center;
  font-weight: 300;
  font-size: 50px;
  letter-spacing: 10px;
  z-index: 1;  /* devant les étoiles */
  position: relative;
}

#title span {
  background: -webkit-linear-gradient(white, #38495a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}




















body {
  transition: background 1s ease, background-color 1s ease;
}

.bg-clear {
  background: linear-gradient(180deg, #87cefa 0%, #f0f8ff 100%);
}

.bg-cloudy {
  background: linear-gradient(180deg, #b0c4de 0%, #dcdcdc 100%);
}

.bg-rain {
  background: linear-gradient(180deg, #5f9ea0 0%, #708090 100%);
}

.bg-snow {
  background: linear-gradient(180deg, #e0f7fa 0%, #ffffff 100%);
}

.bg-storm {
  background: linear-gradient(180deg, #2f4f4f 0%, #191970 100%);
}

.bg-fog {
  background: linear-gradient(180deg, #d3d3d3 0%, #f5f5f5 100%);
}

/* Effet pluie optionnel */
.bg-rain::after {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-image: url('https://i.imgur.com/8Ih6YQq.png');
  opacity: 0.15;
  animation: rain 0.5s linear infinite;
  pointer-events: none;
}


/* Thèmes clairs — texte foncé */
body.bg-clear, 
body.bg-snow, 
body.bg-fog,
body.bg-cloudy {
  --text: #0b0b0b;
  --muted: #333333;
  --glass-bg: rgba(0, 0, 0, 0.15);
  --glass-border: rgba(0, 0, 0, 0.25);
}

/* Thèmes sombres — texte clair */
body.bg-rain, 
body.bg-storm {
  --text: #e9ecff;
  --muted: #aab1d7;
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-border: rgba(255, 255, 255, 0.25);
}



@keyframes rain {
  from { background-position: 0 0; }
  to { background-position: 0 20px; }
}