/* ============================================================
   Page contact. Les champs viennent de sec-forms.css ; ce fichier
   pose la mise en page, les renvois et la feuille du formulaire.

   Même papier teinté que la FAQ et l'outil de mesure. Le titre reste
   franc ; le formulaire se pose en feuille (.sheet), les coordonnées en
   carte souple (.sheet--soft), les renvois sont des capsules qui mènent
   ailleurs (instrument.css).
   ============================================================ */

.contact-page {
  padding-block: clamp(28px, 4vw, 56px) var(--space-section);
  background: var(--surface-sunken);
}

.contact-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 6vw, 96px);
  align-items: start;
}

.contact-page__intro h1 {
  margin: 0 0 18px;
}

.contact-page__lead {
  max-width: 42ch;
  margin: 0;
  color: var(--ink-70);
  font-size: 1.12rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.contact-page__intro > .rte { margin-top: 18px; }

/* Coordonnées : seulement si les réglages sont remplis. */
.contact-page__direct {
  display: grid;
  gap: 8px;
  margin-top: 28px;
  padding: 16px 20px;
}

.contact-page__direct p { margin: 0; line-height: 1.5; }

.contact-page__direct a {
  display: inline-block;
  padding-block: 3px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

.contact-page__delay { font-weight: 700; }

/* ---------- Renvois ---------- */

.contact-page__quicklinks { margin-top: 32px; }

.contact-page__quicklinks h2 {
  margin: 0 0 10px;
  color: var(--ink-70);
  font-family: Barlow, Arial, sans-serif;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1.3;
}

.contact-page__quicklinks ul { max-width: 400px; }

/* ---------- Formulaire ---------- */

.contact-page__form { padding: clamp(20px, 3.4vw, 40px); }

.contact-page__topics .sa-choices__list { gap: 8px; }

/* Une ligne dont le second champ est masqué rend sa place au premier. */
.contact-page__form .sa-form__row:has(> [hidden]) { grid-template-columns: minmax(0, 1fr); }
.contact-page__form [data-contact-order][hidden] { display: none; }

.contact-page__pro-note {
  margin: 12px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--surface-sunken);
  color: var(--ink-70);
  font-size: .95rem;
  line-height: 1.45;
}

.contact-page__pro-note[hidden] { display: none; }

.contact-page__pro-note a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 950px) {
  .contact-page__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 550px) {
  .contact-page__form { padding: 22px 16px; }
}