.contact-page {
    display: flex;
    gap: 30px;
    max-width: 1100px;
    margin: 120px auto 50px;
    padding: 0 20px;
    flex-wrap: wrap;
    align-items: center; /* pour que les colonnes restent alignées en haut par défaut */
}
/* Texte + iframe à gauche */
.contact-left {
    flex: 1 1 350px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* centre verticalement */
}

/* Formulaire à droite */
.contact-right {
    flex: 1 1 350px;
    order: 2;
}

.contact-left h1 { font-size:32px; margin-bottom:10px; }
.contact-left p { font-size:16px; line-height:1.5; }

.mpktr-contact-form { 
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    background: rgba(240, 240, 240, 0.85); 
    padding: 20px; 
    border-radius: 10px; 
}

.mpktr-contact-form h2 {
    text-align: center;
    margin-bottom: 20px; /* ajuste l'espacement si besoin */
    font-size: 24px; /* optionnel : adapte la taille au design */
}

.mpktr-contact-form input, 
.mpktr-contact-form textarea { 
    font-family: 'Inter', sans-serif; /* force la même police que le site */
    width: 100%; 
    max-width: 100%;       /* empêche l’extension horizontale */
    padding: 10px; 
    border-radius: 5px; 
    border: none; 
    background: #ffffff; 
    color: #333333; 
    font-size: 14px;       /* un peu plus petit que par défaut */
    line-height: 1.4;
    box-sizing: border-box;
}

.mpktr-contact-form button { 
    font-family: 'Inter', sans-serif; /* force la même police que le site */
    background: #000000; 
    color: #fff; 
    border: none; 
    padding: 10px 15px; 
    border-radius: 5px; 
    cursor: pointer; 
}

/* Ajuster la hauteur des inputs */
.mpktr-contact-form input {
    height: 50px;           /* réduit la hauteur des inputs */
}

/* Textarea pour le message */
.mpktr-contact-form textarea {
    min-height: 200px;      /* hauteur par défaut */
    max-height: 400px;      /* hauteur max */
    resize: vertical;       /* permet de redimensionner uniquement verticalement */
}

.mpktr-contact-form button:hover { background:#e0484f; }

.mpktr-confirmation { color: #4CAF50; }
.mpktr-error { color: #ff4d4d; }

.map {
    width: 100%;
    height: 300px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    margin-top: 20px;
}

/* --- Version mobile --- */
@media (max-width: 900px) {
    .contact-page { 
        flex-direction: column; 
        align-items: center; /* centre horizontalement les colonnes */
    }

    .contact-left, .contact-right { 
        order: initial; 
        width: 100%; /* pour que ça prenne toute la largeur */
        max-width: 400px; /* limite pour ne pas étirer trop */
    }
    .contact-left {
        margin-bottom: 30px; /* espace entre texte et formulaire */
    }

    .contact-left h1 {
        font-size: 26px;
        text-align: center;
    }

    .contact-left p {
        font-size: 15px;
        line-height: 1.6;
        text-align: center;
    }

    .mpktr-contact-form {
        background: rgba(240, 240, 240, 0.95); 
        padding: 20px;
        margin: 20px auto; /* centre le formulaire */
        text-align: left; /* le texte reste aligné à gauche à l’intérieur */
    }

    .mpktr-contact-form h2 {
        text-align: center; /* titre centré */
        font-size: 22px;
        margin-bottom: 15px;
    }

    .mpktr-contact-form input,
    .mpktr-contact-form textarea {
        font-size: 14px;
        padding: 12px;
        height: auto;
    }

    .mpktr-contact-form textarea {
        min-height: 180px;
        max-height: 350px;
    }

    .mpktr-contact-form button {
        font-size: 16px;
        padding: 12px;
    }

    .map {
        width: 100%;         
        height: 150px;        
        border-radius: 10px;  
        box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
        margin-top: 20px;
    }
}