Bonnes pratiques & Engagements

Structure & Sémantique

• HTML5 sémantique : utilisation des balises natives (<main>, <article>, <nav>, <aside>, <figure>) pour structurer le contenu de manière claire pour les moteurs de recherche et les technologies d'assistance.
• WAI-ARIA : attributs ajoutés là où le HTML natif ne suffit pas, pour exposer rôles, noms et états aux lecteurs d'écran.
• JSON-LD : données structurées insérées dans le code pour que les moteurs de recherche et les assistants IA comprennent le contexte des pages.

Apparence & Design

• CSS moderne : variables CSS (design tokens), couleurs oklch() avec replis en hexadécimal pour les anciens navigateurs, clamp(), dvh, text-wrap.
• CSS Flexbox & CSS Grid : modules natifs de mise en page pour des interfaces fluides et responsives.
• SVG : icônes regroupées dans un sprite SVG mis en cache (une seule requête), quelques SVG inline pour les éléments isolés.

Interactivité & Logique

• JavaScript vanilla : écrit en ES2018 puis compilé pour Safari 12 / iOS 12 ; aucune bibliothèque (ni React, ni Vue) n'est livrée.
• Web Audio API : micro-interactions sonores générées par le code (0 Ko de fichiers audio).
• Intersection Observer API : détection native de l'entrée des éléments dans la fenêtre, à très faible coût de calcul.

Chaîne de build (développement uniquement)

• Lightning CSS et esbuild minifient le CSS et le JS pour la cible ios >= 12 ; le site livré reste 100 % statique.
• Noms de fichiers CSS/JS avec empreinte de contenu et cache du service worker renouvelé automatiquement à chaque version.
• ESLint (syntaxe limitée à ES2018) et Prettier pour la qualité du code ; le build échoue si un lien interne est cassé.
• Compatibilité : navigateurs récents et Safari 12 / iOS 12 (iPhone 5S), largeur minimale 320 px.

Structure & sémantique

• Langue du document déclarée : lang="fr" sur chaque page ; les termes anglais du lexique sont balisés lang="en".
• Hiérarchie de titres cohérente : un unique <h1> par page et une progression logique <h2> → <h3>.
• Balises sémantiques HTML5 : <main>, <header>, <nav>, <section>, <article>, <footer>, <dialog> ; les blocs hors main sont placés dans des zones nommées.
• Attributs ARIA contextuels : aria-label, aria-labelledby, aria-live, aria-modal, aria-pressed, aria-describedby.
• Icônes décoratives marquées aria-hidden="true" pour ne pas polluer la restitution vocale.

Navigation clavier & lecteurs d'écran

• Lien d'évitement présent sur toutes les pages, menant au contenu principal (aux messages sur la page de l'agent).
• Focus visible sur les éléments interactifs via :focus-visible (3px solid var(--focus-color) pour le contour principal).
• Les définitions des abréviations (info-bulles) sont atteignables au clavier et se ferment avec Échap.
• Les liens qui s'ouvrent dans un nouvel onglet le signalent aux lecteurs d'écran.
• Modale native <dialog> avec aria-modal="true" et aria-labelledby ; restauration du focus à la fermeture.
• Un plan du site liste toutes les pages.

Couleurs, contrastes & préférences utilisateur

• Thème clair/sombre avec persistance via localStorage et respect de prefers-color-scheme.
• Contrastes mesurés avec axe-core : aucun défaut de contraste sur les pages du site dans les deux thèmes (version 0.22.1).
• Animations respectant prefers-reduced-motion en CSS et en JavaScript, avec une option « Stopper les animations » ; sons coupables ; police adaptée à la dyslexie (Atkinson Hyperlegible).
• Affichage sans défilement horizontal jusqu'à 320 px de large.
• Information jamais véhiculée uniquement par la couleur.

Une déclaration d'accessibilité est publiée : le site est partiellement conforme selon une auto-évaluation. Il n'a pas fait l'objet d'un audit externe et aucun test n'a été réalisé avec un lecteur d'écran.

Poids & sobriété des ressources

• Pages 100 % statiques — aucun framework JavaScript.
• Minification au build : environ 108 → 76 Ko pour le CSS et 129 → 69 Ko pour le JS (environ 18 Ko et 24 Ko une fois compressés).
• 5 familles de polices auto-hébergées (7 fichiers WOFF2) avec font-display: swap — aucun appel vers un CDN tiers.
• Sprite SVG unique pour les icônes, mis en cache un an.
• Sound design procédural via Web Audio API — 0 Ko de fichiers audio.
• Aucun cookie, aucun traceur, aucun script publicitaire.
• Feuille d'impression dédiée (print.css, chargée uniquement à l'impression) : fond blanc, texte noir, interface masquée, adresse des liens affichée (critère RWEB_0031).

