/* Styles généraux du corps de la page */
body {
    font-family: sans-serif;
    display: grid;
    place-content: center;
    min-height: 100vh;
    text-align: center;
    transition: opacity 0.5s;
    background-color: #f0f2f5; /* Un gris clair pour le fond */
    color: #333; /* Texte sombre pour la lisibilité */
}

/* Classe pour cacher les éléments */
.hidden {
    display: none;
}

/* Sections principales de l'application (connexion et accueil) */
#login-section, #welcome-section {
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 450px;
    width: 90%;
    margin: auto; /* Centrer la section */
}

/* Titre des sections */
h1 {
    color: #30016d; /* Couleur principale */
    margin-bottom: 20px;
}

/* Styles des champs de saisie (email et mot de passe) */
input[type="email"], input[type="password"] {
    width: calc(100% - 20px);
    padding: 12px 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}

/* Styles des boutons */
button {
    display: block;
    width: 100%;
    padding: 12px 20px;
    font-size: 1.1em;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    background-color: #30016d; /* Couleur principale des boutons */
    color: white;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #5200bf; /* Couleur au survol */
}

/* Styles pour le bouton Google (si tu veux une couleur différente) */
#login-button {
    background-color: #30016d; /* Couleur du bouton Google */
    margin-bottom: 15px;
}

#login-button:hover {
    background-color: #5200bf;
}

/* Styles pour le séparateur "OU" */
.or-separator {
    margin: 20px 0;
    font-weight: bold;
    color: #666;
}

/* Messages d'erreur */
.error-message {
    color: #dc3545; /* Couleur rouge pour les erreurs */
    margin-top: 10px;
    font-size: 0.9em;
}

/* Bouton de déconnexion */
#logout-button {
    background-color: #dc3545; /* Couleur rouge pour la déconnexion */
}

#logout-button:hover {
    background-color: #c82333;
}

/* Styles pour le lien "Mot de passe oublié ?" */
a[href="forgot-password.html"] {
    color: #5200bf; /* Nouvelle couleur pour le lien */
    text-decoration: none;
}

a[href="forgot-password.html"]:hover {
    text-decoration: underline;
}