/* ==========================================================
   Histoire : frise chronologique le long d'un rayon de soleil
   ========================================================== */
.timeline { position: relative; display: grid; gap: clamp(40px, 6vw, 72px); }
.timeline::before {
  content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px;
  background: linear-gradient(var(--rose), var(--honey) 50%, var(--sun));
}
.chapter { position: relative; padding-left: 48px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(20px, 4vw, 52px); align-items: start; }
.chapter::before {
  content: ""; position: absolute; left: 2px; top: 4px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--hanji); border: 3px solid var(--honey);
}
.chapter.now::before { background: radial-gradient(circle at 40% 35%, var(--honey), var(--sun)); border-color: var(--sun); box-shadow: 0 0 0 6px var(--glow); }
.chapter .when { color: var(--sun); }
.chapter h3 { font-size: var(--step-2); margin: 4px 0 14px; }
.chapter figure { margin: 0; border-radius: 18px; overflow: hidden; aspect-ratio: 3 / 2; max-width: 100%; box-shadow: var(--shadow); cursor: zoom-in; }
.chapter figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s; }
.chapter figure:hover img { transform: scale(1.04); }
.chapter.solo { grid-template-columns: minmax(0, 1fr); }
.chapter .aside { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: var(--hanji-2); font-size: .95rem; color: var(--ink-soft); max-width: 60ch; }

@media (max-width: 860px) { .chapter { grid-template-columns: minmax(0, 1fr); } }