/* =========================================================================
   PAGE CONTACT
   Mise en page 2 colonnes (coordonnées + formulaire), carte et rappel WhatsApp.
   Réutilise au maximum les tokens et composants existants.
   ====================================================================== */

/* ---------------- Grille principale : coordonnées + formulaire ---------------- */
.contact-grid {
  display: grid;
  gap: clamp(2rem, 1.5rem + 3vw, 4rem);
  align-items: start;
}
@media (min-width: 960px) {
  .contact-grid { grid-template-columns: 0.85fr 1.15fr; }
}

/* ---------------- Colonne coordonnées ---------------- */
.contact-info .info-list { margin-top: var(--sp-5); }

/* Chaque ligne d'info devient cliquable / lisible */
.contact-info .info-list dd a {
  color: var(--color-ink);
  font-weight: 600;
  transition: color var(--t-fast);
}
.contact-info .info-list dd a:hover { color: var(--color-primary); }
.contact-info .info-list dd .contact-sub {
  display: block;
  font-size: var(--fs-50);
  font-weight: 500;
  color: var(--color-muted);
  margin-top: 2px;
}

/* Réseaux sociaux */
.contact-socials {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.contact-socials a {
  width: 46px; height: 46px;
  border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--color-surface-2);
  color: var(--color-primary);
  border: 1px solid var(--color-border-soft);
  transition: transform var(--t-fast), background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.contact-socials a:hover {
  transform: translateY(-3px);
  background: var(--grad-leaf);
  color: #fff;
  box-shadow: var(--sh-md);
}

/* ---------------- Carte formulaire ---------------- */
.contact-form-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  padding: clamp(1.5rem, 1.2rem + 2vw, 2.8rem);
}
.contact-form-card .field { margin-bottom: var(--sp-5); }

/* Grille interne pour champs courts côte à côte */
.contact-form__row {
  display: grid;
  gap: 0 var(--sp-5);
}
@media (min-width: 600px) {
  .contact-form__row { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------- Carte / map ---------------- */
.contact-map { margin-top: var(--sp-6); }
.contact-map .map-foot {
  margin-top: var(--sp-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

/* ---------------- Rappel WhatsApp (fin sobre) ---------------- */
.contact-whatsapp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-5);
  justify-content: space-between;
}
.contact-whatsapp__text { display: grid; gap: 4px; }
.contact-whatsapp__text strong {
  font-family: var(--font-display);
  font-size: var(--fs-400);
  color: #fff;
  font-weight: 600;
}
.contact-whatsapp__text span { color: var(--color-on-dark); font-size: var(--fs-100); }