/* =========================================
= PAGE CONTACT — coquille (.nl-contact--bg / --grid)
= Layout 2 colonnes : formulaire à gauche, photo à droite.
= Markup : page-contact.php (racine) · enqueue : inc-page-contact.php.
= Carte + formulaire : contact-form/contact-form.css · photo : contact-media/contact-media.css.
= Desktop-first : base ≥ 64rem, bascule 1 colonne en mobile via max-width.
========================================= */

/* Section pleine largeur : <main> n'a ni largeur max ni marge, le fond
   couvre donc déjà tout l'écran (pas de 100vw : avec scrollbar-gutter,
   100vw inclut la gouttière de la barre et crée un défilement horizontal). */
.nl-contact--bg {
  font-family: var(--SR);
  position: relative;
  min-height: calc(100vh - 2.5rem);
  padding: 4rem 2rem;
  background: var(--secondary-c);
  display: grid;
  place-items: center;
}

/* Grid 2 colonnes : form (gauche) / photo (droite) */
.nl-contact--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  width: 100%;
  max-width: 72rem;
}

/* Tablette : on conserve 2 colonnes mais avec un gap plus serré */
@media (max-width: 64rem) {
  .nl-contact--bg { padding: 3rem 1.5rem; }
  .nl-contact--grid { gap: 2rem; }
}

/* Mobile : bascule en 1 colonne (la photo remonte au-dessus du formulaire :
   contact-media.css). */
@media (max-width: 48rem) {
  .nl-contact--bg {
    padding: 2rem 1rem;
  }
  .nl-contact--grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}