/* ============================================================
   rs1/contact-infos — colonne latérale d'une page de contact
   Engagement de délai, coordonnées du siège, lien réalisations.
   Tokens uniquement ; .mp-carte et .mp-lien viennent de mp-tokens.css.
   ============================================================ */

.mp-contact-infos{
  display: grid;
  gap: 1.25rem;
  color: var(--mp-texte);
}

/* Colonne latérale collante sur desktop, sous l'en-tête */
@media (min-width: 961px){
  .mp-contact-infos{
    position: sticky;
    top: calc(var(--computed-main-header-height, 5rem) + 1.5rem);
  }
}

.mp-contact-infos p{ margin: 0 }

.mp-contact-infos__titre{
  margin: 0 0 1rem;
  font-family: var(--mp-font-titre);
  font-size: var(--mp-t-h3);
  font-weight: 800;
  line-height: var(--mp-lh-titre);
  letter-spacing: var(--mp-ls-titre);
  color: var(--mp-encre);
}

.mp-contact-infos__texte{
  font-size: var(--mp-t-sm);
  line-height: var(--mp-lh-texte);
  color: var(--mp-texte);
}

/* ── Engagement de délai ─────────────────────────────────── */
.mp-contact-infos__engagement{
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.35rem 1.5rem;
  background: var(--mp-turquoise-voile);
  border-radius: var(--mp-r);
}
.mp-contact-infos__pastille{
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--mp-r-pill);
  background: var(--mp-blanc);
  color: var(--mp-turquoise-fonce);
}
.mp-contact-infos__accroche{
  margin-bottom: .3rem !important;
  font-family: var(--mp-font-titre);
  font-size: var(--mp-t-lg);
  font-weight: 800;
  line-height: var(--mp-lh-titre);
  letter-spacing: var(--mp-ls-titre);
  color: var(--mp-encre);
}

/* ── Coordonnées ─────────────────────────────────────────── */
.mp-contact-infos__carte{ padding: 1.6rem 1.5rem }

.mp-contact-infos__coordonnees{
  display: grid;
  gap: 1rem;
  font-style: normal;
}
.mp-contact-infos__ligne{
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  font-size: var(--mp-t-sm);
  line-height: var(--mp-lh-texte);
}
.mp-contact-infos__ligne > svg{
  flex: none;
  margin-top: .15rem;
  color: var(--mp-bleu);
}
.mp-contact-infos__adresse{ color: var(--mp-encre) }
.mp-contact-infos__ligne .mp-lien{ margin-top: .35rem }

.mp-contact-infos__contact{
  color: var(--mp-encre);
  font-weight: 600;
  text-decoration: none;
  overflow-wrap: anywhere;
  border-radius: 4px;
}
.mp-contact-infos__contact:hover{ color: var(--mp-turquoise-fonce) }

.mp-contact-infos a:focus-visible{
  outline: 3px solid var(--mp-bleu);
  outline-offset: 3px;
}

/* ── Réalisations ────────────────────────────────────────── */
.mp-contact-infos__realisations{
  padding: 1.4rem 1.5rem;
  border: 1px dashed var(--mp-trait);
  border-radius: var(--mp-r);
}
.mp-contact-infos__realisations .mp-contact-infos__titre{
  margin-bottom: .45rem;
  font-size: var(--mp-t-lg);
}
.mp-contact-infos__realisations .mp-lien{ margin-top: .8rem }

@media (prefers-reduced-motion: reduce){
  .mp-contact-infos__contact{ transition: none }
}