/* ==========================================================================
   Page Nous joindre (2026-10-08). Tout le reste vient de styles.css
   (page-hero, quote, qfield, text-link). Ici : seulement ce que la page a
   de propre (avis des motifs, confirmation, carte, heures).
   ========================================================================== */

/* .quote hérite de couleurs pour fond charbon (.quote .eyebrow / .lede dans
   styles.css). Ici la section est blanche : couleurs par défaut du site. */
.page--contact .quote .eyebrow {
  color: var(--sl-color-secondary);
}

.page--contact .quote .lede {
  color: var(--sl-color-ink-70);
}

.contact__aside-lede {
  margin-top: 20px;
}

.contact__mail {
  margin-top: 12px;
}

/* Héros : cadre 2:3 habituel. Le ciel blanc prend la couleur crème
   directement dans l'image (produit par #f3f1ee, sans dégradé) :
   lames-orientables-detail-creme.webp. Fond du cadre crème aussi, pour que
   le haut du cadre disparaisse dans la page. */
.contact-hero__media {
  background: var(--sl-color-cream);
}

/* Le formulaire, ses avis et la confirmation partagent la colonne de droite */
.contact__card {
  grid-column: 6 / 13;
  min-width: 0;
  background: var(--sl-color-cream);
  /* La confirmation défile sous l'en-tête collant, jamais derrière */
  scroll-margin-top: calc(var(--sl-header-h-stuck) + 24px);
}

.contact__card .quote__form {
  padding: clamp(24px, 4vw, 48px);
}

/* Une rangée pleine largeur (motif, nom complet) */
.qf__row--1 {
  grid-template-columns: minmax(0, 1fr);
}

.page--contact .qfield--area {
  margin-top: 0;
}

/* Avis d'un motif qui renvoie vers une autre page : il s'insère sous le
   choix du motif (déplacé là par contact.js), filet brun à gauche. */
.contact__notice {
  margin-top: 20px;
  padding: 20px 24px;
  border-left: 2px solid var(--sl-color-secondary);
  background: var(--sl-color-white);
}

.contact__notice[hidden] {
  display: none;
}

.contact__notice-t {
  font-size: 15.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--sl-color-ink-70);
}

.contact__notice-t strong {
  font-weight: 500;
  color: var(--sl-color-primary);
}

.contact__notice .text-link {
  margin-top: 14px;
}

/* Confirmation : remplace le formulaire une fois le message envoyé */
.contact__success {
  padding: clamp(40px, 6vw, 80px) clamp(24px, 4vw, 48px);
  outline: 0;
}

.contact__success[hidden] {
  display: none;
}

.contact__success .h {
  margin-top: 12px;
}

.contact__success .lede {
  margin-top: 16px;
  max-width: 44ch;
}

/* ==========================================================================
   Coordonnées : carte (7 colonnes) + texte posé sur la ligne du bas
   ========================================================================== */
.contact-coord__grid {
  align-items: end;
  row-gap: 48px;
}

.contact-coord__map {
  grid-column: 1 / 8;
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--sl-color-ink-12);
  overflow: hidden;
}

/* Carte Google adoucie pour la palette du site ; couleurs au survol */
.contact-coord__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.85) contrast(0.95);
  transition: filter 400ms var(--sl-ease);
}

.contact-coord__map:hover iframe,
.contact-coord__map:focus-within iframe {
  filter: none;
}

.contact-coord__text {
  grid-column: 9 / 13;
}

.contact-coord__block {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--sl-color-ink-12);
}

.contact-coord__text .h + .contact-coord__block {
  margin-top: 32px;
}

.contact-coord__address {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--sl-color-ink-70);
}

.contact-coord__block .links {
  margin-top: 14px;
}

.contact-hours {
  margin: 14px 0 0;
}

.contact-hours__row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 0;
  border-bottom: 1px solid var(--sl-color-ink-12);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.5;
}

.contact-hours__row:last-child {
  border-bottom: 0;
}

.contact-hours dt {
  color: var(--sl-color-ink-70);
}

.contact-hours dd {
  margin: 0;
  text-align: right;
  color: var(--sl-color-primary);
}

@media (max-width: 1050px) {
  /* Empilé : le titre et le motif d'abord, le formulaire ensuite */
  .contact__card {
    grid-column: 1 / -1;
    order: 1;
  }

  .page--contact .quote__aside {
    order: 0;
    padding-top: 0;
  }

  .contact-coord__map {
    grid-column: 1 / 7;
  }

  .contact-coord__text {
    grid-column: 7 / 13;
  }
}

@media (max-width: 720px) {
  .contact__links {
    flex-wrap: wrap;
  }

  .contact-coord__map,
  .contact-coord__text {
    grid-column: 1 / -1;
  }

  .contact-coord__map {
    aspect-ratio: 1 / 1;
  }
}