/* ───────────────────────────────────────────────
   FAVORIS — bouton de nav (trigger + badge)

   Ces règles étaient injectées par favorites.js dans un <style>. Or le script est
   chargé en pied de page : le header s'affichait donc AVANT que le CSS n'existe, et
   le <svg> du cœur — qui n'a pas d'attributs width/height — était peint à sa taille
   par défaut (300×150) le temps d'une frame, puis retombait à 16px. D'où le cœur
   géant au chargement de chaque page.
   Elles vivent maintenant dans une vraie feuille chargée dans le <head>, comme
   celles du bouton panier (cart-ui.css) et du modal de rappel (recontact.css).
   ─────────────────────────────────────────────── */

.fav-trigger {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: var(--ink); cursor: pointer; text-decoration: none;
  border: 1.5px solid var(--rule); border-radius: 100px;
  padding: 8px 16px; font-size: 13px; font-weight: 600; font-family: inherit;
  transition: background .2s, color .2s, border-color .2s;
}
.fav-trigger:hover { border-color: var(--ink); color: var(--ink); }
.fav-trigger svg { width: 16px; height: 16px; transition: fill .2s, stroke .2s, transform .2s; }
.fav-trigger.has-favs svg { fill: var(--terra); stroke: var(--terra); }
.fav-trigger.has-favs:hover svg { transform: scale(1.12); }
.fav-trigger .fav-count {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 100px;
  background: var(--terra); color: #fff; font-size: 11px; font-weight: 700;
  display: none; align-items: center; justify-content: center; line-height: 1;
}
.fav-trigger .fav-count.show { display: inline-flex; }
@keyframes favBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.fav-trigger.bump svg { animation: favBump .4s ease; }
