/********************************************
    FORMULAIRE CONTACT - STYLE LIGNE BAS
*********************************************/

.formulaire-accueil {
    margin: 80px 50px;
    background-color: #ADC8D7;
    border-radius: 20px;
    font-family: "Inter Tight", sans-serif;
    padding-left: 60px;
    padding-right: 60px;
}

/* Titre centré */
#titre_form {
    padding-top: 50px;
    text-align: center;
    font-size: 64px;
    font-weight: bold;
    margin-bottom: 40px;
}

/* Nouvelle grille structurée : 2 lignes de champs + 1 ligne bouton */
.formulaire-accueil form.wpcf7-form {
    display: grid;
    grid-template-columns: 1fr 1fr; /* deux colonnes pour lignes 1 et 2 */
    grid-template-rows: auto auto auto; /* 3 lignes */
    gap: 0px 100px; /* espace vertical et horizontal */
}

/* Ligne 1 : Nom / Téléphone */
.formulaire-accueil label:nth-of-type(1) {
    grid-column: 1;
    grid-row: 1;
}

.formulaire-accueil label:nth-of-type(2) {
    grid-column: 2;
    grid-row: 1;
}

/* Ligne 2 : Email / Message */
.formulaire-accueil label:nth-of-type(3) {
    grid-column: 1;
    grid-row: 2;
}

.formulaire-accueil label:nth-of-type(4) {
    grid-column: 2;
    grid-row: 2;
}

/* Ligne 3 : bouton centré */
.formulaire-accueil .wpcf7-submit {
    grid-column: 1 / -1; /* occupe toute la largeur */
    grid-row: 3;          /* dernière ligne */
    justify-self: center; /* centre horizontalement */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 25px;
    border-radius: 50px;
    border: 1px solid #000;
    font-family: "Inter Tight", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #000;
    cursor: pointer;
    width: auto;
    min-width: 120px;
    margin-top: 0;       /* supprime marge inutile */
    margin-bottom: 40px; /* <- espace sous le bouton */
}


/* Supprimer flèche si présente */
.formulaire-accueil .wpcf7-submit img {
    display: none;
}

/* Inputs + Textarea = ligne en bas */
.formulaire-accueil input,
.formulaire-accueil textarea {
    width: 100%;
    padding: 5px 5px;
    font-size: 14px;
    font-family: inherit;
    border: none;
    border-bottom: 2px solid #000;
    background: transparent;
    outline: none;
    transition: border-color 0.3s ease;
}

/* Textarea auto-expand */
.formulaire-accueil textarea {
    min-height: 5px;
    height: 5px;
    overflow-y: hidden;
    resize: vertical;
}

/* Effet focus */
.formulaire-accueil input:focus,
.formulaire-accueil textarea:focus {
    border-bottom-color: #000;
}

/********************************************
        💻 GRAND ÉCRAN / LARGE
********************************************/
@media (min-width: 1025px) {
    .formulaire-accueil {
        margin: 80px 50px;
        padding-left: 60px;
        padding-right: 60px;
    }

    #titre_form {
        font-size: 64px;
        padding-top: 50px;
        margin-bottom: 40px;
    }

    .formulaire-accueil form.wpcf7-form {
        grid-template-columns: 1fr 1fr;
        gap: 0px 100px;
    }

    .formulaire-accueil input,
    .formulaire-accueil textarea {
        font-size: 14px;
        padding: 5px 5px;
    }

    .formulaire-accueil .wpcf7-submit {
        font-size: 16px;
        padding: 10px 25px;
        min-width: 120px;
    }
}

/********************************************
        📱 TABLETTE / iPAD
        (768px – 1024px)
********************************************/
@media (min-width: 768px) and (max-width: 1024px) {
    .formulaire-accueil {
        margin: 60px 40px;
        padding-left: 40px;
        padding-right: 40px;
    }

    #titre_form {
        font-size: 48px;
        padding-top: 40px;
        margin-bottom: 30px;
    }

    .formulaire-accueil form.wpcf7-form {
        grid-template-columns: 1fr 1fr;
        gap: 15px 40px; /* réduit l'espacement horizontal et vertical */
    }

    .formulaire-accueil input,
    .formulaire-accueil textarea {
        font-size: 13px;
        padding: 5px 4px;
    }

    .formulaire-accueil .wpcf7-submit {
        font-size: 15px;
        padding: 10px 22px;
        min-width: 110px;
    }
}

/********************************************
        📱 TÉLÉPHONE / MOBILE
        (<768px)
********************************************/
@media (max-width: 767px) {
    .formulaire-accueil {
        margin: 40px 20px;
        padding-left: 20px;
        padding-right: 20px;
    }

    #titre_form {
        font-size: 36px;
        padding-top: 30px;
        margin-bottom: 25px;
    }

    .formulaire-accueil form.wpcf7-form {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto auto auto;
        gap: 20px;
    }

    .formulaire-accueil label:nth-of-type(1),
    .formulaire-accueil label:nth-of-type(2),
    .formulaire-accueil label:nth-of-type(3),
    .formulaire-accueil label:nth-of-type(4) {
        grid-column: 1;
        grid-row: auto;
    }

    .formulaire-accueil input,
    .formulaire-accueil textarea {
        font-size: 14px;
    }

    .formulaire-accueil .wpcf7-submit {
        grid-column: 1;
        justify-self: center;
        font-size: 15px;
        padding: 10px 20px;
        min-width: 100px;
    }
}