/* ============================================================================
 * vnext-performances.css — #performances page + onglet Performances des
 * groupes, vNext design system.
 *
 * Scoped under [data-qz-skin="performances"] (posé sur le container
 * #performances ET sur le panneau data-tab-panel="performances" du détail
 * groupe). Built on --qz-* tokens, auto-inverts in dark mode.
 * Structure fidèle au mockup "Performances vNext" validé (2026-08-25) :
 * deux vues (Synthèse / Plans), hero anneau de précision, KPI 2×2 avec
 * sparklines intégrées, activité 4 semaines, liste de plans unifiée.
 * ==========================================================================*/

[data-qz-skin="performances"] {
  --perfp-gap: var(--qz-4);
}

/* ── Shell ─────────────────────────────────────────────────────────────── */
[data-qz-skin="performances"] .perf-shell {
  display: flex;
  flex-direction: column;
  gap: var(--qz-5);
  max-width: 960px;
  margin: 0 auto;
  padding: var(--qz-2) 0 var(--qz-7);
}

/* ── Header (titre + période) ──────────────────────────────────────────── */
[data-qz-skin="performances"] .perf-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--qz-3);
  flex-wrap: wrap;
}
[data-qz-skin="performances"] .perf-header__titles {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
[data-qz-skin="performances"] .perf-hero-eyebrow {
  font-size: var(--qz-fs-xs);
  font-weight: var(--qz-fw-strong);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--qz-accent-ink);
}
[data-qz-skin="performances"] .perf-header h2 {
  font-size: var(--qz-fs-title);
  font-weight: 800;
  color: var(--qz-text);
  line-height: 1.2;
  margin: 0;
}

/* ── Segmentés (période / vue / scope) ─────────────────────────────────── */
[data-qz-skin="performances"] .perf-seg {
  display: flex;
  gap: var(--qz-1);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-pill);
  padding: 3px;
}
[data-qz-skin="performances"] .perf-seg--view { padding: 4px; }
[data-qz-skin="performances"] .perf-seg.is-hidden { display: none; }
[data-qz-skin="performances"] .perf-seg__btn {
  border: 0;
  background: transparent;
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-muted);
  padding: 5px var(--qz-3);
  border-radius: var(--qz-r-pill);
  cursor: pointer;
  transition: background var(--qz-dur-press) var(--qz-ease), color var(--qz-dur-press) var(--qz-ease);
}
[data-qz-skin="performances"] .perf-seg--view .perf-seg__btn {
  font-size: var(--qz-fs-body);
  padding: 10px 0;
}
[data-qz-skin="performances"] .perf-seg__btn--grow {
  flex: 1;
  text-align: center;
}
[data-qz-skin="performances"] .perf-seg__btn.is-active {
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  font-weight: 800;
}
/* Variante "soft" (bascule Tous/Perso/Groupes) : actif = accent doux. */
[data-qz-skin="performances"] .perf-seg__btn--soft.is-active {
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
}
[data-qz-skin="performances"] .perf-seg__btn:focus-visible {
  outline: none;
  box-shadow: var(--qz-focus-ring);
}

/* ── Hero : anneau de précision ────────────────────────────────────────── */
[data-qz-skin="performances"] .perf-hero-card {
  display: flex;
  align-items: center;
  gap: var(--qz-5);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  padding: var(--qz-5);
  box-shadow: 0 1px 2px rgba(6, 52, 42, .04);
}
[data-qz-skin="performances"] .perf-hero-card__ring { flex-shrink: 0; }
[data-qz-skin="performances"] .perf-hero-card__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
[data-qz-skin="performances"] .perf-hero-card__title {
  font-size: var(--qz-fs-h3);
  font-weight: 800;
  color: var(--qz-text);
}
[data-qz-skin="performances"] .perf-hero-card__sub {
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
}
[data-qz-skin="performances"] .perf-delta-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--qz-1);
  align-self: flex-start;
  font-size: var(--qz-fs-sm);
  font-weight: 800;
  border-radius: var(--qz-r-pill);
  padding: 3px 10px;
}
[data-qz-skin="performances"] .perf-delta-chip.is-up {
  color: var(--qz-success-ink);
  background: var(--qz-success-bg);
}
[data-qz-skin="performances"] .perf-delta-chip.is-down {
  color: var(--qz-error-ink);
  background: var(--qz-error-bg);
}

/* Anneaux : rotation portée par la classe émise par buildRing (les <text>
   compensent en interne avec rotate(90)). */
[data-qz-skin="performances"] .perf-ring-svg,
.perf-ring-svg {
  display: block;
  transform: rotate(-90deg);
}

/* ── KPI 2×2 avec sparkline intégrée ───────────────────────────────────── */
[data-qz-skin="performances"] .perf-kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--qz-3);
}
[data-qz-skin="performances"] .perf-kpi-card {
  display: flex;
  flex-direction: column;
  gap: var(--qz-2);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  padding: var(--qz-4);
}
[data-qz-skin="performances"] .perf-kpi-label {
  font-size: var(--qz-fs-xs);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--qz-muted);
}
[data-qz-skin="performances"] .perf-kpi-card__row {
  display: flex;
  align-items: baseline;
  gap: var(--qz-2);
}
[data-qz-skin="performances"] .perf-kpi-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--qz-text);
  line-height: 1;
}
[data-qz-skin="performances"] .perf-kpi-value__den {
  font-size: 14px;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-muted);
}
[data-qz-skin="performances"] .perf-kpi-delta {
  font-size: var(--qz-fs-xs);
  font-weight: 800;
}
[data-qz-skin="performances"] .perf-kpi-delta.is-positive { color: var(--qz-success-ink); }
[data-qz-skin="performances"] .perf-kpi-delta.is-negative { color: var(--qz-error-ink); }
[data-qz-skin="performances"] .perf-kpi-card__spark { min-height: 26px; }
[data-qz-skin="performances"] .perf-kpi-card__spark .perf-sparkline polygon { display: none; }
[data-qz-skin="performances"] .perf-kpi-card--energy .perf-sparkline polyline { stroke: var(--qz-energy); }

