/* ==========================================================================
   Formulaire de contact - réutilise les helpers de page-commander.css
   (.mdm-form-field*, .mdm-form-grid--2, .mdm-form-submit).
   ========================================================================== */

.mdm-contact-form-wrap {
    margin-top: var(--m-space-md);
}

.mdm-contact-form__notice {
    padding: 14px 18px;
    border-radius: var(--m-radius);
    margin-bottom: var(--m-space-md);
    font-family: var(--m-font-body);
    font-size: 14px;
    line-height: 1.5;
    border-left: 3px solid var(--m-gold);
    background: var(--m-cream-2);
    color: var(--m-ink);
}

.mdm-contact-form__notice--ok {
    background: rgba(205, 239, 216, .55);
    border-left-color: #56a76d;
}

.mdm-contact-form__notice--err {
    background: rgba(246, 182, 200, .25);
    border-left-color: var(--m-rose);
}

.mdm-contact-form {
    display: grid;
    gap: var(--m-space);
}

.mdm-contact-form .mdm-form-grid--2 {
    margin-bottom: var(--m-space);
}

/* Honeypot caché aux humains, accessible aux bots automatiques */
.mdm-contact-form__honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.mdm-contact-form .mdm-form-submit {
    /* Le bouton hérite déjà de page-commander.css. On ne fait que
       borner sa largeur sur cette page. */
    width: auto;
    align-self: flex-start;
}

/* Captcha Cloudflare Turnstile : centré dans une petite zone d'espace
   visuel pour qu'il ne semble pas être collé au bouton submit. */
.mdm-contact-form__captcha {
    margin: var(--m-space-sm) 0;
}

.mdm-contact-form__captcha .cf-turnstile {
    /* La taille du widget est imposée par Cloudflare (300x65 light /
       300x65 dark). On le laisse aligné à gauche, dans le flux. */
    display: block;
}

.mdm-contact-form__rgpd {
    font-size: 12px;
    color: var(--m-ink-2);
    line-height: 1.5;
    margin: var(--m-space-sm) 0 0;
}

.mdm-contact-form__rgpd a {
    color: var(--m-ink);
    border-bottom: 1px solid var(--m-gold);
    text-decoration: none;
}

.mdm-contact-form__rgpd a:hover { color: var(--m-gold); }