/* ==========================================================================
   ISMOD · Page Contact (contact.html)
   Ouverture : titre, chapeau, deux actions.
   Puis la fiche des deux pôles, chacune avec sa carte Google Maps,
   la bande des réseaux, la fin de page .suite.
   Aucune photographie sur cette page.
   À charger après base.css et components.css.
   ========================================================================== */

/* ---------- 1. Ouverture : titre, chapeau, deux actions ---------- */
.contact-ouverture {
  padding-block-end: var(--e-8);
}
.contact-ouverture__actions {
  margin-block-start: var(--e-3);
}

@media (min-width: 64em) {
  .contact-ouverture .ouverture-page__texte {
    grid-column: 1 / span 9;
  }
}

/* ---------- 2. Fiche des deux pôles ----------
   Deux colonnes dont les lignes s'alignent (sous-grille) : nom, carte,
   adresse, repère, téléphones, itinéraire. Les filets courent d'un pôle à l'autre. */
.contact-poles {
  padding-block: var(--e-8) var(--section);
}
.contact-poles__grille {
  display: grid;
  gap: var(--e-9) var(--gouttiere);
}
.contact-pole {
  display: grid;
  align-content: start;
  gap: var(--e-5);
}
.contact-pole__tete {
  display: grid;
  gap: var(--e-5);
  justify-items: start;
}
.contact-pole__picto {
  width: 3rem;
  height: 3rem;
  color: var(--indigo);
}
.contact-pole__nom {
  font-size: var(--t-3xl);
  font-weight: var(--titre-graisse);
  line-height: var(--interligne-serre);
}
/* Carte Google Maps du pôle : vraie carte, zoomable, cadrée d'un filet. */
.contact-carte {
  display: grid;
  gap: var(--e-3);
  margin: 0;
}
.contact-carte__cadre {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--gris-100);
  border: var(--filet-fin) solid var(--filet);
}
.contact-carte__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.contact-carte__legende {
  max-width: none;
}

.contact-pole__faits {
  display: grid;
}
.contact-pole__fait {
  display: grid;
  gap: var(--e-2);
  align-content: start;
  padding-block: var(--e-4) var(--e-5);
  border-block-start: var(--filet-fin) solid var(--filet);
}
.contact-pole__fait dd {
  margin: 0;
  font-size: var(--t-lg);
  line-height: 1.45;
}
.contact-pole__fait address {
  font-style: normal;
}
.contact-pole__telephones {
  display: grid;
  margin: 0;
  padding: 0;
  font-size: var(--t-base);
}
.contact-pole__telephones .lien-appel {
  font-size: var(--t-lg);
}
.contact-pole__action {
  margin: 0;
  padding-block-start: var(--e-5);
  border-block-start: var(--filet-fin) solid var(--filet);
}

@media (min-width: 56em) {
  .contact-poles__grille {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    column-gap: 0;
    row-gap: 0;
  }
  .contact-pole {
    grid-row: span 6;
    grid-template-rows: subgrid;
    gap: 0;
    padding-inline-end: var(--gouttiere);
  }
  .contact-pole + .contact-pole {
    padding-inline: var(--gouttiere) 0;
    border-inline-start: var(--filet-fin) solid var(--filet);
  }
  .contact-pole__tete {
    padding-block-end: var(--e-6);
  }
  .contact-carte {
    padding-block-end: var(--e-6);
  }
  .contact-pole__faits {
    grid-row: span 3;
    grid-template-rows: subgrid;
  }
  .contact-pole__fait {
    grid-template-columns: minmax(7rem, 2fr) 5fr;
    column-gap: var(--gouttiere);
    padding-block: var(--e-5);
  }
  .contact-pole__fait dt {
    padding-block-start: 0.2em;
  }
}


/* ---------- 3. Réseaux sociaux : une bande courte, sans image ---------- */
.contact-reseaux {
  padding-block: var(--e-7);
}
.contact-reseaux__grille {
  display: grid;
  gap: var(--e-5) var(--gouttiere);
  align-items: center;
}
.contact-reseaux__titre {
  font-size: var(--t-3xl);
  line-height: var(--interligne-serre);
}
.contact-reseaux__liste {
  display: grid;
  margin: 0;
  padding: 0;
  border-block-start: var(--filet-fin) solid var(--filet);
}
.contact-reseaux__liste > li {
  min-width: 0;
  border-block-end: var(--filet-fin) solid var(--filet);
}
.contact-reseau {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icone nom fleche"
    "icone compte fleche";
  column-gap: var(--e-4);
  align-items: center;
  min-height: 2.75rem;
  padding-block: var(--e-5);
  color: var(--texte);
  text-decoration: none;
}
.contact-reseau__icone {
  grid-area: icone;
  width: 2rem;
  height: 2rem;
  color: var(--accent);
}
.contact-reseau__nom {
  grid-area: nom;
  font-family: var(--police-titre);
  font-size: var(--t-2xl);
  font-weight: var(--titre-graisse-petit);
  line-height: 1.15;
  text-decoration-line: underline;
  text-decoration-thickness: var(--filet-fort);
  text-decoration-color: transparent;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--duree-rapide) var(--ease-etat);
}
.contact-reseau__compte {
  grid-area: compte;
  font-size: var(--t-base);
  color: var(--texte-doux);
}
.contact-reseau__fleche {
  grid-area: fleche;
  color: var(--accent);
  transition: transform var(--duree) var(--ease-etat);
}
.contact-reseau:hover .contact-reseau__nom,
.contact-reseau:focus-visible .contact-reseau__nom {
  text-decoration-color: currentColor;
}
.contact-reseau:hover .contact-reseau__fleche,
.contact-reseau:focus-visible .contact-reseau__fleche {
  transform: translate(0.2rem, -0.2rem);
}


@media (min-width: 48em) {
  .contact-reseaux__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gouttiere);
  }
}
@media (min-width: 64em) {
  .contact-reseaux__grille {
    grid-template-columns: repeat(var(--colonnes), minmax(0, 1fr));
  }
  .contact-reseaux__titre {
    grid-column: 1 / span 5;
  }
  .contact-reseaux__liste {
    grid-column: 6 / -1;
  }
}

/* Graisse de Zodiak : 500 sous 40 px. */
@media (max-width: 33.3125em) {
  .contact-pole__nom,
  .contact-reseaux__titre {
    font-weight: var(--titre-graisse-petit);
  }
}