/* Sparklines (trait seul, couleur accent par défaut) */
[data-qz-skin="performances"] .perf-sparkline { width: 100%; }
[data-qz-skin="performances"] .perf-sparkline polyline {
  fill: none;
  stroke: var(--qz-accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-qz-skin="performances"] .perf-sparkline polygon {
  fill: var(--qz-accent);
  opacity: 0.1;
}

/* ── Grille Synthèse (desktop : hero 1/3 + KPI 2/3) ────────────────────── */
[data-qz-skin="performances"] .perf-synthese-grid {
  display: flex;
  flex-direction: column;
  gap: var(--qz-5);
}
[data-qz-skin="performances"] [data-perf-view="synthese"] {
  display: flex;
  flex-direction: column;
  gap: var(--qz-5);
}
[data-qz-skin="performances"] [data-perf-view="synthese"][hidden],
[data-qz-skin="performances"] [data-perf-view="plans"][hidden] { display: none; }
[data-qz-skin="performances"] [data-perf-view="plans"] {
  display: flex;
  flex-direction: column;
  gap: var(--qz-4);
}

/* ── Activité (4 semaines, L→D) ────────────────────────────────────────── */
[data-qz-skin="performances"] .perf-activity {
  display: flex;
  flex-direction: column;
  gap: var(--qz-4);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  padding: var(--qz-5);
}
[data-qz-skin="performances"] .perf-activity__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qz-3);
}
[data-qz-skin="performances"] .perf-activity__title {
  font-size: var(--qz-fs-h3);
  font-weight: 800;
  color: var(--qz-text);
}
[data-qz-skin="performances"] .perf-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--qz-fs-sm);
  font-weight: 800;
  color: var(--qz-warning-ink);
  background: var(--qz-warning-bg);
  border-radius: var(--qz-r-pill);
  padding: var(--qz-1) var(--qz-3);
}
[data-qz-skin="performances"] .perf-activity__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
[data-qz-skin="performances"] .perf-activity__grid > span {
  font-size: var(--qz-fs-xs);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-muted);
  text-align: center;
}
[data-qz-skin="performances"] .perf-activity__cell {
  aspect-ratio: 1;
  border-radius: 6px;
  background: var(--qz-accent-soft);
}
[data-qz-skin="performances"] .perf-activity__cell.is-future { background: transparent; }
[data-qz-skin="performances"] .perf-activity__cell.is-lvl0 { background: var(--qz-50); }
[data-qz-skin="performances"] .perf-activity__cell.is-lvl1 { background: var(--qz-100); }
[data-qz-skin="performances"] .perf-activity__cell.is-lvl2 { background: var(--qz-200); }
[data-qz-skin="performances"] .perf-activity__cell.is-lvl3 { background: var(--qz-400); }
[data-qz-skin="performances"] .perf-activity__legend {
  display: flex;
  align-items: center;
  gap: var(--qz-2);
  font-size: var(--qz-fs-xs);
  color: var(--qz-muted);
}
[data-qz-skin="performances"] .perf-activity__legend i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}
[data-qz-skin="performances"] .perf-activity__legend i.is-lvl0 { background: var(--qz-50); }
[data-qz-skin="performances"] .perf-activity__legend i.is-lvl1 { background: var(--qz-100); }
[data-qz-skin="performances"] .perf-activity__legend i.is-lvl2 { background: var(--qz-200); }
[data-qz-skin="performances"] .perf-activity__legend i.is-lvl3 { background: var(--qz-400); }

/* ── Vue Plans : toolbar + chips de statut ─────────────────────────────── */
[data-qz-skin="performances"] .perf-plans-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--qz-3);
}
[data-qz-skin="performances"] .perf-plans-toolbar .perf-seg--scope { flex: 1; }
[data-qz-skin="performances"] .perf-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: var(--qz-shadow-sm);
  transition: background var(--qz-dur-press) var(--qz-ease);
}
[data-qz-skin="performances"] .perf-fab:hover { background: var(--qz-accent-deep); }
[data-qz-skin="performances"] .perf-fab-menu {
  position: absolute;
  top: calc(100% + var(--qz-2));
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: var(--qz-1);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  padding: var(--qz-1);
  box-shadow: var(--qz-shadow-md);
  min-width: 200px;
}
[data-qz-skin="performances"] .perf-fab-menu__item {
  border: 0;
  background: transparent;
  text-align: left;
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
  border-radius: var(--qz-r-control);
  padding: var(--qz-2) var(--qz-3);
  cursor: pointer;
}
[data-qz-skin="performances"] .perf-fab-menu__item:hover {
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
}
[data-qz-skin="performances"] .perf-status-chips {
  display: flex;
  gap: var(--qz-2);
  flex-wrap: wrap;
}
[data-qz-skin="performances"] .perf-status-chip {
  border: 1px solid var(--qz-line);
  background: var(--qz-surface);
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-muted);
  border-radius: var(--qz-r-pill);
  padding: 6px 14px;
  cursor: pointer;
  transition: background var(--qz-dur-press) var(--qz-ease), color var(--qz-dur-press) var(--qz-ease);
}
[data-qz-skin="performances"] .perf-status-chip.is-active {
  border-color: var(--qz-accent);
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  font-weight: 800;
}

/* ── Liste unifiée + carte plan v2 ─────────────────────────────────────── */
[data-qz-skin="performances"] .perf-plans-list {
  display: flex;
  flex-direction: column;
  gap: var(--qz-3);
}
[data-qz-skin="performances"] .perf-plan-card-v2 {
  display: flex;
  flex-direction: column;
  gap: var(--qz-3);
  text-align: left;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  padding: var(--qz-5);
  box-shadow: 0 1px 2px rgba(6, 52, 42, .04);
  cursor: pointer;
  transition: border-color var(--qz-dur-press) var(--qz-ease);
}
[data-qz-skin="performances"] .perf-plan-card-v2:hover { border-color: var(--qz-accent-mid); }
[data-qz-skin="performances"] .perf-plan-card-v2__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qz-3);
}
[data-qz-skin="performances"] .perf-plan-card-v2 .perf-plan-card__title,
[data-qz-skin="performances"] .perf-plan-card-v2__title {
  font-size: var(--qz-fs-h3);
  font-weight: 800;
  color: var(--qz-text);
  margin: 0;
}
[data-qz-skin="performances"] .perf-plan-card-v2__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
}
[data-qz-skin="performances"] .perf-plan-card-v2__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qz-3);
  border-top: 1px solid var(--qz-50);
  padding-top: var(--qz-3);
}
[data-qz-skin="performances"] .perf-plan-card-v2__members {
  display: flex;
  align-items: center;
  gap: var(--qz-2);
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
}

/* Chip groupe (icône users + nom) */
[data-qz-skin="performances"] .perf-chip-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--qz-accent-ink);
  background: var(--qz-accent-soft);
  border-radius: var(--qz-r-pill);
  padding: 4px 10px;
}

/* Barre de progression pill */
[data-qz-skin="performances"] .perf-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
[data-qz-skin="performances"] .perf-progress__track {
  height: 8px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  overflow: hidden;
}
[data-qz-skin="performances"] .perf-progress__fill {
  height: 100%;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent);
}
[data-qz-skin="performances"] .perf-progress__label {
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-accent-ink);
}
[data-qz-skin="performances"] .perf-progress__label.is-muted { color: var(--qz-muted); }

