devsite/docs-site-interne/feuille-de-route.md

Feuille de route

Dernière mise à jour : 2026-04-22

Document vivant : ajuster les statuts et dates au fil du travail.

Court terme (prochaines itérations)

ID	Sujet	Statut	Notes
R1	Moderniser l’UI (design system, cohérence typo/couleurs)	En cours	Direction "Digital Atelier" inspirée de stitch_V1/ ; cadrage et plan dans REFONTE-VISUELLE.md. Étapes 1-5 (tokens + garde-fou + migration typo globale + layout racine + home) faites le 2026-04-22.
R2	Homogénéiser TS vs JS dans app/	À faire	Migrer progressivement les .jsx/.js
R3	Centraliser config API (Strapi + LLM) via .env	À faire	Remplacer URLs en dur où pertinent
R4	Revoir layout.tsx (server vs client, perf SEO)	À faire	Évaluer extraction header/footer

Moyen terme

ID	Sujet	Statut	Notes
M1	Tests (e2e ou smoke sur routes critiques)	À faire
M2	Accessibilité (navigation, contrastes, focus)	À faire
M3	Performance (images Next/Image, bundle)	À faire

Long terme / idées

ID	Sujet	Statut	Notes
L1	CI/CD ou script de déploiement documenté	À faire
L2	Monitoring / logs centralisés	À faire

Historique des jalons

