<script lang="ts">
	// Chronologie verticale accessible (liste ordonnée). Jalons majeurs mis en exergue.
	// Révélation au scroll en cascade gwoka ; contenu complet sans JS.
	import { reveal } from '$lib/motion/reveal';
	import type { EvenementChrono } from '$lib/data/types';

	interface Props {
		evenements: EvenementChrono[];
	}
	let { evenements }: Props = $props();
</script>

<ol class="timeline">
	{#each evenements as e, i (e.date + e.evenement)}
		<li class="timeline__item" class:is-major={e.majeur} use:reveal={i}>
			<span class="timeline__dot" aria-hidden="true"></span>
			<div class="timeline__body">
				<p class="timeline__date">{e.date}</p>
				<h3 class="timeline__event">{e.evenement}</h3>
				<p class="timeline__ctx">{e.contexte}</p>
			</div>
		</li>
	{/each}
</ol>

<style>
	.timeline {
		list-style: none;
		margin: 0;
		padding: 0;
		position: relative;
	}
	.timeline::before {
		content: '';
		position: absolute;
		left: 7px;
		top: 6px;
		bottom: 6px;
		width: 2px;
		background: var(--line);
	}
	.timeline__item {
		position: relative;
		padding: 0 0 var(--space-3) var(--space-4);
	}
	.timeline__dot {
		position: absolute;
		left: 0;
		top: 6px;
		width: 16px;
		height: 16px;
		border-radius: 2px;
		background: var(--noir);
		border: 2px solid var(--muted-fort);
		transform: rotate(45deg);
	}
	.is-major .timeline__dot {
		border-color: var(--accent);
		background: var(--accent);
		box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
	}
	.timeline__date {
		font-family: var(--font-display);
		font-weight: 700;
		text-transform: uppercase;
		font-size: 0.82rem;
		letter-spacing: 0.05em;
		color: var(--accent);
		margin: 0 0 0.2rem;
	}
	.timeline__event {
		font-size: 1.05rem;
		text-transform: none;
		letter-spacing: 0;
		margin: 0 0 0.3rem;
	}
	.is-major .timeline__event {
		font-size: 1.25rem;
		text-transform: uppercase;
	}
	.timeline__ctx {
		color: var(--muted);
		margin: 0;
		font-size: 0.96rem;
	}
</style>
