/* ══════════════════════════════════════════════════════════════════════════
   LE CŒUR AIMÉ — Sonothèque · 15/09/2026 · demande de Maha
   « le cœur ne reste pas en rouge donc je ne sais pas si ça a marché »

   ⛔ LA CAUSE, mesurée : `html[data-theme="clair"] .p-btn{ color:var(--ink)
   !important }` (sono-clair.css:141) écrasait `.p-btn.like.liked{color:var(--rose)}`
   de la page. Le like PARTAIT bien (le toast le disait), mais AUCUN pixel ne
   changeait. Et même sans ce !important, le cœur du bandeau est dessiné en
   `fill="none"` : un contour rose pâle (#ff7a8a) sur un fond crème, c'est-à-dire
   rien. On ne corrige donc pas une couleur, on donne un ÉTAT VISIBLE :
   le cœur se REMPLIT, devient ROUGE, prend une aura qui respire et BAT.

   Cette feuille est chargée APRÈS sono-clair.css — c'est elle qui a le dernier
   mot, et elle ne touche à rien d'autre qu'au cœur.
   ══════════════════════════════════════════════════════════════════════════ */

/* Le rouge n'est pas le même sur une pierre claire et sur du bois sombre :
   #DC1C3C tient 5,2:1 sur le crème #F7F5F1, et s'éteindrait sur le bois. */
html{
  --coeur:#DC1C3C;
  --coeur-vif:#FF2E4D;
  --coeur-aura:rgba(220,28,60,.50);
  --coeur-aura-douce:rgba(220,28,60,.20);
}
html[data-theme="bois"]{
  --coeur:#FF4257;
  --coeur-vif:#FF7383;
  --coeur-aura:rgba(255,66,87,.52);
  --coeur-aura-douce:rgba(255,66,87,.22);
}

/* ─── 1. LE CŒUR DU BANDEAU (#bLike) ─────────────────────────────────────── */

/* Avant le clic : le survol annonce déjà le rouge — pas l'or de tous les autres
   boutons. Un geste qui ne dit pas ce qu'il va faire n'est pas un geste. */
html .p-btn.like{position:relative}
html .p-btn.like:hover{color:var(--coeur) !important;background:rgba(220,28,60,.08) !important}

/* Après le clic : PLEIN, ROUGE, et il ne repasse jamais en or au survol. */
html .p-btn.like.liked,
html[data-theme] .p-btn.like.liked,
html .p-btn.like.liked:hover,
html[data-theme] .p-btn.like.liked:hover{color:var(--coeur) !important}
html .p-btn.like.liked:hover{background:rgba(220,28,60,.10) !important}
html .p-btn.like.liked svg{
  fill:var(--coeur) !important;
  stroke:var(--coeur) !important;
  filter:drop-shadow(0 2px 7px var(--coeur-aura));
  transform-origin:50% 56%;
  animation:coeur-battement 2.8s ease-in-out infinite;
}

/* L'AURA — un vrai élément, jamais un pseudo : `.p-btn[data-tip]::after` et
   `::before` portent déjà l'infobulle, et un élément n'a que deux pseudos. */
html .p-btn.like .like-aura{
  position:absolute;inset:-5px;border-radius:50%;
  pointer-events:none;opacity:0;transition:opacity .3s ease;
}
html .p-btn.like.liked .like-aura{
  opacity:1;
  background:radial-gradient(circle at 50% 54%,var(--coeur-aura-douce) 0%,rgba(0,0,0,0) 68%);
  animation:coeur-respire 2.8s ease-in-out infinite;
}
/* Deux anneaux décalés d'un demi-temps : l'onde part du cœur et s'en va. */
html .p-btn.like.liked .like-aura::before,
html .p-btn.like.liked .like-aura::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--coeur-aura);
  animation:coeur-onde 2.8s ease-out infinite;
}
html .p-btn.like.liked .like-aura::after{animation-delay:1.4s}

/* L'INSTANT DU CLIC — le cœur se gonfle d'un coup et l'aura éclate.
   Ces règles portent une classe de plus : elles battent le repos. */
html .p-btn.like.liked.pop svg{animation:coeur-pop .66s cubic-bezier(.2,1.5,.4,1)}
html .p-btn.like.liked.pop .like-aura{animation:coeur-eclat .66s ease-out}
html .p-btn.like.liked.pop .like-aura::before,
html .p-btn.like.liked.pop .like-aura::after{animation:coeur-onde-clic .66s ease-out}
html .p-btn.like.liked.pop .like-aura::after{animation-delay:.12s}

