/* ══ BADGES DANS LA BARRE DU HAUT ════════════════════════════
   Les badges que le membre a activés s'alignent à gauche de son avatar.
   Au survol : une carte apparaît sous la barre (nom + devise) et le badge
   joue SON animation, choisie badge par badge dans la page Badges.

   ─ Le principe ─
   Chaque animation est une SCÈNE qui raconte le badge : un ballon qui part
   au fond des filets pour Rematch, un viseur qui verrouille pour une mort
   subite, une lanterne qui s'éveille pour un nouveau membre... Le commun est
   volontairement discret (le badge jaillit, s'allume, une onde part) : c'est
   ce que chaque scène fait de PLUS qui la rend unique. Une version où tout
   badge avait les mêmes rayons et les mêmes rubans donnait 17 soleils
   identiques de couleurs différentes.

   ─ Les couches (de l'arrière vers l'avant) ─
     .chb-rayons   gerbe de rayons            ┐ décor optionnel :
     .chb-aura     halo flou (commun)         │ seules les scènes qui
     .chb-ruban×2  rubans d'énergie en orbite │ en ont besoin les
     .chb-orbe     anneau d'énergie           ┘ allument
     .chb-arr      décor ARRIÈRE  ┐ points d'ancrage au centre du badge,
     .chb-arr2     décor ARRIÈRE  │ de taille nulle : on dessine avec leurs
     .chb-av       décor AVANT    ┘ ::before / ::after, placés autour
     .chb-ring     le cercle du badge
     .chb-onde     l'onde de choc d'entrée (commune, jouée une fois)
     .chb-ico > .chb-ico-in   l'icône (jaillissement commun / geste propre)
     .chb-fx > i×12           les particules (--i = rang, --a = angle)

   ─ Contrainte de place ─
   La barre est collée en haut de la fenêtre : au-dessus du centre d'un badge
   il n'y a que ~30 px. Les éléments qui comptent (ballon, couronne, texte)
   restent donc entre -28 px et +50 px en hauteur ; seuls les halos et les
   rayons, qui ne sont que de la lumière, peuvent être rognés par le bord.

   Tout est préfixé « chb- » : le scope CSS est global, comme le scope JS. */

.chb-nav{ display:flex; align-items:center; gap:14px; margin-right:10px; }
.chb-nav:empty{ display:none; }

