/* ==========================================================================
   Design Premium Appliqué au Formulaire de Contact
   ========================================================================== */

/* 1. Le conteneur principal (La boîte du formulaire)
   Reprend le style précis de .modal-content */
   .contact-form {
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 24px !important; /* Coins très arrondis */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important; /* Ombre profonde et luxueuse */
    padding: 2.5rem 6rem 2.5rem 2rem !important; /* Espace généreux qui respire */
    transition: all 0.3s ease !important;
    max-width: 730px; /* Ajouté pour garder une proportion élégante sur PC */
    margin: 10rem auto 2rem auto !important; /* 4rem en haut pour dégager le header */
}

/* 2. L'en-tête (Titre centré et épuré)
   Reprend le style précis de .modal-header */
.contact-form form header,
.contact-form .h3 {
    border-bottom: none !important; 
    padding: 0 0 1.5rem 0 !important;
    display: flex !important;
    justify-content: center !important; /* Centre le titre */
    position: relative !important;
}

/* Le texte du titre précis de .modal-title */
.contact-form form header h2,
.contact-form .h3 {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #1a202c !important; /* Un gris anthracite chic */
    margin: 0 !important;
}

/* 3. La croix de fermeture (Design circulaire avec animation)
   Ceci cible généralement le bouton "Fermer" s'il existe dans
   un message d'erreur/succès du formulaire, ou peut être ajouté manuellement.
   Inclus pour respecter "la totale". */
.contact-form .close {
    position: absolute !important;
    right: -10px !important;
    top: -15px !important;
    background: #f1f5f9 !important;
    border: none !important;
    border-radius: 50% !important; /* Parfaitement rond */
    width: 36px !important;
    height: 36px !important;
    font-size: 1.2rem !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    opacity: 1 !important; /* Enlève la transparence moche de base */
}

.contact-form .close:hover {
    background: #e2e8f0 !important;
    color: #ef4444 !important; /* Devient rouge au survol */
    transform: rotate(90deg) !important; /* Petite rotation fluide très moderne */
}

/* 4. Le corps (Champs de saisie modernisés)
   Reprend le style précis de .modal-body */
.contact-form form section {
    padding: 0 !important;
    margin-bottom: 2rem !important;
}

/* Reprend le style précis de .form-control-label */
.contact-form .form-control-label {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #4a5568 !important;
    margin-bottom: 0.75rem !important;
    display: block !important;
    text-align: left !important;
}

