/* ============================================================================
   SILLAGE — gabarit Contact (templates/page-contact.php)
   1. Entrée · 2. Coordonnées + formulaire · 3. Clôture · 4. Responsive
   Composants (meta, photo, figure, bouton, champs) : main.css — non redéfinis ici.
   Desktop-first : ≤1023 tablette portrait (8 colonnes, sticky off, formulaire
   devant les coordonnées) ; ≤767 mobile (maquette mobile).
   ============================================================================ */

/* --------------------------------------------------------------------------
   1. Entrée
   -------------------------------------------------------------------------- */
.slg-contact-hero { padding: calc(var(--nav-h) + var(--sp-10)) var(--marge) var(--section-sm); align-items: end; }
.slg-contact-hero__meta { grid-column: 1 / 3; align-self: start; }
.slg-contact-hero__title { grid-column: 1 / -1; margin-top: var(--sp-8); font: var(--type-hero); letter-spacing: var(--ls-display); font-size: clamp(72px, 11vw, 200px); line-height: .9; text-wrap: balance; }
.slg-contact-hero__lead { grid-column: 3 / 8; margin-top: var(--sp-9); max-width: var(--measure); display: grid; gap: var(--sp-4); }
.slg-contact-hero__lead p { font: var(--type-lead); text-wrap: pretty; }

/* --------------------------------------------------------------------------
   2. Coordonnées (colonne sticky 1/5) + formulaire (6/13)
   -------------------------------------------------------------------------- */
.slg-contact-body { padding: var(--section-sm) var(--marge) var(--section); align-items: start; border-top: 1px solid var(--line); }

.slg-contact-coord { grid-column: 1 / 5; position: sticky; top: calc(var(--nav-h) + var(--sp-7)); display: grid; gap: var(--sp-7); padding-top: var(--sp-7); align-content: start; }
.slg-contact-coord__villes { display: grid; gap: var(--sp-7); }
.slg-contact-coord__bloc { display: grid; gap: var(--sp-5); align-content: start; justify-items: start; }
.slg-contact-coord__villes .slg-contact-coord__bloc + .slg-contact-coord__bloc,
.slg-contact-coord__bloc--liens { border-top: 1px solid var(--line); padding-top: var(--sp-6); }
.slg-contact-coord > .slg-contact-coord__bloc--liens:first-child { border-top: 0; padding-top: 0; }
.slg-contact-coord__bloc--liens { gap: var(--sp-4); }
.slg-contact-coord__adr { font: var(--type-h3); letter-spacing: var(--ls-heading); font-weight: 400; }
.slg-contact-coord__horaires { font: var(--type-small); color: var(--ombre); }
.slg-contact-coord__lien { font: var(--type-h3); letter-spacing: var(--ls-heading); font-weight: 400; overflow-wrap: anywhere; }
.slg-contact-coord__suivre { display: inline-flex; align-items: center; gap: 8px; font: var(--type-small); color: var(--ombre); }

/* Formulaire : grille 2 colonnes (nom/email, tel/objet, message et pied pleine largeur) */
.slg-contact-form { grid-column: 6 / 13; padding-top: var(--sp-7); }
/* Ancre #formulaire (action du <form> et redirection après envoi) : dégagée du header fixe */
.slg-contact-form .slg-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8) var(--sp-6); scroll-margin-top: calc(var(--nav-h) + var(--sp-5)); }
.slg-contact-form .slg-form__nom,
.slg-contact-form .slg-form__tel { grid-column: 1 / 2; }
.slg-contact-form .slg-form__email,
.slg-contact-form .slg-form__objet { grid-column: 2 / 3; }
.slg-contact-form .slg-form__message { grid-column: 1 / 2; }
.slg-contact-form .slg-form__foot,
.slg-contact-form .slg-form__status { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   3. Clôture : image 21/9 + légende meta justifiée (sillage_figure)
   -------------------------------------------------------------------------- */
.slg-contact-cloture { padding: 0 var(--marge) var(--section); }

/* --------------------------------------------------------------------------
   4. Responsive
   -------------------------------------------------------------------------- */

/* Tablette portrait : grille 8 colonnes, sticky désactivé, formulaire d'abord, une colonne */
@media (max-width: 1023px) {
  .slg-contact-hero__lead { grid-column: 2 / 8; }

  .slg-contact-body { padding: var(--sp-7) var(--marge) 0; row-gap: var(--section-sm); }

  .slg-contact-form { grid-column: 1 / -1; order: 1; padding-top: 0; }
  .slg-contact-form .slg-form { grid-template-columns: 1fr; gap: 40px; }
  .slg-contact-form .slg-form__nom,
  .slg-contact-form .slg-form__tel,
  .slg-contact-form .slg-form__email,
  .slg-contact-form .slg-form__objet { grid-column: 1 / -1; }
  .slg-contact-form .slg-form__foot { display: grid; gap: 16px; justify-items: start; padding-top: 0; }

  .slg-contact-coord { grid-column: 1 / -1; order: 2; position: static; padding-top: 0; gap: var(--sp-6); }
  .slg-contact-coord__villes { grid-template-columns: 1fr 1fr; gap: var(--gutter); border-top: 1px solid var(--line); padding-top: var(--sp-5); }
  .slg-contact-coord__villes .slg-contact-coord__bloc,
  .slg-contact-coord__villes .slg-contact-coord__bloc + .slg-contact-coord__bloc { border-top: 0; padding-top: 0; gap: 10px; }
  .slg-contact-coord__bloc--liens { padding-top: var(--sp-5); gap: 14px; }
  .slg-contact-coord > .slg-contact-coord__bloc--liens:first-child { border-top: 1px solid var(--line); padding-top: var(--sp-5); }
  .slg-contact-coord__lien,
  .slg-contact-coord__suivre { display: flex; align-items: center; min-height: 44px; }

  .slg-contact-cloture { padding: var(--section-sm) var(--marge) var(--section); }
  .slg-contact-cloture .slg-photo { aspect-ratio: 16 / 9; }
}

/* Mobile : maquette « Sillage Mobile Contact » */
@media (max-width: 767px) {
  .slg-contact-hero { --reveal-y: 16px; padding: 120px var(--marge) var(--sp-7); gap: 28px; }
  .slg-contact-hero__meta,
  .slg-contact-hero__title,
  .slg-contact-hero__lead { grid-column: 1 / -1; margin-top: 0; }
  .slg-contact-hero__title { font-size: clamp(60px, 18vw, 92px); }

  /* Filet du formulaire inset dans les marges (maquette : margin 0 20px + border-top), comme ceux des coordonnées */
  .slg-contact-body { border-top: 0; padding-top: 0; }
  .slg-contact-form { border-top: 1px solid var(--line); padding-top: 40px; }

  .slg-contact-cloture { padding-bottom: var(--section-sm); }
  .slg-contact-cloture .slg-photo { aspect-ratio: 4 / 5; }
  .slg-contact-cloture .slg-fig { gap: 10px; }
  .slg-contact-cloture .slg-fig__cap { justify-content: flex-start; gap: 0 10px; }
  /* Séparateur « — » centré : 10 px du gap avant, 10 px de marge après (comme .slg-meta__sep) */
  .slg-contact-cloture .slg-fig__cap span + span::before { content: "—"; margin-right: 10px; opacity: .45; }
}