Guidelines

01 — Couleurs et classes utiles

Un socle monochrome. Utiliser text-muted dans « Avancé → Classe(s) CSS additionnelle(s) » pour la ligne grise. text-black force le noir des titres. Ces classes modifient la couleur, pas la taille du texte.

Le gris secondaire est prévu sur fond blanc. Sur fond sombre, utiliser les styles inversés des composants ; ne pas réutiliser aveuglément le même gris.

02 — Typographie réelle

La police actuelle est une pile système : --tolmi-font-family. Aucune police web externe n’est chargée par le thème. La police de texte est définie dans theme.json et reprise en CSS ; les surcharges éventuelles restent visibles ci-dessous.

Aucune nouvelle police n’est choisie ou installée sans validation. Sur WordPress 7.0 et suivants : Apparence → Polices donne accès à la bibliothèque native, y compris pour les thèmes classiques. Les fichiers peuvent être hébergés localement. Installer une police ne suffit pas à l’appliquer à tout ce thème : le choix validé doit ensuite être relié aux styles natifs et aux variables CSS existantes.

Les tailles natives H2–H6 ne sont pas imposées par le thème. Elles peuvent être personnalisées dans l’éditeur : le guide affiche leurs valeurs effectives, pas une échelle fictive. Ne pas sauter de niveau de titre pour obtenir une taille visuelle.

03 — Grille, rythmes et responsive

.site-container : largeur disponible moins deux gouttières, plafonnée à 1140 px. alignwide : maximum 1440 px dans Gutenberg ; alignfull : pleine largeur hors mise en page spécifique d’article.

Grille éditoriale : neuf articles maximum par page, pagination numérotée et vraie URL par page. Aucun filtre de catégories sur l’index ; les pastilles ouvrent leurs archives. Le nom de catégorie remplace la ligne « Dernières actualités ».

Rythme : base de 8 px, complétée par 12 px et les espacements fluides clamp(). Cartes : écart horizontal 24–32 px ; lignes 40–64 px. Introduction de ressources : marge inférieure 48–80 px.

04 — Composants et états

.tolmi-button · .tolmi-button--outline — hauteur minimale 44 px, forme pilule et focus clavier visible. Les styles ne changent pas le comportement d’un lien ou d’un formulaire.

Boutons WordPress natifs : theme.json → styles.elements.button, texte 14 px / hauteur de ligne 14 px, padding 12 × 20 px ; hauteur sur une ligne 38 px. Le style Contour compense sa bordure de 2 px dans le padding pour la même hauteur. Réglages propres aux blocs prioritaires, couleurs et famille conservées. Le hero marketing ne surcharge plus ce padding.

Réalisations et défilement du thème

Fiche réalisation : colonne centrée de 70 % du conteneur sur ordinateur, largeur disponible sur tablette/mobile. Étiquettes expertise/secteur à contour au-dessus du H1 ; image 16:9 et mouvement partagés avec les articles. Encadré client gris bordé, padding 32/24 px ; sections espacées de 64/48 px. Champs ACF inchangés.

Apparence → Personnaliser → Défilement et animations : case de lissage léger de la molette, active par défaut, sans bibliothèque. Réservé au pointeur précis au-dessus de 1024 px ; zones défilantes, fenêtres, zoom, tactile et clavier natifs. Mouvement réduit respecté ; aucune transformation du contenu ou animation permanente au repos.

Article et interactions natives

Colonne principale : catégorie, H1, portrait auteur rond 16 × 16 px, nom, date et durée seule, séparés par deux points gris ; boutons Partager et Google, image 16:9 et contenu. Les deux boutons sont également présents après le contenu, avant la bio. À droite : « Résumé avec IA » puis « Sommaire ». Les deux titres partagent le même style : 21 px, graisse 500, interligne 1.15, sans capitales imposées. Les liens du sommaire restent à 13 px / 1.25. Seul le sommaire est sticky sur ordinateur ; aucun défilement interne. La version « sans sommaire » conserve une colonne centrée. Aucun séparateur horizontal autour de l’image.

Les deux boutons Partager ouvrent un même dialog natif : copie confirmée par un check animé et liens sociaux sous forme d’icônes avec noms accessibles. Fermeture par croix, Échap ou clic sur le fond ; focus rétabli sur le bouton qui a ouvert la modale. Le champ URL est signalé par un fond gris au focus, sans contour. Aucun SDK social.

