<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, proces1968 as p, accusesProces1968 as acc } from '$lib/data/gong';

	const crumbs = [
		{ name: 'Accueil', path: '/' },
		{ name: 'Procès de 1968', path: '/proces-1968/' }
	];

	const eventNode = {
		'@type': 'Event',
		'@id': `${SITE.url}/proces-1968/#event`,
		name: 'Procès des 18 Guadeloupéens',
		description: p.accusation,
		startDate: '1968-02-19',
		endDate: '1968-03-01',
		eventStatus: 'https://schema.org/EventScheduled',
		location: { '@type': 'Place', name: "Cour de sûreté de l'État, Paris", address: { '@type': 'PostalAddress', addressLocality: 'Paris', addressCountry: 'FR' } },
		about: { '@id': `${SITE.url}/#organization` }
	};
</script>

<Seo
	title="Le procès des 18 Guadeloupéens (1968)"
	description="Du 19 février au 1er mars 1968, 18 membres du GONG sont jugés à Paris pour « atteinte à l'intégrité du territoire ». Sartre et Césaire témoignent. Verdict : 13 acquittés, 6 condamnés avec sursis."
	path="/proces-1968/"
	type="article"
	graph={[webPage('/proces-1968/', 'Procès des 18 Guadeloupéens (1968)', 'Le procès du GONG devant la Cour de sûreté de l’État.'), 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> 19 février — 1er mars 1968 · Paris</p>
		<h1>Le procès des 18</h1>

		<div class="lecture">
			<Resume
				lead="Du 19 février au 1er mars 1968, dix-huit Guadeloupéens, dont les dirigeants du GONG, sont jugés à Paris devant la Cour de sûreté de l'État pour « atteinte à l'intégrité du territoire français ». Jean-Paul Sartre et Aimé Césaire témoignent en leur faveur. Le verdict — 13 acquittements, 6 peines avec sursis — est vécu comme une victoire politique."
				points={[
					'Juridiction d’exception : la Cour de sûreté de l’État (créée en 1963 pour l’OAS).',
					'Accusation : atteinte à l’intégrité du territoire, complot contre l’État.',
					'Témoins de la défense : Jean-Paul Sartre, Aimé Césaire, la LDH.',
					'Verdict : 13 acquittés, 6 condamnés avec sursis (dont Pierre Sainton).'
				]}
			/>
		</div>

		<section class="section--tight">
			<SectionTitle title="Un tribunal d'exception" as="h2" id="juridiction" />
			<div class="lecture prose">
				<p><strong>{p.juridiction}.</strong> {p.noteJuridiction}</p>
				<p><strong>L'accusation :</strong> {p.accusation}.</p>
			</div>
		</section>

		<section class="section--tight">
			<SectionTitle title="Les accusés" as="h2" id="accuses" />
			<p class="lecture muted">{acc.description}. Noms identifiés dans les sources :</p>
			<ul class="chips lecture">
				{#each acc.nomsIdentifies as nom (nom)}
					<li class="tag">{nom}</li>
				{/each}
			</ul>
			<p class="lecture note">{acc.note}</p>
		</section>

		<section class="section--tight">
			<SectionTitle title="Sartre et Césaire à la barre" as="h2" id="temoins" />
			<div class="lecture prose">
				<p>La défense fait citer des figures majeures de la pensée anticolonialiste :</p>
				<ul>
					{#each p.temoinsDefense as t (t)}
						<li>{t}</li>
					{/each}
				</ul>
				<p><strong>Avocats :</strong> {p.avocats.join(', ')}.</p>
			</div>
		</section>

		<section class="section--tight">
			<SectionTitle title="Le verdict" as="h2" id="verdict" />
			<div class="verdict">
				<div class="verdict__stat is-ok"><span class="verdict__num">{p.verdict.acquittes}</span><span>acquittés</span></div>
				<div class="verdict__stat"><span class="verdict__num">{p.verdict.condamnes}</span><span>condamnés avec sursis</span></div>
			</div>
			<p class="lecture prose">{p.verdict.interpretation}</p>
		</section>

		<section class="section--tight">
			<SectionTitle title="Ce que le procès a révélé" as="h2" id="elements-cles" />
			<ul class="lecture prose">
				{#each p.elementsCles as e (e)}
					<li>{e}</li>
				{/each}
			</ul>
		</section>

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

		<nav class="suite" aria-label="Poursuivre la lecture">
			<a class="btn btn--ghost" href="/heritage/">L'héritage du GONG →</a>
			<a class="btn btn--ghost" href="/militants/pierre-sainton/">Pierre Sainton →</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);
	}
	.chips {
		list-style: none;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		margin: 0 0 var(--space-2);
	}
	.muted {
		color: var(--muted);
	}
	.note {
		font-style: italic;
		color: var(--muted-fort);
		font-size: 0.9rem;
	}
	.verdict {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: var(--space-2);
		margin-bottom: var(--space-3);
	}
	.verdict__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);
	}
	.verdict__stat.is-ok {
		border-left: 4px solid var(--vert-gong);
	}
	.verdict__num {
		font-family: var(--font-display);
		font-weight: 900;
		font-size: 2.2rem;
		color: var(--creme);
		line-height: 1;
	}
	.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);
	}
</style>
