Charte graphique

Méthode · version 3 · 15 septembre 2026

Revue des sites comparables, principes retenus, et palette. Établie le 11 septembre 2026, refondue le 12 septembre 2026. Maquette de la refonte : maquette-refonte.html.

1. Ce que font les sites de la même famille

Revue fondée sur une connaissance de ces sites et sur une inspection de leurs pages, non sur un audit systématique — c'est une limite à connaître avant d'en tirer des règles.

2. Ce qu'on en retient

1. La couleur n'encode que du sens. Les quatre positions de vote — pour, contre, abstention, non-votant — sont les seules couleurs sémantiques.
2. Un résultat n'est pas une position. « Adopté » et « rejeté » restent en encre : les colorer en vert et en rouge dirait qu'adopter est bien et rejeter est mal.
3. Un seul accent, pour les liens et les actions. Neutre partout ailleurs.
4. Pas de bleu-blanc-rouge. Ce site n'est pas officiel et ne doit pas en avoir l'air.
5. Aucune couleur de parti dans l'identité.
6. La typographie fait la hiérarchie, pas les cadres ni les ombres.
7. Chiffres en chasse tabulaire, identifiants et empreintes en monospace.
8. Les sources sont dans le flux, jamais derrière un clic.
9. Contraste AA au minimum, vérifié sur les trois surfaces — papier, papier creusé, carte — et dans les deux thèmes. Pas seulement sur le fond du corps, où l'en-tête et les cartes échappaient au contrôle.
10. La couleur n'est jamais le seul porteur d'information : chaque position porte aussi son libellé écrit et une forme — carré plein, carré ouvert, carré pointillé.
11. Une barre dit une magnitude. Une barre en pourcentage occupant toute la largeur fait lire 4 voix comme 72 : les barres de groupe sont à l'échelle absolue, la largeur disant l'effectif et le remplissage la répartition.
12. Pas d'imagerie décorative. Le seul motif de fond est la grille des sièges — la même géométrie que la marque —, sous 4 % d'opacité, confinée au hero, et jamais derrière une donnée.

3. Palette

Rapports de contraste calculés par la formule WCAG 2.1, en retenant le pire des trois fonds de chaque thème. Minimum constaté : 4,86:1.

Base

Accent

Pétrole sombre. Choisi parce qu'il n'est la couleur d'aucun parti français, qu'il se distingue des quatre couleurs de position, et qu'il tient le contraste dans les deux thèmes.

Positions de vote — les seules couleurs sémantiques

Le non-votant est volontairement désaturé et sans graisse : ce n'est pas une position politique mais une donnée manquante, et son traitement visuel doit le dire avant même qu'on lise la légende.

« Sans position enregistrée » est un cinquième état, distinct du non-votant recensé. Sur une motion de censure, la procédure ne fait voter que ses soutiens : les autres députés n'ont aucune ligne au relevé. C'est un fait sur la donnée, pas une opinion prêtée à quiconque.

Sur le vert et le rouge

Un site qui refuse tout verdict encode « pour » en vert et « contre » en rouge, c'est-à-dire dans la paire la plus moralement chargée du répertoire occidental. L'objection est réelle. La convention est gardée pour une raison qui prime : le lecteur visé est pressé, et une convention connue lui coûte zéro apprentissage. Trois garde-fous la rendent tenable — les teintes sont désaturées vers l'encre plutôt que vers le feu tricolore ; chaque position porte son libellé écrit et une forme distincte ; et aucun tri, aucun classement du site n'ordonne jamais par « pour ».

Une variante non morale existe — sarcelle contre argile — et se substitue par quatre jetons.

4. Typographie

Trois familles, hébergées en propre dans web/fonts/ : aucune requête vers un tiers, aucun traceur, aucun décalage au chargement. C'est une différence de nature avec un CDN de fontes, pas de degré. Licences OFL, redistribuables — cohérent avec l'AGPL-3.0 du dépôt.

• IBM Plex Sans — texte, données, interface. De vrais chiffres tabulaires, et une allure d'ingénierie plutôt que de campagne.
• IBM Plex Mono — identifiants, empreintes, surtitres, en-têtes de colonnes. Mêmes métriques que Plex Sans : un VTANR5L17V1 ne fait pas sauter la ligne.
• Newsreader — titres. La voix éditoriale qui manquait, sans emphase.

Sous-jeux latin et latin-ext seulement. Plex Sans et Newsreader sont variables ; Plex Mono ne l'est pas, d'où deux graisses par sous-jeu. Repli sur la pile système, font-display:swap.