Les cinq liens IA transmettent une consigne et l’URL publique à l’outil sélectionné, sans API facturée : ChatGPT, Grok, Perplexity, Claude et Google Mode IA. Le cinquième utilise google.com/search?udm=50&q=…, dans un nouvel onglet ; Gemini et sa copie sont retirés. Les logos sont locaux. Le fichier Google fourni sert aussi aux boutons « Ajouter l’agence sur Google » ; sa couleur blanche d’origine est rendue noire par CSS sur les fonds clairs. L’accès à l’article et le préremplissage restent dépendants du fournisseur et de la connexion. Aucun résumé n’est généré dans le thème.

Photo auteur : ACF image_de_lauteur sur user_ID, puis avatar WordPress ; bio native du profil. L’archive auteur affiche cette présentation puis neuf cartes paginées. L’email privé du compte n’est pas publié. Le bouton Google se règle dans « Réseaux sociaux » et reste masqué sans URL.

Header et navigation

Menu mobile/tablette : le verrouillage du body conserve la visibilité et l’état sticky du header. La fermeture restaure la position de lecture et recale la référence du scroll ; aucune disparition provoquée par le scroll technique à zéro. Source header.js et fichier servi header.min.js synchronisés.

Menu WordPress unique, profondeur 3 ; police héritée 14px/14px/500 sur ordinateur. CTA : texte, lien, icône téléversée et taille réglable 12–48 px. Un libellé mobile distinct, « Contact » par défaut, se règle dans le même panneau du Customizer. Le CTA reste visible dans le header fermé. Dans le menu ouvert, il est remplacé par « Nous contacter » en bas, au-dessus des réseaux sociaux. Son texte, son URL et sa taille 16–48 px se règlent dans le même panneau ; les comptes sociaux proviennent des réglages existants.

Descriptions des sous-entrées : champ ACF description_du_menu lu sur l’identifiant de chaque élément de menu, puis champ natif Description en repli. Le texte apparaît sous l’intitulé ; aucun texte n’est créé ou enregistré automatiquement.

Header sticky natif : masqué à la descente, révélé à la remontée ou au focus clavier ; décalage de la barre d’administration pris en compte. Script local minifié header.min.js, source lisible header.js, écoute passive et requestAnimationFrame, sans bibliothèque dans le navigateur. Mobile et tablette : dialogue noir plein écran avec un seul niveau visible, fermeture par croix. Toucher une entrée parente ouvre son sous-menu ; la flèche de retour, placée sur la même ligne que le titre courant, remonte d’un niveau. Aucun libellé visible « Menu principal ». Le lien « Voir… » en bas du sous-menu conserve l’accès à la page parente. Gestion du focus clavier, Échap, verrouillage puis restauration du défilement et retour au menu desktop lors du redimensionnement. Repli accessible sans dialogue natif ; menu déplié si JavaScript est indisponible.

Métadonnées de l’article : police existante de 13 px, line-height: 1 et date visible au format 21/10/2026. L’attribut datetime conserve la date ISO ; les dates des archives restent indépendantes.

Bloc indépendant aveewo/hero, fourni par le plugin « aveewo » : fond crème #f8f7f3, police héritée, titres 40/64/88 px selon le viewport et espacements sur grille 8/4 px. Textes et liens se règlent dans Gutenberg ; la barre publique change uniquement l’apparence de la seconde partie du titre, sans sauvegarde. Le modèle facultatif « Page de blocs — sans titre automatique » permet au hero de fournir le H1 sans le doubler.

Barre aveewo 0.3.0 : menu blanc « Heading 1 / 2 / 3 » sous la barre, trois boutons de format et pastille de couleur. Paddings de 4 px, commandes de 36 px (hauteur tactile 44 px), déclencheur Heading ajusté au libellé avec écart de 8 px avant la flèche. Espace titre/barre de 16 px ; styles et indications de survol communs. Bulle glass facultative au-dessus du titre, réglable dans Gutenberg. Pas de bouton Réinitialiser ni d’instruction sous la barre. Contour noir supprimé au clic, repère gris conservé au clavier. Les noms Heading désignent des styles visuels, pas une mutation du balisage SEO.

Header : base de 72 px, offset réel mesuré pour le sommaire et la barre d’administration. Modèle de page facultatif « Page de blocs — header transparent ». Le header défile normalement jusqu’à 100 px et ne devient sticky qu’à la remontée au-delà de ce seuil (tolérance de 5 px), sauf nécessité d’accès clavier ou de menu ouvert. Masqué à la descente, glass blanc à la révélation : blanc à 72 %, flou 16 px, saturation 180 %, séparation et ombre légère. Préfixe Safari et repli blanc opaque prévus. Transparence active dès le premier rendu ; menu et fermeture 32 px dans une zone de 44 px, coordonnées identiques et transition 160 ms. Lissage de molette natif désactivable avec intensités Léger (90 ms), Moyen (150 ms), Fort (220 ms) ; distance conservée et arrêt exact. Aucune police ajoutée.

