/* Le site utilise un accent rose (#ff4380, cf. footer.css), pas le vert de styles.css.
   On surcharge la variable ici pour que header/nav/boutons restent cohérents sur cette page. */
:root{--green:#ff4380}

.contact-page .section-intro{margin-bottom:40px}
.contact-wrap{display:grid;grid-template-columns:1fr 1.3fr;gap:60px;align-items:start}
.contact-side{padding-top:8px}
.contact-side p{color:var(--muted);font-size:15px;max-width:340px}
.contact-side ul{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}
.contact-side li{display:flex;gap:12px;align-items:flex-start;font-size:14px;color:var(--ink)}
.contact-side li b{color:var(--green);font-family:Outfit,sans-serif}

#contact-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:34px;border-radius:17px;background:#fbeaf0}
#contact-form .full{grid-column:1 / -1}
#contact-form label{font-size:13px;font-weight:700;color:var(--ink)}
#contact-form .req{color:var(--coral)}
#contact-form input,
#contact-form select,
#contact-form textarea{display:block;width:100%;box-sizing:border-box;height:45px;margin-top:6px;padding:12px;border:1px solid #c6d1bd;border-radius:8px;background:#fff;font:14px 'DM Sans',sans-serif;line-height:19px;color:var(--ink)}
#contact-form select{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23687268' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:11px 7px}
#contact-form textarea{height:auto;resize:vertical;min-height:110px;font-family:inherit}
#contact-form input:focus,
#contact-form select:focus,
#contact-form textarea:focus{outline:2px solid var(--green);outline-offset:1px}
#contact-form input.field-error,
#contact-form select.field-error,
#contact-form textarea.field-error{border-color:#e7594b}
.field-msg{display:block;min-height:15px;margin-top:5px;color:#c94a3d;font-size:12px;font-weight:600}
#contact-form .button{justify-self:start;margin-top:4px}
#contact-form .honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.form-banner{grid-column:1 / -1;padding:14px 16px;border-radius:10px;font-size:13px;font-weight:600}
.form-banner.success{background:var(--lime);color:#17251d}
.form-banner.error{background:#f8d3cc;color:#7a2a1f}

@media(max-width:780px){
  .contact-wrap{grid-template-columns:1fr}
  #contact-form{grid-template-columns:1fr;padding:24px}
}