/**
 * Icônes des réseaux sociaux Premium — isolé du thème Base (.social-links / main.css).
 *
 * Une seule rangée de pastilles carrées, rendue par scripts/lib/premium-social-icons.js,
 * partagée par le pied de page et le menu hamburger. Les couleurs viennent des
 * variables --ps-* : le pied de page clair les redéfinit, rien n'est écrit en dur.
 *
 * Survol : la pastille et le glyphe grandissent ensemble (scale 1.12) et se
 * soulèvent de 3 px, avec un léger rebond. L'infobulle nomme le réseau ; elle est
 * portée par le lien lui-même (attribut data-premium-social-label) pour rester en
 * dehors de la transformation.
 */

.tpl-premium .premium-social {
  /* Surface sombre par défaut : le menu hamburger est toujours noir. */
  --ps-size: 40px;
  --ps-radius: 8px;
  --ps-glyph-size: 20px;
  --ps-gap: 10px;
  --ps-surface: rgba(255, 255, 255, 0.1);
  --ps-surface-hover: rgba(255, 255, 255, 0.18);
  --ps-glyph: rgba(255, 255, 255, 0.88);
  --ps-glyph-hover: #fff;
  --ps-ring: rgba(255, 255, 255, 0.9);
  --ps-lift: -3px;
  --ps-scale: 1.12;
  /* Rebond discret, proche d'un ressort (raideur 400, amortissement 18). */
  --ps-ease: cubic-bezier(0.34, 1.4, 0.64, 1);
  --ps-duration: 0.26s;
  --ps-tip-bg: rgba(0, 0, 0, 0.9);
  --ps-tip-color: #fff;
  /* Sur fond noir, la bulle se confondrait avec le panneau sans ce filet. */
  --ps-tip-border: rgba(255, 255, 255, 0.18);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ps-gap);
}

/* Le lien est ciblé par `a.premium-social__btn` : premium.css colore tous les
   liens d'une page (`[data-premium-page="…"] a`) et l'emporterait sinon. */
.tpl-premium .premium-social a.premium-social__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--ps-size);
  height: var(--ps-size);
  padding: 0;
  border-radius: var(--ps-radius);
  color: var(--ps-glyph);
  text-decoration: none;
  transition: color var(--ps-duration) var(--ps-ease);
}

/* La pastille est peinte par ::before : le lien, lui, ne bouge pas, donc
   l'infobulle ne subit pas l'agrandissement. */
.tpl-premium .premium-social__btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--ps-surface);
  transition: transform var(--ps-duration) var(--ps-ease),
    background-color var(--ps-duration) var(--ps-ease);
}

.tpl-premium .premium-social__glyph {
  position: relative;
  display: block;
  width: var(--ps-glyph-size);
  height: var(--ps-glyph-size);
  transition: transform var(--ps-duration) var(--ps-ease);
}

.tpl-premium .premium-social a.premium-social__btn:hover,
.tpl-premium .premium-social a.premium-social__btn:focus-visible {
  color: var(--ps-glyph-hover);
}

.tpl-premium .premium-social__btn:hover::before,
.tpl-premium .premium-social__btn:focus-visible::before {
  background: var(--ps-surface-hover);
  transform: translateY(var(--ps-lift)) scale(var(--ps-scale));
}

.tpl-premium .premium-social__btn:hover .premium-social__glyph,
.tpl-premium .premium-social__btn:focus-visible .premium-social__glyph {
  transform: translateY(var(--ps-lift)) scale(var(--ps-scale));
}

.tpl-premium .premium-social__btn:active::before,
.tpl-premium .premium-social__btn:active .premium-social__glyph {
  transform: translateY(-1px) scale(1.04);
}

.tpl-premium .premium-social__btn:focus-visible {
  outline: 2px solid var(--ps-ring);
  outline-offset: 3px;
}

/* Infobulle — le texte vient de l'attribut, donc du catalogue des réseaux. */
.tpl-premium .premium-social__btn::after {
  content: attr(data-premium-social-label);
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 8px;
  padding: 6px 10px;
  border: 1px solid var(--ps-tip-border);
  border-radius: 6px;
  background: var(--ps-tip-bg);
  color: var(--ps-tip-color);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 6px) scale(0.92);
  transition: opacity var(--ps-duration) var(--ps-ease),
    transform var(--ps-duration) var(--ps-ease);
  z-index: 2;
}

/* Pas d'infobulle au doigt : elle resterait collée après le tap. */
@media (hover: hover) {
  .tpl-premium .premium-social__btn:hover::after,
  .tpl-premium .premium-social__btn:focus-visible::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
  }
}

/* Pied de page clair : mêmes pastilles, contraste inversé. */
.tpl-premium[data-premium-page] .premium-footer[data-theme="light"] .premium-social {
  --ps-surface: rgba(17, 17, 17, 0.07);
  --ps-surface-hover: rgba(17, 17, 17, 0.12);
  --ps-glyph: rgba(17, 17, 17, 0.78);
  --ps-glyph-hover: #111;
  --ps-ring: rgba(17, 17, 17, 0.9);
  --ps-tip-border: transparent;
}

/* 2.3.3 — mouvement système réduit : on garde le changement de couleur, pas le saut. */
@media (prefers-reduced-motion: reduce) {
  .tpl-premium .premium-social {
    --ps-lift: 0px;
    --ps-scale: 1;
  }
  .tpl-premium .premium-social__btn::after {
    transform: translate(-50%, 0) scale(1);
  }
}