/* Le champ de texte précis de .form-control */
.contact-form .form-control {
    border: 2px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
    color: #1a202c !important;
    padding: 0.85rem 1.25rem !important;
    border-radius: 12px !important; /* Champ avec coins bien arrondis */
    width: 100% !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

.contact-form .form-control:focus {
    background-color: #ffffff !important;
    border-color: #0056b3 !important; /* Ton Bleu Primary ! */
    box-shadow: 0 0 0 4px rgba(0, 86, 179, 0.15) !important; /* Halo lumineux bleu */
    outline: none !important;
}

/* 5. Le pied de page (Les boutons arrondis)
   Reprend le style précis de .modal-footer */
.contact-form form footer {
    border-top: none !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 1rem !important; /* Espace entre les boutons */
}

/* Base commune pour tous les boutons précise de .btn */
.contact-form .btn {
    border-radius: 30px !important; /* Effet pilule ultra arrondi */
    padding: 0.8rem 1.5rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    text-transform: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: none !important;
    flex: 1 !important; /* Prend toute la largeur disponible de manière égale */
}

/* Le bouton d'action principal précis de .btn-primary */
.contact-form .btn-primary,
.contact-form [type="submit"] {
    background: linear-gradient(135deg, #007bff, #0056b3) !important; /* Un bleu dynamique et riche */
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 86, 179, 0.3) !important; /* Ombre colorée */
}

/* Animation au survol précise de .btn-primary:hover */
.contact-form .btn-primary:hover,
.contact-form [type="submit"]:hover {
    transform: translateY(-2px) !important; /* Le bouton se soulève */
    box-shadow: 0 8px 25px rgba(0, 86, 179, 0.4) !important;
    background: linear-gradient(135deg, #0056b3, #004085) !important;
}

/* Le bouton Annuler précis de .btn-secondary
   Inclus pour respecter "la totale". */
.contact-form .btn-secondary {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    box-shadow: none !important;
}

.contact-form .btn-secondary:hover {
    background-color: #e2e8f0 !important;
    color: #1e293b !important;
}

/* ==========================================================================
   6. CORRECTIONS DE POSITIONNEMENT (Surcharge de la grille Bootstrap)
   ========================================================================== */

/* Centrer parfaitement le titre (annule le décalage de PrestaShop) */
.contact-form .form-group:first-child > div {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    text-align: center !important;
}

/* Alignement strict des lignes : Label à gauche, Input à droite */
.contact-form .form-group.row {
    display: flex !important;
    flex-wrap: nowrap !important; /* Empêche les éléments de tomber en dessous */
    align-items: center !important; /* Centre verticalement */
    margin-bottom: 1.5rem !important;
}

/* Colonne des Labels (Sujet, Email, etc.) - Largeur fixe 30% */
.contact-form .form-control-label {
    flex: 0 0 30% !important;
    max-width: 30% !important;
    margin-bottom: 0 !important;
    text-align: left !important;
    padding-right: 15px !important;
}

/* Colonne des Champs de saisie - Largeur fixe 70% */
.contact-form .form-group.row > div:not(.form-control-label) {
    flex: 0 0 70% !important;
    max-width: 70% !important;
    padding: 0 !important;
}

/* --- Cas spécifique : Le fameux champ Document joint --- */

/* Le conteneur du champ de fichier */
.contact-form .bootstrap-filestyle.input-group {
    position: relative !important;
    display: block !important;
    width: 100% !important; /* Le champ prend toute la place, comme les autres */
}

/* Le faux champ de texte qui affiche le nom du fichier */
.contact-form .bootstrap-filestyle input[type="text"] {
    width: 100% !important; /* Même largeur exacte que Email et Sujet */
    margin: 0 !important;
    height: 48px !important;
    border-radius: 12px !important;
    padding-right: 1.25rem !important;
}

/* Le petit bouton vert carré sort de la capsule */
.contact-form .bootstrap-filestyle .btn {
    position: absolute !important;
    right: -60px !important; /* On le pousse en dehors du champ texte (48px de bouton + 12px d'écart) */
    top: 0 !important;
    background-color: #22c55e !important;
    border: none !important;
    border-radius: 10px !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1 !important;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

/* Effet d'enfoncement au survol */
.contact-form .bootstrap-filestyle .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(34, 197, 94, 0.4) !important;
}

/* Masquer le texte "Choisir un fichier" et l'icône par défaut */
.contact-form .bootstrap-filestyle .buttonText,
.contact-form .bootstrap-filestyle .icon-span-filestyle {
    display: none !important;
}

/* Ajouter la flèche "Download" (icône SVG moderne) */
.contact-form .bootstrap-filestyle .btn::after {
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Cacher le petit texte "optionnel" */
.contact-form .form-control-comment {
    display: none !important; 
}

/* ==========================================================================
   7. AJUSTEMENTS POUR ENGLOBER LE BOUTON DANS L'OMBRE
   ========================================================================== */

/* Augmenter l'ombre et l'espace interne du conteneur principal (.contact-form) */
.contact-form {
    /* On conserve les arrondis et le fond blanc */
    background-color: #ffffff !important;
    border: none !important;
    border-radius: 24px !important;

    /* AUGMENTATION DU BOX SHADOW : Plus profond, plus diffus, plus de spread (le 5ème paramètre)
       Old: box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
       New (Plus d'ombre et de spread) : box-shadow: 0 30px 70px 5px rgba(0, 0, 0, 0.18) !important; */
    box-shadow: 0 30px 70px 5px rgba(0, 0, 0, 0.18) !important;
}

/* Ajustement de la largeur maximale pour conserver une proportion élégante */
@media (min-width: 992px) {
    .contact-form {
        max-width: 650px; /* Légère augmentation de la largeur maximale (de 600px à 650px)
                           pour loger le padding accru sans écraser les champs. */
    }
}