/* ============================================================
   SaySeeShow — Gabarit « à propos »
   (SaySeeShow, L'équipe, Développement durable, Presse)
   Complète assets/css/style.css — ne redéfinit ni tokens ni
   composants existants (règle DRY, AGENTS.md R11).
   ============================================================ */

/* Frise chronologique */

.timeline {
  position: relative;
  display: grid;
  gap: var(--sp-6);
  margin: 0;
  padding-left: var(--sp-6);
  list-style: none;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 7px;
  width: 2px;
  background: var(--c-border);
}

.timeline > li {
  position: relative;
}

.timeline > li::before {
  content: "";
  position: absolute;
  top: 0.55rem;
  left: calc(-1 * var(--sp-6) + 1px);
  width: 14px;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--c-accent);
  box-shadow: 0 0 0 4px var(--c-accent-soft);
}

.timeline .timeline-date {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-primary);
  margin-bottom: var(--sp-1);
}

.timeline h3 {
  margin: 0 0 var(--sp-2);
  font-size: 1.125rem;
}

.timeline p {
  margin: 0;
}

/* Chiffres du parcours */

.milestones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}

@media (max-width: 960px) {
  .milestones { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .milestones { grid-template-columns: 1fr; }
}