/* Widget du classement, affiché dans le site d'un tiers (iframe) : autonome, sans dépendance au CSS du site */
:root { --bg: #ffffff; --fg: #141414; --muted: #6b6b6b; --line: #ececec; --accent: #8b52ff; }
.cw--sombre { --bg: #111015; --fg: #f5f5f7; --muted: #a2a2ab; --line: #26242d; --accent: #a77bff; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body.cw { background: var(--bg); color: var(--fg); font: 14px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.cw a { color: inherit; text-decoration: none; }
.cw__head { padding: 12px 14px; border-bottom: 1px solid var(--line); }
.cw__brand { display: flex; align-items: center; gap: 10px; }
.cw__brand span { display: flex; flex-direction: column; min-width: 0; }
.cw__brand small { color: var(--muted); font-size: 12px; }
.cw__list { list-style: none; margin: 0; padding: 4px 0; }
.cw__row { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; }
.cw__row + .cw__row { border-top: 1px solid var(--line); }
.cw__rank { width: 22px; text-align: right; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; }
.cw__cover { width: 36px; height: 36px; border-radius: 4px; object-fit: cover; background: var(--line); flex: none; }
.cw__text { display: flex; flex-direction: column; min-width: 0; }
.cw__text strong, .cw__text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw__text span { color: var(--muted); font-size: 12px; }
.cw__text:hover strong { text-decoration: underline; }
.cw__empty { padding: 16px 14px; color: var(--muted); }
.cw__foot { padding: 10px 14px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.cw__foot a { color: var(--accent); }