/* Style général de la page */
body {
  font-family: Arial, sans-serif;
  background-color: #4facfe;
  display: flex;
  flex-direction: column; /* Aligne les éléments verticalement (Header puis Formulaire) */
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Utilise min-height au lieu de height pour éviter les coupures */
  margin: 0;

}

/* Conteneur du formulaire */
.login-container {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  width: 300px;
  animation: fadeIn 0.3s ease-in-out;
}

/* ... Le reste de votre CSS (inputs et submit) reste identique ... */

/* 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 */
}

/* --- ANIMATION FADE IN --- */
@keyframes fadeIn {
  from { 
    opacity: 0;                                     /* Invisible au départ */
    transform: translateY(-20px);                   /* Décalé vers le haut */
  }
  to { 
    opacity: 1;                                     /* Visible à la fin */
    transform: translateY(0);                       /* Position normale */
  }
}

.entete{
    text-align: center;
    margin-bottom: 20px;
    color: white;
}

.entete h1{
    font-size: 1.5rem;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.logo {
    max-width: 300px;
    height: auto;
    margin-bottom: 60px;
}