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

.jalon-detail-preview__shell {
  max-width: var(--jalon-detail-max-width);
}

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

/* ── Vue détail (écran, pas une carte : pas de bordure englobante) ── */
.ds-jalon-detail {
  display: flex;
  flex-direction: column;
}

/* ── Head : meta + Modifier, titre, échéance ─────────────────── */
.ds-jalon-detail__head {
  display: flex;
  flex-direction: column;
  gap: var(--jalon-detail-head-gap);
}

.ds-jalon-detail__meta-row {
  display: flex;
  align-items: flex-start;   /* meta en haut (pas centrée sur le bouton plus haut) → alignée au rail */
  justify-content: space-between;
  gap: var(--space-8);
}

.ds-jalon-detail__meta {
  color: var(--jalon-detail-meta-color);
  letter-spacing: var(--letter-spacing-label);
}

.ds-jalon-detail__title {
  color: var(--color-text-primary);
}

.ds-jalon-detail__due {
  color: var(--jalon-detail-due-color);
}

/* Filet séparateur (même trait que le reste du système). */
.ds-jalon-detail__rule {
  width: 100%;
  height: 0;
  margin: var(--jalon-detail-rule-gap) 0;
  border: 0;
  border-top: var(--border-subtle);
}

/* ── Section (label + contenu) ───────────────────────────────── */
.ds-jalon-detail__section {
  display: flex;
  flex-direction: column;
  gap: var(--jalon-detail-label-gap);
}

.ds-jalon-detail__section + .ds-jalon-detail__section {
  margin-top: var(--jalon-detail-section-gap);
}

/* Label de section = eyebrow ANCRE blanc (Modal §6 / SMART §925) : il introduit le contenu,
   il ne doit pas être plus faible que le paragraphe qu'il annonce (sinon hiérarchie inversée). */
.ds-jalon-detail__label {
  color: var(--color-text-primary);
  letter-spacing: var(--letter-spacing-label);
}

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

/* Les 2 cartes KPI vivent sur la grille DS (.ds-grid + .ds-col-6 chacune) — plus de grille
   locale : gouttière = --grid-gutter, reflow géré par grid.css. */
/* Largeur fixe (360) du composant neutralisée → la colonne de grille (col-6) pilote la largeur. */
.ds-jalon-detail__kpi-grid .ds-kpi-card {
  width: auto;
}

/* Nom en blanc uniquement ; on garde le nowrap/ellipsis 1-ligne du composant (§866) :
   des noms sur 2 lignes rendaient les cartes de hauteurs inégales → creux. Le nom complet
   reste visible dans le modal d'édition du KPI. */
.ds-jalon-detail__kpi-grid .ds-kpi-card__name {
  color: var(--color-text-primary);
}

/* ── Footer : Valider ce jalon + ⋯ ───────────────────────────── */
.ds-jalon-detail__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
}

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