/* Contact : bandeau brun, formulaire, coordonnées. */

.contact-hero {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px;
  padding: clamp(48px, 8vh, 100px) var(--gutter) clamp(72px, 12vh, 140px);
}
.contact-hero__title { font-size: clamp(48px, 8vw, 124px); max-width: 14ch; }
.contact-hero__email {
  color: var(--color-on-primary); font-family: var(--font-display); font-style: italic;
  font-size: clamp(22px, 3vw, 40px); border-bottom: 1px solid var(--color-highlight); padding-bottom: 6px;
}

.contact-form-section { padding: clamp(64px, 10vh, 120px) var(--gutter) 0; }
.contact-intro { margin-bottom: clamp(40px, 6vh, 64px); font-size: 16px; font-weight: 300; line-height: 1.8; text-align: center; text-wrap: balance; max-width: none; }
.contact-form { display: flex; flex-direction: column; gap: 34px; }
.contact-form__subject { display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 11px; letter-spacing: var(--track-label-wide); text-transform: uppercase; color: var(--color-primary); }
.contact-form__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.contact-form__row { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.contact-form__submit { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 8px; }

.contact-facts {
  display: grid; gap: 32px; text-align: center; max-width: 1000px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  padding: clamp(72px, 11vh, 130px) var(--gutter) 0;
}
.contact-fact { display: flex; flex-direction: column; gap: 10px; }
.contact-fact__value { font-family: var(--font-title); font-size: 20px; line-height: 1.3; }