/* v1.78 — Bandeau « Best Seller GME » (maquette validée). Préfixe bs-. Identique en mode clair et sombre (exclu de build-dark-css). */
.bs-host { margin: 0 0 16px }
.bs { --gold: #f6c453; --gold-2: #ffe59a; --gold-3: #b9861f; position: relative; border-radius: 16px; padding: 2px; overflow: hidden; isolation: isolate; font-family: 'Barlow', 'Segoe UI', sans-serif }
.bs::before { content: ''; position: absolute; width: 2400px; height: 2400px; left: calc(50% - 1200px); top: calc(50% - 1200px); z-index: -2; background: conic-gradient(from 0deg, #b9861f, #ffe59a, #e11d24, #f6c453, #7a5410, #ffe59a, #b9861f); animation: bs-spin 6s linear infinite }
@keyframes bs-spin { to { transform: rotate(360deg) } }
.bs-in { position: relative; border-radius: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.15fr); gap: 22px; align-items: center; padding: 16px 20px; overflow: hidden;
  background: radial-gradient(600px 220px at 12% 0%, rgba(246,196,83,.22), transparent 60%), radial-gradient(500px 200px at 100% 100%, rgba(225,29,36,.22), transparent 60%), linear-gradient(120deg, #0b1220, #121b2e 55%, #0b1220); color: #eef2f8 }
.bs-in::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255,240,200,.14) 50%, transparent 65%); background-size: 250% 100%; animation: bs-sheen 5s ease-in-out infinite }
@keyframes bs-sheen { 0% { background-position: 130% 0 } 60%, 100% { background-position: -30% 0 } }
.bs-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none }
.bs-champ { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; min-width: 0 }
.bs-medal { position: relative; width: 92px; height: 92px; flex: none; margin-top: 10px }
.bs-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--gold-2), var(--gold-3), var(--gold), var(--gold-2)); animation: bs-spin 8s linear infinite; box-shadow: 0 0 28px rgba(246,196,83,.55) }
.bs-ph { position: absolute; inset: 5px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #1e2a44, #0b1220); font: 800 30px 'Barlow Semi Condensed', sans-serif; color: var(--gold-2) }
.bs-crown { position: absolute; left: 50%; top: -20px; transform: translateX(-50%); width: 38px; filter: drop-shadow(0 4px 8px rgba(246,196,83,.7)); animation: bs-bob 2.6s ease-in-out infinite }
@keyframes bs-bob { 50% { transform: translateX(-50%) translateY(-4px) rotate(-4deg) } }
.bs-badge { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); white-space: nowrap; font: 800 10.5px 'Barlow Semi Condensed', sans-serif; letter-spacing: .12em; padding: 3px 9px; border-radius: 20px; color: #3a2606; background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 4px 12px rgba(246,196,83,.5) }
.bs-kicker { font: 700 11px 'Barlow Semi Condensed', sans-serif; letter-spacing: .28em; color: var(--gold); text-transform: uppercase }
.bs-name { font: 800 26px/1.05 'Barlow Semi Condensed', sans-serif; margin: 2px 0 }
.bs-gold, .bs-amt { background: linear-gradient(100deg, var(--gold-3), var(--gold-2) 45%, #fff 50%, var(--gold-2) 55%, var(--gold-3)); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: bs-sheen 4s ease-in-out infinite }
.bs-meta { color: #b9c3d6; font-size: 13px; display: flex; gap: 6px; flex-wrap: wrap } .bs-meta b { color: #fff }
.bs-ca { margin-top: 6px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.bs-v { font: 800 30px 'Barlow Semi Condensed', sans-serif; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(246,196,83,.35) }
.bs-up { font: 700 12px Barlow, sans-serif; color: #7dffb5 } .bs-up.bs-down { color: #ffb3b7 }
.bs-prime { position: relative; z-index: 1; display: grid; gap: 10px; justify-items: start }
.bs-p { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; border: 1px solid rgba(246,196,83,.45); background: rgba(246,196,83,.08); animation: bs-pulse 2.8s ease-in-out infinite }
@keyframes bs-pulse { 50% { box-shadow: 0 0 0 4px rgba(246,196,83,.12), 0 0 26px rgba(246,196,83,.35) } }
.bs-p svg { width: 34px; height: 34px; color: var(--gold); flex: none }
.bs-p b { font: 700 15px 'Barlow Semi Condensed', sans-serif; color: var(--gold-2); display: block }
.bs-amt { display: block; font: 800 28px/1.1 'Barlow Semi Condensed', sans-serif; font-variant-numeric: tabular-nums; filter: drop-shadow(0 0 10px rgba(246,196,83,.35)) }
.bs-p small { color: #b9c3d6; display: block }
.bs-cdl { font-size: 11.5px; color: #7d8aa3 }
.bs-cd { display: flex; gap: 6px }
.bs-cd div { min-width: 52px; text-align: center; padding: 6px 4px; border-radius: 9px; background: rgba(255,255,255,.05); border: 1px solid rgba(148,170,210,.18) }
.bs-cd b { display: block; font: 800 20px 'Barlow Semi Condensed', sans-serif; font-variant-numeric: tabular-nums; color: #fff }
.bs-cd small { font-size: 10.5px; color: #7d8aa3; text-transform: uppercase; letter-spacing: .08em }
.bs-rank { position: relative; z-index: 1; display: grid; gap: 7px; min-width: 0 }
.bs-rank h4 { margin: 0 0 2px; font: 700 12px 'Barlow Semi Condensed', sans-serif; letter-spacing: .2em; color: #b9c3d6; text-transform: uppercase; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap }
.bs-rank h4 span { color: #7d8aa3; letter-spacing: .04em; text-transform: none; font: 500 11.5px Barlow, sans-serif }
.bs-r { display: grid; grid-template-columns: 22px 30px minmax(0, 1fr); gap: 9px; align-items: center; font-size: 13px; animation: bs-in .7s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 120ms) }
@keyframes bs-in { from { opacity: 0; transform: translateX(18px) } }
.bs-n { font: 800 14px 'Barlow Semi Condensed', sans-serif; color: #7d8aa3; text-align: center }
.bs-g1 .bs-n { color: var(--gold) } .bs-g2 .bs-n { color: #d6dde8 } .bs-g3 .bs-n { color: #d39a6a }
.bs-av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 10.5px 'Barlow Semi Condensed', sans-serif; background: #1d2840; border: 1.5px solid var(--c, #2b3850); color: #eef2f8 }
.bs-t { min-width: 0 } .bs-t > div:first-child { display: flex; justify-content: space-between; gap: 8px }
.bs-t span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .bs-t em { font-style: normal; color: #7d8aa3; font-size: 11.5px }
.bs-t b { font: 700 13px 'Barlow Semi Condensed', sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; color: #fff }
.bs-track { height: 5px; border-radius: 3px; background: rgba(255,255,255,.06); overflow: hidden; margin-top: 4px }
.bs-track i { display: block; height: 100%; width: 0; border-radius: 3px; background: linear-gradient(90deg, #8f0b12, #ff2a35); animation: bs-grow 1.6s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(.3s + var(--i) * 120ms) }
.bs-g1 .bs-track i { background: linear-gradient(90deg, var(--gold-3), var(--gold-2)); box-shadow: 0 0 10px rgba(246,196,83,.6) }
@keyframes bs-grow { to { width: var(--w) } }
.bs-me { background: rgba(62,139,255,.10); border-radius: 8px; padding: 3px 4px; margin: 0 -4px }
.bs-gap { font-size: 11.5px; color: #8fb6ff }
.bs-empty { font-size: 12.5px; color: #7d8aa3; padding: 6px 0 }
@media (max-width: 1100px) { .bs-in { grid-template-columns: 1fr 1fr } .bs-rank { grid-column: 1 / -1 } }
@media (max-width: 700px) { .bs-in { grid-template-columns: 1fr } }
@media (prefers-reduced-motion: reduce) { .bs *, .bs::before, .bs-in::after { animation: none !important } .bs-track i { width: var(--w) } }
@media print { .bs-host { display: none } }
.bs-host { padding: 16px 24px 0; margin: 0 } .bs-host:empty { display: none }
.bs-metrics { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.bs-metrics span { font-size: 11.5px; color: #b9c3d6; padding: 3px 8px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(246,196,83,.25); white-space: nowrap }
.bs-metrics b { color: #ffe59a; font-weight: 700 }
.bs-set { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px }
.bs-dlb { padding: 10px 12px; border-radius: 10px; border: 1px dashed var(--line, #e4e8ef) }