.kpi-card-preview {
  min-height: 100vh;
  padding: var(--space-page-desktop);
  color: var(--color-text-primary);
}

.kpi-card-preview__shell {
  max-width: 960px;
}

.kpi-card-preview__header {
  margin-bottom: var(--space-section-gap);
}

.kpi-card-section + .kpi-card-section {
  margin-top: var(--space-section-gap);
}

.kpi-card-section__label {
  margin-bottom: var(--space-16);
  color: var(--color-text-secondary);
}

.kpi-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--kpi-card-width));
  gap: var(--kpi-card-grid-gap);
  align-items: start; /* toutes les cartes = même taille fixe → grille régulière premium */
}

/* Grille compacte (vue long terme) : cartes ~2x moins larges, colonnes fixes
   étroites alignées à gauche (tuiles denses, pas d'étirement pleine largeur). */
.kpi-card-grid--compact {
  grid-template-columns: repeat(auto-fill, var(--kpi-card-summary-width));
}

/* ── Card shell ─────────────────────────────────────────────── */
/* Rythme GROUPÉ : gap de base nul, chaque rupture est posée en margin explicite
   (intra-groupe serré titre↔fraîcheur, ruptures inter-groupes larges). */
.ds-kpi-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: var(--kpi-card-width);
  min-height: var(--kpi-card-min-height);
  padding: var(--kpi-card-padding);
  background: var(--card-background);
  border: var(--kpi-card-border-defined);
  border-radius: var(--card-radius);
  box-shadow: var(--kpi-card-shadow);
  transition: var(--card-transition);
}

.ds-kpi-card:hover,
.ds-kpi-card:focus-within {
  border: var(--card-border-active);
}

/* ── Header : eyebrow (gauche) + actions (droite : Ajouter + édition) ─── */
.ds-kpi-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
}

.ds-kpi-card__head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.ds-kpi-card__eyebrow {
  color: var(--kpi-card-eyebrow-color);
  letter-spacing: var(--letter-spacing-label); /* micro-label majuscule espacé = raffiné (cohérence système) */
}

/* Crayon d'édition : 16px (sinon défaut viewBox 24 = trop gros) */
.ds-kpi-card__icon {
  width: var(--space-16);
  height: var(--space-16);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--icon-stroke-width);
}

/* Labels = type (eyebrow) + nom du KPI, empilés serrés en haut à gauche. */
.ds-kpi-card__labels {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
  min-width: 0; /* autorise l'ellipsis du nom → le head ne déborde jamais */
}

/* Nom du KPI = identifiant, UNE ligne (ellipsis) → toutes les cartes s'alignent. */
.ds-kpi-card__name {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fraîcheur = contexte du pied (droite du footer), gris muted, une ligne.
   Delta = valeur DYNAMIQUE (longueur variable) → le chip ne rétrécit jamais (info
   prioritaire), c'est la fraîcheur qui tronque si la place manque. */
.ds-kpi-card__meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: var(--kpi-card-meta-color);
}

.ds-kpi-card__footer .ds-delta {
  flex-shrink: 0;
}

/* Mesure en retard → couleur d'état (ambre). Seul point de couleur, fonctionnel. */
.ds-kpi-card__meta--stale {
  color: var(--kpi-card-meta-stale-color);
}

.ds-kpi-card__meta-icon {
  width: var(--space-12);
  height: var(--space-12);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--icon-stroke-width);
}

/* ── Metric : nouveau bloc « mesure » → rupture nette depuis le cluster identité
   (margin-top large). La valeur est la seule emphase (Principe 2). ── */
.ds-kpi-card__metric {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--kpi-card-metric-gap);
}

.ds-kpi-card__value {
  font-size: var(--kpi-card-value-size);
  line-height: var(--kpi-card-value-line);
  font-weight: var(--kpi-card-value-weight);
  letter-spacing: var(--kpi-card-value-tracking);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}

.ds-kpi-card__unit {
  color: var(--kpi-card-unit-color);
}

.ds-kpi-card__target {
  color: var(--kpi-card-target-color);
}

/* ── Filet : coupe le héros (nombre) du pied. Espace SYMÉTRIQUE au-dessus/en-dessous
   (le nombre ne doit pas toucher le filet). Contenu uniforme → cartes de même hauteur
   sans forçage. ── */
.ds-kpi-card__divider {
  margin-block: var(--kpi-card-divider-gap);
  border: 0;
  border-top: var(--border-subtle);
}

