Tous les README des projets qui utilisent Pelote suivent le même gabarit, en visuels SVG générés par tools/readme-assets.py (une version claire et une sombre de chaque visuel). GitHub affiche le README sur blanc #ffffff ou sur #0d1117 : chaque visuel est vérifié sur ces deux fonds.

Les exemples de cette section viennent de projets personnels : le footer y affiche beedywool.com. Un projet qui utilise Pelote pour une autre marque garde la même mise en page et y affiche son propre nom ou sa marque, avec un lien vers son site.

Structure, dans cet ordre

1. Banner centré : <picture> avec banner-dark.svg en prefers-color-scheme: dark et banner-light.svg par défaut, width="100%", un alt qui reprend le nom et l'accroche (« VPS Admin | Panel, déploiements et assistant pour tes serveurs Linux »).
2. Badges de stack en style=for-the-badge, fond 4F378B, logo D0BCFF. Une ligne de badges secondaires en flat-square (fonds 4A4458 et 633B48) pour les faits clés (« 1 conteneur », « installable »).
3. Sommaire en gras, liens d'ancre séparés par ·.
4. Accroche en citation (>) : 2 à 4 lignes, le nom en gras, ce que fait le projet et pour qui.
5. Sections numérotées : <a name="…"> puis le SVG de titre de section (badge cookie9 numéroté, titre, filet). Le numéro suit l'ordre réel des sections.
6. Contenu : tableaux à 3 colonnes pour les fonctionnalités, blocs de code sh pour l'installation, <details> pour le développement.
7. Footer de la marque, toujours, en dernier, le nom posé dans une pastille (beedywool.com dans les exemples), lien vers le site :

<br>

<a href="https://beedywool.com">
<picture>
  <source media="(prefers-color-scheme: dark)" srcset=".github/assets/footer-dark.svg">
  <img src=".github/assets/footer-light.svg" alt="beedywool.com" width="100%">
</picture>
</a>

Kit d'images, trois styles

Le groupe d'assets Readme contient le kit complet sur l'exemple de vps-admin : banner (1000×340, en PNG car il embarque la capture du panel), section (1000×100) et footer (1000×120), dans chaque style, en versions claire et sombre séparées. En M3E, ce sont les fichiers de vps-admin/.github/assets, à l'identique : la mise en page de référence est vps-admin/tools/readme-assets.py. Plaza et Chrome reprennent exactement la même mise en page avec leur matière. Les sections restent des séparateurs (« 02 Fonctionnalités »), le contenu en dessous reste du Markdown.

• Un seul style par README, le même que celui de l'app. On ne mélange jamais un banner Plaza avec un footer M3E.
• Le footer se copie tel quel dans .github/assets/ sous le nom footer-light.svg / footer-dark.svg. Le banner et les sections sont des modèles (exemple vps-admin) : chaque repo copie tools/readme-assets.py de vps-admin et n'en change que les données (nom, accroche, chips, capture, sections).
• Les polices M PLUS Rounded 1c (Plaza) et Michroma (Chrome) ne sont pas chargées par GitHub dans un SVG : les piles prévoient Nunito / Varela Round et Orbitron / Eurostile, puis Roboto ou Segoe UI. Garder 10 % de marge de largeur sur chaque texte.

Règles visuelles, en clair comme en sombre

• Une carte a toujours un contour. Remplissage sc (#F3EDF7 clair) ou sch (#2B2930 sombre) et un trait de 1px outline-v (#CAC4D0 / #49454F). Sans contour, #fef7ff disparaît sur blanc et #211F26 sur #0d1117.
• Le texte ne passe jamais sous une forme ni sous une capture. Le bloc texte a une largeur maximale fixe (environ 55 % de la carte) ; formes et maquettes restent dans la zone de droite. Mesurer la longueur du texte dans le script, ne pas deviner.
• Formes décoratives en conteneurs seulement : pc et tc (#EADDFF / #FFD8E4 en clair, #4F378B / #633B48 en sombre). Pas de gris secc en sombre : #4A4458 sur #2B2930 ne se voit pas. Deux ou trois formes maximum, toutes dans la moitié droite.
• Contours de chips en outline (#79747E / #938F99), pas outline-v : le contour fin d'une chip doit atteindre 3:1.
• Textes : titre en on-surface, sous-titres en on-sv, jamais en dessous de 4.5:1 sur la carte. Taille minimale 14px dans un SVG de 1000px de large (GitHub le réduit sur mobile).
• Logo : le mark de l'app (cookie9 + glyphe) dans le banner, en #4F378B / #EADDFF en clair, #D0BCFF / #381E72 en sombre.
• Animation : rotation lente des formes (48 s) et apparition douce autorisées, toujours coupées par prefers-reduced-motion.
• Police : pile 'Google Sans Flex', 'Google Sans', 'Roboto Flex', Roboto, 'Segoe UI', system-ui, sans-serif. GitHub n'a pas Google Sans Flex : le SVG doit rester lisible avec Roboto ou Segoe UI (prévoir 10 % de largeur en plus).
• Formes : uniquement les 26 formes du système (voir ExpressiveShape), plus de formule polaire.
• Plaza : fond rayé surface / sc, bulles scl avec reflet et ombre douce, bouton gel primary, police arrondie 800. Chrome : halos pc / tc, barres de métal taillées dans secc avec LED ok, gel primary, coins asymétriques, titres Michroma en capitales, glyphes Material Symbols Sharp.

Texte

• La langue du README est celle de l'app (Stabilité et PoGo Search en français, vps-admin en anglais ou français selon le public, portfolio bilingue).
• Pas d'emoji dans les titres ni les badges. Pas de tiret cadratin.
• Une mention de responsabilité en citation à la fin si le projet touche un service tiers ou la santé (PoGo Search, Stabilité), juste avant le footer.

Vérifier avant de pousser

1. Régénérer les visuels (python3 tools/readme-assets.py).
2. Ouvrir le README sur GitHub en thème clair et sombre (ou rendre les SVG sur #ffffff et #0d1117 avec rsvg-convert -b).
3. Contrôler : contours de cartes visibles, aucun texte recouvert, footer présent et cliquable.