/* =============================================================
   Page Contact
   Les canaux sont une liste filetee (pg-list). Le seul encadrement
   qui subsiste est celui des champs du formulaire: un controle doit
   se voir comme une zone ou l'on tape.
   ============================================================= */

/* ---------- Deux colonnes: les canaux, puis le formulaire ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  align-items: start;
  gap: clamp(40px, 5vw, 80px);
}

/* Un titre de colonne n'est pas un titre de section: il doit rester
   sous l'echelle des h2 de page. */
.contact-col h2 {
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: var(--dop-tracking-tight);
  margin-bottom: 26px;
}

.contact-intro {
  margin: -14px 0 28px;
  max-width: 52ch;
  color: var(--dop-ink-2);
  line-height: var(--dop-lh-normal);
}

/* ---------- Canaux ---------- */
.contact-channels a {
  display: inline-block;
  margin-top: 12px;
  color: var(--dop-primary);
  font-weight: 700;
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Formulaire ---------- */
#contactForm {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label {
  font-size: var(--dop-fs-sm);
  color: var(--dop-ink-3);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: 1px solid var(--dop-border-strong);
  border-radius: var(--dop-radius-sm);
  color: var(--dop-ink-1);
  font-family: var(--dop-font-body);
  font-size: var(--dop-fs-body);
  outline: none;
  transition: border-color var(--dop-dur);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--dop-ink-3); }

.field input:focus,
.field select:focus,
.field textarea:focus { border-color: var(--dop-primary); }

/* Le menu deroulant est peint par le systeme: sans fond opaque ses
   options seraient illisibles sur le fond sombre. */
.field select option {
  background: var(--dop-card-2);
  color: var(--dop-ink-1);
}

.field textarea {
  min-height: 150px;
  resize: vertical;
}

#contactForm .btn { align-self: flex-start; }

.form-note {
  color: var(--dop-ink-3);
  font-size: var(--dop-fs-xs);
  line-height: 1.7;
}

.form-note a {
  color: var(--dop-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 920px) {
  .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr; }
}

/* L'adresse e-mail est la cible principale de chaque canal: 44px de haut. */
.contact-channels a { display: inline-block; padding: 11px 0; }