.contact-intro {
  padding: var(--space-xl) 0 var(--space-lg);
  text-align: center;
}

.contact-intro h1 {
  font-style: italic;
  font-size: clamp(2.2rem, 5vw, 3rem);
  color: var(--color-terracotta);
}

.contact-intro p {
  max-width: 56ch;
  margin: var(--space-sm) auto 0;
  color: var(--color-text);
}

.contact-info {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  text-align: center;
  padding-bottom: var(--space-lg);
}

.contact-info h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
  color: var(--color-terracotta);
}

.contact-info p {
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.7;
}

/* Téléphone et e-mail en bleu, comme des liens classiques */
.contact-info a {
  color: #1a5fb4;
  text-decoration: underline;
}

.contact-info a:hover,
.contact-info a:focus-visible {
  color: #0d3d7a;
}

.contact-map-wrap {
  position: relative;
  margin-bottom: var(--space-xl);
}

.contact-map {
  height: 320px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-beige);
}

/* Marqueur personnalisé — pin SVG marron (voir contact-map.js) */
.contact-map-pin {
  background: none;
  border: none;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

/* Les boutons et la mention © passent toujours au-dessus du pin */
.contact-map .maplibregl-control-container > div {
  z-index: 5;
}

.contact-form-section {
  background: linear-gradient(to bottom, var(--color-cream) 0, var(--color-beige) 180px, var(--color-beige) 100%);
  padding: var(--space-xl) 0;
}

@media (max-width: 640px) {
  .contact-info {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}