Note de passation

Intégrer la carte du Bénin

Une section autonome : une carte interactive de 29 lieux, avec sa colonne de fiches. Elle ne dépend de rien, ne charge rien depuis l'extérieur, et n'expose aucun nom global. Voici ce qu'il y a à faire pour la poser dans le projet.

343 Kola page, hors photos

0dépendance

0requête externe

0nom global en JS

Ce que tu reçois

index.html — la page construite, prête à découper. 343 Ko : 171 de CSS (dont 139 de polices embarquées), 125 de balisage (dont 119 pour la carte SVG), 47 de script.
photos/ — 29 images WebP, 1,7 Mo au total, chargées à la demande. Seule celle qui est visible se télécharge.
source/ — la chaîne qui régénère tout : projection, données géographiques, contenu des lieux, gabarit. Avec son LISEZ-MOI.

Trois choses, rien de plus. Pas de paquet à installer, pas de fichier de configuration, pas d'étape de compilation : la page est déjà construite.

L'intégration, dans l'ordre

Copier les trois morceaux

Dans index.html, prendre le bloc <style>, le bloc <div class="benin-atlas">…</div> et le bloc <script>. Tout le composant tient dans ces trois-là, dans cet ordre.
Poser les photos et régler leur chemin

Le dossier photos/ va où tu veux dans les fichiers publics. Le chemin est une seule ligne, en tête du script :
```
const PHOTOS_BASE = 'photos/';   // → '/assets/benin/' par exemple
```
C'est le seul chemin de toute la section. Déplacer le HTML ne casse rien d'autre.
Retirer la seule règle qui déborde

Une ligne, signalée en clair dans la feuille, sert à la page autonome et n'a rien à faire dans un site qui a déjà la sienne :
```
/* Le seul style qui sorte du composant. À retirer le jour où la
   section est posée dans une page qui a déjà le sien. */
body{margin:0;background:var(--ba-paper)}
```
Vérifier deux choses à l'écran

Que les noms de lieux se placent bien autour de leurs pastilles sans se chevaucher, et qu'un clic sur une pastille ouvre sa fiche. Si les deux marchent, le reste suit.

Et les liens, en déplaçant le fichier ?

Il n'y en a pas. Aucune police, aucune image de fond, aucun script, aucune feuille de style n'est appelée depuis l'extérieur : tout est dans le fichier. Le HTML peut être déplacé n'importe où sans rien casser.

Une seule exception, les 29 photos, qui sont des fichiers à part pour ne pas alourdir le premier affichage. Leur dossier se règle par la ligne PHOTOS_BASE ci-dessus. Vérifié : HTML déplacé dans /site/, photos dans /assets/benin/, une ligne changée, tout charge.

Si même ça gêne : python3 build.py produit aussi une variante tout-en-un, avec les 29 photos embarquées dans le HTML — plus aucun fichier à côté. On la pose n'importe où et elle marche. Le prix est son poids : 2,6 Mo à chaque chargement, au lieu de 343 Ko plus les seules photos regardées.

Ce qui est garanti

Le CSS ne peut pas fuir. Les 249 règles sont portées par .benin-atlas. Les jetons de thème sont préfixés --ba-*, les animations ba-*, les identifiants ba-* — y compris ceux du SVG, qui sont eux aussi globaux dans une page.
Le JavaScript n'expose rien. Il tourne dans une fonction anonyme en mode strict. Vérifié : select, apply, html, card, track et le reste n'existent pas dans window.
Rien n'est chargé de l'extérieur. Polices, carte, pictogrammes : tout est dans le fichier. Aucune requête vers un CDN, donc rien à autoriser dans une CSP.
Clair et sombre suivent le thème du visiteur, y compris quand aucun choix explicite n'est posé sur la racine.

Trois pièges

Ne pas supprimer la ligne de crédits

Sous la carte, une ligne cite geoBoundaries, OpenStreetMap, Natural Earth et Wikimedia Commons. Les tracés viennent d'OpenStreetMap, sous ODbL : l'attribution est une obligation, pas une politesse. La retirer met le projet en faute.

Les noms se placent au chargement et au redimensionnement

Le placement des 29 noms est calculé dans le navigateur, et il écoute window.resize. Si la largeur du conteneur change sans que la fenêtre bouge — un panneau qu'on replie, un onglet qu'on affiche — il faut le réveiller : window.dispatchEvent(new Event('resize')).

Les polices pèsent 139 Ko

Bricolage Grotesque et Instrument Sans sont embarquées en base64, pour que la page marche seule. Si le projet charge déjà ces familles, il faut retirer les deux @font-face : c'est 40 % du poids de la page.

Si le projet est en React ou Next

Le script construit le DOM une fois, au chargement : il crée les 29 pastilles, les 29 fiches, puis calcule le placement des noms. Il ne s'attend pas à ce qu'on lui retire le tapis sous les pieds.

Ce qui marche : un composant qui rend le balisage une seule fois et ne se re-rend jamais — balisage injecté au montage, script lancé dans un useEffect vide, composant mémoïsé. La section vit alors sa vie sans que React y touche.

Le repli si ça résiste : servir index.html dans une <iframe>. On perd le partage du thème avec la page hôte, on gagne une isolation totale et dix minutes de travail.

Sur un site rendu côté serveur — PHP, Laravel, Astro, 11ty — c'est un copier-coller, sans précaution particulière.

Régénérer

Tout se refabrique depuis source/ :

cd source
python3 build.py     # réécrit index.html, index-artefact.html
                     # et recopie les photos

Le contenu des 29 lieux est dans build.py, la mise en page dans template.html. Ajouter un lieu demande sa latitude et sa longitude, son bloc de texte, et une photo sous licence libre — le nom se place tout seul, il n'y a aucune coordonnée d'étiquette à régler à la main.

Ce qui reste ouvert

Les crédits par photo ne sont pas affichés. 26 des 29 images sont en CC BY ou CC BY-SA, qui exigent de nommer l'auteur. L'auteur et la licence de chacune sont dans les données de la page, il ne manque que l'affichage — un attribut title suffirait.
Une seule carte par page. Les identifiants sont préfixés mais fixes.
Deux nettoyages de fond qui ne bloquent rien : les constantes de projection sont recopiées dans build.py au lieu d'être importées, et le dossier source/ contient encore les téléchargements bruts des données géographiques.

Carte du Bénin — 29 lieux, relief, réseau hydrographique et routier, vignettes dessinées. Données : geoBoundaries, OpenStreetMap (ODbL), Natural Earth. Photographies : Wikimedia Commons.