/* ═══ KRUCOIN badge — V4 rectangle compact ═══
 * Inclu via : <link rel="stylesheet" href="/coin-badge.css">
 * Le HTML attendu :
 *   <a href="/boutique" id="coinBadge" class="coin-badge" title="Tes KRUCOINS">
 *     <span class="coin-badge__icon"></span>
 *     <span class="coin-badge__value" id="coinBadgeValue">0</span>
 *     <span class="coin-badge__label">KRUCOINS</span>   ← masqué (a11y)
 *   </a>
 *
 * Design V4 : rectangle 10px à la même hauteur que les boutons RÉSEAUX
 * et user menu. Plus de pill rouge, plus d'animation float. Icône KRU
 * compacte inline + chiffre. Cohérent avec les autres éléments de nav.
 *
 * Le badge est caché par défaut (display:none) — il devient visible
 * (.show) quand coin-badge.js récupère un solde authentifié.
 */

.coin-badge{
  /* !important sur les visuels critiques car certaines pages ont des
   * inline `<style>` qui redéfinissaient le look V2 (gradient gold,
   * box-shadow lourd, border arrondie pill). Ces overrides ont la même
   * specificity que ce fichier — !important garantit que V5 gagne. */
  display:none;align-items:center;gap:9px;
  padding:9px 16px !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:none !important;
  transition:background .15s,border-color .15s,color .15s,transform .1s;
  text-decoration:none;
  color:rgba(220,220,225,.92);
  font-family:'DM Sans',system-ui,sans-serif;
  position:relative;
}
.coin-badge.show{display:inline-flex}
.coin-badge:hover{
  background:rgba(239,68,68,.06) !important;
  border-color:rgba(239,68,68,.30) !important;
  color:#fff !important;
  transform:none !important;
  box-shadow:none !important;
}
.coin-badge:active{transform:scale(.98) !important}
/* Neutralise le sheen ::before inline (gradient lumière diagonal V2) */
.coin-badge::before{content:none !important;background:none !important}

/* Icône KRU compacte inline — taille cohérente avec les icônes des
 * autres triggers nav (~16-18px). Pas d'animation float (visuellement
 * gênant à côté de boutons statiques).
 *
 * !important pour neutraliser les overrides inline des anciennes pages
 * (style="background:radial-gradient(...gold...)" + box-shadow lourd
 * qui donnaient le look "pièce dorée 3D" V2/V3). */
.coin-badge__icon{
  width:22px !important;height:22px !important;border-radius:0 !important;
  background:url('/icons/krucoin-logo.svg') center/contain no-repeat !important;
  filter:drop-shadow(0 1px 3px rgba(239,68,68,.55));
  box-shadow:none !important;
  flex-shrink:0;
}
/* Neutralise le pseudo ::after "K" inline des anciennes pages qui se
 * superposait sur le SVG kru → on ne veut que le SVG propre. */
.coin-badge__icon::after{content:none !important;display:none !important}
.coin-badge__value{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.25rem !important;letter-spacing:1px !important;
  color:#fff !important;
  line-height:1;
  font-variant-numeric:tabular-nums;
  text-shadow:none !important;
}
/* Label "KRUCOINS" reste masqué (a11y-safe : présent dans le DOM pour
 * les lecteurs d'écran, invisible visuellement). */
.coin-badge__label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Pop animation au update du solde (déclenché par coin-badge.js) */
@keyframes coinPop{
  0%{transform:scale(1)}
  35%{transform:scale(1.06);filter:brightness(1.2)}
  100%{transform:scale(1);filter:brightness(1)}
}
.coin-badge--pop{animation:coinPop .45s cubic-bezier(.22,1,.36,1)}

@media(max-width:720px){
  .coin-badge{padding:7px 13px !important;gap:7px}
  .coin-badge__icon{width:19px !important;height:19px !important}
  .coin-badge__value{font-size:1.05rem !important;letter-spacing:.8px !important}
}