/* ==========================================================================
   EMSTYLAR — Styles spécifiques à la page Contact (contact.html)
   ==========================================================================
   Cette page réutilise les composants partagés (.page-hero, .icon-card,
   .form-*, .accordion, .cta-section, .table) définis dans components.css.
   Seules la mise en page du formulaire, la carte de localisation Google Maps
   et la légende du tableau d'horaires sont propres à cette page.
   ========================================================================== */

/* --------------------------------------------------------------------
   Formulaire de contact
   -------------------------------------------------------------------- */
.contact-form {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--space-lg);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-md);
}

.contact-form .form-hint {
  margin-bottom: var(--space-sm);
}

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

/* --------------------------------------------------------------------
   Carte de localisation (intégration Google Maps réelle, sans clé API :
   iframe "output=embed" peuplée par assets/js/modules/contact-map.js).
   Même langage visuel que .why-us__media (radius-md + shadow-md) : une
   image encadrée posée sur le fond de la section, pas une carte surélevée.
   Élargit progressivement (ratio plus haut sur mobile, plus large sur
   desktop) plutôt qu'une hauteur fixe.
   -------------------------------------------------------------------- */
.contact-map {
  max-width: var(--container-narrow);
  margin-inline: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}

.contact-map__noscript {
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-text-muted);
  background-color: var(--color-bg-alt);
}

.contact-map__frame {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border: 0;
}

@media (min-width: 768px) {
  .contact-map__frame {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 992px) {
  .contact-map__frame {
    aspect-ratio: 21 / 9;
  }
}

.contact-map__cta {
  display: table;
  margin: var(--space-lg) auto 0;
}

/* --------------------------------------------------------------------
   Tableau des horaires
   -------------------------------------------------------------------- */
.hours-table__caption {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-xs);
  font-style: italic;
  color: var(--color-text-muted);
  text-align: left;
  caption-side: top;
}