/* ==========================================================================
   .pm-social — bloc « Suivez-nous »
   Figma : Frame 163 — titre puis 6 liens, gap 24 / 12.
   ========================================================================== */

.pm-social {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-l);
}

.pm-social__list {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-xs);
}

.pm-social__link {
  /* flex, et non inline-flex : en inline-flex chaque lien s'asseyait sur la
     ligne de base de son <li> et y ajoutait l'espace des jambages, soit ~3,7px
     par ligne — 22px de trop sur les six réseaux. En flex, la hauteur du bloc
     est exactement celle de la maquette (204px). */
  display: flex;
  align-items: center;
  gap: var(--pm-space-3xs);
  min-height: var(--pm-icon-size);

  /* Largeur au contenu : la cible cliquable s'arrête au libellé, comme dans la
     maquette où chaque ligne fait la largeur de son texte (91px, 95px, 41px…). */
  width: fit-content;

  font-family: var(--pm-text-interface-family);
  font-size: var(--pm-text-interface-size);
  font-weight: var(--pm-text-interface-weight);
  line-height: var(--pm-text-interface-height);
  letter-spacing: var(--pm-text-interface-spacing);
}

/* Aucune variante fournie. Bleu au survol, par cohérence avec le système. */
.pm-social__link {
  transition: color var(--pm-duration) var(--pm-easing);
}

.pm-social__link:hover {
  color: var(--pm-color-hover);
}

/* Deux colonnes dans le footer. En multi-colonnes CSS pour la même raison que
   les liens du footer : l'ordre du DOM reste l'ordre de lecture. */
.pm-social__list--columns {
  display: block;
  columns: 2;
  column-gap: var(--pm-space-xs);
}

.pm-social__list--columns li {
  break-inside: avoid;
  margin-bottom: var(--pm-space-xs);
}