/* Avatars initiales */
[data-qz-skin="performances"] .perf-avatar-stack { display: flex; }
[data-qz-skin="performances"] .perf-avatar {
  width: 26px;
  height: 26px;
  border-radius: var(--qz-r-pill);
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--qz-surface);
  flex-shrink: 0;
}
[data-qz-skin="performances"] .perf-avatar-stack .perf-avatar + .perf-avatar { margin-left: -8px; }
[data-qz-skin="performances"] .perf-avatar--lg { width: 34px; height: 34px; font-size: 12px; }
[data-qz-skin="performances"] .perf-avatar--a { background: var(--qz-400); color: var(--qz-on-accent); }
[data-qz-skin="performances"] .perf-avatar--b { background: var(--qz-600); color: var(--qz-on-accent); }
[data-qz-skin="performances"] .perf-avatar--c { background: var(--qz-200); color: var(--qz-900); }
[data-qz-skin="performances"] .perf-avatar--d { background: var(--qz-100); color: var(--qz-900); }
[data-qz-skin="performances"] .perf-avatar.is-first { box-shadow: 0 0 0 3px var(--qz-energy); }

/* Lien discret "Classement ›" */
[data-qz-skin="performances"] .perf-link {
  display: inline-flex;
  align-items: center;
  gap: var(--qz-1);
  border: 0;
  background: transparent;
  font-size: var(--qz-fs-sm);
  font-weight: 800;
  color: var(--qz-accent-ink);
  cursor: pointer;
  padding: 0;
}
[data-qz-skin="performances"] .perf-link--center { align-self: center; }

/* ── Détail (perso + groupe) ───────────────────────────────────────────── */
[data-qz-skin="performances"] .perf-plan-detail {
  display: flex;
  flex-direction: column;
  gap: var(--qz-4);
}
[data-qz-skin="performances"] .perf-detail-nav {
  display: flex;
  align-items: center;
  gap: var(--qz-2);
}
[data-qz-skin="performances"] .perf-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  color: var(--qz-text);
  cursor: pointer;
}
[data-qz-skin="performances"] .perf-detail-nav__label {
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-muted);
}
[data-qz-skin="performances"] .perf-detail-card {
  display: flex;
  flex-direction: column;
  gap: var(--qz-3);
  text-align: left;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  padding: var(--qz-5);
  box-shadow: 0 1px 2px rgba(6, 52, 42, .04);
}
[data-qz-skin="performances"] .perf-detail-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qz-3);
}
[data-qz-skin="performances"] .perf-detail-card__header h3 { margin: 0; font-size: var(--qz-fs-h2); font-weight: 800; color: var(--qz-text); }
[data-qz-skin="performances"] .perf-detail-card__title {
  font-size: 20px;
  font-weight: 800;
  color: var(--qz-text);
  margin: 0;
}
[data-qz-skin="performances"] .perf-detail-card__title--inline { font-size: var(--qz-fs-h3); }
[data-qz-skin="performances"] .perf-detail-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
}
[data-qz-skin="performances"] .perf-detail-card__section-title {
  font-size: var(--qz-fs-h3);
  font-weight: 800;
  color: var(--qz-text);
}
[data-qz-skin="performances"] .perf-detail-card__actions {
  display: flex;
  gap: var(--qz-2);
  flex-wrap: wrap;
}
/* Les .qz-btn globaux s'étirent en pleine largeur dans certaines cartes —
   ici les actions de cycle de vie restent des boutons compacts. */
[data-qz-skin="performances"] .perf-detail-card__actions .qz-btn {
  width: auto;
  flex: 0 0 auto;
}
[data-qz-skin="performances"] .perf-plan-detail__desc {
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
  margin: 0;
}
[data-qz-skin="performances"] .perf-plan-detail__dates {
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
  margin: 0;
}

/* CTA plein accent (onglet groupe : "Voir le classement") */
[data-qz-skin="performances"] .perf-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  font-size: var(--qz-fs-body);
  font-weight: 800;
  padding: 12px var(--qz-5);
  cursor: pointer;
  margin-top: var(--qz-1);
  transition: background var(--qz-dur-press) var(--qz-ease);
}
[data-qz-skin="performances"] .perf-cta:hover { background: var(--qz-accent-deep); }

/* ── Classement des membres (liste) ────────────────────────────────────── */
[data-qz-skin="performances"] .perf-member-list {
  display: flex;
  flex-direction: column;
  gap: var(--qz-2);
}
[data-qz-skin="performances"] .perf-member-row {
  display: flex;
  align-items: center;
  gap: var(--qz-3);
  padding: 10px var(--qz-3);
  border-radius: var(--qz-r-control);
}
[data-qz-skin="performances"] .perf-member-row.is-viewer { background: var(--qz-accent-soft); }
[data-qz-skin="performances"] .perf-member-row__rank {
  width: 22px;
  font-size: 14px;
  font-weight: 800;
  color: var(--qz-muted);
  text-align: center;
  flex-shrink: 0;
}
[data-qz-skin="performances"] .perf-member-row__rank.is-first { color: var(--qz-energy-deep); }
[data-qz-skin="performances"] .perf-member-row__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
[data-qz-skin="performances"] .perf-member-row__name {
  font-size: 14px;
  font-weight: 800;
  color: var(--qz-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-qz-skin="performances"] .perf-member-row__track {
  height: 6px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  overflow: hidden;
}
[data-qz-skin="performances"] .perf-member-row.is-viewer .perf-member-row__track { background: var(--qz-surface); }
[data-qz-skin="performances"] .perf-member-row__fill {
  height: 100%;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent);
}
[data-qz-skin="performances"] .perf-member-row__pct {
  font-size: 14px;
  font-weight: 800;
  color: var(--qz-accent-ink);
  flex-shrink: 0;
}
[data-qz-skin="performances"] .perf-group-leaderboard-empty {
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
  text-align: center;
  margin: 0;
  padding: var(--qz-3) 0;
}

/* ── Podium (Top 3, onglet groupe) ─────────────────────────────────────── */
[data-qz-skin="performances"] .perf-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--qz-5);
  padding-top: var(--qz-2);
}
[data-qz-skin="performances"] .perf-podium__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 72px;
}
[data-qz-skin="performances"] .perf-podium__step {
  width: 64px;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
}
[data-qz-skin="performances"] .perf-podium__step.is-p1 { background: var(--qz-400); color: var(--qz-on-accent); font-size: 17px; }
[data-qz-skin="performances"] .perf-podium__step.is-p2 { background: var(--qz-100); color: var(--qz-900); }
[data-qz-skin="performances"] .perf-podium__step.is-p3 { background: var(--qz-50); color: var(--qz-900); }
[data-qz-skin="performances"] .perf-podium__name {
  font-size: 12px;
  font-weight: var(--qz-fw-strong);
  color: var(--qz-muted);
  text-align: center;
  max-width: 90px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-qz-skin="performances"] .perf-group-tab {
  display: flex;
  flex-direction: column;
  gap: var(--qz-4);
}
[data-qz-skin="performances"] .perf-group-radar-wrap {
  display: flex;
  justify-content: center;
  padding: 0 var(--qz-6);
}
/* Les libellés latéraux ("Précision", "Objectifs") débordent du viewBox —
   on les laisse s'afficher, le padding du wrap leur réserve la place. */
