/* Onglet Badges : grille de médailles avec barre de progression. */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px }
.badge { background: var(--paper); border: 1.5px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 6px }
.badge.earned { border-color: var(--sun) }
.badge .medal { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; background: var(--chip); color: var(--muted) }
.badge.earned .medal { background: var(--sun); color: var(--sun-ink) }
.badge h3 { margin: 0; font-size: .98rem }
.badge p { margin: 0; color: var(--muted); font-size: .82rem }
.bar { height: 6px; background: var(--chip); border-radius: 99px; overflow: hidden }
.bar i { display: block; height: 100%; background: var(--accent) }