<script lang="ts">
	import Seo from '$lib/components/Seo.svelte';
	import Breadcrumb from '$lib/components/Breadcrumb.svelte';
	import { webPage } from '$lib/seo';

	let { data } = $props();

	const crumbs = [
		{ name: 'Accueil', path: '/' },
		{ name: 'Les responsables', path: '/responsables/' }
	];
</script>

<Seo
	title="Les responsables : Bolotte et Foccart — la répression de mai 1967"
	description="Pierre Bolotte, préfet de la Guadeloupe, et Jacques Foccart, secrétaire général de l'Élysée : les deux visages de la chaîne de commandement de la répression de mai 1967. Un rapport sourcé."
	path="/responsables/"
	type="article"
	graph={[webPage('/responsables/', 'Les responsables : Bolotte et Foccart', 'La chaîne de commandement de la répression de mai 1967 en Guadeloupe.')]}
	breadcrumb={crumbs}
/>

<main id="contenu" class="section">
	<div class="container">
		<Breadcrumb items={crumbs} />
		<header class="doc-head">
			<p class="doc-kicker"><span class="flag-chip" aria-hidden="true"></span> Mé 67 · La chaîne de commandement</p>
			<h1>Les responsables : Bolotte et Foccart</h1>
		</header>

		<!-- Contenu first-party (rapport sourcé, rendu markdown côté serveur). -->
		<article class="prose doc">
			{@html data.html}
		</article>

		<nav class="suite" aria-label="Poursuivre la lecture">
			<a class="btn btn--ghost" href="/me-67/">Mé 67 : le récit →</a>
			<a class="btn btn--ghost" href="/proces-1968/">Le procès de 1968 →</a>
		</nav>
	</div>
</main>

<style>
	.doc-head {
		margin-bottom: var(--space-4);
	}
	.doc-kicker {
		display: inline-flex;
		flex-direction: column;
		gap: 0.5rem;
		font-family: var(--font-display);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		font-size: 0.85rem;
		color: var(--muted);
	}
	.doc :global(h2) {
		margin-top: var(--space-4);
		padding-top: var(--space-2);
		border-top: 1px solid var(--line);
		font-size: 1.35rem;
	}
	.doc :global(h3) {
		color: var(--accent);
		font-size: 1.1rem;
	}
	.doc :global(blockquote) {
		font-size: 1.05rem;
	}
	.suite {
		display: flex;
		gap: 0.6rem;
		flex-wrap: wrap;
		margin-top: var(--space-4);
	}
</style>
