Bonnes pratiques & Engagements

Structure & Sémantique

• HTML5 sémantique : Utilisation stricte des balises natives (<main>, <article>, <nav>, <figure>) pour structurer le contenu de manière claire pour les moteurs de recherche.
• WAI-ARIA : Ensemble d'attributs intégrés au HTML pour garantir une compatibilité totale avec les lecteurs d'écran.
• JSON-LD : Format de données structurées inséré dans le code pour que Google et les Intelligences Artificielles (Answer Engines) comprennent le contexte sémantique de la page.

Apparence & Design

• CSS3 Vanilla : Utilisation poussée du CSS moderne, incluant un système robuste de variables pour gérer le Dark Mode de manière native.
• CSS Flexbox & CSS Grid : Modules natifs de mise en page pour créer des designs fluides et responsifs.
• SVG (Scalable Vector Graphics) : Format vectoriel léger utilisé "inline" dans le code, garantissant une netteté parfaite sur tous les écrans sans requêtes supplémentaires.

Interactivité & Logique

• JavaScript Vanilla (ES6+) : Le langage de programmation standard du Web, utilisé ici sans dépendance lourde typique de React ou Vue.
• Web Audio API : Interface native utilisée de manière procédurale pour générer les micros-interactions sonores (0 Ko).
• Intersection Observer API : Technologie native détectant l'entrée d'éléments dans la fenêtre d'affichage à très faible coût de calcul.

Structure & sémantique

• Langue du document déclarée : lang="fr" sur chaque page.
• Hiérarchie de titres cohérente avec un unique <h1> par page et une progression logique <h2> → <h3>.
• Balises sémantiques HTML5 systématiques : <main>, <header>, <nav>, <section>, <article>, <footer>, <dialog>.
• Attributs ARIA contextuels : aria-label, aria-labelledby, aria-live, aria-atomic, aria-modal, aria-controls, aria-haspopup.
• Icônes décoratives marquées aria-hidden="true" pour ne pas polluer la restitution vocale.

Navigation clavier & lecteurs d'écran

• Lien d'évitement (skip link) présent sur toutes les pages, menant directement au <main>.
• Focus visible sur tous les éléments interactifs via :focus-visible avec outline contrastée (3px solid var(--accent-color)).
• Gestion du focus dans les modales : restauration du dernier élément focalisé à la fermeture.
• Modale native <dialog> avec aria-modal="true" et aria-labelledby.
• Classe utilitaire .sr-only disponible pour le contenu réservé aux lecteurs d'écran.

Couleurs, contrastes & préférences utilisateur

• Dark mode natif avec persistance via localStorage et respect de prefers-color-scheme.
• Contraste texte / fond conforme WCAG AA sur les deux thèmes (clair et sombre).
• Animations respectant prefers-reduced-motion en CSS et en JavaScript (rotateur de phrases, SoundController).
• Information jamais véhiculée uniquement par la couleur : le texte reste lisible en toutes circonstances.

Limite : aucune déclaration formelle de conformité RGAA n'est revendiquée. Un audit complet (automatisé + manuel) serait nécessaire pour viser un niveau AA certifié.

Poids & sobriété des ressources

• Pages 100 % statiques HTML — zéro framework JavaScript.
• 5 polices auto-hébergées en WOFF2 avec font-display: swap — aucun appel vers un CDN tiers.
• Icônes en SVG inline — aucune requête réseau additionnelle.
• Sound design procédural via Web Audio API — 0 Ko de fichiers audio téléchargés.
• Aucun tracker, aucun cookie, aucun script publicitaire chargé.

Architecture & efficience

• CSS modulaire et externalisé : shared.css, projects.css, style.css — séparation des responsabilités.
• JavaScript chargé en defer — pas de blocage du rendu initial.
• Navigation animée via IntersectionObserver — 0 % CPU au repos.
• Optimisation CLS : min-height réservé sur les zones dynamiques, font-display: swap sur toutes les polices.
• Propriété content-visibility: auto sur les blocs hors viewport pour différer le rendu.
• Nettoyage régulier : suppression de 17 fichiers orphelins lors des audits.

