/* =====================================================
   HMM — Interactions : like, thumbs, vues, commentaires
   ===================================================== */

.hmm-inter {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Position variants */
.hmm-inter--bottom  { margin-top: auto; padding-top: 10px; }
.hmm-inter--top     { margin-bottom: 8px; }
.hmm-inter--overlay {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 3;
  background: rgba(0,0,0,.45);
  border-radius: 20px;
  padding: 4px 10px;
  gap: 10px;
}
.hmm-inter--overlay .hmm-inter__count,
.hmm-inter--overlay .hmm-inter__icon { color: #fff; }

/* Bouton de base */
.hmm-inter__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: var(--hmm-text-muted, #6c757d);
  text-decoration: none;
  transition: color .2s ease, transform .15s ease;
  line-height: 1;
}

.hmm-inter__btn:hover { color: var(--hmm-text, #1a1a2e); }
.hmm-inter__btn:active { transform: scale(.9); }
.hmm-inter__btn:disabled { opacity: .5; cursor: default; }

.hmm-inter__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: fill .2s ease, transform .2s ease;
}

.hmm-inter__count {
  font-variant-numeric: tabular-nums;
  min-width: 12px;
}

/* ── Like (cœur) */
.hmm-inter__like { color: var(--hmm-text-muted, #9ca3af); }
.hmm-inter__like:hover .hmm-inter__icon,
.hmm-inter__like:hover { color: var(--hmm-like-color, #e63946); }

.hmm-inter__like.is-liked {
  color: var(--hmm-like-color, #e63946);
  animation: hmm-beat .3s ease;
}
.hmm-inter__like.is-liked .hmm-inter__icon { stroke: var(--hmm-like-color, #e63946); }

@keyframes hmm-beat {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.3); }
  70%  { transform: scale(.9); }
  100% { transform: scale(1); }
}

/* ── Pouce haut */
.hmm-inter__thumb--up:hover,
.hmm-inter__thumb--up.is-active { color: #16a34a; }
.hmm-inter__thumb--up.is-active .hmm-inter__icon { stroke: #16a34a; }

/* ── Pouce bas */
.hmm-inter__thumb--down:hover,
.hmm-inter__thumb--down.is-active { color: #dc2626; }
.hmm-inter__thumb--down.is-active .hmm-inter__icon { stroke: #dc2626; }

/* ── Commentaires */
.hmm-inter__comments:hover { color: #2563eb; }

/* ── Vues (non cliquable) */
.hmm-inter__views { cursor: default; }