/* HAVOCKS — récompenses d'un jeu (🏆 Platine PlayStation, 🌟 Mythic Xbox), à côté du titre « Mon expérience »
   Fiche du jeu et carte « Mon expérience » d'un test. La bulle s'affiche au survol, au focus clavier, et au toucher (classe
   « ouverte » posée par assets/js/recompenses.js). Elle reste DANS l'écran : alignée sur le bord DROIT de l'icône (elle s'ouvre
   vers l'intérieur : les icônes sont près du bord droit sur un petit écran), largeur bornée. */
.xp-titre{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; }
/* Hauteur NULLE : les boutons (zone de clic de 30 x 30 px, confortable au doigt) débordent au-dessus et au-dessous, centrés sur la
   ligne du titre, sans jamais l'agrandir, quelle que soit la taille des emojis selon le système. Le contenu de la carte ne bouge
   donc pas d'un pixel par rapport à une fiche sans récompense. */
.recompenses{ display:inline-flex; align-items:center; gap:4px; height:0; }
.recompense{ position:relative; display:inline-flex; }
.recompense-btn{
  display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; cursor:help;
  border:1px solid transparent; border-radius:8px; background:transparent; font-size:1.05rem; line-height:1;
}
.recompense-btn:hover{ border-color:rgba(255,255,255,0.22); background:rgba(255,255,255,0.05); }
.recompense-btn:focus-visible{ outline:2px solid #00C2D1; outline-offset:2px; }
.recompense-bulle{
  position:absolute; top:calc(100% + 8px); right:0; z-index:20; width:max-content; max-width:min(240px, 80vw);
  padding:8px 12px; border-radius:10px; background:rgba(18,21,28,0.96); border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 6px 20px rgba(0,0,0,0.5); color:#fff; font-size:0.85rem; font-weight:600; letter-spacing:normal;
  text-transform:none; white-space:nowrap; pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .15s ease, visibility .15s ease;
}
.recompense:hover .recompense-bulle, .recompense-btn:focus-visible + .recompense-bulle, .recompense.ouverte .recompense-bulle{ opacity:1; visibility:visible; }
@media (prefers-reduced-motion: reduce){ .recompense-bulle{ transition:none; } }
/* Carte « Mon expérience » d'un test ou d'un article : l'espace sous le titre passe du h2 à la rangée titre + icônes.
   Sélecteur ENFANT DIRECT (>) : le cadre du haut de la fiche d'un jeu porte aussi la classe aside-card (section.aside-card.fiche-entete),
   mais son .xp-titre est plus profond (dans .xp-entete, qui porte déjà l'espace) : il ne doit recevoir aucune marge. */
.aside-card > .xp-titre{ margin-bottom:14px; }     /* = la marge d'origine du h2 : la liste ne bouge pas */
.aside-card > .xp-titre h2{ margin-bottom:0; }
/* Icônes en image (assets/img/recompenses/) */
.recompense-img{ display:inline-block; vertical-align:middle; flex:none; }
.recompense-btn .recompense-img{ display:block; width:22px; height:22px; }
.recompense-bulle{ display:inline-flex; align-items:center; gap:7px; }
.recompense-bulle .recompense-img{ width:18px; height:18px; }