/* ==========================================================================
   Contact — références : maquettes « CONTACT 1 » à « CONTACT 5 » (1440 px) et
   maquettes/0.12-onglet-contact/fichiers-sb/0.5-contact.pptx.
   Six écrans : l'aiguillage vers les quatre marques, les référents, les
   informations pratiques, deux volets d'accessibilité et le guide des
   associations. La charte tient la page : surtitre rouge au filet court,
   TITRE 1 en capitales grasses, dégradé rouge sur noir.
   ========================================================================== */

.page-contact {
  background: var(--black);
}

/* --------------------------------------------------------------------------
   Éléments communs aux six écrans.
   -------------------------------------------------------------------------- */

.contact-eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  font-size: var(--surtitre-taille);
  letter-spacing: var(--surtitre-lettrage);
  text-transform: uppercase;
  color: var(--red);
  font-weight: var(--surtitre-graisse);
}

.contact-eyebrow::before {
  content: "";
  flex: none;
  width: 50px;
  height: 2px;
  background: var(--red);
}

.contact-titre {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--titre-graisse);
  font-size: clamp(1.375rem, 2.4vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: var(--titre-lettrage);
  text-transform: uppercase;
  color: var(--white);
}

.contact-line {
  display: block;
  text-wrap: balance;
}

.contact-entete {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(var(--u3), 3vw, var(--u6));
  align-items: center;
  padding-inline: clamp(var(--u3), 4vw, 88px);
}

.contact-lien {
  display: inline-flex;
  align-items: center;
  gap: var(--u1);
  font-size: clamp(0.75rem, 0.95vw, 0.8125rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--red);
  text-decoration: none;
  transition: color var(--ease);
}

.contact-lien svg {
  transition: transform var(--ease);
}

.contact-lien:hover {
  color: var(--white);
}

.contact-lien:hover svg {
  transform: translateX(4px);
}

.contact-lien:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* --------------------------------------------------------------------------
   Écran 1 — à qui souhaitez-vous vous adresser ?
   -------------------------------------------------------------------------- */
.contact-adresser__tete {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(var(--u3), 3vw, var(--u6));
  align-items: center;
  padding: clamp(var(--u8), 9vw, 108px) clamp(var(--u3), 4vw, 88px);
}

.contact-adresser__titre {
  font-size: clamp(1.5rem, 2.7vw, 2.375rem);
}

.contact-marques {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1.5fr)) repeat(2, minmax(0, 1fr));
  --fleur: min((20vw - 2 * clamp(var(--u3), 2.2vw, var(--u4))) / 3.2, 96px);
  --fleur-gouttiere: clamp(var(--u4), 4vw, var(--u8));
  margin: 0;
  padding: clamp(var(--u4), 3vw, var(--u6)) 0 clamp(var(--u6), 5vw, var(--u8));
  list-style: none;
  background:
    radial-gradient(135% 190% at 100% 0%, rgb(71, 71, 71), var(--black) 95%);
}

.contact-marque {
  display: flex;
  flex-direction: column;
  padding: var(--u4) clamp(var(--u3), 2.2vw, var(--u4));
}

.contact-marque + .contact-marque {
  border-left: 1px solid rgb(255 255 255 / 0.28);
}

.contact-marque__logo {
  --ratio: 1.841;
  align-self: center;
  width: auto;
  max-width: 100%;
  height: calc(var(--fleur) * var(--ratio));
  margin-bottom: calc(var(--fleur-gouttiere) + var(--fleur) * (1.841 - var(--ratio)));
  object-fit: contain;
}

.contact-marque__logo--la-suite { --ratio: 1.841; }
.contact-marque__logo--limoges { --ratio: 1.387; }
.contact-marque__logo--professional { --ratio: 1.838; }
.contact-marque__logo--future { --ratio: 1.786; }

.contact-marque__titre {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(1.125rem, 1.95vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--white);
}

.contact-marque__texte {
  margin: var(--u3) 0 0;
  font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
  line-height: 1.5;
  text-align: center;
  color: var(--white);
}

.contact-marque__actions {
  margin: auto 0 0;
  padding-top: clamp(var(--u6), 5vw, var(--u8));
}

.contact-marque__boutons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--u3) clamp(var(--u2), 1.6vw, var(--u3));
  margin: 0;
}

.contact-marque__tel {
  display: flex;
  justify-content: center;
  margin: var(--u3) 0 0;
}

.contact-cta {
  --icone: clamp(48px, 4.4vw, 64px);
  display: grid;
  grid-template-rows: var(--icone) auto;
  justify-items: center;
  align-items: center;
  gap: var(--u2);
  min-width: 0;
  color: var(--white);
  text-decoration: none;
}