/* ─── 2. LES CŒURS DES RANGÉES (.tr-like) ────────────────────────────────── */
/* Ici le cœur est DÉJÀ plein (ICO.coeur) : il lui manquait le rouge et l'aura.
   ⛔ Pas de battement permanent sur une liste : soixante cœurs qui pulsent en
   même temps, ce n'est plus une émotion, c'est un stroboscope. Seul bat celui
   du morceau en train de jouer. */
/* ⛔ La rangée a besoin d'un cran de spécificité DE PLUS que le bandeau :
   `html[data-theme="clair"] .tr-like.liked{color:var(--rose)!important}`
   (sono-clair.css:319) est à (0,3,1) et gagnait — la rangée sortait dans
   l'ancien rose sombre #B23A52 pendant que le bandeau était en #DC1C3C.
   Mesuré au retour sur la page, pas supposé. */
html .tr-like.liked,
html[data-theme] .tr-like.liked{
  color:var(--coeur) !important;
  background:radial-gradient(circle at 50% 52%,var(--coeur-aura-douce) 0%,rgba(0,0,0,0) 70%);
}
html .tr-like.liked svg{filter:drop-shadow(0 1px 5px var(--coeur-aura-douce))}
html .tr-like.liked:hover,
html[data-theme] .tr-like.liked:hover{color:var(--coeur-vif) !important;background:rgba(220,28,60,.12)}
html .track-row.playing .tr-like.liked svg{
  transform-origin:50% 56%;
  animation:coeur-battement 2.8s ease-in-out infinite;
}
html .tr-like.pop svg{transform-origin:50% 56%;animation:coeur-pop .66s cubic-bezier(.2,1.5,.4,1)}

/* ─── 3. LES BATTEMENTS ──────────────────────────────────────────────────── */
/* Un cœur ne fait pas « boum … boum » : il fait « boum-boum … ». Deux pics
   rapprochés puis un silence — c'est ce qui le rend vivant plutôt que mécanique. */
@keyframes coeur-battement{
  0%,100%{transform:scale(1)}
  8%     {transform:scale(1.15)}
  17%    {transform:scale(1.02)}
  26%    {transform:scale(1.09)}
  38%    {transform:scale(1)}
}
@keyframes coeur-respire{
  0%,100%{opacity:.6;transform:scale(1)}
  50%    {opacity:1;transform:scale(1.09)}
}
@keyframes coeur-onde{
  0%  {transform:scale(.7);opacity:0}
  16% {opacity:.7}
  100%{transform:scale(1.5);opacity:0}
}
@keyframes coeur-pop{
  0%  {transform:scale(.72)}
  35% {transform:scale(1.42)}
  62% {transform:scale(.95)}
  100%{transform:scale(1)}
}
@keyframes coeur-eclat{
  0%  {opacity:1;transform:scale(.55)}
  100%{opacity:1;transform:scale(1)}
}
@keyframes coeur-onde-clic{
  0%  {transform:scale(.55);opacity:.95;border-width:2.5px}
  100%{transform:scale(2.1);opacity:0;border-width:1px}
}

/* ─── 3 bis. LE RETOUR EN ARRIÈRE QUI REJOUE ─────────────────────────────── */
/* [PRÉCÉDENT 2026-09-15] Passé 3 s, « précédent » relance le morceau en cours
   (le geste de Spotify). Sans signe, on croit que le bouton n'a rien fait :
   l'icône recule d'un pas et revient. C'est la même leçon que le cœur —
   une action qui ne se VOIT pas n'a pas eu lieu, pour la personne. */
html .p-btn.rejoue svg{animation:geste-rejoue .6s cubic-bezier(.2,1.4,.4,1)}
@keyframes geste-rejoue{
  0%  {transform:translateX(0) scale(1)}
  28% {transform:translateX(-5px) scale(.93)}
  62% {transform:translateX(1.5px) scale(1.07)}
  100%{transform:translateX(0) scale(1)}
}

/* ─── 4. CEUX QUI NE VEULENT PAS DE MOUVEMENT ────────────────────────────── */
/* L'état reste entièrement lisible sans une seule animation : rouge + plein. */
@media (prefers-reduced-motion:reduce){
  html .p-btn.like.liked svg,
  html .p-btn.like.liked .like-aura,
  html .p-btn.like.liked .like-aura::before,
  html .p-btn.like.liked .like-aura::after,
  html .track-row.playing .tr-like.liked svg,
  html .tr-like.pop svg,
  html .p-btn.rejoue svg,
  html .p-btn.like.liked.pop svg{animation:none !important}
  html .p-btn.like.liked .like-aura{opacity:1}
}