Référence interne · 3.5.0
Le référentiel de décision, d’interface et d’implémentation pour les pages Weclim. Il documente uniquement les éléments réellement disponibles dans le thème et les règles qui évitent de créer des variations incohérentes.
01 · Fondations
Les couleurs, tailles et polices doivent être sélectionnées depuis theme.json ou les réglages Weclim. Ne créez pas de valeur locale sans l’ajouter d’abord au système.
--ink · #0d3b3e
Texte principal, navigation, actions majeures et surfaces sombres.
--paper · #fbfaf6
Fond global et surfaces de lecture.
--sage · #e5ede1
Regroupements calmes, sections de guidance et choix sélectionnés.
--sage-strong · #9cb690
Bordure active, repère positif et interaction secondaire.
--orange · #ff9b38
Accent d’action, focus et limite éditoriale.
--line · #dcded7
Séparateurs, contours de cartes et structure discrète.
Typographie éditoriale
Rafraîchir un espace sans choisir à l’aveugle.
--serif · Iowan Old Style, Baskerville, Times New Roman, serif. Réservée aux titres, grands messages et moments de décision.
Typographie interface
Des libellés directs, des contenus lisibles, des données situées.
--sans · Inter, système sans-serif. Réservée à la navigation, aux actions et au texte courant.
Rythme
Échelle de lecture
Manifeste · --type-displayUne hiérarchie calme aide à comprendre.
Un seul message d’entrée par page ou hub.H1 · --type-h1Une hiérarchie calme aide à comprendre.
Titre de page unique, jamais doublé.H2 · --type-h2Une hiérarchie calme aide à comprendre.
Décision ou chapitre majeur.H3 · --type-h3Une hiérarchie calme aide à comprendre.
Sous-chapitre, carte éditoriale ou composant.Texte · --sansUne hiérarchie calme aide à comprendre.
Lecture courante, avec une ligne de 1,72.02 · Conteneurs et layouts
Le thème utilise un conteneur large pour les hubs et une largeur de lecture réduite pour les contenus experts.
--wrap · 1 440 px maximumHubs, grilles de cartes, sections de décision et footer.--nav-wrap · 1 880 px maximumLe header s’étend davantage que le contenu pour ne pas comprimer le menu.--reading · 730 px maximumArticles, contenus riches, méthodes et explications longues.Utiliser weclim-section et l’espacement XL pour séparer les décisions importantes. Une section comporte un titre, une promesse courte puis un seul groupe de contenu.
Utiliser les grilles existantes : 5 cartes pour les besoins, 3 pour les sujets, 4 pour les solutions et 3 pour les articles. Sur mobile, toutes passent en une colonne.
Fond ivoire par défaut ; blanc pour les objets manipulables ou les cartes ; sauge pour guider ; vert pétrole uniquement pour les moments de forte intention.
04 · Actions et liens
Les boutons font progresser. Les liens conduisent vers un contenu existant. Aucun CTA ne doit promettre un devis, un résultat ou une destination indisponible.
button button--ink · 1 par zone de décision.
button button--orange · démarrer un parcours, pas vendre.
button button--light · uniquement sur une surface sombre.
text-link · approfondir sans détourner l’action principale.
05 · Cartes et blocs
Chaque carte porte une seule décision, un titre concret, une explication courte et un état de destination honnête.
Entrée par espace, usage ou public concerné.
Voir le parcoursEntrée par sujet éditorial, réglementation ou consommation.
Lire le repèreLa destination n’existe pas encore ou n’est pas publiée.
Bientôt disponibleIntroduit une famille technique sur un hub. Il n’énonce pas de recommandation universelle.
Utilisée pour un contenu publié : date, titre, extrait court et chemin de lecture.
Lire le guideUne carte de synthèse peut résumer un angle, mais doit renvoyer vers une méthode et des sources dès qu’elle contient une donnée.
Sur une archive, la catégorie courante fixe le corpus. Sous-catégories, formats et espaces ne s’affichent que lorsqu’ils offrent au moins deux choix réels. Les filtres utilisent des liens partageables, le tri est un formulaire natif et l’état vide propose une réinitialisation.
06 · Lecture éditoriale
Les composants éditoriaux mettent le contexte, l’auteur, la date et les limites à proximité de l’affirmation utile.
Une introduction situe le besoin, indique ce que la page permettra de comprendre et évite toute promesse sans données.
Une comparaison est utile seulement lorsque son scénario, ses unités et ses limites sont explicités.
Ajouter ce bloc pour tout chiffre, seuil, prix, consommation, bruit, règle, fluide ou comparaison. Il doit rendre visibles la source, la date, l’unité et le périmètre.
Bloc méthode
Ce bloc contextualise une décision qui dépend du bâti, de l’usage ou de données non directement comparables.
Voir les règles d’usage07 · Composants de décision
Ces composants ne s’emploient qu’après avoir défini le scénario, les critères et les sources qui justifient leur contenu.
Utiliser une échelle seulement lorsque les critères sont définis et identiques entre les options.
rating · toujours accompagner d’un libellé accessible.
Il n’existe pas de solution universelle.
| Critère | Option A | Option B |
|---|---|---|
| Scénario d’usage | À définir et sourcer | À définir et sourcer |
| Contrainte de pose | Texte explicatif | Texte explicatif |
| Source et date | Référence visible | Référence visible |
08 · Formulaires, états et accessibilité
Tester à 360 px, 768 px et 1 280 px ; au clavier ; à 200 % de zoom ; et sans dépendre du JavaScript pour lire le contenu essentiel.
État sélectionné par fond sauge et bordure intense ; cible tactile large.
Le statut textuel doit compléter la barre pour les lecteurs d’écran.
Utiliser details pour une lecture et un clavier natifs.
Contenu secondaire disponible à la demande.
Employé lorsqu’une page n’est pas encore publiée.
prefers-reduced-motion.09 · Archive éditoriale
Le titre d’archive utilise toujours une surface à contraste garanti. La carte à la une est compacte, puis laisse rapidement apparaître les articles suivants.
Fond paper-deep, texte ink-strong. Ne jamais dépendre d’une couleur héritée ou d’un média variable.
Visuel 190 px maximum sur desktop, titre plafonné à 2,6 rem et accès immédiat à la liste suivante.
Le changement de sélection soumet l’archive ; un bouton est réservé au repli sans JavaScript.
Une facette n’apparaît qu’avec au moins deux choix réellement disponibles dans le résultat courant.
09 · Gouvernance
Vérifier si un token, une classe, un pattern ou un template part existant répond déjà au besoin.
Documenter son objectif, contenu, variantes, états, mobile, accessibilité et emplacement dans WordPress avant de l’employer sur une page.
Mettre à jour le thème, cette page privée et la documentation de composant. Éviter toute duplication entre les pages.
Propriétaire : équipe Weclim · Source de vérité : thème actif, theme.json, Réglages Weclim et patterns Gutenberg.
Référence interne du thème Weclim. Les fondations, composants, états et règles d’usage sont rendus par le gabarit privé Design System.
10 · Annuaire des installateurs
Composants rendus par l’extension métier. Ils consomment une API de lecture publique et ne stockent aucune clé de synchronisation dans WordPress.
Formulaire HTML natif : nom, ville ou code postal, département et prestation. Les labels restent visibles, le bouton soumet sans JavaScript et les filtres de combinaison sont en noindex,follow.
Nom, territoire, périmètre, prestations, badges RGE/fluides et date de source. Le lien de fiche est explicite ; aucune note, aucun avis et aucun dirigeant ne sont affichés.
Trois états : résultats, absence de résultat et indisponibilité du service. Le texte décrit l’action possible et ne dépend pas uniquement d’une couleur ou d’une icône.