[data-qz-skin="performances"] .perf-group-radar-wrap svg { overflow: visible; }
[data-qz-skin="performances"] .perf-radar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qz-3);
}
[data-qz-skin="performances"] .perf-radar-toggle {
  border: 1px solid var(--qz-line);
  background: var(--qz-surface);
  font-size: var(--qz-fs-sm);
  font-weight: 800;
  color: var(--qz-muted);
  border-radius: var(--qz-r-pill);
  padding: 5px 16px;
  cursor: pointer;
  transition: background var(--qz-dur-press) var(--qz-ease), color var(--qz-dur-press) var(--qz-ease);
}
[data-qz-skin="performances"] .perf-radar-toggle.is-active {
  border-color: var(--qz-accent);
  background: var(--qz-accent);
  color: var(--qz-on-accent);
}
[data-qz-skin="performances"] .perf-radar-toggle:disabled {
  opacity: .45;
  cursor: not-allowed;
}
[data-qz-skin="performances"] .perf-radar-legend {
  display: flex;
  justify-content: center;
  gap: var(--qz-5);
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-muted);
}
[data-qz-skin="performances"] .perf-radar-legend[hidden] { display: none; }
[data-qz-skin="performances"] .perf-radar-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
[data-qz-skin="performances"] .perf-radar-legend__item i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
}
[data-qz-skin="performances"] .perf-radar-legend__item i.is-group { background: var(--qz-muted); opacity: .5; }
[data-qz-skin="performances"] .perf-radar-legend__item i.is-me { background: var(--qz-accent); }

/* ── Badges de statut ──────────────────────────────────────────────────── */
[data-qz-skin="performances"] .perf-badge,
.modal .perf-badge {
  display: inline-block;
  font-size: var(--qz-fs-xs);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--qz-r-pill);
  padding: 4px 10px;
}
[data-qz-skin="performances"] .perf-badge--active,   .modal .perf-badge--active   { color: var(--qz-success-ink); background: var(--qz-success-bg); }
[data-qz-skin="performances"] .perf-badge--draft,    .modal .perf-badge--draft    { color: var(--qz-muted); background: var(--qz-screen); }
[data-qz-skin="performances"] .perf-badge--paused,   .modal .perf-badge--paused   { color: var(--qz-warning-ink); background: var(--qz-warning-bg); }
[data-qz-skin="performances"] .perf-badge--completed,.modal .perf-badge--completed{ color: var(--qz-accent-ink); background: var(--qz-accent-soft); }
[data-qz-skin="performances"] .perf-badge--expired,  .modal .perf-badge--expired  { color: var(--qz-error-ink); background: var(--qz-error-bg); }
.modal .perf-badge--beginner     { color: var(--qz-success-ink); background: var(--qz-success-bg); }
.modal .perf-badge--intermediate { color: var(--qz-warning-ink); background: var(--qz-warning-bg); }
.modal .perf-badge--advanced     { color: var(--qz-error-ink); background: var(--qz-error-bg); }
.modal .perf-badge--custom       { color: var(--qz-accent-ink); background: var(--qz-accent-soft); }

/* ── Cartes objectif (détail perso) ────────────────────────────────────── */
[data-qz-skin="performances"] .perf-plan-objectives-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--qz-3);
}
[data-qz-skin="performances"] .perf-objective-card {
  display: flex;
  align-items: center;
  gap: var(--qz-3);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  padding: var(--qz-4);
}
[data-qz-skin="performances"] .perf-objective-card__ring svg { display: block; }
[data-qz-skin="performances"] .perf-objective-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
[data-qz-skin="performances"] .perf-objective-card__label {
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-text);
}
/* Sur mobile : DEUX cartes par ligne, et l'info SOUS l'anneau.
   La grille etait en `minmax(200px, 1fr)`, ce qui ne laisse tenir qu'UNE
   colonne sous 400 px de large. Et la carte etant un flex horizontal,
   deux par ligne aurait ecrase le texte a cote de l'anneau : le passage en
   colonne est ce qui rend la densite lisible, pas un reglage separe. */
@media (max-width: 767.98px) {
  [data-qz-skin="performances"] .perf-plan-objectives-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--qz-2);
  }
  [data-qz-skin="performances"] .perf-objective-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--qz-2);
    padding: var(--qz-3);
  }
  [data-qz-skin="performances"] .perf-objective-card__info {
    align-items: center;
    width: 100%;
  }
}

[data-qz-skin="performances"] .perf-objective-card__progress {
  font-size: var(--qz-fs-xs);
  color: var(--qz-muted);
}

/* ── Note « comment se gagnent les défis » ─────────────────────────────────
   Fermeture du détail d'un plan, sous la grille d'objectifs. Volontairement
   PLUS DISCRÈTE qu'une carte d'objectif — fond teinté, pas de bordure pleine :
   elle explique une mécanique, elle ne porte pas de progression, et lui donner
   le même poids visuel qu'un objectif la ferait lire comme un cinquième. */
[data-qz-skin="performances"] .perf-defis-note {
  display: flex;
  align-items: flex-start;
  gap: var(--qz-2);
  margin-top: var(--qz-3);
  padding: var(--qz-3) var(--qz-4);
  background: var(--qz-accent-soft);
  border-radius: var(--qz-r-card);
  /* .perf-plan-detail centre tout son contenu (les cartes d'objectif s'en
     accommodent, elles tiennent sur deux lignes courtes). Un paragraphe
     d'explication centre se lit mal : on repart a gauche ici seulement. */
  text-align: left;
}
[data-qz-skin="performances"] .perf-defis-note__icon {
  flex: none;
  display: flex;
  margin-top: 1px;
  color: var(--qz-accent-ink);
}
[data-qz-skin="performances"] .perf-defis-note__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
[data-qz-skin="performances"] .perf-defis-note__title {
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-accent-ink);
}
/* --qz-accent-ink et non --qz-muted : le texte porte sur un fond teinte, et
   l'encre semantique est le seul ton qui tienne le 4.5:1 dans les deux modes
   (cf. la note des jetons sur base vs encre). */
[data-qz-skin="performances"] .perf-defis-note__text {
  font-size: var(--qz-fs-xs);
  line-height: 1.5;
  color: var(--qz-accent-ink);
}

