/**
 * ═══════════════════════════════════════════════════════════════
 * MAISONS CTL - Corrections CSS Formulaire Page Services
 * ═══════════════════════════════════════════════════════════════
 * 
 * Fichier : services-form-fix.css
 * Version : 1.0.0
 * Date : 23/10/2025
 * 
 * PROBLÈMES CORRIGÉS :
 * ❌ Textes bleus illisibles sur fond bleu foncé
 * ❌ Message de succès invisible après envoi
 * ❌ Manque de contraste général
 * 
 * SOLUTIONS APPLIQUÉES :
 * ✅ Textes coordonnées en blanc (lisibles)
 * ✅ Message de succès très visible (fond vert + texte blanc)
 * ✅ Message d'erreur très visible (fond rouge + texte blanc)
 * ✅ Amélioration du contraste global
 * 
 * ═══════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════
   1️⃣ MESSAGES DE SUCCÈS / ERREUR / LOADING
   ✅ Rendre les messages TRÈS VISIBLES
   ═══════════════════════════════════════════════════════════════ */

/* Message de SUCCÈS (après envoi réussi) */
#successMessage.message.success-message {
    /* PAS de display: block ici - contrôlé par JavaScript */
    background: #28a745 !important; /* Vert vif */
    color: #ffffff !important; /* Texte blanc */
    padding: 20px !important;
    margin: 0 0 25px 0 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border: 3px solid #1e7e34 !important; /* Bordure vert foncé */
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4) !important;
    animation: slideDown 0.5s ease-out !important;
}

/* Message d'ERREUR */
#errorMessage.message.error-message {
    /* PAS de display: block ici - contrôlé par JavaScript */
    background: #dc3545 !important; /* Rouge vif */
    color: #ffffff !important; /* Texte blanc */
    padding: 20px !important;
    margin: 0 0 25px 0 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-align: center !important;
    border: 3px solid #c82333 !important; /* Bordure rouge foncé */
    box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4) !important;
    animation: slideDown 0.5s ease-out !important;
}

/* LOADER (pendant l'envoi) */
#loading.loading {
    /* PAS de display: flex ici - contrôlé par JavaScript */
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(52, 58, 64, 0.95) !important;
    color: #ffffff !important;
    padding: 30px !important;
    margin: 0 0 25px 0 !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    text-align: center !important;
}

/* Spinner du loader */
#loading .spinner {
    border: 4px solid rgba(255, 255, 255, 0.3) !important;
    border-top: 4px solid #ffffff !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    animation: spin 1s linear infinite !important;
    margin-bottom: 15px !important;
}

/* Animation du spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Animation slide down pour les messages */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ═══════════════════════════════════════════════════════════════
   2️⃣ CORRECTION TEXTES BLEUS ILLISIBLES
   ✅ Remplacer bleu par blanc pour lisibilité
   ═══════════════════════════════════════════════════════════════ */

/* Section CTA (fond bleu foncé) */
.cta-section {
    background: #2c3e50 !important; /* Fond bleu foncé conservé */
    color: #ffffff !important; /* Texte principal blanc */
}

/* Titre de la section */
.cta-section h2 {
    color: #ffffff !important; /* Blanc */
}

/* Sous-titre */
.cta-section .cta-subtitle {
    color: #ecf0f1 !important; /* Blanc légèrement gris */
}

/* Informations complémentaires en bas */
.cta-section .cta-info {
    color: #ecf0f1 !important; /* Blanc légèrement gris */
}

/* ═══════════════════════════════════════════════════════════════
   3️⃣ COLONNE COORDONNÉES (droite)
   ✅ TOUS les textes en BLANC
   ═══════════════════════════════════════════════════════════════ */

/* Titres des cartes coordonnées */
.contact-info-sidebar h3,
.contact-info-card h3 {
    color: #ffffff !important; /* Blanc */
}

/* Tous les textes dans les cartes */
.contact-info-sidebar .info-item,
.contact-info-card .info-item {
    color: #ffffff !important; /* Blanc */
}

/* Labels (Téléphone, Email, Adresse) */
.contact-info-sidebar .info-item strong,
.contact-info-card .info-item strong {
    color: #ffffff !important; /* Blanc */
}

/* Valeurs (numéros, emails, adresse) */
.contact-info-sidebar .info-item p,
.contact-info-card .info-item p,
.contact-info-sidebar .info-item a,
.contact-info-card .info-item a {
    color: #ffffff !important; /* Blanc */
}

/* Liens (téléphone, email) */
.contact-info-sidebar a,
.contact-info-card a {
    color: #ffffff !important; /* Blanc */
    text-decoration: none !important;
}

.contact-info-sidebar a:hover,
.contact-info-card a:hover {
    color: #3498db !important; /* Bleu clair au survol */
    text-decoration: underline !important;
}

/* Horaires d'ouverture */
.horaire-item {
    color: #ffffff !important; /* Blanc */
}

.horaire-item span,
.horaire-item strong {
    color: #ffffff !important; /* Blanc */
}

/* Dimanche fermé (garde un style différent) */
.horaire-item.closed {
    opacity: 0.6 !important;
}

/* ═══════════════════════════════════════════════════════════════
   4️⃣ INFO BOX (après le formulaire)
   ✅ Texte blanc + fond légèrement différent
   ═══════════════════════════════════════════════════════════════ */

.info-box {
    background: rgba(52, 73, 94, 0.6) !important; /* Fond bleu-gris transparent */
    color: #ffffff !important; /* Texte blanc */
    padding: 20px !important;
    border-radius: 8px !important;
    margin-top: 20px !important;
}

.info-box h3 {
    color: #ffffff !important; /* Titre blanc */
    margin-bottom: 10px !important;
}

.info-box p {
    color: #ecf0f1 !important; /* Texte blanc légèrement gris */
}

.info-box a {
    color: #3498db !important; /* Liens bleu clair */
    text-decoration: underline !important;
}

.info-box a:hover {
    color: #5dade2 !important; /* Bleu plus clair au survol */
}

/* ═══════════════════════════════════════════════════════════════
   5️⃣ AMÉLIORATIONS GÉNÉRALES
   ═══════════════════════════════════════════════════════════════ */

/* Labels des champs du formulaire */
.contact-form label {
    color: #ffffff !important; /* Blanc */
    font-weight: 600 !important;
}

/* Texte obligatoire (*) */
.contact-form .required {
    color: #e74c3c !important; /* Rouge vif */
}

/* Placeholder des inputs */
.contact-form input::placeholder,
.contact-form textarea::placeholder,
.contact-form select::placeholder {
    color: #95a5a6 !important; /* Gris clair */
}

/* Bouton submit */
.btn-submit {
    background: #27ae60 !important; /* Vert */
    color: #ffffff !important; /* Texte blanc */
    font-weight: 700 !important;
    padding: 15px 30px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
}

.btn-submit:hover {
    background: #229954 !important; /* Vert plus foncé au survol */
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 15px rgba(39, 174, 96, 0.4) !important;
}

/* ═══════════════════════════════════════════════════════════════
   6️⃣ RESPONSIVE MOBILE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Messages plus compacts sur mobile */
    #successMessage.message.success-message,
    #errorMessage.message.error-message {
        padding: 15px !important;
        font-size: 14px !important;
    }
    
    /* Loader plus petit sur mobile */
    #loading .spinner {
        width: 30px !important;
        height: 30px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ✅ FIN DU FICHIER
   ═══════════════════════════════════════════════════════════════ */