Contact

<style>
  .mariana-contact{
    --noir:#171310; --cacao:#4a2c22; --or:#b08d57; --sable:#e7dcc8; --ivoire:#f8f3e9;
    font-family:'Manrope', sans-serif; color:var(--noir); background:var(--ivoire);
    padding:70px 24px; max-width:640px; margin:0 auto;
  }
  .mariana-contact h2{
    font-family:'Fraunces', serif; font-weight:500; font-size:clamp(26px,3.2vw,36px);
    margin-bottom:12px; text-align:center;
  }
  .mariana-contact > p{text-align:center; color:#5a4d40; margin-bottom:40px; font-size:15px;}
  .mariana-contact form{display:flex; flex-direction:column; gap:18px;}
  .mariana-contact-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
  .mariana-contact label{
    font-size:12px; text-transform:uppercase; letter-spacing:0.06em; color:var(--cacao);
    margin-bottom:6px; display:block;
  }
  .mariana-contact input, .mariana-contact textarea{
    width:100%; padding:13px 14px; border:1px solid rgba(23,19,16,0.25); border-radius:2px;
    background:#fff; font-family:'Manrope', sans-serif; font-size:14.5px; color:var(--noir);
  }
  .mariana-contact input:focus, .mariana-contact textarea:focus{outline:none; border-color:var(--or);}
  .mariana-contact textarea{min-height:140px; resize:vertical;}
  .mariana-contact button{
    background:var(--noir); color:var(--ivoire); border:1px solid var(--noir);
    padding:16px 28px; font-size:13px; letter-spacing:0.06em; text-transform:uppercase;
    border-radius:2px; cursor:pointer; transition:.25s;
  }
  .mariana-contact button:hover{background:transparent; color:var(--noir);}
  .mariana-contact .success{
    background:#eef3e5; border:1px solid #b9c9a0; color:#3f4d2c;
    padding:16px; border-radius:2px; text-align:center; margin-bottom:24px; font-size:14px;
  }
  @media(max-width:600px){ .mariana-contact-row{grid-template-columns:1fr;} }
</style>

<div class="mariana-contact">
  <h2>Contactez-nous</h2>
  <p>Une question sur votre commande, une taille, un délai ? Écrivez-nous, nous répondons sous 24h.</p>

  {% if form.posted_successfully? %}
    <div class="success">Votre message a bien été envoyé — nous vous répondons très vite.</div>
  {% endif %}

  {% form 'contact' %}
    {% if form.errors %}
      <div class="success" style="background:#f6e6e0; border-color:#d9a894; color:#7a3b23;">
        Merci de vérifier les champs et de réessayer.
      </div>
    {% endif %}

    <div class="mariana-contact-row">
      <div>
        <label for="ContactFormPrenom">Prénom</label>
        <input type="text" id="ContactFormPrenom" name="contact[Prénom]" required>
      </div>
      <div>
        <label for="ContactFormNom">Nom</label>
        <input type="text" id="ContactFormNom" name="contact[Nom]" required>
      </div>
    </div>

    <div>
      <label for="ContactFormEmail">Email</label>
      <input type="email" id="ContactFormEmail" name="contact[email]" value="{% if customer %}{{ customer.email }}{% endif %}" autocomplete="email" required>
    </div>

    <div>
      <label for="ContactFormMessage">Message</label>
      <textarea id="ContactFormMessage" name="contact[body]" required></textarea>
    </div>

    <button type="submit">Envoyer le message</button>
  {% endform %}
</div>