/* ── États vides / chargement ──────────────────────────────────────────── */
[data-qz-skin="performances"] .perf-empty {
  display: flex;
  flex-direction: column;
  gap: var(--qz-2);
  align-items: center;
  text-align: center;
  background: var(--qz-surface);
  border: 1px dashed var(--qz-line-strong);
  border-radius: var(--qz-r-card);
  padding: var(--qz-6) var(--qz-5);
  color: var(--qz-muted);
  font-size: var(--qz-fs-sm);
}
[data-qz-skin="performances"] .perf-empty h3 {
  font-size: var(--qz-fs-h3);
  font-weight: 800;
  color: var(--qz-text);
  margin: 0;
}
[data-qz-skin="performances"] .perf-empty p { margin: 0; }
[data-qz-skin="performances"] .perf-empty .qz-btn { margin-top: var(--qz-2); }
[data-qz-skin="performances"] .perf-loading {
  text-align: center;
  padding: var(--qz-6);
  color: var(--qz-muted);
  font-size: var(--qz-fs-sm);
}

/* ── Modale de création (vit dans <body>, hors skin — classes préfixées) ── */
/* ── Modale « Creer un plan » ────────────────────────────────────────────────
   La fonte d'affichage est ici a sa place — les TITRES — et au poids le plus
   bas (100). Le corps prend la fonte de lecture, servie par la regle globale
   `.modal .modal-body` (corrigee le 28.AOU.2026 : elle imposait auparavant
   'Alfa Slab One' a TOUS les corps de modale, texte courant compris). Alfa Slab One n'existe qu'en un seul gras :
   demander 100 ne l'amincit pas, mais empeche le navigateur de SYNTHETISER un
   gras par-dessus (il heritait de 500 via Bootstrap), ce qui l'epaississait et
   le rendait flou. Le texte courant repasse sur la fonte de lecture --qz-font.
   ------------------------------------------------------------------------- */
/* 500px (defaut Bootstrap) ne laissait que 410px utiles : deux colonnes de
   200px + 16px de gouttiere en demandent 416, la grille retombait donc a UNE
   colonne et la modale devenait une longue liste etroite. 640px redonne deux
   colonnes confortables (~288px) pour choisir d'un coup d'oeil. */
.perf-create-modal .modal-dialog { max-width: 640px; }
.perf-create-modal .modal-content {
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  background: var(--qz-surface);
  box-shadow: 0 24px 60px rgba(9, 30, 24, .28);
}
.perf-create-modal .modal-header {
  border-bottom: 0;
  padding: var(--qz-6) var(--qz-6) var(--qz-2);
}
.perf-create-modal .modal-title {
  font-family: 'Alfa Slab One', cursive;
  font-weight: 100;
  font-size: var(--qz-fs-title);
  line-height: 1.2;
  color: var(--qz-text);
}
/* La neutralisation locale de la fonte a disparu : la regle globale
   `.modal .modal-body` sert desormais la fonte de lecture pour toutes les
   modales (crs__front.css). Il ne reste ici que l'aeration. */
.perf-create-modal .modal-body {
  padding: 0 var(--qz-6) var(--qz-6);
}
.perf-create-modal__lead {
  margin: 0 0 var(--qz-5);
  font-size: var(--qz-fs-body);
  line-height: 1.5;
  color: var(--qz-muted);
  text-align: left;
}

.perf-template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--qz-4);
}
.perf-template-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--qz-2);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  /* Bordure interieure genereuse — c'est ce qui manquait le plus. */
  padding: var(--qz-5);
  text-align: left;
  background: var(--qz-surface);
  cursor: pointer;
  transition: border-color var(--qz-dur-press) var(--qz-ease),
              background var(--qz-dur-press) var(--qz-ease),
              transform var(--qz-dur-press) var(--qz-ease);
}
.perf-template-card:hover,
.perf-template-card:focus-visible {
  border-color: var(--qz-accent);
  background: var(--qz-accent-soft);
  transform: translateY(-2px);
  outline: none;
}
.perf-template-card h5 {
  margin: 0;
  font-family: 'Alfa Slab One', cursive;
  font-weight: 100;
  /* 13px pour une grasse a empattements, c'etait illisible : on remonte a h3
     et on redonne de l'interligne. */
  font-size: var(--qz-fs-h3);
  line-height: 1.3;
  color: var(--qz-text);
}
.perf-template-card p {
  margin: 0;
  font-family: var(--qz-font);
  font-size: var(--qz-fs-sm);
  line-height: 1.5;
  color: var(--qz-muted);
}
/* Pousse la meta en bas : les cartes d'une meme rangee s'alignent meme quand
   les descriptions n'ont pas la meme longueur. */
.perf-template-card small {
  margin-top: auto;
  padding-top: var(--qz-1);
  font-family: var(--qz-font);
  font-size: var(--qz-fs-xs);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-muted);
}
.perf-template-card--custom {
  border-style: dashed;
  border-color: var(--qz-accent-mid);
}
.perf-objective-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 64px 1fr 28px;
  gap: var(--qz-1);
  align-items: center;
  margin-bottom: var(--qz-1);
}
.perf-obj-remove,
.perf-gobj-remove {
  border: 0;
  background: transparent;
  color: var(--qz-muted);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
}
.perf-obj-remove:hover,
.perf-gobj-remove:hover { color: var(--qz-error); }

/* ── Desktop (≥768px) ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
  [data-qz-skin="performances"] .perf-header h2 { font-size: 24px; }
  [data-qz-skin="performances"] .perf-seg--view {
    align-self: flex-end;
    min-width: 320px;
  }
  [data-qz-skin="performances"] .perf-seg--view .perf-seg__btn { padding: 8px 24px; }
  [data-qz-skin="performances"] .perf-synthese-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--qz-4);
    align-items: stretch;
  }
  [data-qz-skin="performances"] .perf-hero-card {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: var(--qz-6);
  }
  [data-qz-skin="performances"] .perf-hero-card__info { align-items: center; }
  [data-qz-skin="performances"] .perf-delta-chip { align-self: center; }
  [data-qz-skin="performances"] .perf-kpi-grid { gap: var(--qz-4); }
  [data-qz-skin="performances"] .perf-kpi-value { font-size: 26px; }
  [data-qz-skin="performances"] .perf-activity__grid {
    grid-template-columns: repeat(28, minmax(0, 1fr));
  }
  [data-qz-skin="performances"] .perf-activity__grid > span { display: none; }
  [data-qz-skin="performances"] .perf-plans-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
  [data-qz-skin="performances"] .perf-plans-list > .perf-empty,
  [data-qz-skin="performances"] .perf-plans-list > .perf-loading,
  [data-qz-skin="performances"] .perf-plans-list > .perf-plan-detail { grid-column: 1 / -1; }
}

/* ── Sortie vers les Statistiques (28.AOU.2026) ─────────────────────────────
   docs/design/PERFORMANCES_ARCHITECTURE_PLAN.md §4 : #stats-v2 n'est plus une
   destination de 1er niveau, on y entre PAR ici. Le bloc ferme la Synthese,
   donc il se lit comme une suite et non comme une action concurrente : d'ou le
   fond neutre plutot qu'un bouton accentue. */
