/* ---------- badges ---------- */
.prof-section .sec-sub {
  margin: -6px 0 14px; color: var(--ink-soft); font-size: .84rem;
}
.badge-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px;
}
/* Un badge verrouillé reste lisible : c'est son critère qui donne envie de
   l'obtenir. On le grise, on ne le cache pas. */
.badge {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 13px;
  padding: 15px 12px 13px; opacity: .5; filter: grayscale(1);
  transition: opacity .2s, filter .2s, border-color .2s, transform .2s;
}
.badge.on {
  opacity: 1; filter: none; border-color: var(--accent);
  box-shadow: var(--shadow);
}
.badge.on:hover { transform: translateY(-2px); }
.badge-ico { font-size: 1.7rem; line-height: 1.1; }
.badge-t { font-weight: 600; font-size: .9rem; }
.badge-d { font-size: .74rem; color: var(--ink-soft); line-height: 1.4; }

/* ---------- courbe de progression ---------- */
.courbe-wrap {
  margin-top: 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 13px; padding: 14px 16px 12px;
}
.courbe-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-family: "IBM Plex Mono", monospace; font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px;
}
.courbe-tot { flex: none; }
/* preserveAspectRatio="none" : les barres s'étirent à la largeur disponible,
   ce qui garde le même nombre de jours quel que soit l'écran. */
.courbe { display: block; width: 100%; height: 72px; }
.courbe .cb-on { fill: var(--accent); }
.courbe .cb-off { fill: var(--border-strong); }