.contact-cta__icone {
  width: var(--icone);
  height: var(--icone);
  transition: transform var(--ease);
}

.contact-cta__libelle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--u1);
  max-width: 100%;
  min-height: 44px;
  padding: 0 clamp(var(--u2), 1.6vw, var(--u3));
  border: 1px solid var(--white);
  border-radius: 999px;
  font-size: clamp(0.75rem, 0.95vw, 0.8125rem);
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--ease), color var(--ease), border-color var(--ease);
}

.contact-cta:hover .contact-cta__libelle {
  background: var(--white);
  color: var(--black);
}

.contact-cta:hover .contact-cta__icone {
  transform: translateY(-3px);
}

.contact-cta--tel {
  grid-template-rows: auto;
}

.contact-cta--tel .contact-cta__libelle {
  border-color: var(--red);
  padding: 0 var(--u2);
  letter-spacing: 0.02em;
  text-transform: none;
}

.contact-cta--tel:hover .contact-cta__libelle {
  background: var(--red);
  color: var(--white);
}

.contact-cta__combine {
  flex: none;
  width: 24px;
  height: 24px;
}

/* --------------------------------------------------------------------------
   Écran 2 — les référents.
   -------------------------------------------------------------------------- */
.contact-referents {
  padding-block: clamp(var(--u12), 9vw, var(--u16));
}

.contact-referents__liste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(var(--u4), 4.5vw, var(--u12));
  margin: clamp(var(--u8), 6vw, var(--u12)) 0 0;
  padding-inline: clamp(var(--u3), 2.5vw, var(--u6));
  list-style: none;
  text-align: center;
}

.contact-referent img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  border-radius: var(--radius-media);
  object-fit: cover;
}

.contact-referent__nom {
  margin: clamp(var(--u4), 3vw, var(--u6)) 0 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
}

.contact-referent__coord {
  display: flex;
  flex-direction: column;
  gap: var(--u1);
  margin: var(--u3) 0 0;
  font-size: clamp(0.8125rem, 1.05vw, 0.9375rem);
}

.contact-referent__coord a {
  color: var(--red);
  text-decoration: none;
  transition: color var(--ease);
}

.contact-referent__coord a:hover {
  color: var(--white);
}

/* --------------------------------------------------------------------------
   Écran 3 — informations pratiques.
   -------------------------------------------------------------------------- */
.contact-infos {
  padding-block: clamp(var(--u12), 9vw, var(--u16));
  background:
    radial-gradient(100% 210% at 100% 0%, rgb(71, 71, 71), var(--black));
}

.contact-infos .contact-entete {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--u3);
  justify-items: start;
  max-width: 70ch;
}

.contact-infos__note {
  margin: 0;
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.5;
  color: rgb(255 255 255 / 0.72);
}

.contact-infos__note a {
  color: inherit;
  text-underline-offset: 3px;
}

.contact-academies {
  display: grid;
  gap: clamp(var(--u3), 2.5vw, var(--u4));
  margin: clamp(var(--u8), 6vw, var(--u12)) 0 0;
  padding-inline: clamp(var(--u3), 4vw, 78px);
  list-style: none;
}

.contact-academie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(var(--u3), 1.8vw, var(--u4));
  align-items: stretch;
}

.contact-academie__carte {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--u1);
  padding: clamp(var(--u4), 3vw, var(--u6)) var(--u4);
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--radius-media);
  background: rgb(0 0 0 / 0.35);
  text-align: center;
}

.contact-academie__nom {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(1rem, 1.45vw, 1.3125rem);
  line-height: 1.3;
  color: var(--white);
}

.contact-academie__adresse,
.contact-academie__tel {
  margin: 0;
  font-size: clamp(0.9375rem, 1.35vw, 1.1875rem);
  line-height: 1.4;
  color: var(--white);
}

.contact-academie__tel a {
  color: inherit;
  text-decoration: none;
}

.contact-academie__tel a:hover {
  color: var(--beige);
}

.contact-academie__plan {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--black-elegant);
}

.contact-academie__carte-vive {
  width: 100%;
  height: 100%;
  min-height: 168px;
  background: var(--black-elegant);
}

.contact-academie__carte-vive .leaflet-tile-pane {
  filter: invert(1) grayscale(1) brightness(0.82) contrast(1.18);
}

.contact-academie__carte-vive .leaflet-marker-icon {
  filter: drop-shadow(0 0 6px rgb(255 153 51 / 0.55));
}

