/* ============================================================
   D3RF -- a-propos.css
   Page /a-propos/ (VISUAL_SPEC section 9). 3 blocs, colonne
   --container-narrow alignee a gauche. Jalons = constellation
   verticale, pas un CV.
   ============================================================ */
.a-propos-body {
  padding: var(--space-8) 0 var(--space-9);
}

.a-propos-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: var(--container-narrow);
}

.a-propos-affirmation {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-d2);
  line-height: var(--lh-title);
  color: var(--text-primary);
  max-width: var(--measure-short);
  text-wrap: balance;
  margin-bottom: var(--space-8);
}

.a-propos-recit {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.a-propos-recit h2 {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  letter-spacing: var(--ls-mono-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-6);
}

.a-propos-recit p {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  max-width: var(--measure-prose);
}

/* Jalons : constellation verticale, pas un CV/timeline LinkedIn */
.jalons {
  margin-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: relative;
  padding-left: var(--space-6);
}

.jalons::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 8px;
  bottom: 8px;
  width: var(--stroke-node);
  background: var(--line-default);
}

.jalon {
  position: relative;
}

.jalon::before {
  content: '';
  position: absolute;
  left: calc(-1 * var(--space-6));
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--bg-primary);
  border: 2px solid var(--node-active);
}

.jalon-year {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-m);
  letter-spacing: var(--ls-mono);
  color: var(--text-muted);
  display: block;
  margin-bottom: 4px;
}

.jalon-line {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--text-secondary);
}
.jalon-line strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

@media (min-width: 1024px) {
  .a-propos-layout {
    display: grid;
    grid-template-columns: minmax(0, var(--measure-prose)) 220px;
    gap: var(--space-8);
    max-width: none;
  }
  .a-propos-affirmation {
    grid-column: 1 / -1;
  }
  .jalons {
    margin-top: 0;
    position: sticky;
    top: calc(var(--space-6) + 60px);
    align-self: start;
  }
}

.a-propos-cta {
  padding: var(--space-8) 0;
  background: var(--bg-section-alt);
}
.a-propos-cta-line {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  color: var(--text-primary);
  margin-bottom: var(--space-5);
  max-width: var(--measure-lead);
}