Site NRGE – nrge.fr (2026)

Page unique, statique, éco-conçue et accessible, pour le collectif Numérique Responsable Grand Est. Hébergement cible : Infomaniak (site statique, 10 Mo max). Poids total du site : ~200 Ko sur disque, ~97 Ko chargés par visite (la barre des 500 Ko est donc franchie avec de la marge).

Contenu du dépôt

Fichier	Rôle
index.html	La page (contenu repris de la présentation, texte en formulations épicènes)
style.css	Feuille de style unique, thème clair/sombre (suit le système, ou le bouton)
theme.js	Bouton de bascule clair/sombre (le site fonctionne sans JavaScript)
favicon.svg	Icône NRGE
img/	Logo vectorisé, 3 illustrations (AVIF + WebP de secours), 2 QR codes SVG
.htaccess	Compression et cache navigateur (Apache)
tools/build-images.sh	Régénère img/ depuis les PNG de la présentation (../NRGE-Presentation)
tools/qr2svg.py	Compacte un QR qrencode en un seul <path>
tools/check-size.sh	Affiche le poids par fichier et échoue au-delà de 500 Ko

Modifier le texte

Tout est dans index.html. Les 15 métiers sont regroupés en quatre familles dépliables dans <div class="families"> : un <details class="family …"> par famille, dont le <summary> contient le <h3> de famille et un <span class="count"> annonçant le nombre de cartes, puis une liste <ul class="domains"> dont chaque <li> porte un <h4> et un paragraphe. Trois points de vigilance :

• la classe de couleur (g, br, am, mt) se pose sur le <details>, pas sur les <li> : toutes les cartes d'une famille en héritent ;
• le .count est écrit en dur, donc à corriger en même temps qu'on ajoute ou retire une carte ;
• les quatre <details> portent l'attribut open : tout le contenu est visible à l'arrivée, le pliage est un confort de lecture. Retirer open d'un <details> le fait arriver replié.

Les 15 métiers reprennent les catégories de l'annuaire YesWiki (?AnnuaireAlpha), pour qu'on passe sans friction de la page aux filtres de l'annuaire. Les descriptions tiennent en deux phrases courtes et descriptives : ce que l'activité recouvre, puis les pratiques, livrables ou référentiels concrets. Le collectif ne vend rien ici, il montre qu'il sait faire le travail — donc pas de « nous » dans les cartes (il reste dans le chapô de la section), pas de superlatif, pas de promesse. Deux ou trois termes clés par carte sont mis en demi-gras avec <b> — l'élément de mise en avant de mots-clés, qui n'ajoute pas d'importance pour les lecteurs d'écran, contrairement à <strong> ; au-delà de trois, le repère visuel se dilue. L'annuaire des membres n'est pas dupliqué ici : la page renvoie vers le YesWiki (?TrombiAnnuaire).

L'adresse contact@nrge.fr est un exemple à remplacer (3 occurrences dans index.html).

Régénérer les images

Dépendances : imagemagick, libavif (avifenc), potrace, qrencode, python3.

./tools/build-images.sh    # lit ../NRGE-Presentation/*.png, écrit img/
./tools/check-size.sh      # contrôle du poids

Tester en local

python3 -m http.server 8080
# puis http://localhost:8080/

Déployer

Copier par SFTP/FTP le contenu du dépôt sauf tools/, README.md et .git/ à la racine du site Infomaniak. Aucune étape de build n'est nécessaire.

Accessibilité et sobriété

• HTML sémantique, un seul h1, lien d'évitement, contrastes AA vérifiés, cibles tactiles de 44 px.
• Aucune ressource externe (pas de police web, pas de traceur, pas de cookie).
• Illustrations décoratives (alt=""), QR codes doublés d'un lien texte.
• Thème sombre par prefers-color-scheme, sans JavaScript ; prefers-reduced-motion respecté.
• Les familles de métiers se plient avec <details> / <summary> natifs : pas une ligne de JavaScript, état déplié ou replié annoncé par le navigateur, cible tactile de 44 px. Revers connu : une famille repliée ne s'imprime et ne se cherche (Ctrl+F) de façon fiable que sur les moteurs récents — voir les règles de rattrapage dans le bloc @media print de style.css.
• Les 3 illustrations sont du trait quasi noir sur fond transparent : en thème sombre elles reçoivent une plaque claire via --illus-bg / --illus-pad, comme le logo avec --logo-bg. Toute illustration ajoutée doit suivre la même règle, sinon elle disparaît en sombre.