.contact-academie__carte-vive .leaflet-control-attribution {
  background: rgb(0 0 0 / 0.6);
  color: var(--muted);
  font-size: 0.625rem;
}

.contact-academie__carte-vive .leaflet-control-attribution a {
  color: var(--beige);
}

.contact-academie__plan-lien {
  position: absolute;
  z-index: 800;
  left: var(--u2);
  bottom: var(--u2);
  padding: 6px var(--u2);
  border-radius: var(--radius-btn);
  background: rgb(0 0 0 / 0.78);
  color: var(--white);
}

.contact-academie__plan-lien:hover {
  color: var(--red);
}

.contact-horaires {
  margin: clamp(var(--u8), 6vw, var(--u12)) 0 0;
  font-size: clamp(1rem, 1.5vw, 1.375rem);
  text-align: center;
  color: var(--white);
}

/* --------------------------------------------------------------------------
   Écrans 4, 5 et 6 — accessibilité et guide des associations.
   Même composition : portrait à gauche, texte à droite.
   -------------------------------------------------------------------------- */
.contact-acces {
  display: grid;
  grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
  gap: clamp(var(--u4), 5vw, var(--u12));
  align-items: center;
  padding: clamp(var(--u12), 9vw, var(--u16)) clamp(var(--u3), 4vw, 88px);
}

.contact-acces__entete {
  grid-column: 1 / -1;
  margin-bottom: clamp(var(--u6), 5vw, var(--u12));
  padding-inline: 0;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
}

.contact-acces__media img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 6;
  border-radius: var(--radius-media);
  object-fit: cover;
}

.contact-acces__texte {
  max-width: 74ch;
  padding-top: var(--u6);
  font-size: clamp(0.9375rem, 1.2vw, 1.0625rem);
  line-height: 1.6;
  color: var(--white);
}

.contact-acces__icon {
    width: 36px;
    height: 36px;
    vertical-align: middle;
    margin-right: 8px;
    object-fit: contain;
    border-radius: 4px;
}

.contact-acces__texte p + p {
    margin-top: var(--u4);
}

.contact-acces__referente {
  font-weight: 700;
}

.contact-acces__referente a {
  color: inherit;
  text-decoration: none;
}

.contact-acces__referente a:hover {
  color: var(--red);
}

.contact-assos__liste {
  margin: 0;
  padding: var(--u6) 0 0;
  list-style: none;
}

.contact-assos__liste li + li {
  margin-top: var(--u6);
}

.contact-assos__liste p {
  margin: 0;
}

.contact-assos__liens {
  display: flex;
  flex-wrap: wrap;
  gap: var(--u1) var(--u4);
  margin-top: 6px;
}

.contact-assos__liens a {
  font-size: clamp(0.875rem, 1.1vw, 1rem);
  color: var(--red);
  text-decoration: none;
  text-underline-offset: 3px;
}

.contact-assos__liens a:hover {
  color: var(--white);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Sous 900 px : tout passe sur une colonne.
   -------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .contact-entete,
  .contact-adresser__tete,
  .contact-acces__entete {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--u3);
    align-items: start;
  }
  .contact-adresser__tete {
    padding: var(--u12) var(--u3) var(--u8);
  }
  .contact-entete {
    padding-inline: var(--u3);
  }
  .contact-marques {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    --fleur: min((50vw - 2 * clamp(var(--u3), 2.2vw, var(--u4))) / 3.2, 96px);
  }
  .contact-marque + .contact-marque {
    border-left: 0;
  }
  .contact-marque:nth-child(even) {
    border-left: 1px solid rgb(255 255 255 / 0.28);
  }
  .contact-marque:nth-child(n + 3) {
    border-top: 1px solid rgb(255 255 255 / 0.28);
  }
  .contact-referents__liste,
  .contact-academie {
    grid-template-columns: minmax(0, 1fr);
  }
  .contact-referents__liste {
    gap: var(--u8);
  }
  .contact-academie__plan iframe {
    min-height: 220px;
  }
  .contact-acces {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--u12) var(--u3);
  }
  .contact-acces__media {
    max-width: 320px;
  }
  .contact-acces__texte {
    padding-top: 0;
  }
}

@media (max-width: 599px) {
  .contact-marques {
    grid-template-columns: minmax(0, 1fr);
    --fleur: min((100vw - 2 * clamp(var(--u3), 2.2vw, var(--u4))) / 3.2, 96px);
  }
  .contact-marque:nth-child(even) {
    border-left: 0;
  }
  .contact-marque + .contact-marque {
    border-top: 1px solid rgb(255 255 255 / 0.28);
  }
}