aveewo/hero-marketing 0.7.0 : quatre styles CSS personnalisables (Nappes supérieures, Mélange pastel à cinq couleurs, Halo sous le titre, Halos aux angles). Défaut existant conservé, sans migration des contenus. Palettes propres au style ; jaune actif dans Halos aux angles, ancien baseColor conservé. Mouvement lent 28/34 s et grain 0–12 %, arrêt hors écran, arrière-plan et mouvement réduit. Contenus et typographie inchangés. Voir les palettes et limites dans la documentation HTML.

aveewo/steps et son enfant aveewo/step : arc à gauche sur ordinateur, scène fixe jusqu’à 1024 px où le scroll révèle l’étape suivante. Point et numéro actif centrés, commandes Précédent/Suivant. Numéros/années libres et contenu natif. Fond #f8f7f4, texte #111111 et point #ff2d20 réglables ; hauteur desktop 480/640/800 px. Si une étape ne tient pas dans la scène, si la fenêtre est basse ou le mouvement réduit, repli en lecture normale. Aucun geste de scroll intercepté.

aveewo/project-process : variations natives Création/Refonte préremplies de 11 étapes chacune, enfant Étape partagé. Vue initiale Roadmap ou Timeline, changement public facultatif sans sauvegarde. Roadmap cliquable (4/3/2 colonnes), une étape détaillée ; Timeline verticale, tous les contenus ouverts. Titre H2, introduction, couleurs fond/texte/accent et contenus internes modifiables. Numéros manuels, titres H3 initiaux ; aucun abonnement ni engagement de délai inventé.