Architecture & efficience

• CSS modulaire et externalisé : tokens, components, shared, home / pages, chat, plus une couche de repli legacy pour les anciens navigateurs.
• JavaScript chargé en defer — pas de blocage du rendu initial.
• Fichiers CSS/JS à empreinte de contenu, servis un an avec immutable : un visiteur ne retélécharge que ce qui a changé.
• Navigation animée via IntersectionObserver plutôt que par écoute du défilement.
• Optimisation CLS : min-height réservé sur les zones dynamiques.
• content-visibility: auto sur les sections des pages longues (changelog, webinars, lexique) pour différer leur rendu.

Référence : RGESN du Collectif GreenIT — collectif.greenit.fr (s'ouvre dans un nouvel onglet). Ce site s'en inspire sans revendiquer une conformité intégrale aux 115 bonnes pratiques.

Métadonnées & social

• Balises <title> et <meta description> uniques sur chaque page.
• URL canonique <link rel="canonical"> déclarée sur les pages.
• Open Graph (og:title, og:description, og:image 1200×630, og:type, og:url).
• Twitter Cards (summary_large_image).

Structure & crawl

• HTML sémantique : <main>, <article>, <nav>, <section>.
• sitemap.xml déclarant les pages utiles avec dates de modification, fréquences et priorités, ainsi que des images (image:image).
• robots.txt autorisant les crawlers légitimes et bloquant DotBot et MJ12bot.
• Langue ciblée déclarée (hreflang="fr") dans le sitemap.
• Directive meta robots: index, follow sur la page d'accueil.
• Un llms.txt résume le site pour les assistants IA.

Contenu & sémantique

• Un unique <h1> par page, hiérarchie de titres cohérente.
• Appels à l'action orientés action (« Voir l'étude de cas SNCF », « Me contacter par mail »).
• Témoignage client balisé en <blockquote> avec attribution <cite>.

Données structurées JSON-LD

