/**
 * Melanin Stories — assets/css/components/share-buttons.css
 * Boutons de partage réseaux sociaux + copier le lien.
 */

.ms-share {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid var(--ms-line);
}

.ms-share__label {
  font-family: var(--ms-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ms-charcoal);
  opacity: 0.7;
}

.ms-share__btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ms-line);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ms-share__btn svg {
  width: 16px;
  height: 16px;
  fill: var(--ms-ink);
}

.ms-share__btn:hover {
  border-color: var(--ms-red);
}

.ms-share__btn:hover svg {
  fill: var(--ms-red);
}

.ms-share__copy.is-copied::after {
  content: '✓';
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ms-ink);
  color: var(--ms-paper);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
}