.kasc-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; margin-top:40px;}
.card { background:var(--surface-bg,#111); border-radius:14px; box-shadow:0 1px 3px rgba(0,0,0,.06); padding:1rem; }
.muted { color:#fff; }
.metrics { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.75rem; }
.metric { background:var(--surface-subtle,#333); border-radius:12px; padding:.75rem; }
.metric .label { font-size:.8rem; color:#fff; }
.metric .value { font-weight:700; font-size:1.15rem; }
.controls { display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.controls .group { display:flex; gap:.5rem; align-items:center; }
.pill { border:1px solid #e5e7eb; padding:.35rem .6rem; border-radius:999px; cursor:pointer; background:#fff; color:#000;}
.pill.active { background:#007bc8; color:#fff; border-color:#007bc8; }
.stack { display:flex; flex-direction:column; gap:.5rem; }
.section-title { font-weight:700; font-size:1.1rem; }
.help { font-size:.85rem; color:#fff; }

/* Utilitaires pour remplacer les style="..." */
.span-full { grid-column:1 / -1; }
.row { display:flex; }
.between { justify-content:space-between; }
.align-end { align-items:flex-end; }
.align-center { align-items:center; }
.wrap { flex-wrap:wrap; }
.gap-1 { gap:1rem; }
.gap-05 { gap:.5rem; }
.mt-3 { margin-top:.75rem; }
.text-xs { font-size:.75rem; }
.text-sm { font-size:.8rem; }
.page-title { margin:0; font-size:2rem; }

/* Charts responsives */
.chart-wrap { position:relative; width:100%; height:var(--chart-h, clamp(320px, 42vh, 640px)); }
.chart-wrap.chart-md { --chart-h: clamp(300px, 38vh, 560px); }
.chart-wrap.chart-lg { --chart-h: clamp(340px, 48vh, 720px); }
.chart-wrap canvas { width:100% !important; height:100% !important; }

@media (max-width:1024px){
  .metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
  .chart-wrap { --chart-h: clamp(280px, 40vh, 520px); }
}
@media (max-width:640px){
  .kasc-grid{grid-template-columns:repeat(6,1fr);}
  .chart-wrap { --chart-h: clamp(260px, 38vh, 480px); }
}

/* ajouter pour le tableau des perfs relatives */

/* Wrapper (garde les coins et le scroll proprement) */
.table-wrap {
  width: 100%;
  overflow: auto;                       /* sticky header fonctionne dans ce scroller */
  border: 1px solid #6a6a6a;
  border-radius: 12px;
  background: #555;                     /* même fond que la table */
}

/* Tableau des perfs relatives (dark) */
.perf-table {
  width: 100%;
  table-layout: fixed;                  /* colonnes d'égale largeur */
  border-collapse: separate;
  border-spacing: 0;
  background: #555;
  color: #fff;
  font-variant-numeric: tabular-nums;   /* chiffres alignés */
}

/* Colonnage égal (14 colonnes: Année + 12 mois + Cumul) */
.perf-table th,
.perf-table td {
  width: calc(100% / 14);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* En-tête */
.perf-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #666;                     /* léger contraste vs #555 */
  color: #fff;
  font-weight: 600;
  font-size: .9rem;
  padding: .6rem .75rem;
  text-align: right;
  border-bottom: 1px solid #6f6f6f;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);  /* séparation visuelle */
}

/* Corps */
.perf-table tbody td {
  background: #555;
  padding: .6rem .75rem;
  text-align: right;
  border-bottom: 1px solid #6a6a6a;
}

/* 1re colonne (Année) : à gauche / plus forte) */
.perf-table thead th:first-child,
.perf-table tbody td:first-child {
  text-align: left;
  font-weight: 700;
}

/* Dernière colonne (Cumul annuel) : mise en avant */
.perf-table thead th:last-child,
.perf-table tbody td:last-child {
  font-weight: 700;
}

/* Zébrage */
.perf-table tbody tr:nth-child(even) td {
  background: #5e5e5e;
}

/* Survol (background + texte un peu adouci) */
.perf-table tbody tr:hover td {
  background: #6a6a6a;
  color: #f2f2f2;
}

/* Focus clavier (accessibilité) */
.perf-table tbody tr:focus-within td {
  outline: 1px dashed #9acbff;
  outline-offset: -2px;
}

/* Coins arrondis si pas de wrapper avec radius appliqué */
.perf-table thead th:first-child { border-top-left-radius: 12px; }
.perf-table thead th:last-child  { border-top-right-radius: 12px; }
.perf-table tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.perf-table tbody tr:last-child td:last-child  { border-bottom-right-radius: 12px; }

/* Petits écrans : resserrer un peu */
@media (max-width: 640px){
  .perf-table thead th,
  .perf-table td { padding: .5rem .6rem; font-size: .8rem; }
}