/* Styles pour le titre de la page de connexion */
h1 {
    color: #333; /* Couleur foncée pour le texte du titre */
    text-align: center; /* Centre le titre */
    margin-top: 0; /* Enlève la marge du haut pour coller au haut de la page */
    margin-bottom: 20px; /* Espacement avant le formulaire */
    font-size: 24px; /* Taille de police plus grande pour le titre */
}

/* Réinitialisation de certains styles par défaut pour assurer une cohérence entre les navigateurs */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif; /* Utilisation d'une police standard */
}

/* Styles pour le corps entier de la page, avec un centrage du contenu */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f4f4f4; /* Couleur de fond légère */
    flex-direction: column; /* Organise verticalement les éléments */
}

/* Styles pour le formulaire de connexion */
form {
    border: 1px solid #ddd; /* Bordure subtile */
    padding: 20px;
    background: white; /* Fond blanc pour le formulaire */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombre portée légère */
    width: 300px; /* Largeur fixe pour le formulaire */
}

/* Espacement entre les champs du formulaire */
form input[type="text"],
form input[type="password"] {
    /*width: calc(100% - 22px); /* Largeur complète moins les paddings */
    width: calc(100%);
    padding: 10px; /* Padding pour rendre le texte plus lisible */
    margin-top: 8px; /* Marge en haut pour l'espacement */
    margin-bottom: 16px; /* Marge en bas entre les champs */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur */
}

/* Styles pour le bouton de soumission */
form input[type="submit"] {
    background-color: #5c67f2; /* Couleur de fond bleue */
    color: white; /* Texte blanc */
    border: none; /* Pas de bordure */
    padding: 10px 20px; /* Padding autour du texte */
    cursor: pointer; /* Curseur de pointeur pour indiquer la cliquabilité */
    width: 100%; /* Largeur complète du bouton */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Ombre portée légère pour le bouton */
}

/* Effet au survol du bouton */
form input[type="submit"]:hover {
    background-color: #4a54e1; /* Couleur légèrement plus foncée au survol */
}

/* Styles pour le footer */
footer {
    text-align: center; /* Centre le texte dans le footer */
    width: 100%; /* Largeur complète */
    padding: 10px 0; /* Padding vertical pour un peu d'espace */
    position: absolute; /* Positionnement absolu */
    bottom: 0; /* Place le footer en bas de la page */
    left: 0; /* Aline le footer à gauche */
    background-color: #f1f1f1; /* Couleur de fond légère pour le footer */
    color: #666; /* Couleur de texte grisâtre */
    font-size: 14px; /* Taille de police petite pour le footer */
    box-shadow: 0 -1px 2px rgba(0,0,0,0.1); /* Ombre portée subtile en haut du footer */
}

/* Styles pour le bouton de retour à l'accueil */
button {
    display: block; /* Affiche le bouton comme un bloc */
    margin: 20px auto; /* Centre le bouton horizontalement et ajoute de l'espace */
    background-color: #4CAF50; /* Couleur de fond verte pour le bouton */
    color: white; /* Couleur de texte blanche */
    padding: 10px 20px; /* Padding pour rendre le bouton plus grand et plus lisible */
    border: none; /* Aucune bordure pour un look moderne */
    cursor: pointer; /* Indique que le bouton est cliquable */
    font-size: 16px; /* Taille de police pour une meilleure lisibilité */
    text-align: center; /* Assure que le texte est centré dans le bouton */
}

/* Effet de survol pour le bouton */
button:hover {
    background-color: #45a049; /* Un vert légèrement plus foncé lors du survol */
}

/* Ajoutez ceci à votre style.css existant */
#error-message {
    color: red; /* Couleur rouge pour le message d'erreur */
    text-align: center; /* Centre le message d'erreur */
    margin-bottom: 10px; /* Espacement sous le message d'erreur */
}

/* Ajoutez ceci à votre style.css existant */
#success-message {
    color: green; /* Couleur rouge pour le message d'erreur */
    text-align: center; /* Centre le message d'erreur */
    margin-bottom: 10px; /* Espacement sous le message d'erreur */
}