gong.gp/src/routes/me-67/+page.svelte

<script lang="ts">
	import Seo from '$lib/components/Seo.svelte';
	import Breadcrumb from '$lib/components/Breadcrumb.svelte';
	import Resume from '$lib/components/Resume.svelte';
	import SectionTitle from '$lib/components/SectionTitle.svelte';
	import { webPage } from '$lib/seo';
	import { SITE, evenementsMai1967 as m } from '$lib/data/gong';

	const crumbs = [
		{ name: 'Accueil', path: '/' },
		{ name: 'Mé 67', path: '/me-67/' }
	];

	const eventNode = {
		'@type': 'Event',
		'@id': `${SITE.url}/me-67/#event`,
		name: 'Émeutes de mai 1967 en Guadeloupe (Mé 67)',
		description:
			"Répression sanglante d'une grève ouvrière à Pointe-à-Pitre les 26-28 mai 1967. Bilan estimé par les historiens : 80 à 200 victimes.",
		startDate: '1967-05-26',
		endDate: '1967-05-28',
		eventStatus: 'https://schema.org/EventScheduled',
		location: {
			'@type': 'Place',
			name: 'Pointe-à-Pitre, Guadeloupe',
			address: { '@type': 'PostalAddress', addressLocality: 'Pointe-à-Pitre', addressRegion: 'Guadeloupe', addressCountry: 'FR' }
		},
		about: { '@id': `${SITE.url}/#organization` }
	};
</script>

<Seo
	title="Mé 67 — les émeutes de mai 1967 en Guadeloupe"
	description="Les 26-28 mai 1967, la répression d'une grève ouvrière à Pointe-à-Pitre fait de 8 (bilan officiel) à 200 morts (estimations des historiens). Récit, bilan et rôle du GONG."
	path="/me-67/"
	type="article"
	graph={[webPage('/me-67/', 'Mé 67 — émeutes de mai 1967', 'Récit et bilan des tueries de mai 1967 à Pointe-à-Pitre.'), eventNode]}
	breadcrumb={crumbs}
/>

<main id="contenu" class="section">
	<div class="container">
		<Breadcrumb items={crumbs} />
		<p class="surtitre"><span class="flag-chip" aria-hidden="true"></span> 26 — 28 mai 1967 · Pointe-à-Pitre</p>
		<h1>Mé 67</h1>

		<div class="lecture">
			<Resume
				lead="« Mé 67 » désigne la répression sanglante des 26, 27 et 28 mai 1967 à Pointe-à-Pitre, en Guadeloupe. Partie d'une grève des ouvriers du bâtiment, elle a fait, selon les historiens, entre 80 et 200 victimes — un massacre colonial longtemps occulté."
				points={[
					'Déclencheur : une grève pour +2,5 % de salaire, sur fond d’agression raciste.',
					'Le 26 mai, les forces de l’ordre tirent à balles réelles.',
					'Jacques Nestor, militant du GONG (26 ans), est la première victime.',
					'Bilan officiel : 7-8 morts. Estimations des historiens : 80 à 200 victimes.'
				]}
			/>
		</div>

		<!-- CONTEXTE -->
		<section class="section--tight">
			<SectionTitle title="Comment tout a commencé" as="h2" id="contexte" />
			<div class="lecture prose">
				<p><strong>Le contexte social.</strong> {m.contexte.social}</p>
				<p><strong>L'étincelle raciste.</strong> {m.contexte.racial}</p>
				<p><strong>Le contexte politique.</strong> {m.contexte.politique}</p>
				<p><strong>L'arrière-plan international.</strong> {m.contexte.international}</p>
			</div>
		</section>

		<!-- DÉROULEMENT -->
		<section class="section--tight">
			<SectionTitle title="Trois jours de répression" as="h2" id="deroulement" />
			<ol class="jours">
				{#each Object.entries(m.deroulement) as [jour, recit] (jour)}
					<li class="jour">
						<p class="jour__date">{jour}</p>
						<p class="jour__txt">{recit}</p>
					</li>
				{/each}
			</ol>
		</section>

		<!-- BILAN -->
		<section class="section--tight">
			<SectionTitle title="Le bilan" as="h2" id="bilan" />
			<div class="bilan">
				<div class="bilan__stat"><span class="bilan__num">7–8</span><span>morts (bilan officiel)</span></div>
				<div class="bilan__stat is-strong"><span class="bilan__num">80–200</span><span>victimes (estimations des historiens)</span></div>
				<div class="bilan__stat"><span class="bilan__num">30+</span><span>blessés</span></div>
			</div>
			<p class="lecture prose note">{m.bilan.note}</p>
		</section>

		<!-- RÔLE DU GONG -->
		<section class="section--tight">
			<SectionTitle title="Quel a été le rôle du GONG ?" as="h2" id="role-gong" />
			<div class="lecture prose">
				<p>
					Le GONG a soutenu les revendications ouvrières et participé à la mobilisation. Mais
					l'enquête a établi que les émeutes étaient <strong>spontanées</strong>.
				</p>
				<ul>
					{#each m.roleDuGONG.actions as a (a)}
						<li>{a}</li>
					{/each}
				</ul>
				<p><strong>La controverse.</strong> {m.roleDuGONG.controverse}</p>
				<blockquote>
					{m.roleDuGONG.rapportsPolice}
					<footer>— Commissaire divisionnaire Honoré Gévaudan, rapport de 1967</footer>
				</blockquote>
				<p><strong>Une élimination préméditée ?</strong> {m.roleDuGONG.analyse}</p>
			</div>
		</section>

		<p class="src lecture">Sources : {m.source}.</p>

		<nav class="suite" aria-label="Poursuivre la lecture">
			<a class="btn btn--ghost" href="/proces-1968/">Le procès de 1968 →</a>
			<a class="btn btn--ghost" href="/militants/jacques-nestor/">Jacques Nestor →</a>
		</nav>
	</div>
</main>

<style>
	.surtitre {
		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);
	}
	.jours {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: var(--space-2);
	}
	.jour {
		background: var(--card-bg);
		border: 1px solid var(--line);
		border-left: 4px solid var(--accent);
		border-radius: var(--radius-md);
		padding: var(--space-3);
	}
	.jour__date {
		font-family: var(--font-display);
		text-transform: uppercase;
		font-weight: 800;
		color: var(--accent);
		margin: 0 0 0.3rem;
	}
	.jour__txt {
		margin: 0;
		color: var(--muted);
	}
	.bilan {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: var(--space-2);
		margin-bottom: var(--space-3);
	}
	.bilan__stat {
		background: var(--card-bg);
		border: 1px solid var(--line);
		border-radius: var(--radius-md);
		padding: var(--space-3);
		display: flex;
		flex-direction: column;
		gap: 0.3rem;
		color: var(--muted);
	}
	.bilan__stat.is-strong {
		border-color: var(--accent);
		border-width: 2px;
	}
	.bilan__num {
		font-family: var(--font-display);
		font-weight: 900;
		font-size: 2rem;
		color: var(--creme);
		line-height: 1;
	}
	.note {
		font-style: italic;
		color: var(--muted);
	}
	.src {
		color: var(--muted-fort);
		font-size: 0.85rem;
		margin-top: var(--space-3);
	}
	.suite {
		display: flex;
		gap: 0.6rem;
		flex-wrap: wrap;
		margin-top: var(--space-4);
	}
	blockquote footer {
		margin-top: 0.4rem;
		font-size: 0.85rem;
		color: var(--muted-fort);
	}
</style>