330 lines
10 KiB
Svelte
330 lines
10 KiB
Svelte
 
|
<script lang="ts">
|
|||
|
|
import Seo from '$lib/components/Seo.svelte';
|
|||
|
|
import Resume from '$lib/components/Resume.svelte';
|
|||
|
|
import SectionTitle from '$lib/components/SectionTitle.svelte';
|
|||
|
|
import Icon from '$lib/components/Icon.svelte';
|
|||
|
|
import { reveal } from '$lib/motion/reveal';
|
|||
|
|
import { SITE, presentation } from '$lib/data/gong';
|
|||
|
|
|
|||
|
|
let { data } = $props();
|
|||
|
|
|
|||
|
|
const parcours = [
|
|||
|
|
{ href: '/histoire/', icon: 'clock', titre: 'Histoire', desc: 'De la fondation en 1963 à la dissolution en 1968 : la chronologie complète.' },
|
|||
|
|
{ href: '/me-67/', icon: 'flag', titre: 'Mé 67', desc: "Les tueries de mai 1967 à Pointe-à-Pitre, longtemps occultées." },
|
|||
|
|
{ href: '/proces-1968/', icon: 'scale', titre: 'Procès de 1968', desc: '18 Guadeloupéens jugés à Paris ; Sartre et Césaire témoignent.' },
|
|||
|
|
{ href: '/militants/', icon: 'users', titre: 'Militants', desc: 'Sainton, Nestor, Manville, Bangou, Glaude… les femmes et les hommes du GONG.' },
|
|||
|
|
{ href: '/ideologie/', icon: 'glo', titre: 'Idéologie', desc: "Marxisme-léninisme, tiers-mondisme et lutte de libération nationale." },
|
|||
|
|
{ href: '/heritage/', icon: 'memory', titre: 'Héritage', desc: 'UPLG, UGTG, mémoire de Mé 67 : ce que le GONG a laissé.' }
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
const webPage = [
|
|||
|
|
{
|
|||
|
|
'@type': 'WebPage',
|
|||
|
|
'@id': `${SITE.url}/#webpage`,
|
|||
|
|
url: `${SITE.url}/`,
|
|||
|
|
name: `${SITE.nomComplet} — GONG`,
|
|||
|
|
description: SITE.description,
|
|||
|
|
isPartOf: { '@id': `${SITE.url}/#website` },
|
|||
|
|
about: { '@id': `${SITE.url}/#organization` },
|
|||
|
|
inLanguage: 'fr-FR'
|
|||
|
|
}
|
|||
|
|
];
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<Seo
|
|||
|
|
title="GONG — Groupe d'Organisation Nationale de la Guadeloupe"
|
|||
|
|
description="Le GONG, organisation indépendantiste guadeloupéenne (1963-1968) : histoire, Mé 67, procès de 1968, militants et héritage. Un dossier documentaire sourcé."
|
|||
|
|
path="/"
|
|||
|
|
graph={webPage}
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<main id="contenu">
|
|||
|
|
<!-- HERO -->
|
|||
|
|
<section class="hero">
|
|||
|
|
<div class="container hero__inner">
|
|||
|
|
<img class="hero__logo" src="/img/gong.png" alt="Logo du GONG" width="132" height="132" />
|
|||
|
|
<p class="hero__kicker"><span class="flag-chip" aria-hidden="true"></span> 1963 — 1968</p>
|
|||
|
|
<h1 class="hero__title">GONG</h1>
|
|||
|
|
<p class="hero__full">{presentation.nomComplet}</p>
|
|||
|
|
<p class="hero__slogan">« Briser les urnes colonialistes.<br />Conquérir l'indépendance nationale. »</p>
|
|||
|
|
<p class="hero__creole" lang="gcf">Listwa a on pèp ki goumé pou libèté a-y.</p>
|
|||
|
|
<div class="hero__cta">
|
|||
|
|
<a class="btn btn--fill" href="/histoire/">Découvrir l'histoire</a>
|
|||
|
|
<a class="btn" href="/me-67/">Comprendre Mé 67</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- RÉSUMÉ (zone A AI-Overview) -->
|
|||
|
|
<section class="section--tight">
|
|||
|
|
<div class="container lecture">
|
|||
|
|
<Resume
|
|||
|
|
titre="Qu'est-ce que le GONG ?"
|
|||
|
|
lead="Le GONG (Groupe d'Organisation Nationale de la Guadeloupe) était une organisation politique indépendantiste et anticolonialiste guadeloupéenne, fondée le 23 juin 1963 à Paris et dissoute de facto en 1968 après la répression des émeutes de mai 1967 et le procès de ses militants."
|
|||
|
|
points={[
|
|||
|
|
'Fondé le 23 juin 1963 par d’anciens étudiants de l’AGEG (dont Pierre Sainton).',
|
|||
|
|
'Objectif : l’indépendance nationale de la Guadeloupe et une révolution socialiste.',
|
|||
|
|
'Impliqué dans les événements de « Mé 67 » (26-28 mai 1967).',
|
|||
|
|
'18 de ses membres jugés à Paris en 1968 : 13 acquittés, 6 condamnés avec sursis.'
|
|||
|
|
]}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- CHIFFRES CLÉS -->
|
|||
|
|
<section class="section--tight">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="stats">
|
|||
|
|
<div class="stat" use:reveal={0}>
|
|||
|
|
<span class="stat__num">1963</span><span class="stat__lab">Fondation, à Paris</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat" use:reveal={1}>
|
|||
|
|
<span class="stat__num">26 mai 1967</span><span class="stat__lab">Première victime : Jacques Nestor</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat" use:reveal={2}>
|
|||
|
|
<span class="stat__num">80–200</span><span class="stat__lab">Victimes estimées de Mé 67</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat" use:reveal={3}>
|
|||
|
|
<span class="stat__num">18</span><span class="stat__lab">Accusés au procès de 1968</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- PARCOURS -->
|
|||
|
|
<section class="section">
|
|||
|
|
<div class="container">
|
|||
|
|
<SectionTitle title="Parcourir le dossier" />
|
|||
|
|
<div class="grid-cards">
|
|||
|
|
{#each parcours as p, i (p.href)}
|
|||
|
|
<a class="card card--link" href={p.href} use:reveal={i}>
|
|||
|
|
<Icon name={p.icon} size="1.8rem" />
|
|||
|
|
<h3>{p.titre}</h3>
|
|||
|
|
<p>{p.desc}</p>
|
|||
|
|
<span class="card__more">Lire <Icon name="arrow-right" size="1em" /></span>
|
|||
|
|
</a>
|
|||
|
|
{/each}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- DOCUMENTS FONDATEURS -->
|
|||
|
|
<section class="section">
|
|||
|
|
<div class="container">
|
|||
|
|
<SectionTitle title="Les textes fondateurs" />
|
|||
|
|
<div class="grid-cards grid-cards--2">
|
|||
|
|
<article class="card card--vert" use:reveal={0}>
|
|||
|
|
<Icon name="document" size="1.6rem" />
|
|||
|
|
<h3>La Charte du GONG</h3>
|
|||
|
|
<p class="muted">Juin 1963 — le texte adopté en assemblée générale qui pose le droit du peuple guadeloupéen à disposer de lui-même.</p>
|
|||
|
|
<div class="card__actions">
|
|||
|
|
<a class="btn btn--ghost" href="/charte/">Lire la charte</a>
|
|||
|
|
<a class="btn btn--ghost" href="/assets/charte-du-gong-1963.pdf" rel="external noopener noreferrer" target="_blank">
|
|||
|
|
PDF <Icon name="download" size="1em" />
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</article>
|
|||
|
|
<article class="card card--vert" use:reveal={1}>
|
|||
|
|
<Icon name="document" size="1.6rem" />
|
|||
|
|
<h3>Orientation & stratégie</h3>
|
|||
|
|
<p class="muted">Le rapport sur la lutte révolutionnaire du peuple guadeloupéen : lutte de masse, suffrage universel, voie révolutionnaire.</p>
|
|||
|
|
<div class="card__actions">
|
|||
|
|
<a class="btn btn--ghost" href="/orientation/">Lire le document</a>
|
|||
|
|
<a class="btn btn--ghost" href="/assets/orientation-et-strategie-de-la-lutte-revolutionnaire-du-peuple-guadeloupeen-1963.pdf" rel="external noopener noreferrer" target="_blank">
|
|||
|
|
PDF <Icon name="download" size="1em" />
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</article>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- ACTUALITÉS -->
|
|||
|
|
{#if data.actualites.length}
|
|||
|
|
<section class="section">
|
|||
|
|
<div class="container">
|
|||
|
|
<SectionTitle title="Actualités & mémoire" />
|
|||
|
|
<div class="grid-cards">
|
|||
|
|
{#each data.actualites as a, i (a.slug)}
|
|||
|
|
<a class="card card--link" href="/actualites/{a.slug}/" use:reveal={i}>
|
|||
|
|
{#if a.couverture}
|
|||
|
|
<img class="card__cover" src={a.couverture} alt={a.couvertureAlt} loading="lazy" decoding="async" />
|
|||
|
|
{/if}
|
|||
|
|
<time datetime={a.iso} class="card__date">{a.date}</time>
|
|||
|
|
<h3>{a.titre}</h3>
|
|||
|
|
<p class="muted">{a.chapeau}</p>
|
|||
|
|
</a>
|
|||
|
|
{/each}
|
|||
|
|
</div>
|
|||
|
|
<p class="center"><a class="btn btn--ghost" href="/actualites/">Toutes les actualités</a></p>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
{/if}
|
|||
|
|
|
|||
|
|
<!-- CTA FINAL -->
|
|||
|
|
<section class="section cta-final">
|
|||
|
|
<div class="container lecture center">
|
|||
|
|
<SectionTitle title="Se souvenir, transmettre" />
|
|||
|
|
<p>
|
|||
|
|
Le GONG a été effacé des mémoires officielles pendant des décennies. Ce site rassemble des
|
|||
|
|
sources académiques, journalistiques et archivistiques pour rendre son histoire accessible à
|
|||
|
|
tous.
|
|||
|
|
</p>
|
|||
|
|
<div class="hero__cta center-cta">
|
|||
|
|
<a class="btn btn--fill" href="/faq/">Questions fréquentes</a>
|
|||
|
|
<a class="btn" href="/sources/">Voir les sources</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.hero {
|
|||
|
|
text-align: center;
|
|||
|
|
padding-top: var(--space-5);
|
|||
|
|
background: radial-gradient(ellipse at 50% -10%, color-mix(in srgb, var(--rouge-gong) 12%, transparent), transparent 60%);
|
|||
|
|
}
|
|||
|
|
.hero__inner {
|
|||
|
|
padding-bottom: var(--space-5);
|
|||
|
|
}
|
|||
|
|
.hero__logo {
|
|||
|
|
width: 132px;
|
|||
|
|
height: 132px;
|
|||
|
|
margin: 0 auto var(--space-2);
|
|||
|
|
}
|
|||
|
|
.hero__kicker {
|
|||
|
|
display: inline-flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
font-family: var(--font-display);
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.15em;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
color: var(--muted);
|
|||
|
|
}
|
|||
|
|
.hero__title {
|
|||
|
|
font-size: clamp(3.5rem, 2rem + 9vw, 8rem);
|
|||
|
|
margin: 0.25rem 0 0;
|
|||
|
|
letter-spacing: 0.02em;
|
|||
|
|
}
|
|||
|
|
.hero__full {
|
|||
|
|
font-family: var(--font-display);
|
|||
|
|
font-weight: 700;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
font-size: clamp(1rem, 0.9rem + 0.6vw, 1.3rem);
|
|||
|
|
color: var(--creme);
|
|||
|
|
margin-bottom: var(--space-3);
|
|||
|
|
}
|
|||
|
|
.hero__slogan {
|
|||
|
|
font-family: var(--font-display);
|
|||
|
|
font-weight: 800;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
font-size: clamp(1.3rem, 1rem + 1.6vw, 2rem);
|
|||
|
|
line-height: 1.15;
|
|||
|
|
color: var(--accent);
|
|||
|
|
margin-bottom: 0.6rem;
|
|||
|
|
}
|
|||
|
|
.hero__creole {
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-style: italic;
|
|||
|
|
margin-bottom: var(--space-4);
|
|||
|
|
}
|
|||
|
|
.hero__cta {
|
|||
|
|
display: flex;
|
|||
|
|
gap: var(--space-2);
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
.center-cta {
|
|||
|
|
margin-top: var(--space-3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stats {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|||
|
|
gap: var(--space-2);
|
|||
|
|
}
|
|||
|
|
.stat {
|
|||
|
|
background: var(--card-bg);
|
|||
|
|
border: 1px solid var(--line);
|
|||
|
|
border-top: 3px solid var(--accent);
|
|||
|
|
border-radius: var(--radius-md);
|
|||
|
|
padding: var(--space-3);
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0.3rem;
|
|||
|
|
}
|
|||
|
|
.stat__num {
|
|||
|
|
font-family: var(--font-display);
|
|||
|
|
font-weight: 900;
|
|||
|
|
font-size: 1.7rem;
|
|||
|
|
color: var(--creme);
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
.stat__lab {
|
|||
|
|
font-size: 0.88rem;
|
|||
|
|
color: var(--muted);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-cards {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|||
|
|
gap: var(--space-3);
|
|||
|
|
}
|
|||
|
|
.grid-cards--2 {
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|||
|
|
}
|
|||
|
|
.card h3 {
|
|||
|
|
margin: 0.6rem 0 0.4rem;
|
|||
|
|
}
|
|||
|
|
.card p {
|
|||
|
|
color: var(--muted);
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
.card .muted {
|
|||
|
|
color: var(--muted);
|
|||
|
|
}
|
|||
|
|
.card__more {
|
|||
|
|
margin-top: 0.8rem;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.35rem;
|
|||
|
|
font-family: var(--font-display);
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
font-size: 0.78rem;
|
|||
|
|
letter-spacing: 0.05em;
|
|||
|
|
color: var(--accent);
|
|||
|
|
}
|
|||
|
|
.card__cover {
|
|||
|
|
width: calc(100% + 2 * var(--space-3));
|
|||
|
|
margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) var(--space-2);
|
|||
|
|
border-radius: var(--radius-md) var(--radius-md) 0 0;
|
|||
|
|
aspect-ratio: 3 / 2;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
.card__date {
|
|||
|
|
font-size: 0.8rem;
|
|||
|
|
color: var(--muted-fort);
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.04em;
|
|||
|
|
}
|
|||
|
|
.card__actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 0.6rem;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
margin-top: 0.8rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.center {
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
.center .btn {
|
|||
|
|
margin-inline: auto;
|
|||
|
|
}
|
|||
|
|
.cta-final {
|
|||
|
|
background: var(--noir-profond);
|
|||
|
|
border-block: 1px solid var(--line);
|
|||
|
|
}
|
|||
|
|
</style>
|