/* ==========================================================================
   PAGES/CONTACT.CSS — Page de contact
   ========================================================================== */

.contact-grille { padding-block: var(--e-8); align-items: start; }
@media (min-width: 1000px) { .contact-grille { padding-block: var(--e-9); } }

/* === COORDONNEES ========================================================== */

.coordonnees { border-top: var(--filet); }
.coord-ligne {
  display: grid;
  gap: var(--e-2);
  padding-block: var(--e-5);
  border-bottom: var(--filet);
}
@media (min-width: 600px) {
  .coord-ligne { grid-template-columns: 130px minmax(0, 1fr); gap: var(--e-5); align-items: baseline; }
}
.coord-libelle {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gris-texte);
}
.coord-valeur { font-size: var(--t-m); }
/* Téléphone et e-mail se tapotent depuis un mobile : cible confortable. */
.coord-valeur a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.contact-note {
  margin-top: var(--e-7);
  padding-top: var(--e-6);
  border-top: var(--filet);
  font-size: var(--t-s);
  color: var(--gris-texte);
  max-width: 44ch;
}


/* === FORMULAIRE =========================================================== */

.form-contact { margin-top: var(--e-6); }
@media (min-width: 1000px) { .form-contact { margin-top: 0; } }

.form-tete { padding-bottom: var(--e-6); border-bottom: 1px solid var(--noir); margin-bottom: var(--e-7); }
.form-tete h2 { font-size: var(--t-xl); }

.form-duo { display: grid; gap: 0; }
@media (min-width: 640px) { .form-duo { grid-template-columns: 1fr 1fr; gap: var(--e-6); } }

.form-rgpd {
  margin-top: var(--e-5);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--gris-texte);
  line-height: 1.7;
  max-width: 50ch;
}
.form-contact .bouton { margin-top: var(--e-6); }