/**
 * pp-like.css
 * - Respecte la charte couleur du site
 * - Accessible, micro-interactions, toast style
 * Place: wp-content/themes/votre-child/pp-like.css
 */

/* Design tokens */
:root{
  --brand-primary: #f59914;
  --brand-accent:  #1ea5de;
  --text-on-primary: #ffffff;
  --text-default: #111111;
  --muted: #6b6b6b;
  --radius: 8px;
  --transition-fast: 160ms;
}

/* Wrapper */
.pp-like-wrapper { display:inline-flex; align-items:center; gap:10px; font-family:inherit; }

/* Button base */
.pp-like-button {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:var(--radius);
  border:none;
  background:var(--brand-primary);
  color:var(--text-on-primary);
  cursor:pointer;
  transition: transform .08s ease, background var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
  font-weight:600;
  font-size:14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

/* Icon */
.pp-like-icon { font-size:16px; line-height:1; display:inline-block; }

/* Hover / focus: accent bleu */
.pp-like-button:hover,
.pp-like-button:focus {
  background:var(--brand-accent);
  color:var(--text-on-primary);
  transform:translateY(-2px);
  outline:none;
  box-shadow: 0 6px 18px rgba(30,165,222,0.12);
}

/* Active */
.pp-like-button:active { transform:translateY(0); }

/* Liked state: keep brand identity but signal success */
.pp-like-button.pp-liked {
  background: linear-gradient(180deg, var(--brand-primary), #e68900);
  color:var(--text-on-primary);
  pointer-events:auto; /* keep pointer-events available; JS can disable if desired */
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.06);
}
.pp-like-button.pp-liked .pp-like-icon { transform:scale(1.06); transition: transform .12s ease; }

/* Count */
.pp-like-count {
  font-weight:700;
  min-width:48px;
  text-align:right;
  color:var(--text-default);
}

/* Meta small (avatars / trending) */
.pp-like-meta { font-size:12px; color:var(--muted); margin-left:6px; }

/* Accessible focus visible */
.pp-like-button:focus { box-shadow: 0 0 0 3px rgba(30,165,222,0.14); }

/* Toast style override (if not present) */
#pp-like-toast { font-size:14px; }

/* Small screens */
@media (max-width:420px) {
  .pp-like-button { padding:8px 10px; font-size:13px; }
  .pp-like-count { min-width:36px; font-size:13px; }
}