body {

    font-family: 'Arial', sans-serif;

    color: white; /* Texte en blanc */

    background-color: #000; /* Fond en noir */

    margin: 0;

    padding: 20px;

}



h2 {

    color: white; /* Titre en blanc */

    text-align: center;

    margin-bottom: 20px;

}



/* Styles pour le conteneur de formulaire */

.form-container {

    background-color: #333;

    padding: 20px;

    border-radius: 10px;

    max-width: 300px; /* Réglage de la largeur maximale du formulaire */

    margin: 0 auto; /* Centrer le formulaire */

    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);

}



/* Styles pour les champs du formulaire */
.form-container input[type="text"],
.form-container input[type="email"], /* Ajout de cette ligne */
.form-container input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #333; /* Fond plus clair pour les champs */
    color: white; /* Texte en blanc pour les champs */
    box-sizing: border-box; /* S'assurer que padding et border sont inclus dans la largeur totale */
}



/* Styles pour le bouton de connexion */

.form-container input[type="submit"] {

    width: 100%;

    padding: 10px;

    border: none;

    border-radius: 4px;

    background-color: #ee3131; /* Rouge pour le bouton */

    color: white; /* Texte en blanc pour le bouton */

    cursor: pointer;

}



.form-container input[type="submit"]:hover {

    background-color: #d82828; /* Rouge assombri pour l'effet de survol */

}



/* Style pour les messages d'erreur */

.error-message {

    color: #D8000C;

    background-color: #FFD2D2;

    padding: 10px;

    margin-bottom: 20px;

    border: 1px solid #D8000C;

    border-radius: 4px;

    text-align: center;

}



/* Styles pour le conteneur du logo */

.logo-container {

    text-align: center;

    margin-bottom: 20px; /* Ajoutez de l'espace entre le logo et le formulaire */

    max-width: 300px; /* Même largeur que le conteneur de formulaire */

    margin-left: auto; /* Centrer le conteneur du logo */

    margin-right: auto; /* Centrer le conteneur du logo */

}



.logo-container img {

    width: 100%; /* Le logo prend toute la largeur du conteneur */

    height: auto; /* Gardez l'aspect ratio de l'image */

}