/* Styles pour les champs obligatoires conditionnels */
.required-field {
    border-color: #ff6b6b !important;
    background-color: #fff5f5 !important;
    transition: all 0.3s ease !important;
}

.required-field::placeholder {
    color: #ff6b6b !important;
}

/* Styles pour les champs en erreur */
.field-error {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2) !important;
    background-color: #fff5f5 !important;
    transition: all 0.3s ease !important;
}

/* Messages d'erreur */
.error-message {
    color: #e74c3c !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    margin-top: 5px !important;
    display: block !important;
    animation: fadeIn 0.3s ease-in;
    line-height: 1.4 !important;
}

/* Animation pour l'apparition des messages d'erreur */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation pour la disparition des messages d'erreur */
@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-5px);
    }
}

/* Indicateur visuel pour les champs obligatoires */
.required-field::after {
    content: " *";
    color: #e74c3c;
    font-weight: bold;
}

/* Style pour les labels des champs obligatoires - Elementor */
.elementor-field-label.required::after {
    content: " *";
    color: #e74c3c !important;
    font-weight: bold !important;
    margin-left: 4px !important;
    transition: all 0.3s ease !important;
}

/* Style pour les labels des champs obligatoires - Générique */
.required-field + label,
label[for*="field_95e05a6"].required,
label[for*="field_6ac788f"].required {
    color: #e74c3c !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

/* Transition douce pour les changements d'état - SEULEMENT pour nos champs spécifiques */
#field_95e05a6,
#field_6ac788f,
input[name*="field_95e05a6"],
input[name*="field_6ac788f"],
select[name*="demande"],
select[name*="objet"] {
    transition: all 0.3s ease !important;
}

/* Style pour le focus sur les champs obligatoires */
.required-field:focus {
    border-color: #3498db !important;
    box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2) !important;
    background-color: #fff !important;
}

/* Style pour les champs valides */
#field_95e05a6:valid,
#field_6ac788f:valid,
input[name*="field_95e05a6"]:valid,
input[name*="field_6ac788f"]:valid {
    border-color: #27ae60 !important;
}

/* Styles spécifiques pour Elementor - SEULEMENT pour nos champs */
.elementor-form .elementor-field-group .elementor-field-label.required {
    color: #e74c3c !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

/* Styles pour nos champs spécifiques uniquement */
.elementor-form .elementor-field.required-field {
    border-color: #ff6b6b !important;
    background-color: #fff5f5 !important;
}

.elementor-form .elementor-field.field-error {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2) !important;
    background-color: #fff5f5 !important;
}

/* Style pour les champs normaux (non obligatoires) */
.elementor-form .elementor-field:not(.required-field):not(.field-error) {
    border-color: #d1d5db !important;
}

/* Responsive */
@media (max-width: 768px) {
    .error-message {
        font-size: 11px !important;
        margin-top: 3px !important;
    }
    
    .elementor-field-label.required::after {
        margin-left: 2px !important;
    }
}