[data-qz-skin="performances"] .perf-stats-exit {
  display: flex;
  align-items: center;
  gap: var(--qz-3, 12px);
  margin-top: var(--qz-4, 16px);
  padding: var(--qz-3, 12px) var(--qz-4, 16px);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card, 16px);
  text-decoration: none;
  color: inherit;
  transition: background var(--qz-dur-ui) ease, border-color var(--qz-dur-ui) ease;
}
[data-qz-skin="performances"] .perf-stats-exit:hover {
  background: var(--qz-accent-soft);
  border-color: var(--qz-accent-mid);
}
[data-qz-skin="performances"] .perf-stats-exit:focus-visible {
  outline: 2px solid var(--qz-accent);
  outline-offset: 2px;
}
[data-qz-skin="performances"] .perf-stats-exit__label {
  font-size: var(--qz-fs-body, 15px);
  font-weight: var(--qz-fw-strong, 500);
  color: var(--qz-accent-ink);
}
/* Pousse le chevron a droite sans marge negative ni float. */
[data-qz-skin="performances"] .perf-stats-exit__hint {
  flex: 1;
  font-size: var(--qz-fs-xs, 11px);
  color: var(--qz-muted);
}
[data-qz-skin="performances"] .perf-stats-exit__chevron {
  display: inline-flex;
  color: var(--qz-muted);
  flex: 0 0 auto;
}

@media (max-width: 480px) {
  /* Le sous-titre passe sous le libelle : cote a cote, les deux se coupaient. */
  [data-qz-skin="performances"] .perf-stats-exit { flex-wrap: wrap; }
  [data-qz-skin="performances"] .perf-stats-exit__hint { flex-basis: 100%; order: 3; }
}

@media (prefers-reduced-motion: reduce) {
  [data-qz-skin="performances"] .perf-stats-exit { transition: none; }
}

/* ── « Stats execution » deplace en bas de l'onglet Performances groupe ─────
   Le bouton arrive de la rangee d'actions rapides (groups.js
   moveExecStatsButtonToBottom). Il garde son habillage .btn-ux ; on ne pose
   ici que son isolement en fin de page. */
[data-qz-skin="performances"] .perf-exec-stats {
  display: flex;
  justify-content: center;
  margin-top: var(--qz-5);
  padding-top: var(--qz-4);
  border-top: 1px solid var(--qz-line);
}

/* ── En-tetes masquees sur mobile ────────────────────────────────────────────
   #performances et #plans partagent data-qz-skin="performances" et rendent tous
   deux un `.perf-header` : on distingue donc par l'ID du conteneur, sinon la
   regle de l'un s'appliquerait a l'autre.

   - #plans : l'en-tete entiere disparait. Elle ne porte qu'un eyebrow et un
     titre, or le fil d'Ariane annonce deja la page — c'etait un doublon qui
     mangeait une hauteur precieuse sur petit ecran.
   - #performances : seuls les TITRES disparaissent. L'en-tete est conservee
     car elle porte aussi le selecteur de periode (7j/30j/90j), qui doit rester
     atteignable. */
@media (max-width: 767.98px) {
  #plans .perf-header { display: none; }
  #performances .perf-header__titles { display: none; }
  /* L'en-tete ne contient plus que le selecteur : qu'il prenne toute la largeur
     au lieu de rester colle a droite d'un titre absent. */
  #performances .perf-header { justify-content: stretch; }
  #performances .perf-header .perf-seg--period { flex: 1; }
}

/* ── Sélecteur de portée (Synthèse) ────────────────────────────────────
   Un seul contrôle pour une seule question : sur quelle fenêtre je me
   regarde. Les durées glissantes et les plans en sont les réponses. Un plan
   porte SA fenêtre, donc sa pastille REMPLACE les onglets — elle ne s'ajoute
   pas à côté, ce qui poserait deux questions de temps à la fois. */
[data-qz-skin="performances"] .perf-scope {
  position: relative;
}
[data-qz-skin="performances"] .perf-scope-sep {
  width: 1px;
  align-self: stretch;
  margin: 3px 2px;
  background: var(--qz-line);
}
[data-qz-skin="performances"] .perf-scope-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
[data-qz-skin="performances"] .perf-scope-more__chev {
  display: inline-flex;
  transform: rotate(90deg);
}

/* La pastille du plan actif */
[data-qz-skin="performances"] .perf-scope-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--qz-2);
  padding: 5px 6px 5px var(--qz-3);
  max-width: 300px;
  border-radius: var(--qz-r-control);
  background: var(--qz-accent-soft);
  border: 1px solid var(--qz-accent-mid, var(--qz-line));
}
[data-qz-skin="performances"] .perf-scope-pill__ico {
  display: grid;
  place-items: center;
  color: var(--qz-accent-ink);
  flex: none;
}
[data-qz-skin="performances"] .perf-scope-pill__txt {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
[data-qz-skin="performances"] .perf-scope-pill__name {
  font-size: var(--qz-fs-sm);
  font-weight: 800;
  color: var(--qz-accent-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-qz-skin="performances"] .perf-scope-pill__win {
  font-size: var(--qz-fs-xs);
  color: var(--qz-muted);
}
[data-qz-skin="performances"] .perf-scope-pill__x {
  flex: none;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: var(--qz-r-pill);
  background: transparent;
  color: var(--qz-accent-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
}
[data-qz-skin="performances"] .perf-scope-pill__x:hover {
  background: var(--qz-accent-mid, var(--qz-line));
}
[data-qz-skin="performances"] .perf-scope-pill__x:focus-visible {
  outline: none;
  box-shadow: var(--qz-focus-ring);
}

/* Le menu */
[data-qz-skin="performances"] .perf-scope-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  z-index: 40;
  width: 302px;
  max-width: calc(100vw - 32px);
  padding: 6px;
  display: flex;
  flex-direction: column;
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  box-shadow: var(--qz-shadow-md);
}
[data-qz-skin="performances"] .perf-scope-head {
  font-size: var(--qz-fs-xs);
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--qz-muted);
  padding: 7px 10px 5px;
}
[data-qz-skin="performances"] .perf-scope-search {
  display: block;
  padding: 2px 4px 7px;
}
[data-qz-skin="performances"] .perf-scope-search input {
  width: 100%;
  font: inherit;
  font-size: var(--qz-fs-sm);
  padding: 7px 10px;
  color: var(--qz-text);
  background: var(--qz-screen);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-control);
}
[data-qz-skin="performances"] .perf-scope-search input:focus-visible {
  outline: none;
  box-shadow: var(--qz-focus-ring);
}
[data-qz-skin="performances"] .perf-scope-item {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--qz-r-control);
  background: transparent;
  color: var(--qz-text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}
