/* ============================================================
   PAUSITY — PAGE CONTACT
   Complète page.css (bandeau, sections, encart, démarche)
   ============================================================ */

/* ================================================== */
/*                   COORDONNÉES                      */
/* ================================================== */

.coordonnees {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
  max-width: 1000px;
  margin: 0 auto;
}

.coordonnee {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2.4rem 1.6rem;
  background: #ffffff;
  border: 1px solid var(--page-hairline, rgba(20, 24, 26, 0.1));
  text-decoration: none;
  color: inherit;
  transition: border-color 0.25s ease, transform 0.25s ease,
    box-shadow 0.25s ease;
}

/* Les trois cartes sont des liens : le survol est ici legitime. */
a.coordonnee:hover,
a.coordonnee:focus-visible {
  border-color: var(--pausity-green, #007c34);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(20, 24, 26, 0.09);
}

.coordonnee__icone {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.2rem;
  border: 1px solid var(--page-hairline, rgba(20, 24, 26, 0.1));
  border-radius: 50%;
  color: var(--pausity-green, #007c34);
}

.coordonnee__libelle {
  margin-bottom: 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(20, 24, 26, 0.45);
}

.coordonnee__valeur {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--page-ink, #14181a);

  /* Le numero et l'adresse ne doivent jamais se couper en deux lignes
     au milieu d'un groupe de chiffres : c'est illisible. */
  white-space: nowrap;
}

.coordonnee__precision {
  margin-top: 0.7rem;
  font-size: 0.93rem;
  line-height: 1.55;
  color: var(--page-text, #555);
}


/* ================================================== */
/*                ZONE D'INTERVENTION                 */
/* ================================================== */

.zone-liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto;
}

.zone-commune {
  padding: 9px 18px;
  background: #ffffff;
  border: 1px solid var(--page-hairline, rgba(20, 24, 26, 0.1));
  border-radius: 999px;
  font-size: 0.95rem;
  color: var(--page-ink, #14181a);
}

.zone-note {
  max-width: 640px;
  margin: 2rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--page-text, #555);
}


/* ================================================== */
/*              BANDE TÉLÉPHONE FINALE                */
/* ================================================== */

.cta-tel {
  background: var(--pausity-green-deep, #04512a);
  padding: 5rem 2rem;
  text-align: center;
}

.cta-tel h2 {
  margin: 0 0 0.8rem;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 400;
  color: #ffffff;
}

.cta-tel p {
  max-width: 520px;
  margin: 0 auto 2rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.7;
}

.cta-tel__numero {
  display: inline-block;
  font-family: "Playfair Display", Georgia, serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: 0.02em;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.35);
  padding-bottom: 6px;
  transition: border-color 0.25s ease;
}

.cta-tel__numero:hover,
.cta-tel__numero:focus-visible {
  border-bottom-color: #ffffff;
}


/* ================================================== */
/*                    RESPONSIVE                      */
/* ================================================== */

@media (max-width: 900px) {
  .coordonnees {
    grid-template-columns: 1fr;
    max-width: 460px;
  }

  .coordonnee {
    padding: 2rem 1.4rem;
  }
}

@media (max-width: 680px) {
  .cta-tel {
    padding: 3.5rem 1.2rem;
  }

  /* Sous 680px, le numero en une seule ligne deborderait :
     on l'autorise a se couper, la coupure se faisant entre
     les groupes de chiffres grace aux espaces insecables du HTML. */
  .cta-tel__numero {
    white-space: normal;
  }
}


@media (prefers-reduced-motion: reduce) {
  .coordonnee,
  .cta-tel__numero {
    transition: none;
  }

  a.coordonnee:hover {
    transform: none;
  }
}


/* La note peut desormais porter des liens vers les pages metiers.
   Sans cette regle ils sortiraient au style par defaut du navigateur,
   bleus et soulignes, seuls de leur espece sur tout le site. */
.zone-note a {
  color: var(--pausity-green-deep, #04512a);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 124, 52, 0.4);
  transition: border-color 0.2s ease;
}

.zone-note a:hover,
.zone-note a:focus-visible {
  border-bottom-color: var(--pausity-green, #007c34);
}