/* --- Conteneur du formulaire --- */
.form-container {
    max-width: 400px; /* Largeur du formulaire */
    margin: 50px auto; /* Centrer verticalement et horizontalement */
    padding: 30px; /* Espacement interne */
    background-color: #f5f0f0; /* Fond clair */
    border-radius: 12px; /* Coins arrondis */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
    font-family: 'Cormorant Garamond', serif; /* Police élégante */
}

/* --- Titre du formulaire --- */
.form-title {
    color: #601467; /* Couleur principale */
    font-size: 2rem; /* Taille de la police */
    text-align: center; /* Centrer le texte */
    margin-bottom: 20px; /* Espacement sous le titre */
    font-weight: bold;
}

/* --- Conteneur des champs de formulaire --- */
.form-group {
    margin-bottom: 20px; /* Espacement sous chaque champ */
}

/* --- Label des champs --- */
label {
    display: block; /* Forcer le label à être sur une ligne séparée */
    font-weight: 600; /* Mettre les labels en gras */
    margin-bottom: 8px; /* Espacement sous le label */
    color: #601467; /* Couleur du texte */
}

/* --- Champs de saisie --- */
.input-field {
    width: 100%; /* Prendre toute la largeur du conteneur */
    padding: 12px; /* Espacement interne */
    border: 1px solid #ccc; /* Bordure grise */
    border-radius: 8px; /* Coins arrondis */
    font-size: 1rem; /* Taille du texte */
    background-color: #fff; /* Fond blanc */
    color: #333; /* Texte gris foncé */
    box-sizing: border-box; /* Inclure padding dans la largeur */
    transition: border-color 0.3s ease;
}

/* --- Survol des champs de saisie --- */
.input-field:hover, .input-field:focus {
    border-color: #a8707d; /* Bordure colorée au survol */
}

/* --- Case "Se souvenir de moi" --- */
.rememberMe {
    display: flex; /* Utiliser flexbox pour aligner horizontalement */
    align-items: center; /* Aligner verticalement au centre */
    gap: 8px; /* Espacement entre la checkbox et le label */
    margin-bottom: 20px; /* Espacement sous la ligne */
}

/* --- Style de la checkbox --- */
.remember-me-checkbox {
    margin: 0; /* Supprimer l'espacement par défaut */
}

/* --- Style du label à côté de la checkbox --- */
.remember-me-label {
    font-size: 1rem; /* Taille de la police pour le label */
    color: #601467; /* Couleur du texte */
    font-weight: 400; /* Poids normal pour le texte */
}

/* --- Bouton de soumission --- */
.submit-btn {
    width: 100%; /* Prendre toute la largeur du formulaire */
    padding: 12px; /* Espacement interne */
    background-color: #601467; /* Couleur principale */
    color: white; /* Texte blanc */
    border: none;
    border-radius: 8px; /* Coins arrondis */
    font-size: 1rem; /* Taille de police lisible */
    cursor: pointer;
    text-transform: uppercase; /* Texte en majuscule */
    font-weight: bold;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */
    transition: background-color 0.3s ease; /* Effet doux au survol */
}

/* --- Survol du bouton --- */
.submit-btn:hover {
    background-color: #a8707d; /* Couleur plus claire au survol */
}

/* --- Message de succès --- */
form .success {
    background-color: #d4edda; /* Vert clair */
    color: #155724; /* Texte vert foncé */
    padding: 15px; /* Espacement interne */
    border-radius: 8px; /* Coins arrondis */
    margin-bottom: 20px; /* Espacement en bas */
    border: 1px solid #c3e6cb; /* Bordure */
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .form-container {
        padding: 20px; /* Réduire les espacements sur petits écrans */
    }
}