Référence : RGESN du Collectif GreenIT — collectif.greenit.fr. 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 et optimisées sur chaque page.
• URL canonique <link rel="canonical"> déclarée systématiquement.
• Open Graph complet (og:title, og:description, og:image 1200×630, og:type, og:url).
• Twitter Cards (summary_large_image) avec image dédiée.

Structure & crawl

• HTML sémantique : <main>, <article>, <nav>, <section> — aucune soupe de <div>.
• sitemap.xml déclarant toutes les pages utiles avec dates de modification, fréquences et priorités.
• Image sitemap (image:image) pour les visuels SEO-pertinents.
• robots.txt autorisant les crawlers légitimes et bloquant les bots non pertinents (AhrefsBot, SemrushBot, DotBot, MJ12bot).
• Attribut hreflang="fr" déclaré pour le ciblage linguistique.
• Directive meta robots: index, follow sur la page d'accueil.

Contenu & sémantique

• Un unique <h1> par page, hiérarchie de titres cohérente.
• Texte du CTA orienté action et décliné (« Travaillons ensemble », « Discuter d'une opportunité ? »).
• Témoignage client balisé en <blockquote> avec attribution <footer>.

Données structurées JSON-LD

• Schéma WebSite avec author et publisher liés par @id.
• Schéma Person enrichi : jobTitle, knowsAbout (12 compétences), sameAs (5 profils sociaux), description multi-facettes.
• Schéma ProfessionalService avec serviceType, areaServed, address et priceRange.
• Schéma BreadcrumbList sur chaque sous-page pour le fil d'Ariane.
• Schéma CreativeWork sur l'étude de cas (SNCF Voyageurs TER).

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 pour la preuve sociale.
• Compétences déclarées à la fois en JSON-LD (knowsAbout) et en HTML visible (<ul class="skills-list">).

Headers HTTP de sécurité

• Strict-Transport-Security : HSTS activé pour 1 an avec includeSubDomains — HTTPS forcé.
• Content-Security-Policy : politique stricte (script-src 'self', object-src 'none', frame-ancestors 'none').
• X-Frame-Options: SAMEORIGIN — protection contre le 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, caméra désactivés.

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 (.bak, .config, .log, .sql, etc.).
• Accès au fichier .htaccess lui-même interdit.

Protection des données exposées

• Obfuscation de l'adresse email côté JavaScript — anti-scraping par bots.
• Lien d'accès privé encodé en Base64 — masqué du code source en clair.
• Attribut rel="noopener" sur tous les liens externes.

Compression & cache

• Compression Gzip et Brotli activées côté serveur pour HTML, CSS, JS, JSON, SVG.
• Cache navigateur stratifié : images et polices 1 an (immutable), CSS/JS 1 semaine, HTML 1 heure (must-revalidate).

Chargement optimisé

• preconnect vers linkedin.com pour le CTA social.
• preload des 2 polices critiques (Plus Jakarta Sans Regular, Recoleta Medium).
• Scripts chargés en defer — aucun blocage du rendu initial.
• font-display: swap sur toutes les déclarations @font-face — texte visible immédiatement.

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 avec stratégie Network First : contenu toujours frais, cache en fallback offline.
• manifest.json complet avec icônes SVG 192 px et 512 px (any + maskable).
• Activation immédiate via skipWaiting() et clients.claim().
• Purge automatique des anciens caches à chaque mise à jour de version.

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 cohérente (margins, paddings, gaps).
• Couleur d'accent unique : #d9362b — identité forte et cohérente.
• Bordures subtiles avec transparence (rgba) pour s'adapter aux deux thèmes.

Typographie premium

• 5 familles auto-hébergées couvrant 4 registres : corps (Plus Jakarta Sans), titres (Recoleta Alt), technique (Space Grotesk), alternative (Lufga).
• 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 (FOUC) grâce au script bloquant theme.js dans le <head>.
• Persistance du choix utilisateur via localStorage.
• Respect de la préférence système prefers-color-scheme par défaut.
• Toggle accessible : bouton 44×44 px (cible tactile WCAG), aria-label, animation d'icône au fade.

Micro-interactions & finitions

• Hover translateY(-2px) sur les cartes et boutons — feedback tactile visuel.
• Animation pulse sur le badge « Disponible immédiatement ».
• Scrollbar personnalisée (couleur d'accent, border-radius).
• Sélection de texte stylisée (::selection en couleur d'accent).
• Mode impression @media print complet : fond blanc, masquage des éléments interactifs, URLs affichées en clair.

Architecture de l'information

• Page d'accueil en single page : l'essentiel visible sans scroll excessif.
• Sous-pages dédiées pour le contenu secondaire (étude de cas, transparence, recommandations) — hiérarchie claire.
• Navigation par ancres avec sticky nav sur les pages longues.
• Fil d'Ariane sémantique (JSON-LD BreadcrumbList) pour l'orientation.

Progressive enhancement

• Fallback <noscript> pour l'adresse email si JavaScript est désactivé.
• Sound design initialisé uniquement après une première interaction utilisateur (conformité Autoplay Policy).
• Rotateur de phrases désactivé si prefers-reduced-motion: reduce.

UX Writing

• Microcopy orienté action : « Travaillons ensemble », « Discuter d'une opportunité ? ».
• Rotateur de 3 phrases décrivant l'activité sous des angles complémentaires — renforcement du message.
• Badge « Disponible immédiatement » : information métier clé placée dans le above-the-fold.
• Labels accessibles sur tous les liens et boutons (aria-label explicites).

Engagement & surprise

• Séquence interactive secrète (easter egg) débloquant des contenus inédits — récompense l'exploration.
• Sound design procédural (hover, click, interactions spéciales) via Web Audio API — 0 fichier externe.
• Micro-sons respectant prefers-reduced-motion et désactivables (toggleMute).

Calls-to-action

• Double CTA visible sans scroll : lien LinkedIn (outbound) + lien email (direct).
• Hiérarchie visuelle des boutons : email en solid accent, LinkedIn en outlined — action primaire clairement identifiée.
• Animation d'entrée slideIn avec délai décalé pour guider le regard.

Preuve sociale

• Témoignage client SNCF mis en avant dans le above-the-fold avec attribution claire.
• Page de recommandations dédiée (témoignages détaillés multiples).
• Étude de cas structurée (contexte → problématique → démarche → solutions → résultats).

Signaux de confiance

• Badge « Disponible immédiatement » avec animation pulse — urgence positive.
• 5 compétences clés en skill tags visibles dès le chargement.
• Lien « Transparence & Engagements » en fin de page — démonstration de rigueur professionnelle.
• Parcours en une page — zéro friction entre la découverte et l'action de contact.

Zéro collecte

• 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.

Minimisation des données

• Seule donnée côté client : la préférence de thème (clair/sombre) 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.

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 est conforme RGPD par conception (Privacy by Design) : l'absence de collecte rend les obligations de consentement et de registre de traitement inapplicables.

• Un audit d'accessibilité complet (outils automatisés + tests manuels avec lecteur d'écran) reste à réaliser pour viser une conformité RGAA formelle.
• Migration des styles inline restants vers CSS externe pour renforcer la Content Security Policy (suppression de 'unsafe-inline' dans style-src).
• Mesure outillée de l'empreinte environnementale via ecoIndex pour objectiver les gains de l'écoconception.
• Mise en place de tests automatisés (Lighthouse CI, axe-core) dans un pipeline d'intégration continue.
• Cette documentation sera enrichie au fil des évolutions du site et des audits successifs.