Charte graphique de L'Assemblée des Défias

L'identité visuelle commune à tous les projets de L'Assemblée des Défias : le repaire (assemblee-defias.fr), WoWDB, la documentation de l'API, la page de statut, la forge Git, et ceux qui viendront. Pierre sombre, or et parchemin, bannière historique, textures du forum d'époque, Georgia pour les titres, Verdana et Arial pour le texte.

Version 1.0.0 (1er octobre 2026). Vitrine : ouvrez index.html (nuancier, composants, code à copier).

Contenu

charte.css           jetons (variables --df-*) et composants, préfixés df-
charte.js            comportements facultatifs : copie, onglets, Échap des infobulles, choix du camp
jetons.json          les mêmes jetons au format du W3C (Design Tokens), pour d'autres outils
images/              bannières, textures PBWoW, icônes du jeu, favicon (WebP) ; crédits dans CREDITS.txt
index.html, demo/    la vitrine : nuancier, composants et leur code
outils/charte.py     construire (jetons, vitrine), verifier (contrastes, règles), installer (copie versionnée)
forgejo/             thème « defias » pour la forge (theme-defias.css) et sa note d'installation
LICENSE              licence MIT du code

Utiliser la charte dans un nouveau projet

1. Installer une copie versionnée dans le dossier public du projet :

   python3 outils/charte.py installer /chemin/du/projet/public/charte
   

   Le dossier reçoit charte-1.0.0.css, charte-1.0.0.js, images/, LICENSE, CREDITS.txt et CHARTE.json (version, adresse du dépôt, empreinte SHA-256 de chaque fichier). Sans Python, copiez ces fichiers à la main en ajoutant le numéro de version au nom de la feuille et du script. Versionnez ce dossier avec le projet.

