/* =====================================================================
   pages/contact.css — styles propres à la page « Contact »
   ===================================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 40px;
  align-items: start;
}
.contact-form { padding: 40px; }
.contact-side { display: flex; flex-direction: column; gap: 20px; }
.info-card { padding: 12px 28px; }
.info-row { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--border); }
.info-row:last-child { border-bottom: none; }
.info-row--stack { flex-direction: column; align-items: flex-start; gap: 14px; }
.info-value { font-size: 15px; font-weight: 600; color: var(--text); margin-top: 4px; }
.info-value a:hover { color: var(--link); }
.social-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* Cartes « autres façons de s'impliquer » */
.way-card { padding: 20px 22px; display: flex; align-items: center; gap: 16px; }
.way-card__text { flex-grow: 1; }
.way-card__title { font-size: 15px; font-weight: 700; color: var(--text); }
.way-card__desc { font-size: 13px; color: var(--muted); margin-top: 3px; }

@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .contact-form { padding: 24px 20px; }
  .info-card { padding: 8px 20px; }
}