/* Frise chronologique dont le trait se remplit au défilement (voir js/components/timeline.js).
   Deux présentations : texte seul en alternance, ou variante illustrée (plus bas). */

@property --progress { syntax: '<number>'; inherits: true; initial-value: 0; }

.timeline { position: relative; max-width: 980px; margin: 0 auto; }
.timeline::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--line); }
.tl-fill { position: absolute; left: 50%; top: 0; width: 1px; height: calc(var(--progress) * 100%); background: linear-gradient(180deg, var(--gold-hi), var(--pearl)); box-shadow: 0 0 10px rgba(241, 219, 164, .6); }
.event { position: relative; width: 50%; padding: 0 48px 60px 0; text-align: right; }
.event:nth-of-type(even) { margin-left: 50%; padding: 0 0 60px 48px; text-align: left; }
.event .node { position: absolute; top: 6px; right: -6px; width: 12px; height: 12px; transform: rotate(45deg); border: 1px solid var(--gold); background: var(--night); transition: background .6s, box-shadow .6s; }
.event:nth-of-type(even) .node { right: auto; left: -6px; }
.event.in .node { background: var(--gold-hi); box-shadow: 0 0 14px rgba(241, 219, 164, .8); }
.era { margin: 0; font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.event h3 { margin: 4px 0 8px; font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--pearl); }
.event p:last-child { margin: 0; color: var(--muted); }

/* ---------- Variante illustrée ----------
   <div class="timeline timeline--illustrated"> : chaque événement occupe toute la largeur,
   son texte (.event-text) d'un côté du trait et son image (figure.event-img) de l'autre. */
.timeline--illustrated { max-width: 1180px; }
.timeline--illustrated .event, .timeline--illustrated .event:nth-of-type(even) {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 96px; align-items: start;
  width: 100%; margin-left: 0; padding: 0 0 72px;
}
.timeline--illustrated .event .node, .timeline--illustrated .event:nth-of-type(even) .node { left: 50%; right: auto; margin-left: -6px; }
.timeline--illustrated .event:nth-of-type(even) .event-text { grid-column: 2; }
.timeline--illustrated .event:nth-of-type(even) .event-img { grid-column: 1; grid-row: 1; }
.event-text { position: relative; }
.event-img { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); background: var(--panel-solid); }
.event-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter 1.6s ease; }
.event:hover .event-img img { transform: scale(1.04); }
.event-img figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 10px; text-align: left;
  background: linear-gradient(0deg, rgba(6, 10, 22, .88), rgba(6, 10, 22, 0));
  font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff;
}

@media (max-width: 680px) {
  .timeline::before, .tl-fill { left: 6px; }
  .event, .event:nth-of-type(even) { width: 100%; margin-left: 0; padding: 0 0 44px 34px; text-align: left; }
  .event .node, .event:nth-of-type(even) .node { left: 0; right: auto; }
}

@media (max-width: 860px) {
  .timeline--illustrated::before, .timeline--illustrated .tl-fill { left: 6px; }
  .timeline--illustrated .event, .timeline--illustrated .event:nth-of-type(even) { display: block; padding: 0 0 48px 34px; text-align: left; }
  .timeline--illustrated .event .node, .timeline--illustrated .event:nth-of-type(even) .node { left: 0; margin-left: 0; }
  .timeline--illustrated .event-img { margin-top: 16px; }
}