/* =========================================== */
/*            CONTACT PAGE - MOBILE            */
/* =========================================== */

@media (max-width: 768px) {

    /* ============= HERO ============= */
    .contact-hero {
        padding: 60px 20px;
        background-position: center;
        background-size: cover;
    }

    .contact-hero h1 {
        font-size: 28px;
    }

    .contact-hero p {
        font-size: 14px;
        margin-top: 8px;
    }


    /* ============= INFOS CONTACT ============= */
    .contact-infos {
        padding: 40px 0;
    }

    .contact-infos-grid {
        grid-template-columns: 1fr;   /* 3 → 1 colonne */
        gap: 20px;
    }

    .contact-card {
        padding: 24px 18px;
    }

    .contact-card img {
        width: 32px;
        margin-bottom: 10px;
    }


    /* ============= FORMULAIRE ============= */
    .contact-form-section {
        padding: 40px 0 60px;
    }

    .contact-form {
        padding: 28px 22px;
        max-width: 95%;
    }

    .contact-form h2 {
        font-size: 20px;
        margin-bottom: 6px;
    }

    .form-subtitle {
        font-size: 14px;
        margin-bottom: 24px;
    }

    /* Nom + prénom → en colonne */
    .form-row {
        flex-direction: column;
        gap: 0;
    }

    .form-group {
        margin-bottom: 16px;
    }

    .form-group input,
    .form-group textarea {
        font-size: 14px;
        padding: 10px;
    }

    textarea {
        height: 110px;
    }

    .btn-submit {
        width: 50%;
        display: block;
        margin: 10px auto 0;
        font-size: 16px;
    }
}