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

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

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

.jalon-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--jalon-card-grid-gap);
  align-items: start;
}

/* ── Card shell : rythme GROUPÉ (gap:0 + marges par relation, pas uniforme) ── */
.ds-jalon-card {
  display: grid;
  gap: 0;
  align-content: start;
  padding: var(--jalon-card-padding);
  background: var(--card-background);
  border: var(--card-border-defined);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow-defined);
  transition: var(--card-transition);
  cursor: pointer;
}

.ds-jalon-card:hover,
.ds-jalon-card:focus-visible {
  border: var(--card-border-active);
  outline: none;
}

/* ── Head : meta + statut ───────────────────────────────────── */
.ds-jalon-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
}

.ds-jalon-card__meta {
  color: var(--jalon-card-meta-color);
  letter-spacing: var(--letter-spacing-label); /* micro-label majuscule tracké (cohérence eyebrows DS) */
}

/* ── Statut pill ────────────────────────────────────────────── */
.ds-jalon-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: var(--badge-padding-block) var(--badge-padding-inline);
  background: var(--jalon-status-pill-background);
  border-radius: var(--jalon-status-pill-radius);
  font-size: var(--type-data-label-size);
  line-height: var(--type-data-label-line);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.ds-jalon-status__dot {
  width: var(--jalon-status-dot-size);
  height: var(--jalon-status-dot-size);
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.ds-jalon-status--active { color: var(--jalon-status-active-text); }
.ds-jalon-status--active .ds-jalon-status__dot { background: var(--jalon-status-active-dot); }

.ds-jalon-status--done { color: var(--jalon-status-done-text); }
.ds-jalon-status--done .ds-jalon-status__dot { background: var(--jalon-status-done-dot); }

.ds-jalon-status--upcoming { color: var(--jalon-status-upcoming-text); }
.ds-jalon-status--upcoming .ds-jalon-status__dot { background: var(--jalon-status-upcoming-dot); }

/* ── Title + date (groupe identité, serré) ──────────────────── */
.ds-jalon-card__body {
  margin-top: var(--jalon-card-body-gap);
  display: grid;
  gap: var(--space-4);
}

.ds-jalon-card__date {
  color: var(--jalon-card-date-color);
}

/* ── Avancement des tâches (nouveau bloc → rupture depuis l'identité) ── */
.ds-jalon-card__progress {
  margin-top: var(--jalon-card-block-gap);
  display: grid;
  gap: var(--space-8);
}

.ds-jalon-card__progress-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-8);
}

.ds-jalon-card__progress-count {
  color: var(--color-text-secondary);
}

/* ── CTA (action → séparée du bloc avancement) ──────────────── */
.ds-jalon-card__cta {
  margin-top: var(--jalon-card-cta-gap);
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  color: var(--jalon-card-cta-color);
  font-size: var(--type-body-sm-size);
  font-weight: var(--font-weight-medium);
  transition: var(--motion-transition-default);
}

.ds-jalon-card:hover .ds-jalon-card__cta,
.ds-jalon-card:focus-visible .ds-jalon-card__cta {
  color: var(--jalon-card-cta-color-hover);
}

.ds-jalon-card__cta-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);
}

/* Fill widths for the demo progress bars */
.ds-progress__fill--38 { transform: scaleX(0.38); }
.ds-progress__fill--100 { transform: scaleX(1); }

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