2. Lier la feuille (et le script s'il sert) dans chaque page, avant la feuille du projet :

   <link rel="stylesheet" href="/charte/charte-1.0.0.css">
   <link rel="stylesheet" href="/mon-projet.css">
   <script src="/charte/charte-1.0.0.js" defer></script>
   <link rel="icon" href="/charte/images/favicon.ico">
   

3. Composer : class="df-page" sur <body> (ajoutez df-interface pour un outil dense, en Arial), puis les composants df- de la vitrine. Dans la feuille du projet, utilisez les variables (var(--df-or), var(--df-espace-4)…) plutôt que des valeurs recopiées.

4. Monter de version : lisez le journal ci-dessous, réinstallez la nouvelle version, changez le numéro dans les balises, comparez les captures, lancez les tests du projet, livrez. L'ancienne version reste dans l'historique Git du projet si un retour arrière s'impose.

Pourquoi une copie versionnée dans chaque projet, et pas un lien vers un fichier central

Un fichier unique servi par un domaine (par exemple https://assemblee-defias.fr/charte.css) semble plus simple, mais il va contre nos règles et contre la robustesse des outils :

• Rien d'externe. Un fichier central est une ressource d'un autre domaine pour tous les autres projets : la CSP de chacun devrait l'autoriser (style-src et img-src élargis), et chaque page dépendrait d'un serveur qui n'est pas le sien.
• La page de statut doit survivre à la production. Elle tourne sur un serveur indépendant précisément pour rester lisible quand la production tombe ; avec une feuille centrale servie par la production, elle perdrait sa mise en forme au pire moment.
• Pas de changement silencieux. Modifier un fichier central change d'un coup tous les sites, sans relecture ni test. Avec une copie, un projet ne change que lorsqu'on installe la nouvelle version et qu'on l'a vérifiée (captures, tests).
• Cache sûr et rapide. Le numéro de version est dans le nom : le fichier peut être mis en cache un an (immutable), sans requête de vérification ni risque d'ancienne version.
• Reproductible. L'historique Git de chaque projet contient la feuille exacte avec laquelle il a été livré ; un retour arrière du projet ramène aussi son style.
• Hors ligne. Le développement local et les tests marchent sans réseau.

Le coût est faible : environ 50 Kio de CSS et 0,5 Mio d'images par projet, et une étape d'installation à chaque montée de version, que outils/charte.py installer et le fichier CHARTE.json rendent sûre (on voit tout de suite si une copie a été modifiée à la main).

Politique de sécurité du contenu (CSP)

La charte fonctionne avec la CSP la plus stricte de nos sites (celle de la page de statut) : default-src 'none'; style-src 'self'; img-src 'self'; script-src 'self'.

• aucune adresse data: ni ressource externe dans la feuille ;
• aucun style ni script en ligne dans la vitrine ; charte.js est un fichier externe, sans eval ni style en ligne ;
• avec une CSP à nonce (site Next.js), chargez charte-1.0.0.js comme les autres scripts externes du projet, ou laissez-le de côté : la charte marche sans lui.

Les jetons

Source unique : jetons.json (format du W3C, $value et $type). La commande python3 outils/charte.py construire en tire le bloc de variables de charte.css, le nuancier et le tableau des contrastes de la vitrine. Ne modifiez jamais ces parties à la main.

Groupe	Variables	Exemples
Fonds et surfaces	--df-fond, --df-panneau, --df-encart, --df-saisie…	pierre sombre #121110
Textes	--df-texte, --df-texte-doux, --df-texte-terne, --df-titre	parchemin clair #e5decb
Or et liens	--df-or, --df-or-vif, --df-or-sombre, --df-lien, --df-focus	or #e3c48c
Rouge des Défias	--df-accent, --df-accent-sombre, --df-accent-trait, --df-accent-texte	bandana #8a4034
Parchemin	--df-parchemin, --df-parchemin-encre…	notes à lire
États	--df-succes, --df-alerte, --df-partiel, --df-panne, --df-info, --df-inconnu (et -texte, -fond)	page de statut
Factions	--df-alliance, --df-horde (et -sombre)	habillages du site
Qualité des objets	--df-qualite-0 à -6 (lisibles, AA) et --df-qualite-N-jeu (exactes)	rare #69aaff / #0070dd
Infobulle du jeu	--df-infobulle-fond, --df-jeu-vert, --df-jeu-jaune, --df-jeu-gris
Code	--df-code-fond, --df-code-mot, --df-code-chaine…
Polices	--df-police-titre (Georgia), --df-police-texte (Verdana), --df-police-interface (Arial), --df-police-code	polices du système seulement
Tailles	--df-taille-mini (12 px) à --df-taille-titre-1 (34 px)	plancher : 12 px
Espacements, rayons	--df-espace-1 (4 px) à -8 (64 px) ; --df-rayon-1 à -3, --df-rayon-rond
Ombres	--df-ombre-cadre, --df-ombre-icone, --df-ombre-flottant, --df-ombre-encart, --df-ombre-texte

Les textures (images/textures/) ne sont pas des variables : une adresse relative dans une variable CSS se résout mal d'une feuille à l'autre. Utilisez les classes, ou citez le fichier.

Habillages

data-df-faction="alliance" ou "horde" (sur <html> ou n'importe quel bloc) remplace les couleurs de fond, de filet, d'or et de bouton ; "sombre" rétablit le thème par défaut dans un bloc. Changez la bannière en même temps (banniere-alliance-* ou banniere-horde-* ; avec charte.js, l'attribut data-df-banniere sur <img> et <source> s'en charge). Les outils (documentation, statut, forge) restent dans le thème sombre ; les habillages servent au site.

Les composants

Tous en CSS pur, préfixés df- ; les styles d'éléments nus (.df-page a, .df-prose h2…) passent par :where() et n'ont aucun poids : une classe du projet les remplace toujours.

Composant	Classes principales
En-tête, bannière, navigation	df-entete, df-entete-ligne, df-banniere (-reduite, -pleine), df-nav, df-entete-compacte, df-marque, df-choix-faction
Fil d'Ariane	df-fil, df-fil-note
Panneaux et cadres	df-cadre, df-panneau (-titre, -corps, -pied, -sobre), df-article (-tete, -corps)
Titres et texte	df-surtitre, df-titre-1 à -3, df-titre-barre, df-chapo, df-separateur, df-mention, df-prose
Boutons et liens	df-bouton (-secondaire, -discret, -petit, -icone), df-lien, df-lien-discret, df-lien-externe, df-lien-objet
Badges et étiquettes	df-badge (-or, -succes, -alerte, -panne, -info), df-etiquette, df-compteur, df-methode, df-icone, df-bord-q0 à -q7, df-piece
Pastilles d'état	df-etat (-ok, -alerte, -partiel, -panne, -maintenance, -bientot, -inconnu), df-forme
Tableaux	df-tableau, df-nombre
Formulaires	df-formulaire, df-champ, df-champ-libelle, df-saisie, df-case, df-aide, df-erreur, df-recherche
Blocs de code	df-code (-tete, -titre, -langage, -actions), df-copier, df-code-court, df-c-mot…
Infobulle façon jeu	df-infobulle-ancre, df-infobulle (-fixe, -droite), df-infobulle-boite, df-infobulle-nom, df-q0 à df-q7, df-jeu-vert…
Onglets	df-onglets, df-onglets-liste, df-onglet, df-courant, df-onglet-panneau
Menus et cartes	df-menu, df-colonnes, df-carte (-titre, -texte)
Notes et messages	df-note (-attention, -titre), df-message (-succes, -alerte, -panne, -info)
Pied de page	df-pied (-fleuron, -marque, -liens, -mention)
Mise en page	df-coquille, df-conteneur, df-grille-2, df-grille-2-droite, df-grille-3, df-principal, df-cote, df-cote-droit, df-colonnes, df-rangee, df-pile
Utilitaires	df-sr (lecteurs d'écran), df-evitement, df-js-seulement, df-interface

La mise en page met le contenu principal en premier dans le HTML ; la grille place les colonnes sur grand écran (trois au-delà de 1000 px, deux jusqu'à 760 px) et repasse à une seule colonne, contenu en tête, en dessous.

charte.js (facultatif) ajoute : la classe df-js sur <html>, les boutons de copie (data-df-copier), les onglets ARIA au clavier, Échap pour fermer une infobulle, le choix du camp retenu par le navigateur. Tout reste lisible et utilisable sans lui.

Règles de l'identité

• Rien d'externe. Aucune police, image, vidéo ni script venu d'un autre domaine. Une ressource retrouvée ailleurs (Web Archive, base d'époque) est rapatriée et servie par le projet, jamais liée. Les liens vers d'anciennes bases de données sont remplacés par WoWDB.
• Vraies images du jeu. Pour tout visuel de World of Warcraft : une icône ou une illustration du jeu, au besoin composée de plusieurs icônes réelles. Jamais de dessin fait main (pas de SVG maison pour figurer un objet du jeu). Chaque image est créditée (images/CREDITS.txt). Seuls les signes d'interface neutres (chevron, coche, flèche) sont tracés en CSS.
• Pas de tiret cadratin. Ni dans les titres, ni dans l'interface, ni dans les textes, ni dans les messages : deux-points, virgule, parenthèses, ou barre verticale dans les <title>. Les textes d'époque des guides restent intacts. outils/charte.py verifier le contrôle.
• En français, avec la ponctuation française (espace insécable avant :, ;, ?, !, guillemets « »).
• Accessibilité.
  • contrastes AA au moins (4,5:1 pour le texte, 3:1 pour le focus et les bordures de champ), vérifiés dans les trois habillages à chaque verifier (tableau dans la vitrine) ;
  • les couleurs de qualité du jeu existent en deux jeux : lisibles pour le texte, exactes pour les bordures et les grands titres (le bleu « rare » du jeu n'atteint pas AA en petit) ;
  • focus clavier toujours visible (--df-focus) ;
  • rien d'important à la seule couleur : les états ont une forme et un libellé ;
  • aucun texte sous 12 px, cibles d'au moins 24 px ;
  • aucune animation hors prefers-reduced-motion: no-preference ; prise en charge de forced-colors et de l'impression ;
  • pages lisibles sans JavaScript.
• CSP stricte : pas de style ni de script en ligne, pas d'adresse data:.

Faire évoluer la charte

1. Modifier jetons.json, charte.css (hors bloc des jetons) ou charte.js.
2. python3 outils/charte.py construire : régénère les variables, le nuancier, les contrastes et le code des exemples de la vitrine.
3. python3 outils/charte.py verifier : contrastes AA, rien d'externe, aucun tiret cadratin, aucun style ni script en ligne, fichiers cités présents, versions cohérentes.
4. Ouvrir index.html, regarder les trois habillages à 320, 768 et 1280 px.
5. Monter le numéro de version (dans jetons.json, l'en-tête de charte.css et de charte.js), compléter le journal, puis étiqueter le commit (git tag v1.1.0).

Numérotation sémantique : majeure quand une classe ou une variable disparaît ou change de sens (les projets doivent être relus), mineure pour un ajout (composant, jeton, variante), corrective pour une correction sans changement d'usage.

Où la charte est appliquée

Projet	Copie	Remarques
Documentation de l'API (docs.wowdb.assemblee-defias.fr)	site/public/charte/	en-tête avec bannière réduite, cadre, panneaux ; mise en page à la Stripe conservée
Page de statut (status.assemblee-defias.fr)	outils/status/statique/charte/	feuille versionnée par empreinte, CSP sans unsafe-inline
Forge Git (git.assemblee-defias.fr)	forgejo/	thème defias sur la base de forgejo-dark

Le site principal et WoWDB gardent leurs feuilles : la charte en est tirée, elle ne les remplace pas.

Licences

• Code de la charte (charte.css, charte.js, jetons.json, outils/, demo/, index.html, forgejo/theme-defias.css) : licence MIT (identifiant SPDX MIT), © 2026 L'Assemblée des Défias. Voir LICENSE.
• Images du jeu (images/icones/, images/interface/, images/banniere/, images/favicon.ico) : World of Warcraft, ses icônes et ses illustrations sont des marques et des contenus © Blizzard Entertainment, Inc. Ces images ne sont pas couvertes par la licence MIT ; leur réutilisation relève des conditions de Blizzard Entertainment. L'Assemblée des Défias est un site de fans, sans lien avec Blizzard Entertainment.
• Textures du thème PBWoW (images/textures/) : © PayBas 2015, Sajaki 2017, licence GPL v2 (images/textures/LICENSE-PBWoW.txt).

Comme dans les conditions d'usage de l'API (https://docs.wowdb.assemblee-defias.fr/conditions#licences) : nos licences couvrent notre code, jamais les contenus du jeu.

Journal des versions

1.0.0 : 1er octobre 2026

Première version, tirée du site, de WoWDB et de la page de statut.

• Jetons : couleurs (fonds, textes, or, parchemin, rouge des Défias, états, factions, qualités lisibles et exactes, infobulle, code), polices, tailles, interlignes, espacements, rayons, largeurs, ombres, durée ; jetons.json au format du W3C.
• Habillages Alliance et Horde ; thème sombre par défaut.
• Composants : en-tête (bannière, navigation, version compacte, choix du camp), fil d'Ariane, cadre, panneau, article, titres, prose, boutons, liens, liens d'objet, badges, étiquettes, compteurs, icônes, pièces, pastilles d'état, tableaux, formulaires, recherche, blocs de code, infobulle façon jeu, onglets, menus, cartes, notes, messages, pied de page, grilles.
• charte.js : copie, onglets, Échap des infobulles, choix du camp.
• Images : bannières historiques (WebP 400 à 800 px), textures PBWoW, 32 icônes du jeu, pièces de l'interface, favicon.
• Outil outils/charte.py : construire, verifier, installer.
• Thème Forgejo defias.
• Appliquée à la documentation de l'API et à la page de statut.