/* Onima : page /contact (colonne infos + formulaire).
   Consomme les classes generiques de onima.css (.form, .field, .notice,
   .card, .btn) : ce fichier ne definit que le layout propre a cette page
   (prefixe .contact-). */

.contact-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items: start; }

/* ---------- Colonne infos ---------- */
.contact-info__email { font-size: 23px; font-weight: 800; }
.contact-info__email a { color: var(--green-deep); }
.contact-info__email a:hover { text-decoration: underline; text-underline-offset: 3px; }

.contact-info__location { position: relative; margin-top: 16px; padding-left: 20px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.contact-info__location::before { content: "\1F4CD"; position: absolute; left: 0; top: 0; font-size: 13px; }

.contact-info__text { margin-top: 18px; max-width: 42ch; color: var(--ink-soft); font-size: 15px; }

/* ---------- Formulaire ---------- */
.contact-form-wrap { padding: 30px; }
.contact-form__fields { display: flex; flex-direction: column; gap: 16px; }
.contact-form__done, .contact-form__error { margin-top: 4px; }

/* Fleche personnalisee sur le select, scopee a cette page (le style par
   defaut du navigateur reste la norme partout ou onima.css ne l'etend pas). */
.contact-form .field__select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) 1.1em, calc(100% - 13px) 1.1em;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .contact-layout { grid-template-columns: 1fr; gap: 32px; }
}