/* Style général de la page */
body {
  font-family: Arial, sans-serif; /* Définit la police d'écriture sans empattement */
  background-color:#4facfe; /* Applique la couleur de fond bleue caractéristique */
  display: flex; /* Active le modèle Flexbox pour le positionnement */
  justify-content: center; /* Aligne le contenu (le formulaire) horizontalement au centre */
  align-items: center; /* Aligne le contenu verticalement au centre */
  height: 100vh; /* Définit la hauteur sur 100% de la zone visible du navigateur */
  animation: fadeIn 0.8s ease-in-out;               /* Animation d’apparition */
}

/* Conteneur du formulaire de connexion */
.login-container {
  background-color: #fff; /* Définit un fond blanc pour détacher le formulaire du fond bleu */
  padding: 30px; /* Ajoute un espace de 30px entre le bord du cadre et le contenu */
  border-radius: 8px; /* Arrondit les angles du conteneur pour un aspect moderne */
  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Ajoute une ombre légère pour donner du relief */
  width: 300px; /* Fixe la largeur du bloc à 300 pixels */
}

/* Style du titre à l'intérieur du conteneur */
.login-container h2 {
  text-align: center;  /* Centre le titre h2 à l'intérieur du bloc */
  margin-bottom: 20px;  /* Ajoute un espace de 20px sous le titre */
}

/* Style commun aux champs de saisie (Nom d'utilisateur et Mot de passe) */
.login-container input[type="text"],
.login-container input[type="password"] {
  width: 100%;  /* Fait en sorte que les champs occupent toute la largeur du conteneur */
  padding: 10px; /* Ajoute du confort de saisie à l'intérieur des champs */
  margin: 8px 0; /* Ajoute un espace vertical entre chaque champ */
  border: 1px solid #ccc; /* Applique une bordure fine grise */
  border-radius: 4px; /* Arrondit légèrement les coins des champs de saisie */
}

/* Style du bouton de validation (Envoyer) */
.login-container input[type="submit"] {
  width: 100%; /* Le bouton occupe toute la largeur disponible */
  padding: 10px; /* Définit la hauteur interne du bouton */
  background-color:#757B80; /* Applique une couleur de fond grise neutre */
  border: none; /* Supprime la bordure par défaut du navigateur */
  border-radius: 4px; /* Arrondit les coins du bouton */
  color: white; /* Définit la couleur du texte du bouton en blanc */
  font-size: 16px; /* Règle la taille du texte à 16 pixels */
  cursor: pointer; /* Change le curseur en "main" lors du survol pour indiquer qu'il est cliquable */
}

/* Effet au survol de la souris sur le bouton de validation */
.login-container input[type="submit"]:hover {
  background-color:#00B2A9; /* Change la couleur du bouton en turquoise lors du survol */
}