• Chiffres : font-variant-numeric: tabular-nums sur tout le corps.
• Échelle : 0,68 / 0,78 / 0,86 / 1 / 1,15 rem pour le texte, puis 1,28 / 1,55 / 2,1 / 3,1 rem pour les titres. Au-delà, la hiérarchie cesse d'être perçue comme une hiérarchie.

4 bis. Icônes

Font Awesome Free 6.7.2, tracés officiels embarqués un par un dans cmd/build/icones.go — ni CDN, ni fonte d'icônes. La famille solid pèse plus de 400 Ko pour quatorze glyphes utilisés ; les tracés retenus en font 7 Ko, servis avec le HTML, sans requête supplémentaire.

Les icônes restent décoratives : aria-hidden, et chaque entrée garde son libellé écrit. Une icône ne porte jamais seule une information. Sous 75 rem elles disparaissent de la navigation, dont les libellés suffisent.

Licence : icônes sous CC BY 4.0, attribution au pied de chaque page.

4 ter. Thème clair et sombre

Trois états, pas deux : système (aucun attribut, prefers-color-scheme décide), clair et sombre (data-theme forcé). Le sélecteur vit dans la barre de marque ; le choix est écrit dans localStorage et ne quitte jamais le navigateur.

Un script minuscule applique le choix avant le premier rendu : sans lui la page clignote du thème système au thème choisi. Le groupe de boutons reste masqué sans JavaScript — on ne montre pas une commande morte.

Règle qui en découle, et qu'un défaut réel a rappelée : aucune couleur ne doit être définie uniquement dans un bloc @media. La trame du hero l'était, et disparaissait dès qu'on forçait le thème sombre depuis un système en clair. Elle est désormais un masque sur var(--encre), et les blocs conditionnels ne contiennent plus que des jetons.

5. Composants

• Tableaux : filets horizontaux seulement, en-têtes en petites capitales monospace, nombres à droite. Sous 52 rem, un tableau portant la classe pile se replie en liste — aucune colonne coupée, aucun défilement horizontal invisible.
• Cartes : bord 1 px, rayon 12 px, aucune ombre.
• Bandeau de résultat : la réponse d'abord. Quand une règle de seuil s'applique (data/seuils.csv), une barre de seuil porte la ligne de majorité requise. Sans elle, « 197 pour · 0 contre → rejeté » produit un contresens chez tout lecteur pressé.
• Grille des sièges : un carré par siège, groupé par groupe. L'ordre interne n'a pas de signification, et il n'y a pas d'hémicycle — sa forme suggérerait un axe gauche-droite que ce site refuse de produire.
• Notes de procédure (.note.proc) : filet d'accent, toujours visibles. Un fait sans lequel la page se lit de travers ne se replie pas.
• Limites de portée (details.plus) : repliables, ouvertes par défaut, à la même place sur toutes les pages, pour qu'on apprenne à les trouver.
• Absences (.nodata, .note.abs) : filet pointillé et texte atténué, toujours accompagnés de leur raison typée. Aucun état vide ne s'arrête avant le « parce que ».

6. Identité

• Marque : une gaufre de seize cases — 9 pour, 4 contre, 2 abstentions, 1 non-votant. C'est une forme de graphique réelle, identique à la grille des sièges des pages de scrutin : la marque et la donnée sont le même objet. Pas d'hémicycle, pour la raison ci-dessus. Rendue en SVG inline (Marque()), pour que le mot soit du vrai texte dans la fonte du site.
• Motif de fond : la même grille, 3,5 % d'opacité, repliée vers la droite du hero où il n'y a pas de contenu.
• Aucune photographie dans l'identité.

7. Accessibilité

• Cible RGAA / WCAG AA, vérifiée par calcul et non supposée.
• Focus visible sur tous les éléments interactifs, jamais supprimé.
• Lien d'évitement vers le contenu en première position du document.
• Thème clair et sombre par jetons, tous deux définis explicitement, plus un forçage [data-theme].
• prefers-reduced-motion respecté.
• La recherche est un <dialog> natif ; ses déclencheurs restent masqués sans JavaScript — on ne montre pas une commande morte. Tout le reste du site fonctionne sans JavaScript.
• Images décoratives en alt="", motif de fond en aria-hidden.

Versions

• Version 3 (15 septembre 2026) : en-tête commun des documents de méthode (perimetre.md § 2.8, D-066).
• Version 2 (12 septembre 2026) : refonte de la charte avec la maquette.
• Version 1 (11 septembre 2026) : revue des sites comparables et palette.

Rendu intégralement depuis docs/charte-graphique.md à la construction du site. Le texte n'est ni résumé ni réécrit : c'est celui que relit un contributeur, et toute modification y est une diff.