[data-qz-skin="performances"] .perf-scope-item:hover,
[data-qz-skin="performances"] .perf-scope-item.is-on {
  background: var(--qz-accent-soft);
}
[data-qz-skin="performances"] .perf-scope-item:focus-visible {
  outline: none;
  box-shadow: var(--qz-focus-ring);
}
[data-qz-skin="performances"] .perf-scope-dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--qz-accent);
  opacity: .25;
}
[data-qz-skin="performances"] .perf-scope-item.is-on .perf-scope-dot { opacity: 1; }
[data-qz-skin="performances"] .perf-scope-item.is-draft .perf-scope-dot { background: var(--qz-muted); }
[data-qz-skin="performances"] .perf-scope-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
[data-qz-skin="performances"] .perf-scope-name {
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-qz-skin="performances"] .perf-scope-meta {
  font-size: var(--qz-fs-xs);
  color: var(--qz-muted);
}
[data-qz-skin="performances"] .perf-scope-rule {
  display: block;
  height: 1px;
  margin: 5px 8px;
  background: var(--qz-line);
}
[data-qz-skin="performances"] .perf-scope-empty {
  margin: 0;
  padding: 14px 12px;
  font-size: var(--qz-fs-sm);
  color: var(--qz-muted);
  text-align: center;
}
[data-qz-skin="performances"] .perf-scope-foot {
  display: block;
  padding: 8px 10px;
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-accent-ink);
  text-decoration: none;
  border-radius: var(--qz-r-control);
}
[data-qz-skin="performances"] .perf-scope-foot:hover {
  background: var(--qz-accent-soft);
  text-decoration: underline;
}

/* ── Barème : la cible portée sur le chiffre qu'elle note ──────────────
   Présent UNIQUEMENT en mode plan. C'est la seule chose que la portée
   globale ne peut pas afficher, et donc la raison d'être du sélecteur :
   sans elle, on n'aurait livré qu'un choix de dates. */
[data-qz-skin="performances"] .perf-hero-goal {
  display: inline-block;
  padding: 3px 10px;
  margin-right: var(--qz-1);
  border-radius: var(--qz-r-pill);
  font-size: var(--qz-fs-xs);
  font-weight: 800;
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
}
[data-qz-skin="performances"] .perf-delta-chip.is-muted {
  background: transparent;
  color: var(--qz-muted);
  font-weight: var(--qz-fw-strong);
}
[data-qz-skin="performances"] .perf-kpi-goal {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 7px;
}
[data-qz-skin="performances"] .perf-kpi-goal__label {
  font-size: var(--qz-fs-xs);
  font-weight: 800;
  color: var(--qz-accent-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-qz-skin="performances"] .perf-kpi-goal__bar {
  display: block;
  height: 4px;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent-soft);
  overflow: hidden;
}
[data-qz-skin="performances"] .perf-kpi-goal__bar i {
  display: block;
  height: 100%;
  border-radius: var(--qz-r-pill);
  background: var(--qz-accent);
}
[data-qz-skin="performances"] .perf-kpi-goal__bar.is-done i { background: var(--qz-success-ink, var(--qz-accent)); }
[data-qz-skin="performances"] .perf-kpi-goal__bar.is-low i { background: var(--qz-warning-ink, var(--qz-energy)); }
[data-qz-skin="performances"] .perf-kpi-goal__foot {
  font-size: var(--qz-fs-xs);
  color: var(--qz-muted);
}

/* Sur mobile l'en-tete passe a la ligne : le controle de portee se retrouve a
   GAUCHE, et un menu ancre par sa droite sur 302 px voyait son bord gauche
   sortir de l'ecran — il etait coupe net. Le menu se repere donc sur l'en-tete
   plutot que sur le controle, et occupe toute sa largeur : aucune arithmetique
   de debordement a tenir, quel que soit le cote ou le controle a atterri. */
@media (max-width: 620px) {
  [data-qz-skin="performances"] .perf-header { position: relative; }
  [data-qz-skin="performances"] .perf-scope { position: static; }
  [data-qz-skin="performances"] .perf-scope-menu {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
  }
  [data-qz-skin="performances"] .perf-scope-pill { max-width: 100%; }
}

/* ── Bandeau de resultat, en tete du detail d'un plan ──────────────────
   Le detail montrait des CIBLES et des PROGRESSIONS, jamais ce que le plan a
   produit. Ce bandeau repond a l'endroit ou la question se pose, et le clic
   ouvre la Synthese recoupee sur ce plan (#performances?scope=N).

   Il emprunte l'accent doux plutot que la surface blanche des cartes : c'est
   une REPONSE, pas un objet de la liste — et cela le distingue de la grille
   d'objectifs qui le suit immediatement. */
[data-qz-skin="performances"] .perf-plan-outcome {
  display: flex;
  align-items: center;
  gap: var(--qz-3);
  margin-bottom: var(--qz-3);
  padding: var(--qz-3);
  border-radius: var(--qz-r-card);
  background: var(--qz-accent-soft);
  border: 1px solid var(--qz-accent-mid, var(--qz-line));
  text-decoration: none;
  transition: background var(--qz-dur-press) var(--qz-ease);
}
[data-qz-skin="performances"] .perf-plan-outcome:hover {
  background: var(--qz-accent-mid, var(--qz-accent-soft));
}
[data-qz-skin="performances"] .perf-plan-outcome:focus-visible {
  outline: none;
  box-shadow: var(--qz-focus-ring);
}
[data-qz-skin="performances"] .perf-plan-outcome__ring {
  flex: none;
  display: grid;
  place-items: center;
  min-width: 38px;
  min-height: 38px;
}
[data-qz-skin="performances"] .perf-plan-outcome__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
  /* Le detail centre son texte ; ce bandeau doit rester alignee a gauche. */
  text-align: left;
}
[data-qz-skin="performances"] .perf-plan-outcome__title {
  font-size: var(--qz-fs-sm);
  font-weight: 800;
  color: var(--qz-accent-ink);
}
[data-qz-skin="performances"] .perf-plan-outcome__sub {
  font-size: var(--qz-fs-xs);
  color: var(--qz-muted);
}
[data-qz-skin="performances"] .perf-plan-outcome__chev {
  flex: none;
  display: inline-flex;
  color: var(--qz-accent);
}
/* Etat d'attente : la place est deja prise, rien ne se decalera. */
[data-qz-skin="performances"] .perf-plan-outcome.is-loading .perf-plan-outcome__ring {
  border-radius: 50%;
  background: var(--qz-accent-mid, var(--qz-line));
  opacity: .45;
}
[data-qz-skin="performances"] .perf-plan-outcome.is-loading .perf-plan-outcome__sub {
  opacity: .7;
}

/* ── Selecteur de portee, dans l'assistant de creation ─────────────────
   Meme interaction que le selecteur de la Synthese : cinq entrees, une
   recherche, et l'objet choisi qui REMPLACE le selecteur. Une liste deroulante
   refermee ne dit plus ce qu'elle contient ; une pastille le nomme. */
.modal .perf-scope-pick { margin-bottom: var(--qz-3); }