/* ── Pied : delta (gauche, place FIXE) · contexte fraîcheur (droite). ── */
.ds-kpi-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

/* ── Action = bouton défini `ds-button--ghost --xs`, flush au bord droit (même marge
   que le texte à gauche). Ne rétrécit pas (le nom absorbe via ellipsis). ── */
.ds-kpi-card__action {
  flex-shrink: 0;
}

/* Cibles tactiles : zone de hit étendue à 44px de haut (confort tactile) sans
   grossir le visuel ni empiéter horizontalement (pas de chevauchement dans le head). */
.ds-kpi-card__action,
.ds-kpi-card .ds-row-action {
  position: relative;
}

.ds-kpi-card__action::after,
.ds-kpi-card .ds-row-action::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  min-height: var(--space-44, 44px);
}

.ds-kpi-card__action-icon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--icon-stroke-width-bold);
  width: var(--space-16);
  height: var(--space-16);
}

/* Delta = composant partagé .ds-delta (écart-à-cible inline quiet, cf. delta.css).
   Migré hors de la KPI card pour être réutilisable sur d'autres écrans. */

/* ── Variante COMPACTE (vue long terme — lecture seule, brève) ──
   Padding + rythme resserrés → carte plus dense qu'en vue jalon. */
.ds-kpi-card--summary {
  gap: 0;
  width: var(--kpi-card-summary-width);
  min-height: var(--kpi-card-summary-min-height);
  padding: var(--kpi-card-summary-padding);
}

/* Compact : titre = nom du KPI en BLANC (medium) → tranche nettement sur les
   métadonnées grises (eyebrow/fraîcheur/cible), sinon tous les gris se confondent.
   Réserve 2 lignes (min-height) → toutes les tuiles ont la MÊME hauteur, quelle
   que soit la longueur du titre (grille régulière). */
.ds-kpi-card--summary .ds-kpi-card__name {
  color: var(--color-text-primary); /* nom en blanc → tranche sur les gris de la tuile dense */
}

.ds-kpi-card--summary .ds-kpi-card__metric {
  margin-top: var(--kpi-card-summary-metric-gap);
}

/* Filet resserré en vue dashboard (24px autour d'un 1px = trop d'air ici). */
.ds-kpi-card--summary .ds-kpi-card__divider {
  margin-block: var(--kpi-card-summary-divider-gap);
}

.ds-kpi-card--summary .ds-kpi-card__value {
  font-size: var(--kpi-card-summary-value-size);
  line-height: var(--kpi-card-summary-value-line);   /* lh suit la taille 28 (sinon hérite du lh 40px → +14px de tuile) */
}

/* ── Empty / define state ───────────────────────────────────── */
.ds-kpi-card__empty-copy {
  margin-top: var(--kpi-card-title-gap);
  min-height: 2lh; /* réserve 2 lignes → cartes « à définir » de même hauteur */
  color: var(--kpi-card-empty-copy-color);
}

.ds-kpi-card__define {
  margin-top: var(--kpi-card-metric-gap);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  justify-content: center;
  padding: var(--space-16);
  color: var(--kpi-card-define-color);
  background: transparent;
  border: var(--kpi-card-define-border);
  border-radius: var(--card-radius);
  font-size: var(--type-body-md-size);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: var(--motion-transition-default);
}

.ds-kpi-card__define:hover,
.ds-kpi-card__define:focus-visible {
  color: var(--kpi-card-define-color-hover);
  border-color: var(--color-text-secondary);
}

.ds-kpi-card__define:focus-visible {
  outline: var(--border-focus);
  outline-offset: var(--space-4);
}

.ds-kpi-card__define-icon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--icon-stroke-width-bold);
  width: var(--space-16);
  height: var(--space-16);
}

/* Largeur de remplissage des barres de démo (même pattern que --17/--100 lib) */
.ds-progress__fill--33 { transform: scaleX(0.33); }

/* Dépassement : barre PLEINE (0→valeur) + tick vertical au seuil → « rempli,
   seuil ici, dépassé » (bien plus lisible qu'un fade lu comme « reste à faire »). */
.ds-kpi-card .ds-progress {
  position: relative;
}

.ds-kpi-card__bar-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--border-width-strong, 2px);
  background: var(--color-background); /* sombre → visible sur le remplissage blanc */
  transform: translateX(-50%);
}

.ds-kpi-card__bar-tick--29 { left: 29%; } /* seuil 15 / valeur 51 */

@media (max-width: 640px) {
  .kpi-card-preview {
    padding: var(--space-page-mobile);
  }
}