/* ══ Bloc Crédits de l'espace Compte (#accountPanel) ═══════════════════════════════════════════════════
   Carte solde cliquable (compteur, équivalents, jauge de réserve, actions, pièce du mois Premium) et cartes
   de packs dans le même langage que la fenêtre de recharge (.rc-pack) : visuels de piles de pièces, badges,
   prix en gros, centimes le crédit, Premium en dernier avec liseré conique animé. Pictos : SVG au trait.
   Comportement : assets/js/account-credits.js. Mouvements coupés avec prefers-reduced-motion. */

@property --ac-angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes acSpin { to { --ac-angle:360deg; } }
@keyframes acFloat { 0%, 100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@keyframes acShine { 0%, 55% { background-position:160% 0; } 100% { background-position:-60% 0; } }
@keyframes acBreath {
  0%, 100% { box-shadow:0 0 0 0 rgba(245,179,1,0), 0 20px 50px -28px rgba(167,139,250,.5), 0 0 26px -10px rgba(245,179,1,.35); }
  50% { box-shadow:0 0 0 4px rgba(245,179,1,.07), 0 20px 50px -28px rgba(167,139,250,.5), 0 0 48px -6px rgba(245,179,1,.6); }
}
@keyframes acGlow { 0%, 100% { opacity:.55; } 50% { opacity:1; } }

/* ── Carte solde ─────────────────────────────────────────────────────────────────────────────────────── */
#accountPanel .ac-balance { position:relative; isolation:isolate; overflow:hidden; display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"main art" "actions actions" "print print"; column-gap:14px; margin-bottom:24px; padding:18px 20px 16px; border-radius:20px; border:1px solid rgba(94,234,212,.22); background:radial-gradient(90% 70% at 100% 0%, rgba(245,179,1,.15), transparent 60%), radial-gradient(70% 60% at 0% 100%, rgba(167,139,250,.16), transparent 60%), linear-gradient(135deg, #10262b, #121a24 55%, #1b1930); box-shadow:0 1px 0 rgba(255,255,255,.04) inset; cursor:pointer; transition:border-color .25s, box-shadow .25s; }
#accountPanel .ac-balance::before { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.25; background-image:linear-gradient(rgba(96,200,186,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(96,200,186,.09) 1px, transparent 1px); background-size:22px 22px; mask-image:linear-gradient(90deg, transparent 25%, #000); -webkit-mask-image:linear-gradient(90deg, transparent 25%, #000); }
#accountPanel .ac-balance::after { content:''; position:absolute; top:-90px; right:-80px; width:260px; height:260px; z-index:-1; pointer-events:none; border-radius:50%; border:1px solid rgba(245,179,1,.12); box-shadow:0 0 0 30px rgba(245,179,1,.04), 0 0 0 60px rgba(245,179,1,.025); animation:acGlow 5s ease-in-out infinite; }
#accountPanel .ac-balance:hover { border-color:rgba(94,234,212,.5); box-shadow:0 18px 50px -24px rgba(45,212,191,.35), 0 1px 0 rgba(255,255,255,.05) inset; }
#accountPanel .ac-balance.is-low { border-color:rgba(245,179,1,.45); }
#accountPanel .ac-balance.is-empty { border-color:rgba(248,113,113,.45); }

.ac-balance__main { grid-area:main; display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-width:0; padding:0; border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; z-index:1; }
.ac-balance__main:focus-visible { outline:2px solid var(--teal, #2dd4bf); outline-offset:8px; border-radius:6px; }
.ac-balance__label { display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#a4cec9; }
.ac-balance__label .ico { color:#5eead4; }
.ac-balance__badge { display:inline-flex; align-items:center; gap:4px; margin-left:2px; padding:3px 8px; border-radius:999px; background:linear-gradient(90deg, #f5b301, #fde68a); color:#3b2300; font-size:9.5px; letter-spacing:.06em; }
.ac-balance__badge .ico { color:#3b2300; }
.ac-balance__amount { display:flex; align-items:baseline; gap:8px; margin-top:6px; line-height:1; }
.ac-balance__amount b { font-size:clamp(40px, 7vw, 56px); font-weight:800; letter-spacing:-.05em; font-variant-numeric:tabular-nums; background:linear-gradient(90deg, #fff, #fde68a 60%, #f5b301); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ac-balance__amount > span { font-size:14px; color:#9fcac3; }
#accountPanel .ac-balance.is-pending .ac-balance__amount > span:not(.ac-balance__pending) { display:none; }
.ac-balance__pending { display:inline-flex; align-items:center; font-size:22px !important; font-weight:800; color:#fde68a !important; letter-spacing:-.01em; }
#accountPanel .ac-balance.is-pending .ac-balance__gauge-bar i { width:35% !important; background:linear-gradient(90deg, rgba(245,179,1,.25), #fde68a, rgba(245,179,1,.25)); background-size:200% 100%; animation:acPendingBar 1.6s linear infinite; }
@keyframes acPendingBar { to { background-position:-200% 0; } }
.ac-balance__plan { display:flex; align-items:center; gap:7px; margin-top:8px; padding:6px 10px; border-radius:10px; border:1px solid rgba(245,179,1,.25); background:rgba(245,179,1,.08); font-size:11.5px; color:#e6edf3; line-height:1.35; }
.ac-balance__plan .ico { flex:0 0 auto; color:#fcd34d; }
.ac-balance__plan b { color:#fde68a; font-variant-numeric:tabular-nums; }
.ac-balance__meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:4px; font-size:12.5px; color:#b9c9d3; }
.ac-balance__dot { width:3px; height:3px; border-radius:50%; background:#5f7382; }
.ac-balance__gauge { display:flex; flex-direction:column; gap:6px; width:min(100%, 330px); margin-top:14px; }
.ac-balance__gauge-bar { display:block; height:7px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; }
.ac-balance__gauge-bar i { display:block; height:100%; width:0; border-radius:inherit; background:linear-gradient(90deg, #2dd4bf, #a78bfa); box-shadow:0 0 12px rgba(45,212,191,.45); transition:width .9s cubic-bezier(.2,.8,.2,1), background .3s; }
.ac-balance.is-low .ac-balance__gauge-bar i { background:linear-gradient(90deg, #f5b301, #fde68a); box-shadow:0 0 12px rgba(245,179,1,.45); }
.ac-balance.is-empty .ac-balance__gauge-bar i { background:#f87171; box-shadow:none; }
.ac-balance__gauge-text { display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; font-size:11px; color:#92b3b2; }
.ac-balance__gauge-text > span { white-space:nowrap; }
.ac-balance__gauge-text .ico { color:#5eead4; }
.ac-balance__gauge-text > span + span::before { content:'·'; margin-right:6px; color:#5f7382; }
.ac-balance.is-low .ac-balance__gauge-text { color:#fcd34d; }
.ac-balance.is-low .ac-balance__gauge-text .ico { color:#fcd34d; }
.ac-balance.is-empty .ac-balance__gauge-text { color:#fca5a5; }
.ac-balance.is-empty .ac-balance__gauge-text .ico { color:#fca5a5; }
.ac-balance__hint { display:inline-flex; align-items:center; gap:5px; height:0; margin-top:6px; overflow:visible; font-size:11px; font-weight:700; line-height:1; color:#7fe7d8; opacity:0; transform:translateY(0); transition:opacity .2s, transform .2s; }
#accountPanel .ac-balance:hover .ac-balance__hint, .ac-balance__main:focus-visible .ac-balance__hint { opacity:1; transform:translateY(5px); }

.ac-balance__art { grid-area:art; align-self:center; width:170px; height:auto; pointer-events:none; user-select:none; filter:drop-shadow(0 14px 24px rgba(0,0,0,.45)); animation:acFloat 4.5s ease-in-out infinite; transition:scale .35s, rotate .35s; }
#accountPanel .ac-balance:hover .ac-balance__art { scale:1.06; rotate:-2deg; }

.ac-balance__actions { grid-area:actions; display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.07); z-index:1; }
.ac-btn { display:inline-flex; align-items:center; gap:7px; min-height:38px; padding:0 14px; border-radius:12px; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#e6edf3; font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; transition:background .2s, border-color .2s, transform .2s; }
.ac-btn:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); transform:translateY(-1px); }
.ac-btn:focus-visible { outline:2px solid var(--teal, #2dd4bf); outline-offset:3px; }
.ac-btn--primary { border-color:transparent; background:linear-gradient(90deg, #2dd4bf, #5eead4); color:#062a26; }
.ac-btn--primary:hover { background:linear-gradient(90deg, #5eead4, #99f6e4); border-color:transparent; }
.ac-btn--gold { border-color:rgba(245,179,1,.35); background:rgba(245,179,1,.1); color:#fcd34d; }
.ac-btn--gold:hover { background:rgba(245,179,1,.18); border-color:rgba(245,179,1,.5); }

.ac-balance__print { grid-area:print; display:flex; align-items:center; gap:9px; margin-top:10px; padding:9px 12px; border-radius:12px; border:1px solid rgba(245,179,1,.25); background:rgba(245,179,1,.07); color:#e6edf3; font-size:12px; text-decoration:none; z-index:1; transition:background .2s, border-color .2s; }
.ac-balance__print:hover { background:rgba(245,179,1,.13); border-color:rgba(245,179,1,.45); }
.ac-balance__print > .ico:first-child { color:#fcd34d; flex:0 0 auto; }
.ac-balance__print > span { flex:1; min-width:0; }
.ac-balance__print strong { color:#fcd34d; }
.ac-balance__print.is-used { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.04); color:#aab6c5; }
.ac-balance__print.is-used > .ico:first-child, .ac-balance__print.is-used strong { color:#c3ccd6; }

/* ── En-tête de section et réassurance (surcharge des styles du portefeuille) ──────────────────────── */
#accountPanel .wallet-section-head.ac-head { margin-bottom:22px; }
#accountPanel .wallet-section-head.ac-head h3 { font-size:13px; gap:8px; }
#accountPanel .wallet-section-head.ac-head h3 .ico { color:#5eead4; }
#accountPanel .wallet-section-head.ac-head > span { font-size:10px; }
#accountPanel .wallet-reassurance.ac-reassurance { margin-top:4px; font-size:10.5px; color:#8e9fb0; }
#accountPanel .wallet-reassurance.ac-reassurance .ico { color:#91aaa9; }

/* ── Cartes de packs ─────────────────────────────────────────────────────────────────────────────────── */
#accountPanel .ac-packs { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:1fr; gap:16px 14px; margin:0 0 16px; padding-top:4px; }
.ac-pack { position:relative; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; padding:22px 14px 14px; border-radius:20px; border:2px solid rgba(255,255,255,.09); background:linear-gradient(180deg, rgba(25,33,43,.9), rgba(16,22,30,.95)); color:inherit; font:inherit; text-align:center; cursor:pointer; transition:transform .25s, border-color .25s, box-shadow .25s, opacity .25s; }
.ac-pack::after { content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(100deg, transparent 35%, rgba(255,240,200,.16) 47%, transparent 60%) no-repeat; background-size:260% 100%; background-position:160% 0; pointer-events:none; }
.ac-pack:focus-visible { outline:2px solid var(--teal, #2dd4bf); outline-offset:4px; }
.ac-pack--popular { border-color:rgba(167,139,250,.45); background:radial-gradient(120% 80% at 80% 0%, rgba(124,58,237,.18), transparent 60%), linear-gradient(180deg, #1c1a2c, #10161e); }
.ac-pack--best { border-color:rgba(45,212,191,.3); }
.ac-pack--welcome { border-color:rgba(245,179,1,.45); background:linear-gradient(180deg, rgba(60,45,16,.55), rgba(16,22,30,.95)); }
.ac-pack__badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:5px; white-space:nowrap; padding:4px 11px; border-radius:999px; background:linear-gradient(90deg, #2dd4bf, #a78bfa); color:#0b1016; font-size:11px; font-weight:800; }
.ac-pack__badge b { font-variant-numeric:tabular-nums; }
.ac-pack__badge--gold { background:#f5b301; color:#3b2300; }
.ac-pack__badge--premium { background:linear-gradient(90deg, #f5b301, #fde68a); color:#3b2300; }
/* Le visuel prend la hauteur laissée libre par la rangée (cartes de même hauteur que Premium) : grande pile de pièces en haut, texte et bouton calés en bas. */
.ac-pack__art { width:100%; max-width:230px; height:auto; min-height:0; flex:1 1 auto; object-fit:contain; margin-block:0 4px; animation:acFloat 4.2s ease-in-out infinite; transition:scale .3s, rotate .3s; }
.ac-pack:nth-child(2) .ac-pack__art { animation-delay:-1.4s; }
.ac-pack:nth-child(3) .ac-pack__art { animation-delay:-2.8s; }
.ac-pack:nth-child(4) .ac-pack__art { animation-delay:-2.1s; }
.ac-pack__name { font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:#c3ccd6; }
.ac-pack__sub { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:#fcd34d; }
.ac-pack__credits { display:inline-flex; align-items:baseline; gap:7px; margin-top:2px; font-size:30px; font-weight:800; line-height:1; }
.ac-pack__credits .coin { align-self:center; }
.ac-pack__credits small { font-size:12px; font-weight:600; color:#aab6c5; }
.ac-pack__gens { font-size:12px; color:#9aa7b4; }
.ac-pack__price { display:inline-flex; align-items:baseline; gap:7px; flex-wrap:wrap; justify-content:center; margin-top:8px; font-size:22px; font-weight:800; line-height:1; }
.ac-pack__price s { font-size:13px; font-weight:600; color:#7f8c99; }
.ac-pack__price em { font-style:normal; font-size:11px; font-weight:800; padding:3px 7px; border-radius:999px; background:rgba(245,179,1,.15); color:#fcd34d; }
.ac-pack__price small { font-size:11.5px; font-weight:600; color:#aab6c5; }
.ac-pack__per { font-size:11.5px; color:#7f8c99; }
.ac-pack__cta { display:inline-flex; align-items:center; justify-content:center; gap:7px; width:100%; min-height:40px; margin-top:auto; padding:0 14px; border-radius:12px; border:1px solid rgba(94,234,212,.35); background:rgba(45,212,191,.1); color:#7fe7d8; font:inherit; font-size:12.5px; font-weight:800; transition:background .2s, color .2s, border-color .2s; }
.ac-pack > .ac-pack__cta { margin-top:auto; flex:0 0 auto; }   /* visuel et prix en haut, bouton aligné en bas d'une rangée à la rangée */
.ac-pack > .ac-pack__per { margin-bottom:10px; }
.ac-pack--popular .ac-pack__cta { border-color:transparent; background:linear-gradient(90deg, #2dd4bf, #a78bfa); color:#0b1016; }
.ac-pack--welcome .ac-pack__cta { border-color:transparent; background:#f5b301; color:#3b2300; }
.ac-pack__cta--gold { border:0; background:linear-gradient(90deg, #f5b301, #fde68a 55%, #f5b301); background-size:200% 100%; color:#3b2300; cursor:pointer; transition:background-position .35s; }
.ac-pack__cta--gold:hover { background-position:100% 0; }
.ac-pack__cta--gold:focus-visible { outline:2px solid #fde68a; outline-offset:3px; }
.ac-pack__cta--gold .ico { color:#3b2300; }

/* Premium : liseré conique qui tourne + halo doré (coupés en reduced-motion), couronne au trait, CTA doré. */
.ac-pack--premium { cursor:default; border-color:transparent; background:radial-gradient(120% 120% at 0% 0%, rgba(245,179,1,.14), transparent 55%), linear-gradient(180deg, #161a19, #0f161e) padding-box, conic-gradient(from var(--ac-angle), #2dd4bf, #f5b301 30%, #fde68a 42%, #a78bfa 68%, #2dd4bf) border-box; animation:acSpin 6s linear infinite, acBreath 4.5s ease-in-out infinite; }
.ac-pack--premium::after { display:none; }
.ac-pack--premium.is-active { animation-duration:12s, 6s; }
.ac-pack__crown { display:grid; place-items:center; width:56px; height:56px; margin-top:2px; border-radius:50%; background:radial-gradient(circle, rgba(245,179,1,.22), rgba(245,179,1,.03) 72%); color:#fcd34d; filter:drop-shadow(0 0 10px rgba(245,179,1,.45)); }
.ac-pack__name--premium { font-size:16px; letter-spacing:.02em; text-transform:none; color:#fff; }
.ac-pack--premium .ac-pack__credits b, .ac-pack__price--premium b { background:linear-gradient(90deg, #fff, #fde68a 60%, #f5b301); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ac-pack--premium .ac-pack__gens { color:#fcd34d; }
.ac-pack__perks { display:grid; gap:7px; width:100%; margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.08); text-align:left; color:#e6edf3; font-size:11.5px; line-height:1.35; }
.ac-pack__perks > span { display:flex; align-items:flex-start; gap:8px; }
.ac-pack__perks .ico { flex:0 0 auto; box-sizing:content-box; padding:3px; border-radius:7px; background:rgba(245,179,1,.12); border:1px solid rgba(245,179,1,.28); color:#fcd34d; }
.ac-pack__fine { margin:8px 0 2px; font-size:10.5px; color:#6f7c89; }
.ac-pack--premium > .ac-pack__cta--gold { margin-top:auto; }
.ac-pack__active { display:flex; align-items:center; flex-wrap:wrap; gap:6px 8px; width:100%; margin-top:auto; padding:9px 10px; border-radius:12px; border:1px solid rgba(245,179,1,.3); background:rgba(245,179,1,.1); color:#fde68a; font-size:11.5px; text-align:left; }
.ac-pack__active > .ico { flex:0 0 auto; color:#fcd34d; }
.ac-pack__active > span { flex:1; min-width:0; }
.ac-pack__active b { font-variant-numeric:tabular-nums; }
.ac-pack__manage { flex:0 0 100%; padding:0; border:0; background:none; color:#7fe7d8; font:inherit; font-size:11.5px; font-weight:700; text-align:left; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.ac-pack__manage:hover { color:#99f6e4; }

/* Offre terminée (compteur à zéro, app.js welcomeOfferEnded) : la carte disparaît, « Premier projet » réapparaît. */
.ac-pack.is-over { display:none !important; }

/* Survol (pointeur fin) : élévation légère, visuel qui se redresse, reflet. */
@media (hover:hover) and (pointer:fine) {
  .ac-pack:hover { transform:translateY(-4px); border-color:rgba(94,234,212,.5); box-shadow:0 18px 44px -22px rgba(0,0,0,.85); }
  .ac-pack--popular:hover { border-color:rgba(167,139,250,.75); }
  .ac-pack--welcome:hover { border-color:rgba(245,179,1,.75); }
  .ac-pack:hover .ac-pack__art { scale:1.07; rotate:-3deg; }
  .ac-pack:hover::after { animation:acShine 2.6s ease-in-out infinite; }
  .ac-pack:not(.ac-pack--popular):not(.ac-pack--welcome):hover .ac-pack__cta { background:linear-gradient(90deg, #2dd4bf, #5eead4); color:#062a26; border-color:transparent; }
  .ac-pack.ac-pack--premium:hover { transform:translateY(-3px); border-color:transparent; animation-duration:3s, 4.5s; box-shadow:0 22px 50px -24px rgba(0,0,0,.75), 0 0 0 5px rgba(245,179,1,.1), 0 0 56px -4px rgba(245,179,1,.7); }
}

/* Tactile : la carte la plus centrée au défilement reçoit .is-focus (account-credits.js, transform seul). */
#accountPanel .ac-packs.has-focus > .ac-pack:not(.is-focus) { opacity:.86; }
#accountPanel .ac-packs > .ac-pack.is-focus { transform:scale(1.03); z-index:2; opacity:1; box-shadow:0 22px 50px -24px rgba(0,0,0,.75), 0 0 0 1px rgba(45,212,191,.35); }
#accountPanel .ac-packs > .ac-pack--welcome.is-focus { box-shadow:0 22px 50px -24px rgba(0,0,0,.75), 0 0 40px -10px rgba(245,179,1,.55); }
#accountPanel .ac-packs > .ac-pack--premium.is-focus { animation-duration:3s, 4.5s; box-shadow:0 22px 50px -24px rgba(0,0,0,.75), 0 0 0 5px rgba(245,179,1,.1), 0 0 56px -4px rgba(245,179,1,.7); }

/* App native (achats par les stores, pas d'abonnement ni d'offre Bienvenue) : même convention que Tarifs / recharge. */
html.is-native-app .ac-pack--welcome, html.is-native-app .ac-pack--premium, html.is-native-app .ac-balance__badge, html.is-native-app .ac-balance__print, html.is-native-app .ac-btn--gold { display:none !important; }
html.is-native-app .ac-pack[data-welcome-alt][hidden] { display:flex !important; }

/* Téléphone : une colonne, visuel du solde plus petit. */
@media (max-width:520px) {
  #accountPanel .ac-balance { padding:16px 16px 14px; column-gap:8px; }
  .ac-balance__art { width:118px; }
  .ac-balance__amount b { font-size:clamp(36px, 11vw, 44px); }
  .ac-balance__gauge { width:100%; }
  .ac-btn { flex:1 1 auto; justify-content:center; padding:0 10px; }
  #accountPanel .ac-packs { grid-template-columns:1fr; grid-auto-rows:auto; gap:18px; }
  .ac-pack__art { max-width:170px; margin-block:0; }
}

@media (prefers-reduced-motion: reduce) {
  .ac-pack, .ac-btn, .ac-balance__hint, .ac-balance__gauge-bar i, .ac-balance__art, .ac-pack__art, #accountPanel .ac-balance { transition:none; animation:none; }
  #accountPanel .ac-balance::after { animation:none; }
  #accountPanel .ac-balance.is-pending .ac-balance__gauge-bar i { animation:none; }
  .ac-pack:hover, #accountPanel .ac-packs > .ac-pack.is-focus, .ac-pack.ac-pack--premium:hover { transform:none; }
  .ac-pack:hover .ac-pack__art, #accountPanel .ac-balance:hover .ac-balance__art { scale:none; rotate:none; }
  .ac-pack:hover::after { animation:none; }
  .ac-pack--premium, .ac-pack--premium.is-active, .ac-pack.ac-pack--premium:hover, #accountPanel .ac-packs > .ac-pack--premium.is-focus { animation:none; box-shadow:0 0 36px -10px rgba(245,179,1,.4); }
  #accountPanel .ac-packs.has-focus > .ac-pack:not(.is-focus) { opacity:1; }
  .ac-balance__hint { opacity:1; transform:none; }
}

/* Bourse aux crédits (index.php #acBourse) : plateforme en bleu, gagnés en vert ; logique (inline-start) pour l'arabe en RTL. */
.ac-bourse{margin:1rem 0;padding:.9rem 1rem;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.03)}
.ac-bourse h3{margin:0 0 .5rem;font-size:1rem;display:flex;gap:.45rem;align-items:center}
.ac-bourse__total{margin:0 0 .6rem;display:flex;gap:.4rem;align-items:baseline;flex-wrap:wrap}
.ac-bourse__total b{font-size:1.5rem;font-weight:800}
.ac-bourse__bar{display:flex;height:12px;border-radius:999px;overflow:hidden;background:rgba(255,255,255,.08)}
.ac-bourse__seg{display:block;height:100%;width:0;transition:width .5s ease}
.ac-bourse__seg--platform,.ac-bourse__dot--platform{background:#4f8cff}
.ac-bourse__seg--earned,.ac-bourse__dot--earned{background:#2ecc71}
.ac-bourse__legend{list-style:none;margin:.65rem 0 0;padding:0;display:grid;gap:.35rem}
.ac-bourse__legend li{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.ac-bourse__legend small{opacity:.7}
.ac-bourse__dot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;flex:none}
@media (prefers-reduced-motion:reduce){.ac-bourse__seg{transition:none}}