/* Plus de place dans la barre : les derniers badges cèdent leur place (voir chbAjuster) */
.chb-badge.chb-cache{ display:none; }
.chb-plus{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; height:26px; padding:0 8px; border-radius:13px; cursor:pointer;
  font-family:inherit; font-size:12px; font-weight:700; line-height:1; color:#e8eaf0; font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  transition:background .15s ease, border-color .15s ease; }
.chb-plus:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3); }
.chb-plus:focus-visible{ outline:2px solid #f59e0b; outline-offset:2px; }
.chb-plus[hidden]{ display:none; }

.chb-badge{
  position:relative; width:34px; height:34px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  cursor:default; --bc:#4f6ef7; overflow:visible; isolation:isolate;
}
.chb-badge:is(:hover,.chb-force){ z-index:5; }

/* ══ COUCHES ═══════════════════════════════════════════════════ */

.chb-rayons{
  position:absolute; left:50%; top:50%; width:128px; height:128px; margin:-64px 0 0 -64px;
  border-radius:50%; pointer-events:none; z-index:-3; opacity:0;
  background:repeating-conic-gradient(from 0deg, rgba(255,255,255,.22) 0deg 3deg, transparent 3deg 15deg);
  background:repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--bc) 70%, #fff) 0deg 2.5deg,
    color-mix(in srgb, var(--bc) 25%, transparent) 2.5deg 5deg, transparent 5deg 15deg);
  -webkit-mask:radial-gradient(circle, #000 14%, rgba(0,0,0,.55) 34%, transparent 64%);
          mask:radial-gradient(circle, #000 14%, rgba(0,0,0,.55) 34%, transparent 64%);
  transition:opacity .45s ease;
  animation:chbTour 22s linear infinite; animation-play-state:paused;
}
@keyframes chbTour{ to{ transform:rotate(360deg); } }
@keyframes chbTourInv{ to{ transform:rotate(-360deg); } }

.chb-aura{
  position:absolute; left:50%; top:50%; width:88px; height:88px; margin:-44px 0 0 -44px;
  border-radius:50%; pointer-events:none; z-index:-2; opacity:0;
  background:rgba(255,255,255,.16);
  background:radial-gradient(circle,
    color-mix(in srgb, var(--bc) 70%, #fff) 0%,
    color-mix(in srgb, var(--bc) 50%, transparent) 22%,
    color-mix(in srgb, var(--bc) 15%, transparent) 48%, transparent 70%);
  filter:blur(7px); transition:opacity .4s ease;
}

.chb-ruban{
  position:absolute; left:50%; top:50%; width:72px; height:72px; margin:-36px 0 0 -36px;
  border-radius:50%; pointer-events:none; z-index:-1; opacity:0;
  border:2.5px solid transparent; border-top-color:var(--bc);
  border-right-color:rgba(255,255,255,.35);
  border-right-color:color-mix(in srgb, var(--bc) 45%, transparent);
  filter:drop-shadow(0 0 3px var(--bc)) drop-shadow(0 0 7px var(--bc));
  transition:opacity .45s ease;
}
.chb-ruban.r1{ animation:chbRuban1 2.6s linear infinite; animation-play-state:paused; }
.chb-ruban.r2{ width:58px; height:58px; margin:-29px 0 0 -29px; border-width:2px;
  animation:chbRuban2 3.4s linear infinite; animation-play-state:paused; }
@keyframes chbRuban1{
  from{ transform:perspective(170px) rotateX(70deg) rotateY(-16deg) rotateZ(0deg); }
  to  { transform:perspective(170px) rotateX(70deg) rotateY(-16deg) rotateZ(360deg); }
}
@keyframes chbRuban2{
  from{ transform:perspective(170px) rotateX(64deg) rotateY(28deg) rotateZ(360deg); }
  to  { transform:perspective(170px) rotateX(64deg) rotateY(28deg) rotateZ(0deg); }
}

.chb-orbe{
  position:absolute; inset:-5px; border-radius:50%; pointer-events:none; z-index:0; opacity:0;
  background:conic-gradient(from 0deg, transparent 0deg, var(--bc) 50deg, #fff 70deg, var(--bc) 90deg,
    transparent 140deg, transparent 180deg, var(--bc) 230deg, #fff 250deg, var(--bc) 270deg, transparent 320deg);
  filter:blur(1.8px); transition:opacity .35s ease;
  -webkit-mask:radial-gradient(circle, transparent 54%, #000 60%, #000 66%, transparent 72%);
          mask:radial-gradient(circle, transparent 54%, #000 60%, #000 66%, transparent 72%);
  animation:chbTour 1.8s linear infinite; animation-play-state:paused;
}

/* Points d'ancrage des décors : taille nulle, au centre du badge */
.chb-arr, .chb-arr2, .chb-av{ position:absolute; left:50%; top:50%; width:0; height:0; pointer-events:none; }
.chb-arr, .chb-arr2{ z-index:0; }
.chb-av{ z-index:6; }
.chb-arr::before, .chb-arr::after, .chb-arr2::before, .chb-arr2::after,
.chb-av::before, .chb-av::after{ content:''; position:absolute; opacity:0; pointer-events:none; }

.chb-onde{
  position:absolute; inset:0; border-radius:50%; pointer-events:none; z-index:2; opacity:0;
  border:3px solid #fff; border-color:color-mix(in srgb, var(--bc) 45%, #fff);
  box-shadow:0 0 12px var(--bc), inset 0 0 10px var(--bc);
}

.chb-ring{
  position:absolute; inset:0; border-radius:50%; z-index:1;
  background:rgba(255,255,255,.05);
  background:radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--bc) 30%, transparent) 0%, rgba(8,10,18,.55) 75%);
  border:1px solid rgba(255,255,255,.14);
  border:1px solid color-mix(in srgb, var(--bc) 36%, transparent);
  transition:box-shadow .35s ease, transform .55s cubic-bezier(.2,1.7,.4,1), border-color .3s ease;
}

.chb-ico{
  position:relative; z-index:3; width:24px; height:24px;
  display:flex; align-items:center; justify-content:center; font-size:17px; line-height:1;
  transition:transform .6s cubic-bezier(.2,1.8,.4,1), filter .35s ease;
}
.chb-ico-in{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; transform-origin:50% 55%; }
.chb-ico img{ width:100%; height:100%; object-fit:contain; display:block; }

.chb-fx{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.chb-fx i{
  position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  border-radius:50%; opacity:0; pointer-events:none;
  background:#fff; box-shadow:0 0 4px #fff, 0 0 9px var(--bc), 0 0 16px var(--bc);
  --a:calc(var(--i) * 30deg); --d:calc(var(--i) * -.13s); --t:1; --r:34px;
}
.chb-fx i:nth-child(even){ --t:.6; --r:26px; }
.chb-fx::before, .chb-fx::after{ content:''; position:absolute; opacity:0; pointer-events:none; }

/* ══ LE COMMUN : discret, pour laisser la place à la scène ════ */
.chb-badge:is(:hover,.chb-force) .chb-aura{
  opacity:1; animation:chbEclosion .8s cubic-bezier(.2,1,.4,1) both, chbSouffle 2.4s ease-in-out .8s infinite;
}
.chb-badge:is(:hover,.chb-force) .chb-onde{ animation:chbOndeChoc .75s cubic-bezier(.15,.7,.3,1) 1 both; }
.chb-badge:is(:hover,.chb-force) .chb-ring{
  transform:scale(1.14); border-color:color-mix(in srgb, var(--bc) 90%, #fff);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--bc) 40%, transparent),
             0 0 18px color-mix(in srgb, var(--bc) 75%, transparent),
             0 0 34px color-mix(in srgb, var(--bc) 40%, transparent),
             inset 0 0 14px color-mix(in srgb, var(--bc) 45%, transparent);
}
.chb-badge:is(:hover,.chb-force) .chb-ico{
  transform:scale(1.38) translateY(-1px);
  filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 7px var(--bc)) drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.chb-badge.chb-force .chb-aura{ animation:chbSouffle 2.4s ease-in-out infinite; }
.chb-badge.chb-force .chb-onde{ animation:chbOndeChoc 2.8s cubic-bezier(.15,.7,.3,1) infinite; }

@keyframes chbEclosion{
  0%  { opacity:0;  transform:scale(.3); }
  35% { opacity:1;  transform:scale(1.45); filter:blur(4px) brightness(1.8); }
  100%{ opacity:.9; transform:scale(1); }
}
@keyframes chbSouffle{ 0%,100%{ opacity:.75; transform:scale(.92); } 50%{ opacity:1; transform:scale(1.1); } }
@keyframes chbOndeChoc{
  0%  { opacity:.9; transform:scale(1);   border-width:3px; }
  100%{ opacity:0;  transform:scale(3.6); border-width:1px; }
}

/* Les décors optionnels, allumés seulement par les scènes qui les utilisent */
.chb-badge:is([data-anim="scintille"],[data-anim="eclat"],[data-anim="couronne"],[data-anim="legende"],
              [data-anim="aura"],[data-anim="stade"],[data-anim="maitre"]):is(:hover,.chb-force) .chb-rayons{ opacity:.95; animation-play-state:running; }
.chb-badge:is([data-anim="tournoie"],[data-anim="aura"],[data-anim="legende"],[data-anim="tricolore"]):is(:hover,.chb-force) .chb-ruban{
  opacity:1; animation-play-state:running; }
.chb-badge:is([data-anim="tournoie"],[data-anim="flamme"],[data-anim="legende"],[data-anim="aura"],[data-anim="maitre"]):is(:hover,.chb-force) .chb-orbe{
  opacity:1; animation-play-state:running; }

/* ══ LA CARTE AU SURVOL ═══════════════════════════════════════ */
.chb-tip{
  /* SOUS le badge : au-dessus, le bord de la fenêtre la couperait */
  position:absolute; top:calc(100% + 16px); left:50%;
  transform:translate(-50%, -8px) scale(.94); transform-origin:50% 0;
  display:flex; align-items:center; gap:12px;
  padding:10px 16px 10px 12px; border-radius:14px; white-space:nowrap;
  background:linear-gradient(150deg, rgba(16,19,34,.97), rgba(8,9,17,.98));
  border:1px solid rgba(255,255,255,.18);
  border:1px solid color-mix(in srgb, var(--bc) 60%, transparent);
  box-shadow:0 14px 34px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.08);
  box-shadow:0 14px 34px rgba(0,0,0,.65), 0 0 26px color-mix(in srgb, var(--bc) 35%, transparent),
             inset 0 1px 0 rgba(255,255,255,.08);
  opacity:0; visibility:hidden; pointer-events:none; z-index:60;
  transition:opacity .2s ease .08s, transform .35s cubic-bezier(.2,1.5,.4,1) .08s, visibility .2s .08s;
}
.chb-badge:hover .chb-tip{ opacity:1; visibility:visible; transform:translate(-50%, 0) scale(1); }
.chb-tip::after{
  content:''; position:absolute; bottom:100%; left:50%; margin-left:-7px;
  border:7px solid transparent; border-bottom-color:rgba(60,70,110,.97);
  border-bottom-color:color-mix(in srgb, var(--bc) 60%, rgba(12,14,24,.97));
}
.chb-tip::before{
  content:''; position:absolute; left:14px; right:14px; top:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--bc), #fff, var(--bc), transparent); opacity:.8;
}
.chb-tip-ico{ width:32px; height:32px; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:22px;
  filter:drop-shadow(0 0 6px var(--bc)); }
.chb-tip-ico img{ width:100%; height:100%; object-fit:contain; }
.chb-tip-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.chb-tip-txt b{ font-family:'Cinzel', Georgia, serif; font-size:14px; line-height:1.2; font-weight:800; color:#f3f5ff; letter-spacing:.3px;
  text-shadow:0 0 12px color-mix(in srgb, var(--bc) 55%, transparent); }
.chb-tip-txt i{ font-style:normal; font-size:11px; letter-spacing:.3px; color:#9aa6c4;
  color:color-mix(in srgb, var(--bc) 65%, #c3cbe0); }
.chb-badge.chb-bord-d .chb-tip{ left:auto; right:-6px; transform:translate(0, -8px) scale(.94); }
.chb-badge.chb-bord-d:hover .chb-tip{ transform:translate(0, 0) scale(1); }
.chb-badge.chb-bord-d .chb-tip::after{ left:auto; right:14px; margin-left:0; }


/* ════════════════════════════════════════════════════════════
   ⚽  FOOTBALL - REMATCH
   ════════════════════════════════════════════════════════════ */

/* ── ⚽ BUT ! ─ le ballon part en cloche et finit au fond des filets ──
   La cage est à droite du badge ; le ballon vient d'en bas à gauche,
   les filets se gonflent à l'impact, « BUT ! » éclate, les flashs crépitent. */
@keyframes chbButBallon{
  0%,6%  { opacity:0; transform:translate(-34px, 24px) rotate(0deg) scale(.9); }
  10%    { opacity:1; }
  24%    { transform:translate(-8px, -15px) rotate(260deg) scale(1.05); }
  38%    { opacity:1; transform:translate(17px, -6px) rotate(520deg) scale(.82); }
  44%    { opacity:0; transform:translate(25px, -2px) rotate(600deg) scale(.6); }
  100%   { opacity:0; transform:translate(25px, -2px) rotate(600deg) scale(.6); }
}
@keyframes chbButCage{
  0%,4%  { opacity:0; transform:perspective(120px) rotateY(-28deg) scale(.6); }
  14%    { opacity:1; transform:perspective(120px) rotateY(-28deg) scale(1); }
  40%    { transform:perspective(120px) rotateY(-28deg) scale(1); }
  46%    { transform:perspective(120px) rotateY(-28deg) scale(1.14, 1.08) translateX(2px); }   /* les filets se gonflent */
  54%    { transform:perspective(120px) rotateY(-28deg) scale(.97, 1); }
  62%,86%{ opacity:1; transform:perspective(120px) rotateY(-28deg) scale(1); }
  100%   { opacity:0; transform:perspective(120px) rotateY(-28deg) scale(.9); }
}
@keyframes chbButMot{
  0%,42% { opacity:0; transform:translate(-100%, -50%) scale(.2) rotate(-12deg); }
  50%    { opacity:1; transform:translate(-100%, -50%) scale(1.35) rotate(-6deg); }
  58%,84%{ opacity:1; transform:translate(-100%, -50%) scale(1) rotate(-6deg); }
  100%   { opacity:0; transform:translate(-100%, -50%) scale(.9) rotate(-6deg); }
}
@keyframes chbButFlash{
  0%,44%  { opacity:0; transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(0); }
  48%     { opacity:1; transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(calc(var(--t) * 1.8)); }
  56%     { opacity:0; transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(0); }
  100%    { opacity:0; }
}
@keyframes chbButIco{
  0%,44%{ transform:scale(1) rotate(0deg); }
  50%   { transform:scale(1.18) rotate(-8deg); filter:brightness(1.6); }
  60%   { transform:scale(1.05) rotate(4deg); }
  70%,100%{ transform:scale(1) rotate(0deg); }
}
.chb-badge[data-anim="but"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbButIco 2.6s ease-in-out infinite; }
/* La cage : poteaux et barre en blanc, filet en quadrillage */
.chb-badge[data-anim="but"]:is(:hover,.chb-force) .chb-arr::before{
  left:12px; top:-14px; width:30px; height:26px; transform-origin:0 50%;
  border:2px solid #f4f7ff; border-left:none; border-radius:0 3px 3px 0;
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.55) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 1px, transparent 1px 5px),
    rgba(255,255,255,.04);
  box-shadow:0 0 8px rgba(255,255,255,.45), inset 0 0 10px rgba(255,255,255,.18);
  animation:chbButCage 2.6s ease-out infinite;
}
.chb-badge[data-anim="but"]:is(:hover,.chb-force) .chb-av::before{
  content:'\26BD\FE0F'; left:-6px; top:-7px; font-size:12px; line-height:1;
  filter:drop-shadow(0 0 4px #fff) drop-shadow(0 2px 2px rgba(0,0,0,.6));
  animation:chbButBallon 2.6s cubic-bezier(.35,.1,.3,1) infinite;
}
.chb-badge[data-anim="but"]:is(:hover,.chb-force) .chb-av::after{
  content:'BUT\00A0!'; left:-20px; top:2px; font:900 12px/1 'Cinzel', Georgia, serif; letter-spacing:.6px;
  white-space:nowrap; color:#fff; -webkit-text-stroke:.5px rgba(0,0,0,.6);
  text-shadow:0 0 6px var(--bc), 0 0 14px var(--bc), 0 1px 0 #000;
  animation:chbButMot 2.6s cubic-bezier(.2,1.4,.4,1) infinite;
}
/* Les flashs des photographes au moment du but */
.chb-badge[data-anim="but"]:is(:hover,.chb-force) .chb-fx i{
  width:4px; height:4px; margin:-2px 0 0 -2px;
  background:#fff; box-shadow:0 0 6px #fff, 0 0 14px #fff;
  animation:chbButFlash 2.6s ease-out calc(var(--i) * .03s) infinite;
}

/* ── ⚽ JONGLE ─ le ballon tourne autour du badge, passe derrière, revient devant ──
   Deux ballons sur la même trajectoire : l'un devant l'icône (moitié basse de
   l'ellipse), l'autre derrière (moitié haute). Le relais se fait sur les côtés,
   là où le ballon ne recouvre pas l'icône : on ne voit jamais la bascule. */
@keyframes chbOrbiteBallon{
  0%   { transform:translate(0px, 9px)     rotate(0deg)   scale(1.12); }
  12.5%{ transform:translate(17px, 6.4px)  rotate(90deg)  scale(1.06); }
  25%  { transform:translate(25px, 0px)    rotate(180deg) scale(.96); }
  37.5%{ transform:translate(17px, -6.4px) rotate(270deg) scale(.84); }
  50%  { transform:translate(0px, -9px)    rotate(360deg) scale(.78); }
  62.5%{ transform:translate(-17px, -6.4px) rotate(450deg) scale(.84); }
  75%  { transform:translate(-25px, 0px)   rotate(540deg) scale(.96); }
  87.5%{ transform:translate(-17px, 6.4px) rotate(630deg) scale(1.06); }
  100% { transform:translate(0px, 9px)     rotate(720deg) scale(1.12); }
}
@keyframes chbBallonDevant{ 0%,24%{ opacity:1; } 26%,74%{ opacity:0; } 76%,100%{ opacity:1; } }
@keyframes chbBallonDerriere{ 0%,24%{ opacity:0; } 26%,74%{ opacity:.85; } 76%,100%{ opacity:0; } }
@keyframes chbJongleIco{
  0%   { transform:translateY(-3px) scale(1.06); }
  10%  { transform:translateY(0) scale(1); }
  90%  { transform:translateY(0) scale(1); }
  100% { transform:translateY(-3px) scale(1.06); }
}
@keyframes chbTouche{   /* la petite gerbe à chaque contact, sous le badge */
  0%   { opacity:1; transform:translate(calc((var(--i) - 5.5) * 1.5px), 14px) scale(var(--t)); }
  14%  { opacity:0; transform:translate(calc((var(--i) - 5.5) * 3.6px), 22px) scale(0); }
  100% { opacity:0; }
}
.chb-badge[data-anim="jongle"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbJongleIco 1.6s ease-out infinite; }
.chb-badge[data-anim="jongle"]:is(:hover,.chb-force) .chb-av::before,
.chb-badge[data-anim="jongle"]:is(:hover,.chb-force) .chb-arr::before{
  content:'\26BD\FE0F'; left:-6px; top:-6px; font-size:12px; line-height:1;
  filter:drop-shadow(0 0 3px #fff) drop-shadow(0 2px 2px rgba(0,0,0,.6));
}
.chb-badge[data-anim="jongle"]:is(:hover,.chb-force) .chb-av::before{
  animation:chbOrbiteBallon 1.6s linear infinite, chbBallonDevant 1.6s linear infinite;
}
.chb-badge[data-anim="jongle"]:is(:hover,.chb-force) .chb-arr::before{
  animation:chbOrbiteBallon 1.6s linear infinite, chbBallonDerriere 1.6s linear infinite;
}
/* L'ellipse de la trajectoire, tracée en pointillés lumineux */
.chb-badge[data-anim="jongle"]:is(:hover,.chb-force) .chb-arr2::before{
  left:-27px; top:-11px; width:54px; height:22px; border-radius:50%; opacity:.55;
  border:1.5px dashed var(--bc); box-shadow:0 0 8px var(--bc);
  animation:chbScintil 1.6s ease-in-out infinite;
}
.chb-badge[data-anim="jongle"]:is(:hover,.chb-force) .chb-fx i{
  width:3px; height:3px; margin:-1.5px 0 0 -1.5px; animation:chbTouche 1.6s ease-out infinite;
}

/* ── 🏟️ STADE ─ deux projecteurs balaient la pelouse, le public mitraille ──
   Chaque faisceau est un triangle étroit, fin à la source et large au bout.
   Le gauche part d'en bas à gauche, le droit d'en bas à droite ; tous deux
   pivotent autour de leur source et viennent croiser le badge. */
@keyframes chbProjoG{ 0%,100%{ transform:rotate(-4deg); }  50%{ transform:rotate(-32deg); } }
@keyframes chbProjoD{ 0%,100%{ transform:rotate(4deg); }   50%{ transform:rotate(32deg); } }
@keyframes chbPublic{
  0%,100%{ opacity:0; transform:translate(calc((var(--i) - 5.5) * 9px), calc(19px + var(--t) * 5px)) scale(0); }
  4%     { opacity:1; transform:translate(calc((var(--i) - 5.5) * 9px), calc(19px + var(--t) * 5px)) scale(calc(var(--t) * 1.7)); }
  10%    { opacity:0; transform:translate(calc((var(--i) - 5.5) * 9px), calc(19px + var(--t) * 5px)) scale(0); }
}
@keyframes chbStarIco{ 0%,100%{ transform:scale(1); filter:brightness(1); } 50%{ transform:scale(1.1); filter:brightness(1.5); } }
.chb-badge[data-anim="stade"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbStarIco 2.4s ease-in-out infinite; }
.chb-badge[data-anim="stade"]:is(:hover,.chb-force) .chb-arr::before,
.chb-badge[data-anim="stade"]:is(:hover,.chb-force) .chb-arr::after{
  top:6px; width:76px; height:24px; opacity:.85; mix-blend-mode:screen; filter:blur(1.4px);
}
/* Gauche : source à gauche (pointe du triangle), le faisceau s'ouvre vers la droite */
.chb-badge[data-anim="stade"]:is(:hover,.chb-force) .chb-arr::before{
  left:-62px; transform-origin:0 50%;
  clip-path:polygon(0 50%, 100% 0, 100% 100%);
  background:linear-gradient(90deg, #fff 0%, color-mix(in srgb, var(--bc) 55%, #fff) 30%, transparent 100%);
  animation:chbProjoG 2.4s ease-in-out infinite;
}
/* Droite : la même chose retournée, source à droite */
.chb-badge[data-anim="stade"]:is(:hover,.chb-force) .chb-arr::after{
  left:-14px; transform-origin:100% 50%;
  clip-path:polygon(100% 50%, 0 0, 0 100%);
  background:linear-gradient(270deg, #fff 0%, color-mix(in srgb, var(--bc) 55%, #fff) 30%, transparent 100%);
  animation:chbProjoD 2.4s ease-in-out -1.2s infinite;
}
.chb-badge[data-anim="stade"]:is(:hover,.chb-force) .chb-fx i{
  width:3px; height:3px; margin:-1.5px 0 0 -1.5px; background:#fff; box-shadow:0 0 5px #fff, 0 0 10px #fff;
  animation:chbPublic 1.9s linear calc(var(--i) * -.37s) infinite;
}

/* ── 👑 COURONNE ─ le sacre : la couronne descend et se pose, pluie d'or ── */
@keyframes chbCouronneTombe{
  /* elle entre par le haut de l'écran (le départ est volontairement hors champ) */
  0%     { opacity:0; transform:translate(-50%, -46px) rotate(-14deg) scale(.7); }
  10%    { opacity:1; }
  30%    { transform:translate(-50%, -27px) rotate(4deg) scale(1.05); }      /* contact */
  36%    { transform:translate(-50%, -31px) rotate(-2deg) scale(1); }        /* petit rebond */
  42%,100%{ opacity:1; transform:translate(-50%, -29px) rotate(0deg) scale(1); }
}
@keyframes chbCouronneEclat{
  0%,28% { opacity:0; transform:translate(-50%, -22px) scale(0) rotate(0deg); }
  34%    { opacity:1; transform:translate(-50%, -22px) scale(1.3) rotate(30deg); }
  48%    { opacity:0; transform:translate(-50%, -22px) scale(1.9) rotate(60deg); }
  100%   { opacity:0; }
}
@keyframes chbConfettiOr{
  0%  { opacity:0; transform:translate(calc((var(--i) - 5.5) * 6.5px), -30px) rotateX(0deg) rotateZ(0deg); }
  8%  { opacity:1; }
  100%{ opacity:0; transform:translate(calc((var(--i) - 5.5) * 6.5px + 6px), 40px) rotateX(720deg) rotateZ(260deg); }
}
@keyframes chbSacreIco{
  0%,28% { transform:scale(1); }
  34%    { transform:scale(.9) translateY(1.5px); }    /* le badge encaisse le poids de la couronne */
  44%    { transform:scale(1.08); filter:brightness(1.5); }
  60%,100%{ transform:scale(1); }
}
.chb-badge[data-anim="couronne"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbSacreIco 3s ease-out infinite; }
.chb-badge[data-anim="couronne"]:is(:hover,.chb-force) .chb-av::before{
  content:'\1F451'; left:0; top:0; font-size:15px; line-height:1;
  filter:drop-shadow(0 0 4px #ffd76a) drop-shadow(0 0 10px #ffb800) drop-shadow(0 2px 2px rgba(0,0,0,.6));
  animation:chbCouronneTombe 3s cubic-bezier(.4,0,.3,1) infinite;
}
.chb-badge[data-anim="couronne"]:is(:hover,.chb-force) .chb-av::after{
  left:0; top:0; width:26px; height:26px; margin:-13px 0 0 0;
  clip-path:polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  background:radial-gradient(circle, #fff 0%, #ffe28a 40%, transparent 70%);
  animation:chbCouronneEclat 3s ease-out infinite;
}
.chb-badge[data-anim="couronne"]:is(:hover,.chb-force) .chb-fx i{
  width:3px; height:6px; margin:-3px 0 0 -1.5px; border-radius:1px;
  background:linear-gradient(180deg, #fff6c8, #ffc83d); box-shadow:0 0 5px #ffd76a;
  animation:chbConfettiOr 2.2s linear var(--d) infinite;
}
.chb-badge[data-anim="couronne"]:is(:hover,.chb-force) .chb-fx i:nth-child(3n){ background:#fff; }

/* ── 🇫🇷 TRICOLORE ─ trois rubans bleu, blanc, rouge, et des confettis aux couleurs ── */
@keyframes chbFontaine{
  0%  { opacity:0; transform:translate(0, 4px) scale(.4) rotate(0deg); }
  10% { opacity:1; }
  45% { transform:translate(calc((var(--i) - 5.5) * 4.5px), -24px) scale(var(--t)) rotate(200deg); }
  100%{ opacity:0; transform:translate(calc((var(--i) - 5.5) * 7px), 34px) scale(calc(var(--t) * .8)) rotate(540deg); }
}
@keyframes chbDrapeauIco{
  0%,100%{ transform:skewY(0deg) rotate(0deg); }
  25%    { transform:skewY(-4deg) rotate(-3deg); }
  75%    { transform:skewY(4deg) rotate(3deg); }
}
.chb-badge[data-anim="tricolore"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbDrapeauIco 1.8s ease-in-out infinite; }
.chb-badge[data-anim="tricolore"] .chb-ruban.r1{ border-top-color:#2f6bff; border-right-color:rgba(47,107,255,.4);
  filter:drop-shadow(0 0 3px #2f6bff) drop-shadow(0 0 7px #2f6bff); }
.chb-badge[data-anim="tricolore"] .chb-ruban.r2{ border-top-color:#ff3b4a; border-right-color:rgba(255,59,74,.4);
  filter:drop-shadow(0 0 3px #ff3b4a) drop-shadow(0 0 7px #ff3b4a); }
/* Le ruban blanc, troisième couleur, sur son propre plan */
.chb-badge[data-anim="tricolore"]:is(:hover,.chb-force) .chb-arr::before{
  left:-32px; top:-32px; width:64px; height:64px; border-radius:50%; opacity:1;
  border:2px solid transparent; border-top-color:#fff; border-left-color:rgba(255,255,255,.35);
  filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #cfe0ff);
  animation:chbRubanBlanc 2.1s linear infinite;
}
@keyframes chbRubanBlanc{
  from{ transform:perspective(170px) rotateX(76deg) rotateY(4deg) rotateZ(0deg); }
  to  { transform:perspective(170px) rotateX(76deg) rotateY(4deg) rotateZ(360deg); }
}
.chb-badge[data-anim="tricolore"]:is(:hover,.chb-force) .chb-fx i{
  width:3.5px; height:6px; margin:-3px 0 0 -1.75px; border-radius:1px; box-shadow:none;
  animation:chbFontaine 2s ease-out var(--d) infinite;
}
.chb-badge[data-anim="tricolore"]:is(:hover,.chb-force) .chb-fx i:nth-child(3n)  { background:#2f6bff; }
.chb-badge[data-anim="tricolore"]:is(:hover,.chb-force) .chb-fx i:nth-child(3n+1){ background:#fff; }
.chb-badge[data-anim="tricolore"]:is(:hover,.chb-force) .chb-fx i:nth-child(3n+2){ background:#ff3b4a; }

/* ── ⚽ REBOND ─ le ballon saute, l'impact secoue le sol ── */
@keyframes chbRebond{
  0%  { transform:translateY(0) rotate(0deg) scale(1.14,.84); }
  12% { transform:translateY(-6px) rotate(60deg) scale(.95,1.07); }
  42% { transform:translateY(-15px) rotate(200deg) scale(1,1); }
  74% { transform:translateY(-4px) rotate(310deg) scale(1.02,.98); }
  88% { transform:translateY(0) rotate(350deg) scale(1.16,.82); }
  100%{ transform:translateY(0) rotate(360deg) scale(1.14,.84); }
}
@keyframes chbImpact{
  0%,84%{ opacity:0; transform:translate(0, 12px) scale(.2); }
  90%   { opacity:1; transform:translate(calc((var(--i) - 5.5) * 3px), 12px) scale(var(--t)); }
  100%  { opacity:0; transform:translate(calc((var(--i) - 5.5) * 5.5px), 6px) scale(calc(var(--t) * 1.6)); }
}
@keyframes chbAnneauSol{
  0%,84%{ opacity:0; transform:translateY(14px) scaleX(.3) scaleY(.3); }
  90%   { opacity:1; transform:translateY(14px) scaleX(1) scaleY(.3); }
  100%  { opacity:0; transform:translateY(14px) scaleX(2.2) scaleY(.5); }
}
.chb-badge[data-anim="rebond"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbRebond 1.2s cubic-bezier(.3,.6,.4,1) infinite; }
.chb-badge[data-anim="rebond"]:is(:hover,.chb-force) .chb-fx i{ animation:chbImpact 1.2s ease-out infinite; }
.chb-badge[data-anim="rebond"]:is(:hover,.chb-force) .chb-fx::before{
  left:50%; top:50%; width:30px; height:30px; margin:-15px 0 0 -15px; border-radius:50%;
  border:2px solid var(--bc); box-shadow:0 0 10px var(--bc);
  animation:chbAnneauSol 1.2s ease-out infinite;
}


/* ════════════════════════════════════════════════════════════
   🦀  CRAB GAME - combat de plateforme, mini-jeux mortels
   ════════════════════════════════════════════════════════════ */

/* ── 🦀 CRABE ─ les pinces claquent, deux fois, comme des coups au corps à corps ──
   Chaque pince est un croissant (bordure sur trois côtés) ; elles s'ouvrent,
   puis se referment sur le badge. Au contact : impact, étoile, « CLAC ! ». */
@keyframes chbPinceG{
  0%,100%{ transform:translate(-30px, -2px) rotate(-30deg); }
  22%    { transform:translate(-36px, -4px) rotate(-55deg); }     /* armée */
  30%    { transform:translate(-22px, 0)    rotate(5deg); }       /* CLAC */
  40%    { transform:translate(-30px, -2px) rotate(-30deg); }
  62%    { transform:translate(-36px, -4px) rotate(-55deg); }
  70%    { transform:translate(-22px, 0)    rotate(5deg); }
  80%    { transform:translate(-30px, -2px) rotate(-30deg); }
}
@keyframes chbPinceD{
  0%,100%{ transform:translate(30px, -2px) scaleX(-1) rotate(-30deg); }
  22%    { transform:translate(36px, -4px) scaleX(-1) rotate(-55deg); }
  30%    { transform:translate(22px, 0)    scaleX(-1) rotate(5deg); }
  40%    { transform:translate(30px, -2px) scaleX(-1) rotate(-30deg); }
  62%    { transform:translate(36px, -4px) scaleX(-1) rotate(-55deg); }
  70%    { transform:translate(22px, 0)    scaleX(-1) rotate(5deg); }
  80%    { transform:translate(30px, -2px) scaleX(-1) rotate(-30deg); }
}
@keyframes chbClacEtoile{
  0%,28%,40%,68%,80%,100%{ opacity:0; transform:translate(-50%,-50%) scale(0) rotate(0deg); }
  31%,71%{ opacity:1; transform:translate(-50%,-50%) scale(1.25) rotate(20deg); }
  36%,76%{ opacity:0; transform:translate(-50%,-50%) scale(1.8) rotate(40deg); }
}
@keyframes chbClacMot{
  0%,29%  { opacity:0; transform:translate(-50%, 0) scale(.3) rotate(-10deg); }
  33%     { opacity:1; transform:translate(-50%, 0) scale(1.3) rotate(-8deg); }
  40%,60% { opacity:1; transform:translate(-50%, 0) scale(1) rotate(-8deg); }
  69%     { opacity:0; transform:translate(-50%, 0) scale(.8) rotate(-8deg); }
  73%     { opacity:1; transform:translate(-50%, 0) scale(1.3) rotate(8deg); }
  80%,92% { opacity:1; transform:translate(-50%, 0) scale(1) rotate(8deg); }
  100%    { opacity:0; }
}
@keyframes chbCrabeIco{
  0%,28%,40%,68%,80%,100%{ transform:translate(0,0) scale(1); }
  31%,71%{ transform:translate(0,1px) scale(.88,1.08); filter:brightness(1.7); }   /* encaisse */
  34%,74%{ transform:translate(0,-1px) scale(1.1); }
}
@keyframes chbClacGerbe{
  0%,30%,70%{ opacity:0; transform:rotate(var(--a)) translateY(-6px) scale(0); }
  32%,72%   { opacity:1; transform:rotate(var(--a)) translateY(-12px) scale(var(--t)); }
  40%,80%   { opacity:0; transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(0); }
  100%      { opacity:0; }
}
.chb-badge[data-anim="crabe"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbCrabeIco 1.8s ease-out infinite; }
.chb-badge[data-anim="crabe"]:is(:hover,.chb-force) .chb-arr::before,
.chb-badge[data-anim="crabe"]:is(:hover,.chb-force) .chb-arr::after{
  left:-9px; top:-9px; width:18px; height:18px; border-radius:50%; opacity:1;
  border:5px solid var(--bc); border-right-color:transparent;
  box-shadow:0 0 8px var(--bc), inset 0 0 4px rgba(255,255,255,.4);
  filter:drop-shadow(0 0 4px var(--bc));
}
.chb-badge[data-anim="crabe"]:is(:hover,.chb-force) .chb-arr::before{ animation:chbPinceG 1.8s cubic-bezier(.5,0,.4,1.4) infinite; }
.chb-badge[data-anim="crabe"]:is(:hover,.chb-force) .chb-arr::after { animation:chbPinceD 1.8s cubic-bezier(.5,0,.4,1.4) infinite; }
.chb-badge[data-anim="crabe"]:is(:hover,.chb-force) .chb-av::before{
  left:0; top:0; width:30px; height:30px;
  clip-path:polygon(50% 0, 60% 35%, 98% 22%, 66% 50%, 98% 78%, 60% 65%, 50% 100%, 40% 65%, 2% 78%, 34% 50%, 2% 22%, 40% 35%);
  background:radial-gradient(circle, #fff 0%, #ffe9a0 35%, var(--bc) 70%);
  animation:chbClacEtoile 1.8s ease-out infinite;
}
.chb-badge[data-anim="crabe"]:is(:hover,.chb-force) .chb-av::after{
  content:'CLAC\00A0!'; left:0; top:-30px; font:900 11px/1 'Cinzel', Georgia, serif; letter-spacing:.6px;
  white-space:nowrap; color:#fff; -webkit-text-stroke:.5px rgba(0,0,0,.6);
  text-shadow:0 0 6px var(--bc), 0 0 12px var(--bc), 0 1px 0 #000;
  animation:chbClacMot 1.8s cubic-bezier(.2,1.4,.4,1) infinite;
}
.chb-badge[data-anim="crabe"]:is(:hover,.chb-force) .chb-fx i{ animation:chbClacGerbe 1.8s ease-out infinite; }

/* ── 🎯 VISEUR ─ mort subite : le viseur traque, se verrouille, et c'est fini ── */
@keyframes chbViseur{
  0%     { opacity:0; transform:translate(-50%,-50%) scale(2) rotate(-90deg); }
  10%    { opacity:1; }
  34%    { transform:translate(-50%,-50%) scale(1.08) rotate(-8deg); }
  38%    { transform:translate(-50%,-50%) scale(1.15) rotate(0deg); }        /* hésite... */
  42%    { transform:translate(-50%,-50%) scale(1) rotate(0deg); }           /* VERROUILLÉ */
  50%    { opacity:1; transform:translate(-50%,-50%) scale(.92) rotate(0deg); }
  62%    { opacity:0; transform:translate(-50%,-50%) scale(1.5) rotate(0deg); }
  100%   { opacity:0; transform:translate(-50%,-50%) scale(1.5) rotate(0deg); }
}
@keyframes chbViseurPoint{
  0%,40%,52%,100%{ opacity:0; transform:translate(-50%,-50%) scale(0); }
  43%    { opacity:1; transform:translate(-50%,-50%) scale(1.6); }
  47%    { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
@keyframes chbMortIco{
  0%,42% { transform:translate(0,0) rotate(0deg); filter:brightness(1); }
  44%    { transform:translate(-3px,1px) rotate(-12deg) scale(1.15); filter:brightness(2.4) saturate(0); }
  48%    { transform:translate(3px,-1px) rotate(10deg); filter:brightness(1.6) hue-rotate(-20deg); }
  52%    { transform:translate(-2px,0) rotate(-6deg); }
  58%    { transform:translate(0,2px) rotate(0deg) scale(.94); filter:brightness(.8) grayscale(.4); }
  80%,100%{ transform:translate(0,0) rotate(0deg) scale(1); filter:brightness(1); }
}
@keyframes chbMortFlash{
  0%,42%{ opacity:0; transform:scale(.5); }
  44%   { opacity:1; transform:scale(1.6); }
  70%,100%{ opacity:0; transform:scale(2.4); }
}
@keyframes chbMortEclats{
  0%,43%{ opacity:0; transform:rotate(var(--a)) translateY(-8px) scale(0); }
  45%   { opacity:1; transform:rotate(var(--a)) translateY(-14px) scale(var(--t)); }
  66%   { opacity:0; transform:rotate(var(--a)) translateY(calc(var(--r) * -1.15)) scale(.3); }
  100%  { opacity:0; }
}
.chb-badge[data-anim="viseur"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbMortIco 2.4s ease-out infinite; }
/* Le viseur : un cercle rouge, quatre crans, un point au centre */
.chb-badge[data-anim="viseur"]:is(:hover,.chb-force) .chb-av::before{
  left:0; top:0; width:46px; height:46px; border-radius:50%;
  border:2px solid #ff3b3b; box-shadow:0 0 8px #ff3b3b, inset 0 0 8px rgba(255,59,59,.5);
  background:
    linear-gradient(90deg, #ff3b3b, #ff3b3b) 50% 0 / 2px 9px no-repeat,
    linear-gradient(90deg, #ff3b3b, #ff3b3b) 50% 100% / 2px 9px no-repeat,
    linear-gradient(90deg, #ff3b3b, #ff3b3b) 0 50% / 9px 2px no-repeat,
    linear-gradient(90deg, #ff3b3b, #ff3b3b) 100% 50% / 9px 2px no-repeat;
  animation:chbViseur 2.4s cubic-bezier(.3,.7,.3,1) infinite;
}
.chb-badge[data-anim="viseur"]:is(:hover,.chb-force) .chb-av::after{
  left:0; top:0; width:5px; height:5px; border-radius:50%;
  background:#ff3b3b; box-shadow:0 0 6px #ff3b3b, 0 0 12px #ff0000;
  animation:chbViseurPoint 2.4s ease-out infinite;
}
/* Le coup : un éclair rouge derrière le badge */
.chb-badge[data-anim="viseur"]:is(:hover,.chb-force) .chb-arr::before{
  left:-36px; top:-36px; width:72px; height:72px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, #ff4d4d 25%, rgba(255,0,0,.35) 50%, transparent 70%);
  filter:blur(2px); animation:chbMortFlash 2.4s ease-out infinite;
}
.chb-badge[data-anim="viseur"]:is(:hover,.chb-force) .chb-fx i{
  width:2px; height:8px; margin:-4px 0 0 -1px; border-radius:1px;
  background:#ffd2d2; box-shadow:0 0 5px #ff3b3b, 0 0 10px #ff0000;
  animation:chbMortEclats 2.4s ease-out infinite;
}

/* ── 🚦 FEU ROUGE, FEU VERT ─ le mini-jeu : on bouge au vert, on se fige au rouge ──
   Au vert, les particules filent autour du badge. Au rouge, TOUT s'arrête net,
   un rayon rouge balaie le badge (le regard de la poupée), l'œil s'ouvre. */
@keyframes chbFeuAura{
  0%,44%  { box-shadow:0 0 18px 8px rgba(34,197,94,.75), 0 0 36px 14px rgba(34,197,94,.35); }
  48%     { box-shadow:0 0 18px 8px rgba(250,204,21,.8),  0 0 36px 14px rgba(250,204,21,.35); }
  52%,96% { box-shadow:0 0 22px 10px rgba(239,68,68,.85), 0 0 40px 16px rgba(239,68,68,.4); }
  100%    { box-shadow:0 0 18px 8px rgba(34,197,94,.75), 0 0 36px 14px rgba(34,197,94,.35); }
}
@keyframes chbFeuCourse{
  0%     { opacity:1; transform:rotate(var(--a)) translateY(-21px); background:#4ade80; box-shadow:0 0 6px #22c55e; }
  46%    { opacity:1; transform:rotate(calc(var(--a) + 280deg)) translateY(-21px); background:#4ade80; box-shadow:0 0 6px #22c55e; }
  50%,96%{ opacity:1; transform:rotate(calc(var(--a) + 280deg)) translateY(-21px); background:#ff5a5a; box-shadow:0 0 6px #ef4444; }
  100%   { opacity:1; transform:rotate(calc(var(--a) + 280deg)) translateY(-21px); background:#4ade80; }
}
@keyframes chbFeuRegard{
  0%,52% { opacity:0; transform:translate(-50%, -22px) scaleX(.3); }
  56%    { opacity:1; transform:translate(-50%, -18px) scaleX(1); }
  72%    { opacity:1; transform:translate(-50%, 18px)  scaleX(1); }
  80%    { opacity:1; transform:translate(-50%, -14px) scaleX(1); }
  94%    { opacity:0; transform:translate(-50%, -14px) scaleX(.4); }
  100%   { opacity:0; }
}
@keyframes chbFeuOeil{
  0%,50% { opacity:0; transform:translate(-50%, -30px) scaleY(0); }
  55%    { opacity:1; transform:translate(-50%, -30px) scaleY(1.2); }
  58%,92%{ opacity:1; transform:translate(-50%, -30px) scaleY(1); }
  96%,100%{ opacity:0; transform:translate(-50%, -30px) scaleY(0); }
}
@keyframes chbFeuIco{
  0%,8%,16%,24%,32%,40%{ transform:translateY(0) rotate(0deg); }
  4%,12%,20%,28%,36%,44%{ transform:translateY(-2px) rotate(-5deg); }   /* il court */
  48%,100%{ transform:translateY(0) rotate(0deg); filter:brightness(1); } /* figé */
  52%    { filter:brightness(.8) saturate(.6); }
}
.chb-badge[data-anim="feurouge"]:is(:hover,.chb-force) .chb-aura{
  background:transparent; filter:none; width:34px; height:34px; margin:-17px 0 0 -17px;
  animation:chbFeuAura 3.2s linear infinite;
}
.chb-badge[data-anim="feurouge"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbFeuIco 3.2s linear infinite; }
.chb-badge[data-anim="feurouge"]:is(:hover,.chb-force) .chb-fx i{
  width:4px; height:4px; margin:-2px 0 0 -2px; animation:chbFeuCourse 3.2s linear infinite;
}
.chb-badge[data-anim="feurouge"]:is(:hover,.chb-force) .chb-av::before{
  left:0; top:0; width:46px; height:3px; border-radius:2px;
  background:linear-gradient(90deg, transparent, #ff2d2d 20%, #fff 50%, #ff2d2d 80%, transparent);
  box-shadow:0 0 8px #ff2d2d, 0 0 16px #ff0000;
  animation:chbFeuRegard 3.2s ease-in-out infinite;
}
.chb-badge[data-anim="feurouge"]:is(:hover,.chb-force) .chb-av::after{
  content:'\1F441\FE0F'; left:0; top:0; font-size:12px; line-height:1;
  filter:drop-shadow(0 0 4px #ff2d2d) drop-shadow(0 0 8px #ff0000);
  animation:chbFeuOeil 3.2s ease-out infinite;
}

/* ── ⚔️ DUEL ─ deux lames se croisent au-dessus du badge, étincelles au choc ── */
@keyframes chbLameG{
  0%,100%{ opacity:0; transform:translate(-30px, 6px) rotate(-100deg); }
  12%    { opacity:1; }
  30%    { transform:translate(-10px, -12px) rotate(-10deg); }     /* CHOC */
  36%    { transform:translate(-13px, -10px) rotate(-30deg); }
  48%    { transform:translate(-10px, -12px) rotate(-10deg); }     /* second choc */
  56%    { transform:translate(-14px, -9px)  rotate(-35deg); }
  80%    { opacity:1; transform:translate(-24px, 2px) rotate(-80deg); }
  92%    { opacity:0; }
}
@keyframes chbLameD{
  0%,100%{ opacity:0; transform:translate(30px, 6px) scaleX(-1) rotate(-100deg); }
  12%    { opacity:1; }
  30%    { transform:translate(10px, -12px) scaleX(-1) rotate(-10deg); }
  36%    { transform:translate(13px, -10px) scaleX(-1) rotate(-30deg); }
  48%    { transform:translate(10px, -12px) scaleX(-1) rotate(-10deg); }
  56%    { transform:translate(14px, -9px)  scaleX(-1) rotate(-35deg); }
  80%    { opacity:1; transform:translate(24px, 2px) scaleX(-1) rotate(-80deg); }
  92%    { opacity:0; }
}
@keyframes chbDuelEtincelles{
  0%,29%,47%{ opacity:0; transform:translate(0,-20px) rotate(var(--a)) translateY(0) scale(0); }
  31%,49%   { opacity:1; transform:translate(0,-20px) rotate(var(--a)) translateY(-6px) scale(var(--t)); }
  40%,58%   { opacity:0; transform:translate(0,-20px) rotate(var(--a)) translateY(calc(var(--r) * -.75)) scale(0); }
  100%      { opacity:0; }
}
@keyframes chbDuelFlash{
  0%,29%,47%{ opacity:0; transform:translate(-50%, -50%) scale(0); }
  31%,49%   { opacity:1; transform:translate(-50%, -50%) scale(1.3); }
  38%,56%   { opacity:0; transform:translate(-50%, -50%) scale(2); }
  100%      { opacity:0; }
}
@keyframes chbDuelIco{
  0%,29%,47%,60%,100%{ transform:translateY(0) scale(1); }
  31%,49%{ transform:translateY(1.5px) scale(.94); filter:brightness(1.6); }
}
.chb-badge[data-anim="combat"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbDuelIco 2.4s ease-out infinite; }
.chb-badge[data-anim="combat"]:is(:hover,.chb-force) .chb-av::before,
.chb-badge[data-anim="combat"]:is(:hover,.chb-force) .chb-av::after{
  content:'\1F5E1\FE0F'; left:-8px; top:-8px; font-size:15px; line-height:1; transform-origin:50% 80%;
  filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 7px var(--bc));
}
.chb-badge[data-anim="combat"]:is(:hover,.chb-force) .chb-av::before{ animation:chbLameG 2.4s cubic-bezier(.5,0,.3,1.3) infinite; }
.chb-badge[data-anim="combat"]:is(:hover,.chb-force) .chb-av::after { animation:chbLameD 2.4s cubic-bezier(.5,0,.3,1.3) infinite; }
.chb-badge[data-anim="combat"]:is(:hover,.chb-force) .chb-arr2::before{
  left:0; top:-20px; width:30px; height:30px;
  clip-path:polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%);
  background:radial-gradient(circle, #fff 0%, #fff6c8 30%, var(--bc) 70%);
  animation:chbDuelFlash 2.4s ease-out infinite;
}
.chb-badge[data-anim="combat"]:is(:hover,.chb-force) .chb-fx i{
  width:2px; height:6px; margin:-3px 0 0 -1px; border-radius:1px; background:#fff6c8;
  box-shadow:0 0 5px #ffd76a, 0 0 9px #ff9a1f;
  animation:chbDuelEtincelles 2.4s ease-out infinite;
}

/* ── 💀 TREMBLE ─ malédiction : secousse, éclairs qui crépitent, fumée noire ── */
@keyframes chbTremble{
  0%,100%{ transform:translate(0,0) rotate(0deg); filter:brightness(1); }
  6%  { transform:translate(-3px,1px) rotate(-8deg); }
  12% { transform:translate(3px,-2px) rotate(8deg); filter:brightness(1.9) hue-rotate(-10deg); }
  18% { transform:translate(-3px,-1px) rotate(-7deg); }
  24% { transform:translate(3px,2px) rotate(7deg); filter:brightness(1.9); }
  30% { transform:translate(-2px,0) rotate(-4deg); }
  36% { transform:translate(2px,0) rotate(4deg); }
  42% { transform:translate(0,0) rotate(0deg); filter:brightness(1); }
}
@keyframes chbEclair{
  0%,100%{ opacity:0; transform:rotate(var(--a)) translateY(-18px) scaleY(0); }
  4%     { opacity:1; transform:rotate(var(--a)) translateY(-22px) scaleY(1); }
  9%     { opacity:0; }
  13%    { opacity:.8; }
  18%    { opacity:0; transform:rotate(var(--a)) translateY(-26px) scaleY(1.2); }
}
@keyframes chbFumee{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(.5); }
  30% { opacity:.85; }
  100%{ opacity:0; transform:translate(-50%,-70%) scale(1.9); }
}
.chb-badge[data-anim="tremble"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbTremble 1.4s ease-in-out infinite; }
.chb-badge[data-anim="tremble"]:is(:hover,.chb-force) .chb-arr::before{
  left:0; top:0; width:58px; height:58px; border-radius:50%;
  background:radial-gradient(circle, rgba(10,0,0,.85) 0%, rgba(60,0,0,.55) 40%, transparent 70%);
  filter:blur(4px); animation:chbFumee 1.4s ease-out infinite;
}
.chb-badge[data-anim="tremble"]:is(:hover,.chb-force) .chb-fx i{
  width:2px; height:14px; margin:-7px 0 0 -1px; border-radius:0;
  clip-path:polygon(40% 0, 100% 0, 55% 45%, 90% 45%, 10% 100%, 40% 55%, 0 55%);
  animation:chbEclair 1.4s linear var(--d) infinite;
}

/* ── 🎿 GLISSE ─ sur la glace : élan, traînée, poudreuse et fissures ── */
@keyframes chbGlisse{
  0%  { transform:translateX(-9px) rotate(-14deg) scale(.95); }
  42% { transform:translateX(9px) rotate(10deg) scale(1.12); filter:brightness(1.4); }
  66% { transform:translateX(3px) rotate(3deg) scale(1.03); }
  100%{ transform:translateX(-9px) rotate(-14deg) scale(.95); }
}
@keyframes chbPoudreuse{
  0%  { opacity:0; transform:translate(8px, calc((var(--i) - 5.5) * 1.6px)) scale(.3); }
  20% { opacity:1; }
  100%{ opacity:0; transform:translate(-38px, calc((var(--i) - 5.5) * 3.2px - 6px)) scale(calc(var(--t) * 1.4)); }
}
@keyframes chbVitesse{
  0%  { opacity:0; transform:translateX(10px) scaleX(.2); }
  30% { opacity:.9; transform:translateX(-10px) scaleX(1); }
  100%{ opacity:0; transform:translateX(-30px) scaleX(.4); }
}
@keyframes chbPiste{
  0%,100%{ opacity:.45; transform:translate(-50%, 0) scaleX(.85); }
  42%    { opacity:1;   transform:translate(-50%, 0) scaleX(1.1); }
}
@keyframes chbFissure{
  0%,38% { opacity:0; clip-path:inset(0 100% 0 0); }
  44%    { opacity:1; clip-path:inset(0 40% 0 0); }
  56%    { opacity:1; clip-path:inset(0 0 0 0); }
  90%,100%{ opacity:0; clip-path:inset(0 0 0 0); }
}
.chb-badge[data-anim="glisse"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbGlisse 1.5s cubic-bezier(.4,.1,.3,1) infinite; }
.chb-badge[data-anim="glisse"]:is(:hover,.chb-force) .chb-fx i{
  background:#f2faff; box-shadow:0 0 5px #fff, 0 0 10px #a8dcff;
  animation:chbPoudreuse 1.5s ease-out var(--d) infinite;
}
.chb-badge[data-anim="glisse"]:is(:hover,.chb-force) .chb-fx::before,
.chb-badge[data-anim="glisse"]:is(:hover,.chb-force) .chb-fx::after{
  left:0; width:34px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, #fff, var(--bc));
}
.chb-badge[data-anim="glisse"]:is(:hover,.chb-force) .chb-fx::before{ top:38%; animation:chbVitesse 1.5s ease-out infinite; }
.chb-badge[data-anim="glisse"]:is(:hover,.chb-force) .chb-fx::after { top:62%; animation:chbVitesse 1.5s ease-out -.4s infinite; }
/* La piste de glace sous le badge, avec son reflet */
.chb-badge[data-anim="glisse"]:is(:hover,.chb-force) .chb-arr::before{
  left:0; top:17px; width:76px; height:5px; border-radius:50%;
  background:radial-gradient(ellipse, #fff 0%, #bfe6ff 30%, rgba(120,200,255,.35) 60%, transparent 75%);
  filter:blur(1px); animation:chbPiste 1.5s ease-in-out infinite;
}
/* Les fissures dans la glace */
.chb-badge[data-anim="glisse"]:is(:hover,.chb-force) .chb-arr::after{
  left:-30px; top:15px; width:60px; height:10px;
  background:linear-gradient(170deg, transparent 44%, #e6f6ff 46%, transparent 49%),
             linear-gradient(10deg, transparent 50%, #e6f6ff 52%, transparent 55%),
             linear-gradient(160deg, transparent 60%, #cdeeff 62%, transparent 64%);
  filter:drop-shadow(0 0 3px #9fd8ff); animation:chbFissure 1.5s ease-out infinite;
}

/* ── ❄️ NEIGE ─ blizzard : tempête de flocons, anneau de givre ── */
@keyframes chbGivre{
  0%,100%{ filter:brightness(1) saturate(1); transform:scale(1) rotate(0deg); }
  50%    { filter:brightness(1.55) saturate(.7); transform:scale(1.08) rotate(30deg); }
}
@keyframes chbFlocon{
  0%  { opacity:0; transform:translate(calc((var(--i) - 5.5) * 6px), -30px) rotate(0deg) scale(calc(var(--t) * .6)); }
  12% { opacity:1; }
  88% { opacity:1; }
  100%{ opacity:0; transform:translate(calc((var(--i) - 5.5) * 6px - 14px), 40px) rotate(300deg) scale(var(--t)); }
}
.chb-badge[data-anim="neige"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbGivre 3s ease-in-out infinite; }
.chb-badge[data-anim="neige"]:is(:hover,.chb-force) .chb-fx i{
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px; background:#f2faff; border-radius:0; box-shadow:none;
  filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 6px #9fd8ff);
  clip-path:polygon(50% 0, 56% 40%, 93% 25%, 62% 50%, 93% 75%, 56% 60%, 50% 100%, 44% 60%, 7% 75%, 38% 50%, 7% 25%, 44% 40%);
  animation:chbFlocon 2.4s linear var(--d) infinite;
}
/* L'anneau de givre : des cristaux en pointillés qui tournent */
.chb-badge[data-anim="neige"]:is(:hover,.chb-force) .chb-arr::before{
  left:-27px; top:-27px; width:54px; height:54px; border-radius:50%; opacity:.9;
  border:3px dotted #dff3ff; box-shadow:0 0 10px #9fd8ff, inset 0 0 10px rgba(159,216,255,.5);
  animation:chbTour 7s linear infinite;
}


/* ════════════════════════════════════════════════════════════
   🏮  RANGS DE GUILDE - de la première lueur à la légende
   ════════════════════════════════════════════════════════════ */

/* ── 🕯️ ÉVEIL ─ nouveau membre : une étincelle, et la lanterne s'allume pour la première fois ── */
@keyframes chbEveilIco{
  0%,18% { filter:brightness(.35) grayscale(.8); transform:scale(.96); }
  26%    { filter:brightness(2.4) grayscale(0); transform:scale(1.18); }     /* elle prend */
  40%    { filter:brightness(1.2); transform:scale(1); }
  55%    { filter:brightness(1.45); }
  70%    { filter:brightness(1.15); }
  85%,100%{ filter:brightness(1.35); transform:scale(1); }
}
@keyframes chbEtincelleVient{
  0%     { opacity:0; transform:translate(-28px, 18px) scale(.6); }
  6%     { opacity:1; }
  22%    { opacity:1; transform:translate(0, 2px) scale(1); }
  26%,100%{ opacity:0; transform:translate(0, 2px) scale(2.4); }
}
@keyframes chbPremiereLueur{
  0%,22% { opacity:0; transform:translate(-50%,-50%) scale(.2); }
  28%    { opacity:1; transform:translate(-50%,-50%) scale(1.3); }
  60%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(1); }
}
@keyframes chbLucioleNee{
  0%,30% { opacity:0; transform:rotate(var(--a)) translateY(-6px) scale(0); }
  45%    { opacity:1; transform:rotate(calc(var(--a) + 40deg)) translateY(-16px) scale(var(--t)); }
  100%   { opacity:0; transform:rotate(calc(var(--a) + 120deg)) translateY(-24px) scale(0); }
}
.chb-badge[data-anim="eveil"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbEveilIco 3.2s ease-out infinite; }
.chb-badge[data-anim="eveil"]:is(:hover,.chb-force) .chb-av::before{
  left:-3px; top:-3px; width:6px; height:6px; border-radius:50%;
  background:#fff6c8; box-shadow:0 0 6px #fff, 0 0 12px #ffb02e, 0 0 20px #ff7a00;
  animation:chbEtincelleVient 3.2s cubic-bezier(.4,0,.2,1) infinite;
}
.chb-badge[data-anim="eveil"]:is(:hover,.chb-force) .chb-arr::before{
  left:0; top:0; width:50px; height:50px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,214,120,.9) 0%, rgba(255,160,40,.45) 35%, transparent 70%);
  filter:blur(3px); animation:chbPremiereLueur 3.2s ease-out infinite;
}
.chb-badge[data-anim="eveil"]:is(:hover,.chb-force) .chb-fx i:nth-child(-n+5){
  width:3px; height:3px; margin:-1.5px 0 0 -1.5px; background:#fff3c4; box-shadow:0 0 5px #ffd36b;
  animation:chbLucioleNee 3.2s ease-out calc(var(--i) * .12s) infinite;
}

/* ── 🏮 LANTERNE ─ membre : la lanterne se balance, sa lumière éclaire le sol, les lucioles tournent ── */
@keyframes chbBalance{
  0%,100%{ transform:rotate(-11deg); }
  50%    { transform:rotate(11deg); }
}
@keyframes chbCone{
  0%,100%{ transform:translate(-50%, 0) rotate(11deg); }
  50%    { transform:translate(-50%, 0) rotate(-11deg); }
}
@keyframes chbLucioleVol{
  0%   { opacity:0; transform:rotate(var(--a)) translate(calc(var(--r) * -.75), 0) scale(.3); }
  15%  { opacity:1; }
  35%  { transform:rotate(calc(var(--a) + 50deg)) translate(calc(var(--r) * -.9), 4px) scale(var(--t)); opacity:.3; }
  50%  { opacity:1; }
  70%  { transform:rotate(calc(var(--a) + 100deg)) translate(calc(var(--r) * -.7), -4px) scale(var(--t)); }
  100% { opacity:0; transform:rotate(calc(var(--a) + 150deg)) translate(calc(var(--r) * -.85), 0) scale(.3); }
}
.chb-badge[data-anim="lanterne"] .chb-ico-in{ transform-origin:50% -20%; }   /* pend à son anneau */
.chb-badge[data-anim="lanterne"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbBalance 2.2s ease-in-out infinite; }
/* Le cône de lumière qui tombe de la lanterne */
.chb-badge[data-anim="lanterne"]:is(:hover,.chb-force) .chb-arr::before{
  left:0; top:2px; width:56px; height:44px; opacity:.85; transform-origin:50% 0;
  clip-path:polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  background:linear-gradient(180deg, rgba(255,214,120,.85), rgba(255,170,60,.3) 55%, transparent);
  filter:blur(2.5px); animation:chbCone 2.2s ease-in-out infinite;
}
.chb-badge[data-anim="lanterne"]:is(:hover,.chb-force) .chb-fx i{
  width:3px; height:3px; margin:-1.5px 0 0 -1.5px; background:#fff3c4;
  box-shadow:0 0 5px #fff3c4, 0 0 10px #ffc94d, 0 0 16px #ff9d2e;
  animation:chbLucioleVol 3.4s ease-in-out var(--d) infinite;
}

/* ── 🏮 AURA ─ ancien, historique : halo royal, anneaux qui s'élargissent, lucioles en orbite ── */
@keyframes chbLanterne{
  0%,100%{ transform:scale(1) translateY(0); filter:brightness(1); }
  50%    { transform:scale(1.1) translateY(-1.5px); filter:brightness(1.7) saturate(1.3); }
}
@keyframes chbLuciole{
  0%  { opacity:0; transform:rotate(var(--a)) translateY(-12px) scale(.2); }
  20% { opacity:1; }
  80% { opacity:1; }
  100%{ opacity:0; transform:rotate(calc(var(--a) + 140deg)) translateY(calc(var(--r) * -1.05)) scale(calc(var(--t) * 1.2)); }
}
@keyframes chbAnneauLent{
  0%  { opacity:0;  transform:scale(.7) rotate(0deg); }
  25% { opacity:1; }
  100%{ opacity:0;  transform:scale(2.6) rotate(120deg); }
}
.chb-badge[data-anim="aura"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbLanterne 2.2s ease-in-out infinite; }
.chb-badge[data-anim="aura"]:is(:hover,.chb-force) .chb-fx::before,
.chb-badge[data-anim="aura"]:is(:hover,.chb-force) .chb-fx::after{
  inset:-2px; border-radius:50%; border:1.5px dashed var(--bc); box-shadow:0 0 8px var(--bc);
}
.chb-badge[data-anim="aura"]:is(:hover,.chb-force) .chb-fx::before{ animation:chbAnneauLent 2.6s ease-out infinite; }
.chb-badge[data-anim="aura"]:is(:hover,.chb-force) .chb-fx::after { animation:chbAnneauLent 2.6s ease-out -1.3s infinite; }
.chb-badge[data-anim="aura"]:is(:hover,.chb-force) .chb-fx i{ animation:chbLuciole 2.6s ease-in-out var(--d) infinite; }

/* ── 🌟 LÉGENDE ─ pilier, maître : un sceau arcanique tourne sous le badge, qui lévite ── */
@keyframes chbLevite{
  0%,100%{ transform:translateY(0) scale(1); filter:brightness(1.1); }
  50%    { transform:translateY(-3px) scale(1.08); filter:brightness(1.6) saturate(1.3); }
}
@keyframes chbSceau{
  from{ transform:translate(-50%,-50%) perspective(150px) rotateX(58deg) rotateZ(0deg); }
  to  { transform:translate(-50%,-50%) perspective(150px) rotateX(58deg) rotateZ(360deg); }
}
@keyframes chbSceauInv{
  from{ transform:translate(-50%,-50%) perspective(150px) rotateX(58deg) rotateZ(0deg); }
  to  { transform:translate(-50%,-50%) perspective(150px) rotateX(58deg) rotateZ(-360deg); }
}
@keyframes chbAscension{
  0%  { opacity:0; transform:rotate(var(--a)) translateY(-10px) translateX(0) scale(.3); }
  20% { opacity:1; }
  100%{ opacity:0; transform:rotate(calc(var(--a) * .2)) translateY(calc(var(--r) * -1.3)) translateX(calc((var(--i) - 5.5) * 1.5px)) scale(calc(var(--t) * 1.1)); }
}
.chb-badge[data-anim="legende"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbLevite 2.6s ease-in-out infinite; }
/* Le sceau : un hexagramme et un cercle de runes, à plat sous le badge, qui tournent en sens contraire */
.chb-badge[data-anim="legende"]:is(:hover,.chb-force) .chb-arr::before{
  left:0; top:14px; width:62px; height:62px; opacity:.95;
  clip-path:polygon(50% 0, 63% 25%, 93% 25%, 78% 50%, 93% 75%, 63% 75%, 50% 100%, 37% 75%, 7% 75%, 22% 50%, 7% 25%, 37% 25%);
  background:radial-gradient(circle, transparent 30%, color-mix(in srgb, var(--bc) 80%, #fff) 31%, var(--bc) 60%, transparent 62%);
  filter:drop-shadow(0 0 4px var(--bc));
  animation:chbSceau 9s linear infinite;
}
.chb-badge[data-anim="legende"]:is(:hover,.chb-force) .chb-arr::after{
  left:0; top:14px; width:74px; height:74px; border-radius:50%; opacity:.9;
  border:2px dotted #fff3c4; box-shadow:0 0 10px var(--bc), inset 0 0 12px color-mix(in srgb, var(--bc) 50%, transparent);
  animation:chbSceauInv 6s linear infinite;
}
.chb-badge[data-anim="legende"]:is(:hover,.chb-force) .chb-fx i{
  background:#fff6d8; box-shadow:0 0 5px #fff, 0 0 10px var(--bc), 0 0 18px var(--bc);
  animation:chbAscension 2.4s ease-out var(--d) infinite;
}


/* ── ⏳ SABLIER ─ ancien : le temps passé dans la guilde, un cadran qui tourne, le sable qui coule ── */
@keyframes chbAiguille{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }
@keyframes chbSable{
  0%  { opacity:0; transform:translate(calc((var(--i) - 5.5) * .7px), -26px) scale(calc(var(--t) * .8)); }
  12% { opacity:1; }
  85% { opacity:1; }
  100%{ opacity:0; transform:translate(calc((var(--i) - 5.5) * 2.6px), 30px) scale(var(--t)); }
}
@keyframes chbAncienIco{
  0%,100%{ transform:rotate(-6deg); filter:sepia(.2) brightness(1.1); }
  50%    { transform:rotate(6deg);  filter:sepia(0) brightness(1.5); }
}
.chb-badge[data-anim="sablier"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbAncienIco 3s ease-in-out infinite; }
/* Le cadran : douze graduations sur un anneau fin */
.chb-badge[data-anim="sablier"]:is(:hover,.chb-force) .chb-arr::before{
  left:-31px; top:-31px; width:62px; height:62px; border-radius:50%; opacity:.95;
  background:repeating-conic-gradient(from -1deg, #fff4d6 0deg 2deg, transparent 2deg 30deg);
  -webkit-mask:radial-gradient(circle, transparent 70%, #000 72%, #000 82%, transparent 84%);
          mask:radial-gradient(circle, transparent 70%, #000 72%, #000 82%, transparent 84%);
  filter:drop-shadow(0 0 3px var(--bc)) drop-shadow(0 0 6px var(--bc));
  animation:chbTour 20s linear infinite;
}
/* L'aiguille, qui fait le tour du cadran */
.chb-badge[data-anim="sablier"]:is(:hover,.chb-force) .chb-arr::after{
  left:-1px; top:-27px; width:2px; height:27px; border-radius:2px; opacity:.9; transform-origin:50% 100%;
  background:linear-gradient(0deg, transparent, #fff4d6 40%, #fff); box-shadow:0 0 6px var(--bc);
  animation:chbAiguille 2.4s linear infinite;
}
.chb-badge[data-anim="sablier"]:is(:hover,.chb-force) .chb-fx i{
  width:2.5px; height:2.5px; margin:-1.25px 0 0 -1.25px;
  background:#ffe7a6; box-shadow:0 0 4px #ffd36b, 0 0 8px var(--bc);
  animation:chbSable 1.6s linear var(--d) infinite;
}

/* ── 🏮 MAÎTRE ─ maître des lanternes : deux lanternes gravitent autour de lui ──
   Même relais devant / derrière que pour le ballon qui jongle : chaque lanterne
   existe deux fois (couche avant, couche arrière) et change de couche sur les
   côtés. La seconde lanterne a une demi-orbite de décalage. */
@keyframes chbOrbiteLanterne{
  0%   { transform:translate(0px, 10px)     scale(1.1); }
  12.5%{ transform:translate(19px, 7px)     scale(1.04); }
  25%  { transform:translate(27px, 0px)     scale(.94); }
  37.5%{ transform:translate(19px, -7px)    scale(.82); }
  50%  { transform:translate(0px, -10px)    scale(.76); }
  62.5%{ transform:translate(-19px, -7px)   scale(.82); }
  75%  { transform:translate(-27px, 0px)    scale(.94); }
  87.5%{ transform:translate(-19px, 7px)    scale(1.04); }
  100% { transform:translate(0px, 10px)     scale(1.1); }
}
.chb-badge[data-anim="maitre"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbLevite 2.6s ease-in-out infinite; }
.chb-badge[data-anim="maitre"]:is(:hover,.chb-force) :is(.chb-av, .chb-arr)::before,
.chb-badge[data-anim="maitre"]:is(:hover,.chb-force) :is(.chb-av, .chb-arr)::after{
  content:'\1F3EE'; left:-6px; top:-6px; font-size:11px; line-height:1;
  filter:drop-shadow(0 0 4px #ffb84d) drop-shadow(0 0 9px var(--bc));
}
.chb-badge[data-anim="maitre"]:is(:hover,.chb-force) .chb-av::before { animation:chbOrbiteLanterne 3s linear infinite, chbBallonDevant 3s linear infinite; }
.chb-badge[data-anim="maitre"]:is(:hover,.chb-force) .chb-arr::before{ animation:chbOrbiteLanterne 3s linear infinite, chbBallonDerriere 3s linear infinite; }
.chb-badge[data-anim="maitre"]:is(:hover,.chb-force) .chb-av::after  { animation:chbOrbiteLanterne 3s linear -1.5s infinite, chbBallonDevant 3s linear -1.5s infinite; }
.chb-badge[data-anim="maitre"]:is(:hover,.chb-force) .chb-arr::after { animation:chbOrbiteLanterne 3s linear -1.5s infinite, chbBallonDerriere 3s linear -1.5s infinite; }
.chb-badge[data-anim="maitre"]:is(:hover,.chb-force) .chb-fx i{
  background:#fff6d8; box-shadow:0 0 5px #fff, 0 0 10px var(--bc), 0 0 18px var(--bc);
  animation:chbAscension 2.4s ease-out var(--d) infinite;
}


/* ════════════════════════════════════════════════════════════
   ✨  ÉLÉMENTS ET CLASSIQUES
   ════════════════════════════════════════════════════════════ */

/* ── 🔥 FLAMME ─ brasier : trois langues de feu dressées derrière le badge ── */
@keyframes chbFlammeIco{
  0%,100%{ transform:translateY(0) skewX(0deg) scaleY(1); filter:brightness(1) saturate(1.1); }
  20%    { transform:translateY(-1.5px) skewX(-6deg) scaleY(1.1); filter:brightness(1.55) saturate(1.5); }
  40%    { transform:translateY(.5px) skewX(5deg) scaleY(.96); filter:brightness(1.2) saturate(1.3); }
  62%    { transform:translateY(-2px) skewX(-4deg) scaleY(1.12); filter:brightness(1.7) saturate(1.6); }
  82%    { transform:translateY(-.5px) skewX(3deg) scaleY(1.02); filter:brightness(1.3) saturate(1.3); }
}
@keyframes chbLangue{
  0%,100%{ transform:translate(-50%, -100%) rotate(var(--rot, 0deg)) scale(1, 1); }
  30%    { transform:translate(-50%, -100%) rotate(calc(var(--rot, 0deg) - 6deg)) scale(.9, 1.18); }
  60%    { transform:translate(-50%, -100%) rotate(calc(var(--rot, 0deg) + 5deg)) scale(1.05, .92); }
}
@keyframes chbBraise{
  0%  { opacity:0; transform:rotate(calc(var(--a) * .3 - 50deg)) translateY(8px) scale(calc(var(--t) * .4)); }
  15% { opacity:1; }
  100%{ opacity:0; transform:rotate(calc(var(--a) * .3 - 50deg)) translateY(calc(var(--r) * -1.3)) translateX(6px) scale(calc(var(--t) * 1.1)); }
}
.chb-badge[data-anim="flamme"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbFlammeIco .9s ease-in-out infinite; }
.chb-badge[data-anim="flamme"]:is(:hover,.chb-force) .chb-arr::before,
.chb-badge[data-anim="flamme"]:is(:hover,.chb-force) .chb-arr::after,
.chb-badge[data-anim="flamme"]:is(:hover,.chb-force) .chb-arr2::before{
  left:0; top:12px; opacity:.95; transform-origin:50% 100%;
  border-radius:50% 50% 45% 45% / 62% 62% 38% 38%;
  background:radial-gradient(ellipse at 50% 80%, #fff6d0 0%, #ffd23f 22%, var(--bc) 52%, rgba(255,60,0,.35) 72%, transparent 80%);
  filter:blur(1.6px);
}
.chb-badge[data-anim="flamme"]:is(:hover,.chb-force) .chb-arr::before{ width:26px; height:52px; --rot:0deg;  animation:chbLangue .55s ease-in-out infinite; }
.chb-badge[data-anim="flamme"]:is(:hover,.chb-force) .chb-arr::after { width:20px; height:40px; --rot:-24deg; margin-left:-9px; animation:chbLangue .7s ease-in-out -.2s infinite; }
.chb-badge[data-anim="flamme"]:is(:hover,.chb-force) .chb-arr2::before{ width:20px; height:40px; --rot:24deg; margin-left:9px; animation:chbLangue .62s ease-in-out -.35s infinite; }
.chb-badge[data-anim="flamme"]:is(:hover,.chb-force) .chb-fx i{
  background:#ffe7a8; box-shadow:0 0 4px #fff3c4, 0 0 9px var(--bc), 0 0 18px #ff5a1f;
  animation:chbBraise 1.4s cubic-bezier(.3,.6,.4,1) var(--d) infinite;
}

/* ── ✨ ÉTINCELLES ─ feu d'artifice : la fusée monte, puis éclate en couronne ── */
@keyframes chbFusee{
  0%     { opacity:1; transform:translate(0, 4px) rotate(var(--a)) translateY(0) scale(.5); }
  32%    { opacity:1; transform:translate(0, -24px) rotate(var(--a)) translateY(0) scale(.5); }
  38%    { opacity:1; transform:translate(0, -24px) rotate(var(--a)) translateY(-6px) scale(calc(var(--t) * 1.5)); }
  100%   { opacity:0; transform:translate(0, -14px) rotate(var(--a)) translateY(calc(var(--r) * -.95)) scale(0); }
}
@keyframes chbTrainee{
  0%     { opacity:0; transform:translate(-50%, 0) scaleY(0); }
  8%     { opacity:1; }
  32%    { opacity:1; transform:translate(-50%, -26px) scaleY(1); }
  42%,100%{ opacity:0; transform:translate(-50%, -26px) scaleY(.2); }
}
@keyframes chbEclatement{
  0%,30% { opacity:0; transform:translate(-50%, -50%) scale(0); }
  36%    { opacity:1; transform:translate(-50%, -50%) scale(1.2); }
  60%,100%{ opacity:0; transform:translate(-50%, -50%) scale(2.2); }
}
@keyframes chbEtinceleIco{
  0%,30%,100%{ transform:rotate(0deg) scale(1); }
  36%        { transform:rotate(-10deg) scale(1.14); filter:brightness(1.7); }
  55%        { transform:rotate(6deg) scale(1.04); }
}
.chb-badge[data-anim="etincelles"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbEtinceleIco 2s ease-out infinite; }
.chb-badge[data-anim="etincelles"]:is(:hover,.chb-force) .chb-fx i{
  width:5px; height:5px; margin:-2.5px 0 0 -2.5px;
  clip-path:polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  border-radius:0; animation:chbFusee 2s cubic-bezier(.25,.6,.3,1) infinite;
}
.chb-badge[data-anim="etincelles"]:is(:hover,.chb-force) .chb-fx i:nth-child(3n)  { background:var(--bc); }
.chb-badge[data-anim="etincelles"]:is(:hover,.chb-force) .chb-fx i:nth-child(3n+1){ background:#fff; }
.chb-badge[data-anim="etincelles"]:is(:hover,.chb-force) .chb-fx i:nth-child(3n+2){ background:#ff7ad9; box-shadow:0 0 6px #ff7ad9; }
.chb-badge[data-anim="etincelles"]:is(:hover,.chb-force) .chb-arr::before{
  left:0; top:-2px; width:2px; height:26px; transform-origin:50% 100%; margin-top:-24px;
  background:linear-gradient(0deg, transparent, #fff6c8); box-shadow:0 0 6px #ffd76a;
  animation:chbTrainee 2s ease-out infinite;
}
.chb-badge[data-anim="etincelles"]:is(:hover,.chb-force) .chb-av::before{
  left:0; top:-24px; width:40px; height:40px; border-radius:50%;
  background:radial-gradient(circle, #fff 0%, color-mix(in srgb, var(--bc) 70%, #fff) 25%, transparent 65%);
  animation:chbEclatement 2s ease-out infinite;
}

/* ── 🌀 HALO ─ portail : un vortex tourne, la lumière est aspirée vers le centre ── */
@keyframes chbVortex{
  from{ transform:translate(-50%,-50%) rotate(0deg) scale(1); }
  50% { transform:translate(-50%,-50%) rotate(-180deg) scale(1.08); }
  to  { transform:translate(-50%,-50%) rotate(-360deg) scale(1); }
}
@keyframes chbAspire{
  0%  { opacity:0; transform:rotate(var(--a)) translateY(calc(var(--r) * -1.25)) scale(var(--t)); }
  20% { opacity:1; }
  100%{ opacity:0; transform:rotate(calc(var(--a) + 200deg)) translateY(0) scale(.2); }
}
@keyframes chbHaloIco{ from{ transform:rotate(0deg); } to{ transform:rotate(-360deg); } }
.chb-badge[data-anim="halo"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbHaloIco 4s linear infinite; }
.chb-badge[data-anim="halo"]:is(:hover,.chb-force) .chb-arr::before{
  left:0; top:0; width:84px; height:84px; border-radius:50%; opacity:.95;
  background:repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--bc) 85%, #fff) 0deg 8deg, transparent 8deg 30deg);
  -webkit-mask:radial-gradient(circle, transparent 16%, #000 24%, rgba(0,0,0,.7) 46%, transparent 68%);
          mask:radial-gradient(circle, transparent 16%, #000 24%, rgba(0,0,0,.7) 46%, transparent 68%);
  filter:blur(1.5px);
  animation:chbVortex 1.8s linear infinite;
}
.chb-badge[data-anim="halo"]:is(:hover,.chb-force) .chb-fx i{ animation:chbAspire 1.6s ease-in var(--d) infinite; }

/* ── 🧭 TOURNOIE ─ gardien : rose des vents derrière, rubans en orbite, constellation ── */
@keyframes chbTournoie{
  0%  { transform:rotate(0deg); }
  45% { transform:rotate(380deg); filter:brightness(1.6); }
  62% { transform:rotate(345deg); }
  76% { transform:rotate(368deg); }
  88% { transform:rotate(356deg); }
  100%{ transform:rotate(360deg); }
}
@keyframes chbConstellation{
  from{ transform:rotate(var(--a)) translateY(calc(var(--r) * -.72)) rotate(calc(var(--a) * -1)); }
  to  { transform:rotate(calc(var(--a) + 360deg)) translateY(calc(var(--r) * -.72)) rotate(calc((var(--a) + 360deg) * -1)); }
}
@keyframes chbScintil{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
@keyframes chbRose{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to  { transform:translate(-50%,-50%) rotate(45deg); }
}
.chb-badge[data-anim="tournoie"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbTournoie 2.2s cubic-bezier(.35,.1,.25,1) infinite; }
.chb-badge[data-anim="tournoie"]:is(:hover,.chb-force) .chb-orbe{ animation-duration:.9s; }
/* La rose des vents : étoile à huit branches */
.chb-badge[data-anim="tournoie"]:is(:hover,.chb-force) .chb-arr::before{
  left:0; top:0; width:70px; height:70px; opacity:.9;
  clip-path:polygon(50% 0, 56% 40%, 85% 15%, 60% 44%, 100% 50%, 60% 56%, 85% 85%, 56% 60%, 50% 100%, 44% 60%, 15% 85%, 40% 56%, 0 50%, 40% 44%, 15% 15%, 44% 40%);
  background:radial-gradient(circle, #fff 0%, color-mix(in srgb, var(--bc) 70%, #fff) 30%, var(--bc) 60%, transparent 75%);
  filter:drop-shadow(0 0 5px var(--bc));
  animation:chbRose 2.2s cubic-bezier(.35,.1,.25,1) infinite;
}
.chb-badge[data-anim="tournoie"]:is(:hover,.chb-force) .chb-fx i{
  opacity:1; width:3.5px; height:3.5px; margin:-1.75px 0 0 -1.75px;
  animation:chbConstellation 3.2s linear infinite, chbScintil 1s ease-in-out var(--d) infinite;
}

/* ── ⭐ SCINTILLE ─ supernova : croix de lumière, cœur aveuglant, poussière d'étoile ── */
@keyframes chbNova{
  0%,100%{ transform:scale(1) rotate(0deg); filter:brightness(1); }
  10%    { transform:scale(1.25) rotate(-10deg); filter:brightness(2.3); }
  24%    { transform:scale(1) rotate(0deg); filter:brightness(1.1); }
  50%    { transform:scale(1.16) rotate(9deg); filter:brightness(1.9); }
  64%    { transform:scale(1) rotate(0deg); filter:brightness(1); }
}
@keyframes chbCroix{
  0%,100%{ opacity:0; transform:translate(-50%,-50%) scale(.1) rotate(0deg); }
  10%    { opacity:1; transform:translate(-50%,-50%) scale(1) rotate(20deg); }
  32%    { opacity:0; transform:translate(-50%,-50%) scale(1.8) rotate(45deg); }
  50%    { opacity:0; transform:translate(-50%,-50%) scale(.1) rotate(45deg); }
  58%    { opacity:.85; transform:translate(-50%,-50%) scale(.75) rotate(65deg); }
  76%    { opacity:0; transform:translate(-50%,-50%) scale(1.5) rotate(90deg); }
}
@keyframes chbPoussiere{
  0%  { opacity:0; transform:rotate(var(--a)) translateY(-12px) scale(0); }
  30% { opacity:1; transform:rotate(var(--a)) translateY(calc(var(--r) * -.8)) scale(calc(var(--t) * 1.4)); }
  100%{ opacity:0; transform:rotate(var(--a)) translateY(calc(var(--r) * -1.15)) scale(0); }
}
.chb-badge[data-anim="scintille"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbNova 1.7s ease-in-out infinite; }
.chb-badge[data-anim="scintille"]:is(:hover,.chb-force) .chb-fx::before{
  left:50%; top:50%; width:78px; height:2.5px;
  background:linear-gradient(90deg, transparent, var(--bc) 30%, #fff 50%, var(--bc) 70%, transparent);
  box-shadow:0 0 8px #fff; animation:chbCroix 1.7s ease-out infinite;
}
.chb-badge[data-anim="scintille"]:is(:hover,.chb-force) .chb-fx::after{
  left:50%; top:50%; width:2.5px; height:78px;
  background:linear-gradient(180deg, transparent, var(--bc) 30%, #fff 50%, var(--bc) 70%, transparent);
  box-shadow:0 0 8px #fff; animation:chbCroix 1.7s ease-out infinite;
}
.chb-badge[data-anim="scintille"]:is(:hover,.chb-force) .chb-fx i{
  clip-path:polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:0;
  animation:chbPoussiere 1.7s ease-out var(--d) infinite;
}

/* ── 🪶 FLOTTE ─ la plume portée par un tourbillon de vent ── */
@keyframes chbFlotte{
  0%,100%{ transform:translate(0,0) rotate(-10deg); }
  25%    { transform:translate(4px,-5px) rotate(9deg); }
  50%    { transform:translate(-3px,-2px) rotate(-6deg); }
  75%    { transform:translate(3px,-6px) rotate(11deg); }
}
@keyframes chbTourbillon{
  0%  { opacity:0; transform:rotate(var(--a)) translateY(-8px) scale(calc(var(--t) * .5)); }
  25% { opacity:.95; }
  100%{ opacity:0; transform:rotate(calc(var(--a) + 200deg)) translateY(calc(var(--r) * -1.1)) scale(var(--t)); }
}
@keyframes chbBourrasque{
  from{ transform:translate(-50%,-50%) rotate(0deg); }
  to  { transform:translate(-50%,-50%) rotate(360deg); }
}
.chb-badge[data-anim="flotte"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbFlotte 2.6s ease-in-out infinite; }
.chb-badge[data-anim="flotte"]:is(:hover,.chb-force) .chb-arr::before,
.chb-badge[data-anim="flotte"]:is(:hover,.chb-force) .chb-arr::after{
  left:0; top:0; border-radius:50%; opacity:.8; border:2px solid transparent;
  border-top-color:rgba(255,255,255,.85); border-left-color:color-mix(in srgb, var(--bc) 60%, transparent);
  filter:drop-shadow(0 0 4px var(--bc));
}
.chb-badge[data-anim="flotte"]:is(:hover,.chb-force) .chb-arr::before{ width:62px; height:62px; animation:chbBourrasque 1.6s linear infinite; }
.chb-badge[data-anim="flotte"]:is(:hover,.chb-force) .chb-arr::after { width:46px; height:46px; animation:chbBourrasque 1.1s linear reverse infinite; }
.chb-badge[data-anim="flotte"]:is(:hover,.chb-force) .chb-fx i{
  width:7px; height:2px; margin:-1px 0 0 -3.5px; border-radius:2px;
  animation:chbTourbillon 2.4s ease-in-out var(--d) infinite;
}

/* ── ⛰️ MONTÉE ─ ascension : colonne de lumière, les nuages s'écartent ── */
@keyframes chbMontee{
  0%  { transform:translateY(4px) scale(.94); filter:brightness(.85); }
  40% { transform:translateY(-4px) scale(1.12); filter:brightness(1.7); }
  65% { transform:translateY(-1px) scale(1.02); filter:brightness(1.2); }
  100%{ transform:translateY(0) scale(1); filter:brightness(1); }
}
@keyframes chbCourant{
  0%  { opacity:0; transform:translate(calc((var(--i) - 5.5) * 3.4px), 20px) scaleY(.4); }
  20% { opacity:1; }
  100%{ opacity:0; transform:translate(calc((var(--i) - 5.5) * 2.4px), -34px) scaleY(1.8); }
}
@keyframes chbPilier{ 0%,100%{ opacity:.4; transform:scaleX(.7); } 50%{ opacity:.95; transform:scaleX(1.15); } }
@keyframes chbNuageG{ 0%,100%{ transform:translate(-30px, 8px) scale(1); opacity:.75; } 50%{ transform:translate(-44px, 9px) scale(1.15); opacity:.35; } }
@keyframes chbNuageD{ 0%,100%{ transform:translate(4px, 8px) scale(1); opacity:.75; } 50%{ transform:translate(18px, 9px) scale(1.15); opacity:.35; } }
.chb-badge[data-anim="montee"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbMontee 2s cubic-bezier(.25,1.2,.4,1) infinite; }
.chb-badge[data-anim="montee"]:is(:hover,.chb-force) .chb-fx i{
  width:2px; height:9px; margin:-4.5px 0 0 -1px; border-radius:2px;
  animation:chbCourant 1.6s ease-out var(--d) infinite;
}
.chb-badge[data-anim="montee"]:is(:hover,.chb-force) .chb-fx::before{
  left:50%; top:-46px; bottom:-10px; width:16px; margin-left:-8px; z-index:-1;
  background:linear-gradient(0deg, transparent, var(--bc) 35%, #fff 60%, transparent);
  filter:blur(5px); animation:chbPilier 2s ease-in-out infinite;
}
.chb-badge[data-anim="montee"]:is(:hover,.chb-force) .chb-av::before,
.chb-badge[data-anim="montee"]:is(:hover,.chb-force) .chb-av::after{
  left:0; top:0; width:26px; height:11px; border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,255,255,.95) 0%, rgba(230,240,255,.6) 50%, transparent 72%);
  filter:blur(1.5px);
}
.chb-badge[data-anim="montee"]:is(:hover,.chb-force) .chb-av::before{ animation:chbNuageG 2s ease-in-out infinite; }
.chb-badge[data-anim="montee"]:is(:hover,.chb-force) .chb-av::after { animation:chbNuageD 2s ease-in-out infinite; }

/* ── 🏆 ÉCLAT D'OR ─ trophée : reflet royal, éclats sur le pourtour ── */
@keyframes chbEclatPasse{
  0%,15%{ opacity:0; transform:translateX(-34px) rotate(22deg); }
  25%   { opacity:1; }
  60%   { opacity:1; }
  75%,100%{ opacity:0; transform:translateX(34px) rotate(22deg); }
}
@keyframes chbEclatPulse{
  0%,100%{ filter:brightness(1); transform:scale(1); }
  45%    { filter:brightness(1.85) saturate(1.5); transform:scale(1.1); }
}
@keyframes chbClaque{
  0%,100%{ opacity:0; transform:rotate(var(--a)) translateY(-20px) scale(0) rotate(0deg); }
  20%    { opacity:1; transform:rotate(var(--a)) translateY(-22px) scale(calc(var(--t) * 1.8)) rotate(45deg); }
  42%    { opacity:0; transform:rotate(var(--a)) translateY(-24px) scale(0) rotate(90deg); }
}
.chb-badge[data-anim="eclat"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbEclatPulse 2s ease-in-out infinite; }
.chb-badge[data-anim="eclat"] .chb-ring{ overflow:hidden; }
.chb-badge[data-anim="eclat"]:is(:hover,.chb-force) .chb-ring::after{
  content:''; position:absolute; left:50%; top:-25%; width:12px; height:150%; margin-left:-6px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  animation:chbEclatPasse 2s ease-in-out infinite;
}
.chb-badge[data-anim="eclat"]:is(:hover,.chb-force) .chb-fx i{
  background:#fff; box-shadow:0 0 5px #fff, 0 0 12px #ffd76a, 0 0 20px var(--bc);
  clip-path:polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px; border-radius:0;
  animation:chbClaque 2s ease-out var(--d) infinite;
}

/* ── 🏳️ ONDULE ─ l'étendard prend le vent, rafales qui le traversent ── */
@keyframes chbOndule{
  0%,100%{ transform:skewX(0deg) skewY(0deg) scaleX(1) rotate(0deg); }
  20%    { transform:skewX(-14deg) skewY(4deg) scaleX(.9) rotate(-3deg); }
  45%    { transform:skewX(11deg) skewY(-3deg) scaleX(1.08) rotate(2deg); }
  70%    { transform:skewX(-8deg) skewY(2deg) scaleX(.96) rotate(-1deg); }
}
@keyframes chbRafale{
  0%  { opacity:0; transform:translate(-36px, calc((var(--i) - 5.5) * 3.6px)) scaleX(.2); }
  25% { opacity:.95; }
  100%{ opacity:0; transform:translate(36px, calc((var(--i) - 5.5) * 3.6px)) scaleX(1.6); }
}
.chb-badge[data-anim="ondule"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbOndule 1.6s ease-in-out infinite; }
.chb-badge[data-anim="ondule"]:is(:hover,.chb-force) .chb-fx i{
  width:12px; height:2px; margin:-1px 0 0 -6px; border-radius:2px;
  background:linear-gradient(90deg, transparent, #fff, var(--bc));
  animation:chbRafale 1.6s ease-in-out var(--d) infinite;
}

/* ── 🦀 PINCE ─ le crabe danse, les bulles remontent ── */
@keyframes chbPince{
  0%,100%{ transform:translateX(0) rotate(0deg) scale(1); }
  14%    { transform:translateX(-5px) rotate(-14deg) scale(1.04); }
  32%    { transform:translateX(5px) rotate(14deg) scale(1.04); }
  52%    { transform:translateX(-4px) rotate(-10deg) scale(1.1); }
  72%    { transform:translateX(4px) rotate(10deg) scale(1.12); }
}
@keyframes chbBulle{
  0%  { opacity:0; transform:translate(calc((var(--i) - 5.5) * 4px), 18px) scale(.3); }
  20% { opacity:1; }
  60% { transform:translate(calc((var(--i) - 5.5) * 4px + 4px), -8px) scale(var(--t)); }
  100%{ opacity:0; transform:translate(calc((var(--i) - 5.5) * 4px - 3px), -34px) scale(calc(var(--t) * 1.4)); }
}
.chb-badge[data-anim="pince"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbPince 1.2s ease-in-out infinite; }
.chb-badge[data-anim="pince"]:is(:hover,.chb-force) .chb-fx i{
  width:6px; height:6px; margin:-3px 0 0 -3px;
  background:radial-gradient(circle at 35% 35%, #fff 0%, rgba(255,255,255,.2) 45%, transparent 70%);
  border:1px solid rgba(255,255,255,.75); box-shadow:0 0 6px var(--bc);
  animation:chbBulle 1.8s ease-out var(--d) infinite;
}

/* ── ❤️ PULSATION ─ deux battements, l'onde de vie part avec eux ── */
@keyframes chbPulse{
  0%  { transform:scale(1); filter:brightness(1); }
  10% { transform:scale(1.32); filter:brightness(1.8); }
  22% { transform:scale(1); filter:brightness(1); }
  34% { transform:scale(1.2); filter:brightness(1.5); }
  48% { transform:scale(1); filter:brightness(1); }
  100%{ transform:scale(1); }
}
@keyframes chbOndeCoeur{
  0%  { opacity:1; transform:scale(.6); border-width:3px; }
  45% { opacity:0; transform:scale(2.6); border-width:.5px; }
  100%{ opacity:0; transform:scale(2.6); }
}
@keyframes chbVie{
  0%,8%{ opacity:0; transform:rotate(var(--a)) translateY(-10px) scale(0); }
  14%  { opacity:1; transform:rotate(var(--a)) translateY(-18px) scale(var(--t)); }
  45%  { opacity:0; transform:rotate(var(--a)) translateY(calc(var(--r) * -1.15)) scale(0); }
  100% { opacity:0; }
}
.chb-badge[data-anim="pulse"]:is(:hover,.chb-force) .chb-ico-in{ animation:chbPulse 1.4s ease-out infinite; }
.chb-badge[data-anim="pulse"]:is(:hover,.chb-force) .chb-fx::before,
.chb-badge[data-anim="pulse"]:is(:hover,.chb-force) .chb-fx::after{
  inset:0; border-radius:50%; border:3px solid var(--bc); box-shadow:0 0 12px var(--bc);
}
.chb-badge[data-anim="pulse"]:is(:hover,.chb-force) .chb-fx::before{ animation:chbOndeCoeur 1.4s ease-out infinite; }
.chb-badge[data-anim="pulse"]:is(:hover,.chb-force) .chb-fx::after { animation:chbOndeCoeur 1.4s ease-out .2s infinite; }
.chb-badge[data-anim="pulse"]:is(:hover,.chb-force) .chb-fx i{ animation:chbVie 1.4s ease-out infinite; }

/* Badge réglé sur « Aucune » : il jaillit et s'allume, sans scène autour */
.chb-badge:is(:not([data-anim]), [data-anim=""]) .chb-onde{ display:none; }

/* ── Aperçu dans la page Badges ─────────────────────────────── */
.chb-apercu{ display:flex; align-items:center; gap:34px; min-height:150px; padding:20px 22px 20px 66px; overflow:hidden;
  background:radial-gradient(circle at 70px 50%, rgba(255,255,255,.035), transparent 55%), #0a0c14;
  border:1px solid var(--border); border-radius:var(--r-sm); }
.chb-apercu-aide{ font-size:11.5px; color:var(--text3); }

/* Qui ne veut pas de mouvement n'en a pas : le badge s'allume, rien ne bouge. */
@media (prefers-reduced-motion: reduce){
  .chb-badge *, .chb-badge *::before, .chb-badge *::after{ animation:none !important; }
  .chb-badge:is(:hover,.chb-force) :is(.chb-fx i, .chb-onde, .chb-ruban, .chb-rayons, .chb-orbe){ opacity:0 !important; }
  .chb-badge:is(:hover,.chb-force) :is(.chb-arr, .chb-arr2, .chb-av)::before,
  .chb-badge:is(:hover,.chb-force) :is(.chb-arr, .chb-arr2, .chb-av)::after{ opacity:0 !important; }
  .chb-badge:is(:hover,.chb-force) .chb-ico{ transform:scale(1.2); transition:none; }
}