Date	Jalon
2026-04-01	Création du dossier docs-site-interne/ et première rédaction basée sur le code.
2026-04-01	Reprise après coupure : vérification complétude ; enrichissement de 04-api-llm-et-chatbot.md ; suppression de test.txt.
2026-04-01	Index captures (captures/INDEX.md), captures/README.md, 07-reference-visuelle-captures.md, skill .cursor/skills/site-portfolio-evolution/SKILL.md.
2026-04-01	Captures WebP intégrées au dépôt ; INDEX et README captures/ alignés sur les noms réels (slug portfolio / compétence documentés).
2026-04-22	Audit visuel complet (captures/AUDIT-VISUEL.md), correctifs layout (option 1 + compensation header + drawer mobile).
2026-04-22	Refonte visuelle "Digital Atelier" — étape 1 (tokens Tailwind : palette Stitch, font-headline Manrope + font-body Newsreader, rounded-sheet/tile, shadow-ambient/jewel) et étape 2 (garde-fou + plan dans REFONTE-VISUELLE.md).
2026-04-22	Refonte visuelle — étape 3 : migration typographique globale. Toutes les classes font-orbitron-* (12 définitions CSS, 29 occurrences dans 11 fichiers) remplacées par font-headline Manrope + tailles/poids Tailwind explicites. Import Google Fonts Orbitron supprimé de app/assets/main.css.
2026-04-22	Refonte visuelle — correctif post-étape 3 : régression de couleurs texte entre desktop/mobile. Retrait du @media (prefers-color-scheme: dark) hérité du template Next (incohérent avec l'arbitrage "light-only"), --foreground fixé à #191c1d (on-surface Stitch), body avec couleur non-dépendante du thème système. 3 classes Tailwind invalides text-black-500/700 remplacées par text-gray-700 (app/layout.tsx, app/page.tsx, app/components/ContentSectionCompetences.tsx).
2026-04-22	Refonte visuelle — étape 4 : layout racine. Header "No-Line" (bordure pleine supprimée, shadow-ambient-sm + backdrop-blur-vellum, titre en text-primary). Burger refait en ghost button (Material Symbols menu/close au lieu des caractères ☰/✕). Cercles animés repeints en bg-primary/40 + bg-primary-container/30. Drawer mobile en bg-primary/90 backdrop-blur-vellum + liens éditoriaux (bg-primary-container/60 → hover bg-primary-fixed text-primary). Bug préexistant corrigé : NavLink ignorait className et onClick fournis par le drawer mobile → refait avec support className / onClick / activeClassName / inactiveClassName, comportement desktop historique préservé. Compteur de visites migré de layout.tsx (bloc orphelin absolute bottom-0 right-0) vers Footer.jsx (ligne discrète text-[10px] uppercase tracking-[0.3em]). Nettoyage : state visitCount + useEffect déplacés, div.max-w-5xl vide retirée, state count inutilisé retiré de Footer.jsx.
2026-04-22	Refonte visuelle — correctif urgent ModalGlossaire (blocage mobile signalé sur Samsung S25 Ultra). w-[114vw] max-w-6xl h-[72vh] → w-full max-w-4xl max-h-[90vh] + overflow-y-auto. Fermeture ajoutée sur tap-voile et Escape. Bouton fermeture rond 40 px Material Symbol close. Alignement palette Stitch (bg-on-surface/75, bg-surface-container-lowest/95, rounded-sheet, text-primary, description font-body Newsreader). "use client" + role="dialog" aria-modal ajoutés.
2026-04-22	Refonte visuelle — étape 5 : home. Hero "feuillet de vellum" (bg-surface-container-lowest/85 backdrop-blur-vellum shadow-ambient rounded-sheet) avec grille auto_1fr portrait + texte. Portrait en frame primary (bg-primary p-1 rounded-sheet) qui remplace le cercle rounded-full border-4. Kicker Portfolio · Étudiant 42 Perpignan. Titre Manrope extrabold. cv Strapi rendu via ReactMarkdown + plugin typography (prose prose-stone custom). CTAs jewel /portfolio (primary shadow-jewel) + ghost /contact (hover bg-primary-fixed/40). Nouvelle section "Trois axes de travail" (3 cartes takeaway avec icônes Material Symbols psychology, terminal, school, contenu hardcodé dans takeaways[]). Pull-quote éditoriale border-l-4 border-primary en Newsreader italique. Double <main> supprimé (layout racine fournit déjà le <main>).
2026-04-22	Refonte visuelle — correctifs post-étape 5 (retour utilisateur). Icônes Material Symbols affichées comme texte littéral (ex. "psychology" visible dans le rond bleu des takeaways) : oubli de font-family: 'Material Symbols Outlined' dans la règle .material-symbols-outlined de app/globals.css — Google Fonts pose le @font-face mais pas la règle de classe. Fix : ajout de la ligne manquante, toutes les icônes (takeaways, burger, modale, CTAs) s'affichent désormais correctement. Pull-quote "Démarche" qui se fondait dans le wallpaper : passée en carte vellum légère (bg-surface-container-lowest/65 backdrop-blur-vellum rounded-tile, sans shadow-ambient) pour rester lisible sans écraser la variation éditoriale. Espace trop grand entre les 3 sections : gap-8 → gap-5, py-6 md:py-8 retiré sur la pull-quote (remplacé par le padding interne de sa carte).
2026-04-22	Refonte visuelle — correctifs post-étape 5 (2e passe). Icônes toujours en texte littéral après le fix font-family : URL Google Fonts @24,400,0,0 (valeur fixe) potentiellement non résolue côté navigateur. Passée en syntaxe ranges @20..48,100..700,0..1,-50..200 (alignée sur stitch_V1/code.html), fiable et documentée. Densité verticale encore trop aérée : gap-5 → gap-3 sur le container racine de la home. Paddings internes cartes resserrés : hero p-6 sm:p-8 md:p-10 → p-5 sm:p-7 md:p-8 ; takeaways p-6 sm:p-8 → p-5 sm:p-6. Grille intérieure takeaways gap-4 → gap-3. Hero texte gap-4 → gap-3. En-tête de section takeaways mb-6 → mb-4.
2026-04-22	Diagnostic critique via DevTools Network (Chrome desktop + mobile) : aucune des trois Google Fonts (Manrope, Newsreader, Material Symbols) n'était réellement chargée par le navigateur — les @import url('https://fonts.googleapis.com/...') dans app/globals.css étaient strippés par la chaîne PostCSS + Tailwind de Next 15 en production. Conséquence : tout le site tournait en fallback Arial / Georgia depuis l'étape 3, la typo éditoriale Stitch n'était jamais réellement visible. Fix phase 1 (fonts textuelles) : création de app/fonts.ts qui exporte Manrope et Newsreader via next/font/google (téléchargement au build, service depuis le domaine du site, plus de dépendance CDN externe). app/layout.tsx importe ces fonts et pose ${manrope.variable} ${newsreader.variable} sur le <html>. tailwind.config.ts : font-headline et font-body repointés vers var(--font-manrope) et var(--font-newsreader). app/globals.css : 2 @import inopérants supprimés ; l'@import Material Symbols reste temporairement en attendant la phase 2. Validation DevTools Computed : font-family: Manrope, "Manrope Fallback", system-ui, sans-serif confirmé sur le h1 de la home.
2026-04-22	Fix phase 1b : font par défaut du body dans app/globals.css passée de Arial, Helvetica, sans-serif à var(--font-newsreader), Georgia, serif. Tout élément sans classe typo explicite hérite désormais de Newsreader (corps éditorial Stitch) au lieu d'Arial. Fix phase 2 (Material Symbols) : @import url(...) Material Symbols retiré de app/globals.css (strippé), remplacé par un triplet <link rel="preconnect"> + <link rel="stylesheet"> injecté dans le <head> de app/layout.tsx — contourne le pipeline PostCSS tout en conservant le CDN Google pour la font-icon (usage très ponctuel : 5 icônes sur la home, 2 sur le burger, 1 sur la modale). Validé en production : icônes + fonts OK sur Chrome desktop.
2026-04-22	Correctif Chrome Auto-Translate mobile (retour utilisateur : layout décalé + icônes redevenues du texte littéral sur Chrome mobile quand la traduction auto s'active). Cause : les icônes Material Symbols fonctionnent via ligatures de font (<span>psychology</span> → glyphe cerveau) ; Chrome traduit le texte psychology en psychologie, la ligature ne match plus, l'icône redevient texte. Fix : translate="no" ajouté sur les 8 <span className="material-symbols-outlined"> (5 dans app/page.tsx, 2 dans app/layout.tsx, 1 dans app/components/ModalGlossaire.tsx) + sur le titre header (nom propre Portfolio Gras-Calvet Fernand). La traduction automatique reste globalement active pour le contenu éditorial (CV, compétences, projets) — seuls les éléments que la traduction casse sont protégés.
2026-04-22	Correctif séparateurs <hr> du hero (retour utilisateur : « trop d'espace entre les sections » en fait dû à des <hr> quasi invisibles générés depuis les --- Markdown du CV Strapi). Option B retenue : surcharge prose-hr sur le wrapper ReactMarkdown (app/page.tsx) pour transformer la règle en pastille Stitch centrée (prose-hr:border-0 prose-hr:w-16 prose-hr:mx-auto prose-hr:bg-primary/30 prose-hr:h-0.5 prose-hr:rounded-full prose-hr:my-6). Le séparateur redevient un signal visuel intentionnel et cohérent avec la palette, marges verticales réduites de 32 px à 24 px. Détail dans REFONTE-VISUELLE.md §4 sexies.