• Page d'accueil : schéma ProfilePage portant un Person (jobTitle, description, image, adresse, knowsAbout pour 14 compétences, sameAs pour 5 profils).
• Schéma BreadcrumbList (fil d'Ariane) sur les pages de contenu principales : étude de cas, recommandations, changelog, engagements et page 404.
• Schéma WebPage sur cette page.

Contenu optimisé pour l'extraction IA

• Descriptions variées et complémentaires dans les métadonnées et le JSON-LD, pour multiplier les angles de réponse.
• Témoignage client en <blockquote> : contenu extractible comme preuve sociale.
• Compétences déclarées à la fois en JSON-LD (knowsAbout) et en HTML visible (<ul class="skills-list">).
• Fichier llms.txt à la racine : présentation, pages et liens clés en texte brut.

Headers HTTP de sécurité

• Strict-Transport-Security : HSTS un an avec includeSubDomains et preload — HTTPS forcé.
• Content-Security-Policy : politique stricte (default-src 'none', script-src 'self', object-src 'none', frame-ancestors 'self' — 'none' sur la DevToolbox).
• Pas de X-Frame-Options : la directive CSP frame-ancestors le remplace pour protéger du clickjacking.
• X-Content-Type-Options: nosniff — empêche le reniflage MIME.
• Referrer-Policy: strict-origin-when-cross-origin — fuite de données limitée.
• Permissions-Policy : géolocalisation, micro et caméra désactivés (ouverts uniquement sur la DevToolbox).
• Cross-Origin-Opener-Policy et Cross-Origin-Resource-Policy en same-origin.

Protection de l'infrastructure

• Redirection automatique HTTP → HTTPS et non-www → www via .htaccess.
• Options -Indexes : listing des répertoires désactivé.
• Fichiers sensibles protégés : sauvegardes, journaux, configuration de l'API, fichiers d'outillage, fichiers cachés, dossiers .git et node_modules.
• Accès au fichier .htaccess lui-même interdit.
• Fichier security.txt indiquant comment signaler une faille.

Protection des données exposées & de l'API

• Obfuscation de l'adresse email côté JavaScript — anti-scraping par bots.
• Attribut rel="noopener" sur les liens externes.
• La clé de l'API de l'agent conversationnel reste côté serveur : elle n'est jamais envoyée au navigateur.
• Protection anti-abus de l'API (limitation de débit) et réponses du modèle échappées avant affichage.

Limite : la directive style-src autorise encore 'unsafe-inline'.

Compression & cache

• Compression gzip pour HTML, CSS, JS, JSON et SVG. Brotli est déclaré dans la configuration mais n'est pas servi à ce jour.
• Cache navigateur : images, polices et fichiers CSS/JS à empreinte un an (immutable), autres CSS/JS un mois, HTML une heure (must-revalidate).

Chargement optimisé

• preload de 2 polices critiques sur l'accueil (Recoleta Medium, Space Grotesk Regular).
• Scripts chargés en defer — aucun blocage du rendu initial.
• font-display: swap sur les déclarations @font-face — texte visible immédiatement.
• La feuille d'impression est déclarée avec media="print" : elle ne bloque pas l'affichage.

Stabilité visuelle (CLS)

• min-height réservé sur le rotateur de phrases pour empêcher le décalage de contenu.
• Polices locales WOFF2 évitant le flash de polices distantes.

PWA & offline

• Service worker : pages HTML « réseau d'abord » (contenu frais, cache en secours hors ligne), fichiers statiques « stale-while-revalidate ».
• Le nom du cache est lié au contenu de chaque version : l'ancien cache est purgé automatiquement et un message « Mise à jour disponible » propose de recharger.
• manifest.json avec icônes PNG et SVG en 192 px et 512 px (any + maskable).

Design system & tokens

• Palette gérée par CSS custom properties (--bg-color, --text-color, --accent-color, --card-bg, --border-color).
• Grille de base 8 px (marges, espacements, écarts).
• Couleur d'accent unique, un rouge ajusté à chaque thème pour garder un contraste suffisant : environ #c22015 en clair et #f35254 en sombre.
• Couleurs définies en oklch() avec replis hexadécimaux pour Safari 14 et antérieurs ; des couleurs opaques plutôt que des transparences pour les éléments statiques.

Typographie

• 5 familles auto-hébergées : corps (Plus Jakarta Sans), titres (Recoleta Alt), technique (Space Grotesk), alternative (Lufga) et dyslexie (Atkinson Hyperlegible).
• Tailles fluides via clamp() — adaptation continue du mobile au desktop.
• Variables typographiques centralisées : --font-main, --font-heading, --font-tech, --font-alt.

Dark mode & thème

• Basculement clair / sombre sans flash grâce au script theme.js chargé dans le <head>.
• Persistance du choix via localStorage et respect de la préférence système prefers-color-scheme par défaut.
• Bouton de bascule de 44×44 px (cible tactile), avec aria-label et état aria-pressed.

Micro-interactions & finitions

• Léger soulèvement (translateY) au survol des boutons.
• Animation pulse sur la pastille de disponibilité.
• Scrollbar personnalisée et sélection de texte stylisée aux couleurs d'accent.
• Mode impression dédié (print.css) sur toutes les pages.

Architecture de l'information

• Page d'accueil en une seule page : l'essentiel est visible sans défilement excessif.
• Pages secondaires regroupées par logique : realisations/ (études de cas), transparence/ (engagements, changelog, poids des fichiers), ressources/ (agent, lexique, style guide, DevToolbox), plus recommandations et webinars à la racine.
• Navigation par ancres avec mise en évidence de la section courante sur les pages longues.
• Plan du site et déclaration d'accessibilité liés dans le pied de page.

Progressive enhancement

• Repli <noscript> vers LinkedIn si JavaScript est désactivé (l'adresse email est reconstituée par script).
• Sound design initialisé uniquement après une première interaction (politique d'autoplay), désactivé par défaut.
• Rotateur de phrases désactivé si prefers-reduced-motion: reduce.

UX Writing

• Microcopy orienté action : « Voir l'étude de cas SNCF », « Me contacter par mail ».
• Rotateur de 7 phrases présentant l'activité et des résultats chiffrés sous des angles complémentaires.
• Statut de disponibilité visible dès l'ouverture, dans une pastille.
• Labels accessibles sur les liens et boutons (aria-label explicites).

Engagement & surprise

• Séquence interactive secrète (easter egg) débloquant des contenus inédits.
• Sound design procédural (survol, clic, interactions spéciales) via Web Audio API, sans fichier externe, désactivable.

Calls-to-action

• Deux boutons visibles dès l'accueil : « Voir l'étude de cas SNCF » (action principale, bouton plein) et « Me contacter par mail » (action secondaire).
• Lien LinkedIn dans la ligne de présentation, sous les boutons.

Preuve sociale

• Témoignage client SNCF sur l'accueil, avec attribution claire.
• Page de recommandations dédiée (témoignages détaillés).
• Étude de cas structurée (contexte → problématique → démarche → solutions → résultats).

Signaux de confiance

• Pastille de disponibilité animée.
• 5 compétences clés en étiquettes visibles dès le chargement.
• Liens « Engagements », « Plan du site » et « Accessibilité » en pied de page : transparence sur la qualité du site.
• Parcours court entre la découverte et le contact.

Transparence

• Un bandeau permanent indique : « Vous échangez avec une IA, pas avec Grégory. Elle peut se tromper. »
• Chaque réponse du modèle est libellée « Généré par IA » et porte un attribut data-ai-generated lisible par machine.
• Le bot a pour consigne de se déclarer IA si on le lui demande, d'inviter à vérifier les informations importantes et de ne rien inventer.

Garde-fous

• Le bot n'a accès à aucun outil, fichier ou base de données : il ne peut produire que du texte.
• Le message du visiteur est traité comme une donnée, isolé des consignes du modèle ; les filtres de sécurité du modèle sont activés.
• Taille des messages et des réponses plafonnée, limitation de débit, réponses échappées avant affichage.

Ces mesures s'inspirent de l'obligation de transparence du règlement européen sur l'IA (article 50) ; aucune conformité juridique n'est revendiquée. Le transfert des messages à Google est détaillé dans la rubrique « Protection des données ».

Pas de suivi

• Aucun cookie déposé — ni fonctionnel, ni analytique, ni publicitaire.
• Aucun outil de tracking ou d'analytics chargé (pas de Google Analytics, Matomo, etc.).
• Aucun script tiers exécuté — l'intégralité du code est first-party. Les seules requêtes vers des services tiers sont celles décrites dans « Exceptions : services tiers ».

Minimisation des données

• Seules données côté client : vos préférences d'affichage (thème clair/sombre, police, animations, sons) dans localStorage — aucune donnée personnelle.
• Polices auto-hébergées : aucun appel vers Google Fonts ou autre CDN tiers susceptible de collecter des IP.
• Obfuscation de l'email : l'adresse n'est jamais écrite en clair dans le code source HTML.

Exceptions : services tiers

• Agent conversationnel (page dédiée) : les messages que vous saisissez sont transmis à Google (API Gemini) pour générer la réponse ; ne saisissez pas de données personnelles. Les réponses sont produites par une IA, signalées comme telles, et peuvent comporter des erreurs. Une empreinte (hachée) de votre adresse IP est conservée temporairement par le serveur pour limiter les abus.
• DevToolbox (page dédiée) : à l'ouverture de la page, votre adresse IP publique est demandée à api.ipify.org ; si vous activez la géolocalisation, vos coordonnées sont envoyées à nominatim.openstreetmap.org (OpenStreetMap) pour obtenir une adresse.

Sécurité des échanges

• Permissions-Policy restrictive : géolocalisation, micro et caméra désactivés par défaut.
• HSTS forcé : toutes les connexions passent par HTTPS chiffré.
• Referrer-Policy: strict-origin-when-cross-origin : limitation de la fuite d'URL vers des tiers.

Ce site limite la collecte de données par conception, mais il n'est pas dispensé d'obligations : l'agent conversationnel et la DevToolbox traitent des données personnelles via des services tiers. Une politique de confidentialité complète (finalités, destinataires, durées de conservation, droits) reste à publier.

• Un audit d'accessibilité complet (outils automatisés + tests manuels avec lecteur d'écran) reste à réaliser pour viser une conformité RGAA formelle ; le site n'a pas non plus été testé sur un appareil réel sous Safari 12.
• Une politique de confidentialité dédiée reste à rédiger (agent conversationnel, services tiers de la DevToolbox).
• Suppression de 'unsafe-inline' dans style-src : des styles inline subsistent à migrer vers des feuilles externes.
• Mise en place de tests automatisés (Lighthouse CI, axe-core) dans un pipeline d'intégration continue : aujourd'hui, le lint, le build et les contrôles d'accessibilité sont lancés à la main.
• Activation de la compression Brotli côté hébergement.
• Cette documentation sera enrichie au fil des évolutions du site et des audits successifs.