gong.gp/src/routes/ideologie/+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 { reveal } from '$lib/motion/reveal';
	import { webPage } from '$lib/seo';
	import { ideologie as id } from '$lib/data/gong';

	const crumbs = [
		{ name: 'Accueil', path: '/' },
		{ name: 'Idéologie', path: '/ideologie/' }
	];
</script>

<Seo
	title="L'idéologie du GONG"
	description="Marxisme-léninisme d'inspiration maoïste, tiers-mondisme et anticolonialisme : les influences (Fanon, Guevara, Nkrumah, Mao…), les objectifs et l'évolution des mots d'ordre du GONG de 1960 à 1967."
	path="/ideologie/"
	type="article"
	graph={[webPage('/ideologie/', 'Idéologie du GONG', 'Marxisme-léninisme, tiers-mondisme et lutte de libération nationale.')]}
	breadcrumb={crumbs}
/>

<main id="contenu" class="section">
	<div class="container">
		<Breadcrumb items={crumbs} />
		<h1>Idéologie</h1>

		<div class="lecture">
			<Resume
				lead="Le GONG se réclamait du marxisme-léninisme d'inspiration maoïste, du tiers-mondisme et de l'anticolonialisme. Il voulait conduire la Guadeloupe à l'indépendance nationale puis à une révolution socialiste."
				points={[
					'Courant : marxisme-léninisme (tendance maoïste), tiers-mondisme.',
					'Influences : Marx, Lénine, Fanon, Guevara, Nkrumah, Castro, Mao.',
					'Objectif central : l’indépendance nationale de la Guadeloupe.',
					'Mot d’ordre de 1967 : « Briser les urnes colonialistes ».'
				]}
			/>
		</div>

		<section class="section--tight">
			<SectionTitle title="Un courant révolutionnaire" as="h2" id="courant" />
			<div class="lecture prose">
				<p><strong>{id.courantPrincipal}.</strong></p>
				<p>{id.autoDefinition}</p>
				<p>{id.programmeExtrait}</p>
			</div>
		</section>

		<section class="section--tight">
			<SectionTitle title="Les influences" as="h2" id="influences" />
			<ul class="influences">
				{#each id.influences as inf, i (inf.penseur)}
					<li class="card" use:reveal={i}>
						<h3>{inf.penseur}</h3>
						<p>{inf.apport}</p>
					</li>
				{/each}
			</ul>
		</section>

		<section class="section--tight">
			<SectionTitle title="Les objectifs" as="h2" id="objectifs" />
			<ol class="objectifs lecture">
				{#each id.objectifs as o (o)}
					<li>{o}</li>
				{/each}
			</ol>
		</section>

		<section class="section--tight">
			<SectionTitle title="L'évolution des mots d'ordre (1960-1967)" as="h2" id="mots-ordre" />
			<p class="lecture muted">
				En sept ans, le mot d'ordre passe de l'autonomie à l'indépendance, puis à l'appel
				révolutionnaire de 1967.
			</p>
			<ol class="evolution">
				{#each id.evolutionMotsOrdre as e, i (e.periode)}
					<li class="evo" use:reveal={i}>
						<span class="evo__periode">{e.periode}</span>
						<span class="evo__mot">« {e.motOrdre} »</span>
						<span class="evo__ctx">{e.contexte}</span>
					</li>
				{/each}
			</ol>
		</section>

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

		<nav class="suite" aria-label="Poursuivre la lecture">
			<a class="btn btn--ghost" href="/charte/">La charte de 1963 →</a>
			<a class="btn btn--ghost" href="/orientation/">Orientation & stratégie →</a>
			<a class="btn btn--ghost" href="/publications/">Les publications →</a>
		</nav>
	</div>
</main>

<style>
	.influences {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: var(--space-2);
	}
	.influences h3 {
		font-size: 1.05rem;
		text-transform: none;
		margin: 0 0 0.3rem;
	}
	.influences p {
		color: var(--muted);
		margin: 0;
		font-size: 0.95rem;
	}
	.objectifs {
		max-width: var(--container-lecture);
		display: grid;
		gap: 0.5rem;
		padding-left: 1.2rem;
	}
	.objectifs li {
		color: var(--creme);
	}
	.evolution {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: var(--space-2);
	}
	.evo {
		display: grid;
		grid-template-columns: 140px 1fr;
		gap: 0.4rem var(--space-2);
		background: var(--card-bg);
		border: 1px solid var(--line);
		border-left: 4px solid var(--accent);
		border-radius: var(--radius-md);
		padding: var(--space-2) var(--space-3);
	}
	.evo__periode {
		font-family: var(--font-display);
		font-weight: 800;
		color: var(--accent);
		grid-row: span 2;
	}
	.evo__mot {
		font-weight: 700;
		color: var(--creme);
	}
	.evo__ctx {
		grid-column: 2;
		color: var(--muted);
		font-size: 0.92rem;
	}
	.muted {
		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);
	}
	@media (max-width: 560px) {
		.evo {
			grid-template-columns: 1fr;
		}
		.evo__periode {
			grid-row: auto;
		}
		.evo__ctx {
			grid-column: 1;
		}
	}
</style>