/* ============================================================
📄 PAGE CONTACT — formulaire maison
============================================================ */

.page-contact .container-global {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 var(--site-margin);
  box-sizing: border-box;
}

/* Desktop : le formulaire occupe toute la colonne globale du site (≈ 3× plus large),
   aligné sur les marges du site (le .site-content parent gère déjà --site-margin).
   Le mobile (< 900px) garde la mise en page actuelle, inchangée. */
@media (min-width: 900px) {
  .page-contact .container-global {
    max-width: 1860px;
    padding-left: 0;
    padding-right: 0;
  }
}

.page-contact .contact-title {
  font-family: "Gambetta", sans-serif; letter-spacing: 0.03em;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--color-text);
  margin: 40px 0 12px;
}

.page-contact .contact-intro {
  font-family: "Archivo", sans-serif;
  font-size: 13px;
  color: var(--color-text);
  margin-bottom: 24px;
}

/* Messages de statut */
.page-contact .contact-msg {
  font-family: "Archivo", sans-serif;
  font-size: 13px;
  padding: 12px 14px;
  margin-bottom: 20px;
  border: 1px solid var(--color-border-strong);
}
.page-contact .contact-msg--ok  { color: var(--color-success); border-color: var(--color-success); }
.page-contact .contact-msg--err { color: var(--color-danger);  border-color: var(--color-danger); }

/* Formulaire */
.page-contact .contact-form { display: flex; flex-direction: column; gap: 16px; }

.page-contact .contact-field { display: flex; flex-direction: column; gap: 5px; }
.page-contact .contact-field > span {
  font-family: "Archivo", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-muted);
}
.page-contact .contact-req { color: var(--color-main); }

.page-contact .contact-form input[type="text"],
.page-contact .contact-form input[type="email"],
.page-contact .contact-form textarea {
  font-family: "Archivo", sans-serif;
  font-size: 14px;
  color: var(--color-text);
  padding: 10px 12px;
  border: 1px solid var(--color-border-strong);
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
.page-contact .contact-form input:focus,
.page-contact .contact-form textarea:focus {
  outline: none;
  border-color: var(--color-text);
}
.page-contact .contact-form textarea { resize: vertical; min-height: 120px; }

/* Aspect (fond noir → orange, Archivo majuscules) hérité de la signature CTA partagée
   (.contact-submit dans style.css) ; ici uniquement le delta local. */
.page-contact .contact-submit {
  align-self: flex-start;
  padding: 12px 28px;
}

/* Honeypot : invisible aux humains, sans display:none (que certains bots ignorent). */
.page-contact .contact-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}