/* contact.css - Styles spécifiques pour la section de contact et sa validation interactive */

/* Focus personnalisé pour correspondre à l'identité visuelle de Frédéric Thizy (dégradé pourpre/rose) */
#contact-form .form-control:focus {
    background-color: #05040a !important;
    border-color: var(--pink-brand) !important;
    box-shadow: 0 0 10px var(--pink-glow) !important;
    color: #ffffff !important;
}

/* Lors de la validation interactive client, styles de feedback pour les champs d'entrée */
#contact-form.was-validated .form-control:valid {
    border-color: #198754 !important;
    background-image: none !important; /* On supprime l'icône de succès par défaut de bootstrap car on utilise des groupes d'entrées */
}

#contact-form.was-validated .form-control:invalid {
    border-color: #dc3545 !important;
    background-image: none !important; /* On supprime également l'icône d'erreur par défaut */
}

/* Personnalisation des feedback d'erreur et des bordures d'icônes d'entrées (input-group-text) */
#contact-form.was-validated .form-control:valid ~ .invalid-feedback {
    display: none;
}

#contact-form.was-validated .form-control:invalid ~ .invalid-feedback {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: #f06292 !important; /* Un rose d'erreur plus visible sur fond sombre que le rouge classique de bootstrap */
}

/* Ajustement des bordures de l'icône de groupe d'entrée (input-group-text) en fonction de l'état */
#contact-form.was-validated .has-validation:has(.form-control:invalid) .input-group-text {
    border-color: #dc3545 !important;
}

#contact-form.was-validated .has-validation:has(.form-control:valid) .input-group-text {
    border-color: #198754 !important;
}

/* Style lors du focus de l'input-group complet */
#contact-form .input-group:focus-within .input-group-text {
    border-color: var(--pink-brand) !important;
}