/* Bloc villemont/timeline — styles venus de sections.css (refonte 1e) */

/* ── Histoire — timeline ──────────────────────────────────── */

.histoire-timeline .container { margin-bottom: 64px; }

.timeline-chapter {
  display: grid;
  grid-template-columns: 1fr 64px 1fr;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 40px;
  column-gap: var(--gap-medium);
}

.timeline-chapter__spine {
  position: relative;
  display: flex;
  justify-content: center;
}

.timeline-chapter__spine::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: var(--rule);
}

.timeline-chapter:last-child .timeline-chapter__spine::before { bottom: 50%; }

.timeline-chapter:first-child .timeline-chapter__spine::before { top: 12px; }

.timeline-chapter__dot {
  width: 13px; height: 13px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--ochre);
  border: 3px solid var(--paper);
  position: relative;
  z-index: 1;
}

.timeline-chapter__content { padding-bottom: 72px; }

.timeline-chapter__content.left  { text-align: right; }

.timeline-chapter__content.right { text-align: left; }

.timeline-chapter__year {
  font-family: var(--display);
  font-size: var(--fs-title-lg);
  color: var(--ochre-deep);
  letter-spacing: .02em;
  margin-bottom: 8px;
}

.timeline-chapter__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--fs-title-lg);
  line-height: 1.1;
  color: var(--burgundy);
  margin-bottom: 14px;
}

.timeline-chapter__text {
  font-family: var(--serif);
  font-size: var(--fs-text);
  line-height: 1.55;
  color: var(--ink-soft);
}

.timeline-chapter__content.left .timeline-chapter__text,
.timeline-chapter__content.left .timeline-chapter__title { margin-left: auto; max-width: 46ch; }

.timeline-chapter__more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 18px;
  color: var(--burgundy); letter-spacing: .22em; transition: color var(--transition);
}

.timeline-chapter__more:hover { color: var(--ochre-deep); }

.timeline-chapter__imglink { display: block; transition: transform var(--transition); }

.timeline-chapter__imglink:hover { transform: translateY(-4px); }

/* Image dans la colonne OPPOSÉE au texte (alternée, comme la frise du design) */
.timeline-chapter__media { padding-bottom: 72px; align-self: start; }

.timeline-chapter__image { margin-top: 6px; aspect-ratio: 4/3; }

@media (max-width: 768px) {

  .timeline-chapter { grid-template-columns: 28px 1fr; padding: 0 24px; column-gap: 24px; }

  .timeline-chapter__spine { grid-column: 1; grid-row: 1 / span 2; }

  .timeline-chapter__content { grid-column: 2; grid-row: 1; text-align: left !important; padding-bottom: 16px; }

  .timeline-chapter__content.left .timeline-chapter__text,
  .timeline-chapter__content.left .timeline-chapter__title { margin-left: 0; }

  .timeline-chapter__media { grid-column: 2; grid-row: 2; padding-bottom: 48px; }

  .timeline-chapter__media:empty { display: none; }

  .timeline-chapter__image { margin-top: 0; }
}