aveewo/wordpress-features et son enfant aveewo/wordpress-feature (0.8.0) : six cartes puis IA pleine largeur, visuel à droite sur ordinateur. Direction noir profond (#000), bleu discret (#4b83e6), textes blancs/gris, contours fins et dégradés localisés. Aucun grand cadre translucide ni flou ; relief limité au socle IA. Huit visuels disponibles, dont l’ancien Intégrations. Développement : onglets accessibles Code / WordPress, titre éditable avec aperçu immédiat, sans sauvegarde ni réseau ; texte initial de 64 caractères réglable dans Gutenberg. Autres scènes décoratives, 100 % marqué Objectif. Mouvement lent, fondu 40 px réglable, grille 3/2/1, intérieur 1280 px, polices héritées. Pause locale, arrêt hors écran et arrière-plan, mouvement réduit et repli sans JS. Trame native et commande explicite de complément conservées, aucun texte personnalisé écrasé. Voir le guide HTML pour les options et limites.

aveewo/scroll-text 1.1.0 : révélation mot par mot et titres H1–H6 inchangés ; texte limité à 0–100 % par ordinateur/tablette/mobile (défauts 100 %). Alignement gauche/centré, intérieur WordPress 1140 px, sauvegarde native. À 0 %, largeur minimale lisible d’un cadratin. Début 85 % / fin 35 %, taille 56 px (32–72). Sans JS ou mouvement réduit, texte final lisible.

aveewo/scroll-cards 1.1.1 et enfant aveewo/scroll-card 1.1.0 : trois cartes entières sur ordinateur, piste à 100 % du bloc et arrêt précis aux deux bords ; en-tête seul dans la largeur du contenu WordPress. Moteur partagé avec les panoramiques : transition sur 85 % de l’intervalle, lecture sur les 15 % restants et trajet de scroll au moins égal à 1,6 fois la distance horizontale. Sur petit écran, aperçu voisin 24 px séparé par 16 px, aucune flèche ni compteur. Clavier et focus conservés. Chaque carte a cinq couleurs réglables (fond, titre, texte, bouton, texte du bouton), survol 80 %. Scène 2–8 cartes, durée 1–4 (défaut 2), replis si contenu trop haut, fenêtre basse, sans JS, mouvement réduit ou impression. Icône, titre et bouton 14/14 px conservés.

aveewo/gradient-services et enfant aveewo/gradient-service (1.0.0) : panneau blanc arrondi sur fond gris, en-tête en deux colonnes, puis trois cartes avec visuels carrés Workflow / Assistant / Progression. Quatre teintes indépendantes et texture 18 % (0–40) par carte ; palette réinitialisable explicitement sans écraser les textes. Jusqu’à 1024 px, en-tête et cartes s’empilent dans l’ordre. Intérieur 1440 px, padding 64/48/40/24 px, gaps 16/48/40 px, grille 8/4 px et polices héritées. Balises H1–H6, descriptions 16 px ; illustrations décoratives HTML/CSS, graphique marqué Projection illustrative, aucun script public ni bibliothèque.

aveewo/story-cards 1.1.1 et enfant aveewo/story-card 1.0.0 : même moteur progressif que Cartes au scroll, cadre WordPress et intérieur panoramique 3:4 conservés. Aperçu voisin compact, flèches/compteur retirés. Couleurs, logo et motif réglables, canvas limité à 24 images/s et arrêté hors écran/arrière-plan/mouvement réduit. Largeur 480 px (400/480/560/600) adaptée à la hauteur ; écart desktop 64 px (32/48/64), compact 16 px. Durée 2,5 (1–4), replis de lecture conservés.

Méga-menu 0.15.0 : trois colonnes séparées par des traits de 1 px, titres des groupes en texte non cliquable de 14 px lorsqu’ils possèdent un troisième niveau. Liens parents conservés uniquement dans la navigation mobile et masqués sur desktop. Aucun menu enregistré n’est réécrit.

Fiches outil : modèle automatique single-outil.php, image mise en avant comme logo, extrait manuel et contenu natif ; URL ACF lien_vers_outil avec repli sur la métadonnée native. Carte CTA masquée sans URL HTTP(S) valide, trois autres outils publiés maximum. Deux colonnes puis empilement mobile, pas de métadonnées de blog. Feuille assets/css/tool.css chargée uniquement sur ces fiches.

Documentation maître : assets/themes/documentation.html, hors du thème. Menu WordPress « Documentation » et lien dans le menu Plus de Gutenberg, fournis par aveewo 0.4.0. Accès protégé avec edit_pages (administrateurs et éditeurs par défaut), copie embarquée à synchroniser dans aveewo/includes/documentation-view.php. Pas d’exposition publique ni de modification des rôles.

Bibliothèque d’icônes locale

Line Awesome 2.0.1 : 1 544 SVG disponibles dans assets/vendor/line-awesome/icons.json. Aucun fichier de police, CDN ou paquet JavaScript n’est chargé. Exemple dans un bloc Code court : [tolmi_icon name="arrow-right" size="20"]. En PHP : tolmi_studio_icon( 'arrow-right' ). Icônes décoratives : accompagner les boutons d’un texte ou d’un nom accessible.

Les logos IA proviennent de Lobe Icons et restent des marques de leurs propriétaires. SVG et licences sont embarqués dans assets/vendor/ai-logos. Le logo X fourni est hébergé dans assets/vendor/social-logos/x.svg ; sa géométrie est partagée par la modale et le pied de page. TikTok conserve son SVG local. Ces deux marques ne sont pas présentes dans cette édition de Line Awesome.

05 — Mouvement et accessibilité

• Transitions courtes de 160 ms ; zoom des cartes à 1.035 en 500 ms ; image d’article : mouvement vertical limité à 18 px et zoom 1.08, sans dépendance externe.
• Le réglage « réduire les animations » désactive le mouvement de l’image et les transitions dédiées, dont le check. Les carrousels possèdent leurs propres replis CSS.
• Menu : pas de défilement du texte ni de bulle. Les autres entrées passent à 40 % d’opacité au survol d’une entrée ; même repère au clavier. Écart de 6 px avant le bouton chevron, SVG 32 px et gap général 20 px. Les descriptions natives s’affichent sous le titre de chaque sous-entrée lorsqu’elles sont renseignées. Panneau glass : fond 76 %, flou 24 px, saturation 150 % et repli opaque.
• Survol non indispensable : catégories et métadonnées restent visibles sur écran tactile. Le focus des étiquettes est signalé par le même fond gris, sans contour.
• Pagination et liens IA accessibles sans JavaScript. Sans JS, le menu reste accessible, les cinq liens IA fonctionnent comme des liens ordinaires et un partage email est proposé.
• Images : object-fit: cover, variantes natives WordPress. Éviter les images contenant un texte essentiel.

Ce guide décrit les règles du thème ; il ne constitue pas une certification d’accessibilité. Les contenus et extensions doivent aussi être vérifiés.

06 — Socle technique et librairies

Thème WordPress autonome, templates PHP, theme.json, CSS natif et JavaScript natif. Aucun framework, CDN, bibliothèque d’animation, jQuery ou police externe n’est explicitement requis par le code public de ce thème. Une extension peut néanmoins en charger : l’inventaire de cette page le montre.

Les blocs utilisent les paquets fournis par WordPress dans l’éditeur : wp-block-editor, wp-blocks, wp-components, wp-element et wp-i18n. Le lien de documentation ajoute wp-editor et wp-plugins dans l’éditeur seulement. Ces paquets ne sont pas chargés sur le site public par ces fonctions.

Inventaire WordPress côté serveur, pas analyse réseau : un asset ajouté plus tard ou directement injecté par une extension peut ne pas y figurer. Les handles WordPress ne sont pas tous des librairies tierces.