/* Styles dynamiques pour la page de contact */

/* États des champs du formulaire */
.form-group {
    position: relative;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.form-group input,
.form-group textarea {
    transition: all 0.3s ease, box-shadow 0.2s ease;
    padding-right: 40px;
}

/* Champ valide */
.form-group input:valid:not(:placeholder-shown),
.form-group textarea:valid:not(:placeholder-shown) {
    border-color: #10b981;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2310b981' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    padding-right: 40px;
}

/* Champ invalide */
.form-group input:invalid:not(:placeholder-shown),
.form-group textarea:invalid:not(:placeholder-shown) {
    border-color: #ef4444;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    padding-right: 40px;
}

/* Messages d'erreur */
.error-message {
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 0.25rem;
    display: none;
    animation: fadeIn 0.3s ease;
}

/* Messages du formulaire */
.form-message {
    padding: 1rem;
    margin-bottom: 1.5rem;
    border-radius: 0.375rem;
    font-size: 0.95rem;
    display: none;
    animation: fadeIn 0.5s ease;
}

.form-message.success {
    background-color: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.form-message.error {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

/* Bouton de chargement */
.btn-loading {
    display: none;
}

.btn-loading i {
    margin-right: 0.5rem;
    animation: spin 1s linear infinite;
}

/* Animation pour le bouton de chargement */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Animation pour les messages */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* FAQ */
.faq-item .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    will-change: max-height;
}

.faq-item.active .faq-answer {
    max-height: 1000px; /* Valeur suffisamment grande pour contenir la réponse */
}

.faq-toggle {
    transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
    transform: rotate(180deg);
}

/* Amélioration de l'accessibilité */
:focus-visible {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3);
}

/* Amélioration du contraste pour l'accessibilité */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Mode sombre */
@media (prefers-color-scheme: dark) {
    .form-group input,
    .form-group textarea {
        background-color: #2d3748;
        border-color: #4a5568;
        color: #e2e8f0;
    }
    
    .form-group input:focus,
    .form-group textarea:focus {
        border-color: #63b3ed;
        box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.5);
    }
    
    .form-message.success {
        background-color: #064e3b;
        color: #a7f3d0;
        border-color: #059669;
    }
    
    .form-message.error {
        background-color: #7f1d1d;
        color: #fecaca;
        border-color: #ef4444;
    }
}