/* 🌍 Style général de la page */
body {
  margin: 0; /* Supprime les marges par défaut du navigateur */
  padding: 0; /* Supprime les espacements internes */
  font-family: 'Segoe UI', sans-serif; /* Police moderne et lisible */
  background: none; /* Pas de fond défini (transparent ou hérité) */
  display: flex; /* Utilise Flexbox pour centrer le contenu */
  justify-content: center; /* Centre horizontalement */
  align-items: center; /* Centre verticalement */
  min-height: 100vh; /* Hauteur minimale = hauteur de la fenêtre */
}

/* 🧊 Carte météo */
.weather-card {
  background: #d1d1e0; /* Couleur de fond douce (gris bleuté) */
  border-radius: 16px; /* Coins arrondis */
  box-shadow: 0 4px 20px rgba(0,0,0,0.1); /* Ombre légère pour effet de profondeur */
  padding: 16px; /* Espacement interne */
  width: 100%; /* Prend toute la largeur disponible */
  max-width: 280px; /* Limite la largeur pour garder une carte compacte */
  text-align: center; /* Centre le texte */
  border: 1px solid #ccc; /* Bordure fine grise */
  box-sizing: border-box; /* Inclut les bordures et padding dans le calcul de la taille */
}

/* 🌤️ Icône météo principale */
.weather-card i {
  font-size: 2.5em; /* Taille de l’icône météo */
  color: #0077b6; /* Bleu doux pour l’icône */
  margin-bottom: 6px; /* Espacement sous l’icône */
}

/* 🌡️ Température */
.temp {
  font-size: 1.8em; /* Taille du texte de température */
  font-weight: bold; /* Texte en gras */
}

/* 📋 Informations météo (vent, pression, humidité, etc.) */
.info {
  font-size: 0.85em; /* Texte légèrement plus petit */
  color: #555; /* Gris foncé pour bonne lisibilité */
  margin-top: 3px; /* Espacement entre les lignes */
  line-height: 1.2em; /* Hauteur de ligne confortable */
}

/* 🖋️ Copyright discret en bas à droite */
.copyright {
  position: fixed; /* Fixé à l’écran, ne bouge pas avec le scroll */
  bottom: 6px; /* Distance du bas de la fenêtre */
  right: 10px; /* Distance du bord droit */
  font-size: 0.7em; /* Très petit texte */
  color: rgba(0, 0, 0, 0.2); /* Presque invisible (gris très clair) */
  font-style: italic; /* Style italique pour élégance */
  pointer-events: none; /* Ne gêne pas les clics ou interactions */
}

/* 📈 Flèches de tendance météo (température, vent, pression) */
.temp i,
.info i {
  margin-left: 4px; /* Espacement entre la valeur et la flèche */
  font-size: 0.8em; /* Taille réduite pour rester discrète */
  vertical-align: middle; /* Alignement vertical avec le texte */
  transition: transform 0.3s ease; /* Animation douce si on ajoute des effets */
}

/* 🔼 Flèche montante (valeur en hausse) */
.fa-arrow-up {
  color: #2e8b57; /* Vert doux pour signaler une hausse */
}

/* 🔽 Flèche descendante (valeur en baisse) */
.fa-arrow-down {
  color: #b22222; /* Rouge doux pour signaler une baisse */
}

/* ➖ Flèche stable (valeur inchangée) */
.fa-minus {
  color: #888; /* Gris neutre pour signaler stabilité */
}