.modal .perf-scope-pick__tabs {
  display: flex;
  gap: 4px;
  padding: 3px;
  margin-bottom: 8px;
  background: var(--qz-screen);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-pill);
}
.modal .perf-scope-pick__tab {
  flex: 1;
  border: 0;
  background: transparent;
  font-size: var(--qz-fs-xs);
  font-weight: var(--qz-fw-strong);
  color: var(--qz-muted);
  padding: 6px 4px;
  border-radius: var(--qz-r-pill);
  cursor: pointer;
  white-space: nowrap;
}
.modal .perf-scope-pick__tab.is-active {
  background: var(--qz-accent);
  color: var(--qz-on-accent);
  font-weight: 800;
}
.modal .perf-scope-pick__warn {
  margin: 8px 0 0;
  padding: 7px 9px;
  border-radius: var(--qz-r-control);
  font-size: var(--qz-fs-xs);
  line-height: 1.4;
  color: var(--qz-warning-ink);
  background: var(--qz-warning-bg);
}

/* le panneau de choix */
.modal .perf-pick__panel {
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card);
  overflow: hidden;
}
.modal .perf-pick__search { padding: 8px; border-bottom: 1px solid var(--qz-line); }
.modal .perf-pick__search input {
  width: 100%;
  font: inherit;
  font-size: var(--qz-fs-sm);
  padding: 7px 10px;
  border-radius: var(--qz-r-control);
  color: var(--qz-text);
  background: var(--qz-screen);
  border: 1px solid var(--qz-line);
}
.modal .perf-pick__head {
  display: block;
  font-size: var(--qz-fs-xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--qz-muted);
  padding: 8px 12px 4px;
}
.modal .perf-pick__list { max-height: 212px; overflow-y: auto; padding: 0 6px 6px; }
.modal .perf-pick__opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: var(--qz-r-control);
  background: transparent;
  color: var(--qz-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.modal .perf-pick__opt:hover { background: var(--qz-accent-soft); }
.modal .perf-pick__opt.is-on { background: var(--qz-accent-soft); }
.modal .perf-pick__ico {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: var(--qz-r-control);
  display: grid;
  place-items: center;
  background: var(--qz-accent-soft);
  color: var(--qz-accent-deep);
}
.modal .perf-pick__ico svg { width: 14px; height: 14px; display: block; }
.modal .perf-pick__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.25;
}
.modal .perf-pick__name {
  font-size: var(--qz-fs-sm);
  font-weight: var(--qz-fw-strong);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal .perf-pick__meta { font-size: var(--qz-fs-xs); color: var(--qz-muted); }
.modal .perf-pick__check {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 1.5px solid var(--qz-line);
  display: grid;
  place-items: center;
  color: var(--qz-on-accent);
  font-size: 11px;
  font-weight: 800;
}
.modal .perf-pick__opt.is-on .perf-pick__check {
  background: var(--qz-accent);
  border-color: var(--qz-accent);
}
.modal .perf-pick__hint,
.modal .perf-pick__empty {
  margin: 8px 0 0;
  padding: 10px 12px;
  font-size: var(--qz-fs-xs);
  color: var(--qz-muted);
  text-align: center;
}
.modal .perf-pick__hint {
  border: 1px dashed var(--qz-line);
  border-radius: var(--qz-r-card);
}

/* la barre de validation : les quiz SEULS en ont une */
.modal .perf-pick__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px;
  border-top: 1px solid var(--qz-line);
  background: var(--qz-screen);
}
.modal .perf-pick__count { font-size: var(--qz-fs-xs); color: var(--qz-muted); }
.modal .perf-pick__ok {
  border: 0;
  border-radius: var(--qz-r-pill);
  padding: 7px 16px;
  cursor: pointer;
  font: inherit;
  font-size: var(--qz-fs-sm);
  font-weight: 800;
  background: var(--qz-accent);
  color: var(--qz-on-accent);
}
.modal .perf-pick__ok[disabled] {
  background: var(--qz-line);
  color: var(--qz-muted);
  cursor: not-allowed;
}

/* la pastille qui remplace le selecteur */
.modal .perf-pick__chosen {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 8px 9px 12px;
  border-radius: var(--qz-r-card);
  background: var(--qz-accent-soft);
  border: 1px solid var(--qz-accent-mid, var(--qz-line));
}
.modal .perf-pick__chosen-ico {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--qz-accent-deep);
}
.modal .perf-pick__chosen-ico svg { width: 15px; height: 15px; display: block; }
/* Le corps est un BOUTON : cliquer la pastille rouvre le panneau, avec la
   selection conservee et les quiz coches en tete. */
.modal .perf-pick__chosen-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.2;
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.modal .perf-pick__chosen-kind {
  font-size: var(--qz-fs-xs);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--qz-muted);
}
.modal .perf-pick__chosen-name {
  font-size: var(--qz-fs-body);
  font-weight: 800;
  color: var(--qz-accent-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal .perf-pick__chosen-x {
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--qz-r-control);
  cursor: pointer;
  background: transparent;
  color: var(--qz-accent-deep);
  font-size: 17px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.modal .perf-pick__chosen-x:hover { background: var(--qz-accent-mid, var(--qz-line)); }

.modal .perf-scope-pick__tab:focus-visible,
.modal .perf-pick__opt:focus-visible,
.modal .perf-pick__ok:focus-visible,
.modal .perf-pick__search input:focus-visible,
.modal .perf-pick__chosen-txt:focus-visible,
.modal .perf-pick__chosen-x:focus-visible {
  outline: none;
  box-shadow: var(--qz-focus-ring);
}

/* ── La portee, affichee la ou le plan se lit ──────────────────────────
   Une pastille sous les dates : la portee est une propriete d'identite du
   plan, pas une mesure — elle appartient a la carte qui le nomme. */
[data-qz-skin="performances"] .perf-plan-scope-chip {
  display: inline-flex;
  /* .perf-detail-card est un conteneur flex : un enfant y voit son
     `inline-flex` transforme en `flex` par la specification, et s'etire sur
     toute la largeur. `align-self` lui rend sa taille de contenu. */
  align-self: flex-start;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: var(--qz-r-pill);
  font-size: var(--qz-fs-xs);
  font-weight: var(--qz-fw-strong);
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
}
[data-qz-skin="performances"] .perf-plan-scope-chip__kind {
  opacity: .75;
  font-weight: 600;
}
/* La couverture : dite, jamais devinee. Un plan a portee affiche moins que la
   Synthese globale, et l'ecart n'est pas un defaut. */
[data-qz-skin="performances"] .perf-coverage-note {
  margin: 0 0 var(--qz-3);
  padding: 8px 12px;
  border-radius: var(--qz-r-control);
  font-size: var(--qz-fs-xs);
  color: var(--qz-muted);
  background: var(--qz-screen);
  border: 1px dashed var(--qz-line);
  text-align: left;
}