/* ==========================================================================
   Formulaire de contact
   ========================================================================== */

/* Reset des styles par défaut de Formidable */
#form_contact-form {
    max-width: 100%;
}

#form_contact-form .frm_form_fields {
    margin: 0;
}

#form_contact-form fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

#form_contact-form .frm_fields_container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* Titre de la section */
#form .section_title,
#form_contact-form + h2,
section#form > .max-width > h2:first-child {
    font-size: 36px;
    font-weight: 300;
    text-transform: uppercase;
    margin-bottom: 40px;
    line-height: 1;
    text-align: center;
    color: var(--clr-blue);
}

/* Labels */
#form_contact-form .frm_primary_label {
    display: block;
    font-size: 20px;
    font-weight: 300;
    color: var(--clr-blue);
    margin-bottom: 10px;
    text-transform: none;
}

/* Masquer les astérisques */
#form_contact-form .frm_required {
    display: none;
}

/* Champs de formulaire */
#form_contact-form input[type="text"],
#form_contact-form input[type="email"],
#form_contact-form input[type="tel"],
#form_contact-form textarea {
    width: 100%;
    padding: 15px 20px;
    font-size: 16px;
    font-family: var(--vef-font-family-ss);
    border: 3px solid var(--clr-blue);
    background-color: transparent;
    color: var(--clr-blue);
    border-radius: 0;
    transition: all 0.3s ease;
}

/* Focus */
#form_contact-form input[type="text"]:focus,
#form_contact-form input[type="email"]:focus,
#form_contact-form input[type="tel"]:focus,
#form_contact-form textarea:focus {
    outline: none;
    border-color: var(--clr-blue);
    background-color: rgba(255, 255, 255, 0.1);
}

/* Textarea spécifique */
#form_contact-form textarea {
    min-height: 150px;
    resize: vertical;
}

/* Container des champs en ligne sur desktop */
#form_contact-form .frm_form_field {
    margin: 0;
}

/* Bouton submit et lien */
#form_contact-form .frm_submit {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    margin-top: 10px;
}

#form_contact-form .frm_button_submit {
    background-color: var(--clr-blue);
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    font-family: var(--vef-font-family-ss);
    cursor: pointer;
    transition: all 0.3s ease;
}

#form_contact-form .frm_button_submit:hover {
    background-color: #1a2832;
    transform: translateY(-2px);
}


/* Masquer les champs anti-spam */
#frm_field_7_container,
.akismet-fields-container {
    display: none !important;
}

/* Adaptation pour section blue */
section.blue #form_contact-form .frm_primary_label,
section.blue #form_contact-form input[type="text"],
section.blue #form_contact-form input[type="email"],
section.blue #form_contact-form input[type="tel"],
section.blue #form_contact-form textarea {
    color: white;
    border-color: white;
}

section.blue #form_contact-form .frm_button_submit {
    background-color: white;
    color: var(--clr-blue);
}

section.blue #form_contact-form .frm_button_submit:hover {
    background-color: var(--clr-gold);
}

section.blue #form_contact-form .frm_submit::after {
    color: var(--clr-gold);
}

#frm_field_5_container,
#frm_field_9_container,
#frm_field_6_container {
    grid-column: span 12 !important;
}


#frm_field_9_container .frm_opt_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}


.frm_error {
    color: #b94a48 !important;
}


/* Tablette */
@media (min-width: 600px) {
    #form_contact-form .frm_fields_container {
        gap: 40px;
    }

    #frm_field_9_container .frm_opt_container {
        flex-direction: row;
        gap: 30px;
    }



    /* Desktop */
    @media (min-width: 900px) {

        /* Disposition en ligne pour nom et email */
        #frm_field_1_container,
        #frm_field_3_container {
            flex: 1;
        }

        /* Container flex pour les deux premiers champs */
        #form_contact-form .frm_fields_container > :first-child,
        #form_contact-form .frm_fields_container > :nth-child(2) {
            display: inline-block;
        }

        /* Créer une row pour nom et email */
        #form_contact-form .frm_fields_container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto auto;
            gap: 40px;
        }

        /* Message sur toute la largeur */
        #frm_field_5_container {
            grid-column: 1 / -1;
        }

        /* Submit sur toute la largeur */
        #frm_field_6_container {
            grid-column: 1 / -1;
        }

        #form_contact-form .frm_submit {
            flex-direction: row;
            justify-content: center;
            gap: 40px;
        }

        #form_contact-form textarea {
            min-height: 180px;
        }
    }

    /* Très grands écrans */
    @media (min-width: 1200px) {
        #form_contact-form {
            max-width: 1000px;
            margin: 0 auto;
        }
    }


    /* Fix CSS natif FF */
    .frm6,
    .frm_half,
    .frm_form_field.frm_three_fifths,
    .frm_form_field.frm6,
    .frm_submit.frm6,
    .frm_form_field.frm_left_half,
    .frm_form_field.frm_right_half,
    .frm_form_field.frm_first_half,
    .frm_form_field.frm_last_half,
    .frm_form_field.frm_half,
    .frm_submit.frm_half {
        grid-column: unset !important;
    }