etape1et2refonte

app/globals.css

@@ -1,3 +1,8 @@
+/* Polices Stitch "Digital Atelier" : Manrope (titres/UI) + Newsreader (corps éditorial).
+   Voir docs-site-interne/REFONTE-VISUELLE.md. Les classes font-orbitron-* héritées
+   vivent encore côté app/assets/main.css tant que la migration typo n'est pas faite. */
+@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Newsreader:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=swap');
 
 @tailwind base;
 @tailwind components;
@@ -8,6 +13,20 @@
   --foreground: #171717;
 }
 
+/* Icônes Material Symbols : utilitaire <span class="material-symbols-outlined">name</span>. */
+.material-symbols-outlined {
+  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+  -webkit-font-feature-settings: 'liga';
+  -webkit-font-smoothing: antialiased;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --background: #0a0a0a;

docs-site-interne/REFONTE-VISUELLE.md

@@ -0,0 +1,75 @@
+# Refonte visuelle — Direction "Digital Atelier"
+
+**Créé :** 2026-04-22  
+**Statut :** en cours (étape 1/8 terminée)  
+**Source d'inspiration :** `stitch_V1/` (design newsletter Stitch — `DESIGN.md` et `code.html`).  
+**Audit préalable :** [`captures/AUDIT-VISUEL.md`](./captures/AUDIT-VISUEL.md).
+
+## 1. Règle de garde-fou (validée utilisateur)
+
+> **On emprunte au Stitch la direction artistique** (palette, typographie, layering tonal, radius, ombres ambient) **et deux ou trois composants signatures** (frame image, pull-quote, bouton jewel). **On n'emprunte ni la mise en page en colonne unique, ni la bottom nav, ni le rythme vertical newsletter.** Le **wallpaper** et le couple **header / drawer mobile** du site restent la fondation.
+
+Concrètement, `stitch_V1/DESIGN.md` fait foi (système). `stitch_V1/code.html` sert d'illustration : il ne fait pas foi quand il contredit `DESIGN.md` (ex. il utilise des `border border-outline-variant` que DESIGN.md interdit — règle "No-Line").
+
+Chaque commit de refonte doit être relisable à l'aune de cette règle : s'il introduit une colonne unique `max-w-xl` globale, une bottom nav ou des bordures 1px opaques, il est à corriger.
+
+## 2. Arbitrages actés
+
+| Sujet | Décision |
+|-------|----------|
+| Photo de profil home | Portrait carré arrondi `rounded-sheet` (1.5 rem) + frame `bg-primary p-1` |
+| Listes portfolio / compétences | Grille asymétrique 2/3 + 1/3 ; carousel réservé aux galeries intra-fiche |
+| Orbitron | Retiré partout, remplacé par `Manrope` (titres) + `Newsreader` (corps) |
+| Opacité cartes sur wallpaper | 85 % + `backdrop-blur-vellum` (≈ 20 px) pour la "sheet of vellum" |
+| Icônes | `Material Symbols Outlined` (déjà utilisées dans la newsletter Stitch et Listmonk) |
+| Mode sombre | Light-only pour cette refonte |
+| Cercles animés `circle-one` / `circle-two` | Repalette vers `primary` / `primary-container` (au lieu de rose/indigo) |
+| Compteur de visites | Migré dans le footer, en `text-[10px] uppercase tracking-[0.3em] text-outline` |
+
+## 3. Design tokens portés dans `tailwind.config.ts`
+
+Voir le fichier pour la liste exhaustive. Rappel des plus utilisés :
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| `primary` | `#26445d` | CTAs, headlines, frames image |
+| `primary-container` | `#3e5c76` | dégradé CTA, drawer mobile |
+| `primary-fixed` | `#cce5ff` | pastilles, badges, barres de citation |
+| `secondary` | `#516169` | sous-titres, méta |
+| `surface` | `#f8fafa` | base de page alternative au wallpaper |
+| `surface-container-low` | `#f2f4f4` | sections secondaires |
+| `surface-container-lowest` | `#ffffff` | cartes principales (posées à 85 % sur wallpaper) |
+| `on-surface` | `#191c1d` | texte principal (jamais `#000`) |
+| `outline-variant` | `#c3c7cd` | ghost-border à 15 % d'opacité max |
+
+Radius additifs : `rounded-sheet` (1.5 rem) pour cartes principales, `rounded-tile` (1 rem) pour éléments imbriqués. Les radius Tailwind (`rounded-xl`, etc.) ne sont pas écrasés pour ne pas casser les composants existants.
+
+Ombres : `shadow-ambient` (40 px / 6 %) pour les cartes flottantes, `shadow-jewel` (4 px offset) pour CTAs primaires.
+
+Polices : `font-headline` (Manrope) et `font-body` (Newsreader), importées via `app/globals.css`.
+
+## 4. Plan d'exécution (8 étapes)
+
+Chaque étape = un lot cohérent + éventuelle mise à jour de `captures/AUDIT-VISUEL.md` et nouvelles captures.
+
+| # | Étape | Fichiers principaux | Statut |
+|---|-------|---------------------|--------|
+| 1 | Fondations : tokens Tailwind + import polices + icônes | `tailwind.config.ts`, `app/globals.css` | **fait** (2026-04-22) |
+| 2 | Garde-fou doc + mise à jour feuille de route | `docs-site-interne/REFONTE-VISUELLE.md`, `docs-site-interne/feuille-de-route.md` | **fait** (2026-04-22) |
+| 3 | Migration typographique globale (Orbitron → Manrope / Newsreader) | `app/**/*.{tsx,jsx,js}`, `app/assets/main.css` | à faire |
+| 4 | Layout racine : header No-Line, burger ghost, palette cercles, compteur migré, drawer | `app/layout.tsx`, `app/globals.css` | à faire |
+| 5 | Home : hero vellum, portrait frame, takeaways, pull-quote, CTAs | `app/page.tsx` | à faire |
+| 6 | Listes portfolio + compétences : grille asymétrique, cartes éditoriales | `app/portfolio/page.jsx`, `app/competences/page.jsx`, composants `Carousel*` | à faire |
+| 7 | Fiches détail + modale glossaire + GrasBot (jewel flottant) | `app/portfolio/[slug]/page.tsx`, `app/competences/[slug]/page.tsx`, `app/components/ModalGlossaire.tsx`, `app/components/ChatBot.js` | à faire |
+| 8 | Contact + Footer éditorial | `app/contact/page.js`, `app/components/ContactForm.tsx`, `app/components/Footer.jsx` | à faire |
+
+## 5. Checklist relecture (à passer à la fin de chaque étape)
+
+- [ ] Aucune colonne unique globale `max-w-xl` (c'est le format newsletter).
+- [ ] Aucune bottom nav fixe (déjà couvert par header + drawer).
+- [ ] Aucune bordure 1px pleine (`border border-*`) sur un composant de contenu — sauf ghost-border à 15 % max.
+- [ ] Aucune utilisation de `#000` pur — toujours `on-surface` / `on-background`.
+- [ ] Le wallpaper reste perceptible entre / autour des cartes.
+- [ ] La hiérarchie Manrope / Newsreader est respectée (pas de Orbitron résiduel).
+- [ ] Les CTAs principaux ont `shadow-jewel`.
+- [ ] Radius Stitch (`rounded-sheet` / `rounded-tile`) utilisés sur les cartes de la refonte.

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

@@ -1,6 +1,6 @@
 # Feuille de route
 
-**Dernière mise à jour :** 2026-04-01
+**Dernière mise à jour :** 2026-04-22
 
 Document vivant : ajuster les statuts et dates au fil du travail.
 
@@ -8,7 +8,7 @@ Document vivant : ajuster les statuts et dates au fil du travail.
 
 | ID | Sujet | Statut | Notes |
 |----|--------|--------|--------|
-| R1 | Moderniser l’UI (design system, cohérence typo/couleurs) | À faire | S’appuyer sur Tailwind existant |
+| 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`](./REFONTE-VISUELLE.md). Étapes 1-2 (tokens + garde-fou) 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 |
@@ -36,3 +36,5 @@ Document vivant : ajuster les statuts et dates au fil du travail.
 | 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`](./REFONTE-VISUELLE.md)). |

tailwind.config.ts

@@ -11,11 +11,73 @@ export default {
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
+
+        // --- Design tokens Stitch "Digital Atelier" (voir docs-site-interne/REFONTE-VISUELLE.md)
+        // Primaire : indigo-ardoise, pour CTAs, accents, headlines.
+        primary: "#26445d",
+        "primary-container": "#3e5c76",
+        "on-primary": "#ffffff",
+        "on-primary-container": "#b5d4f2",
+        "primary-fixed": "#cce5ff",
+        "primary-fixed-dim": "#abcae8",
+        "on-primary-fixed": "#001d31",
+        "on-primary-fixed-variant": "#2b4963",
+        "inverse-primary": "#abcae8",
+
+        // Secondaire : neutres chauds intermédiaires (sous-titres, meta).
+        secondary: "#516169",
+        "secondary-container": "#d2e2ec",
+        "on-secondary": "#ffffff",
+        "on-secondary-container": "#55656d",
+        "secondary-fixed": "#d5e5ef",
+        "secondary-fixed-dim": "#b9c9d3",
+        "on-secondary-fixed": "#0e1d25",
+        "on-secondary-fixed-variant": "#3a4951",
+
+        // Tertiaire : utilisé ponctuellement (citations, anecdotes).
+        tertiary: "#334453",
+        "tertiary-container": "#4a5b6b",
+        "on-tertiary": "#ffffff",
+        "on-tertiary-container": "#c1d2e5",
+        "tertiary-fixed": "#d3e4f7",
+        "tertiary-fixed-dim": "#b7c8db",
+        "on-tertiary-fixed": "#0b1d2b",
+        "on-tertiary-fixed-variant": "#384858",
+
+        // Surfaces : empilement tonal façon "sheets of vellum".
+        surface: "#f8fafa",
+        "surface-bright": "#f8fafa",
+        "surface-dim": "#d8dada",
+        "surface-variant": "#e1e3e3",
+        "surface-tint": "#43617c",
+        "surface-container-lowest": "#ffffff",
+        "surface-container-low": "#f2f4f4",
+        "surface-container": "#eceeee",
+        "surface-container-high": "#e6e8e9",
+        "surface-container-highest": "#e1e3e3",
+        "inverse-surface": "#2e3131",
+        "inverse-on-surface": "#eff1f1",
+
+        // Textes : jamais de #000000, on-surface est la teinte la plus sombre.
+        "on-surface": "#191c1d",
+        "on-surface-variant": "#42474d",
+        "on-background": "#191c1d",
+
+        // Outline : 15 % d'opacité max sur les "ghost borders", jamais plein.
+        outline: "#73777d",
+        "outline-variant": "#c3c7cd",
+
+        // Erreurs.
+        error: "#ba1a1a",
+        "error-container": "#ffdad6",
+        "on-error": "#ffffff",
+        "on-error-container": "#93000a",
       },
       screens: {
         'mobile-landscape': { 'raw': '(max-width: 767px) and (orientation: landscape)' },
       },
       fontFamily: {
+        // Legacy (conservées tant que la migration typo n'est pas faite).
         sans: ['Helvetica', 'Arial', 'sans-serif'],
         serif: ['Georgia', 'serif'],
         mono: ['Courier New', 'monospace'],
@@ -25,6 +87,27 @@ export default {
         exo2: ['Exo 2', 'sans-serif'],
         audiowide: ['Audiowide', 'sans-serif'],
         bebas: ['Bebas Neue', 'sans-serif'],
+
+        // Stitch "Digital Atelier" : Manrope pour titres/UI, Newsreader pour corps éditorial.
+        headline: ['Manrope', 'system-ui', 'sans-serif'],
+        body: ['Newsreader', 'Georgia', 'serif'],
+        label: ['Manrope', 'system-ui', 'sans-serif'],
+      },
+      borderRadius: {
+        // Additifs : ne remplacent pas les radius Tailwind (xl, 2xl, etc.) pour ne rien casser.
+        // À utiliser explicitement sur les nouveaux composants de la refonte.
+        sheet: "1.5rem", // cartes principales (Stitch "xl")
+        tile: "1rem",    // éléments imbriqués (Stitch "lg")
+      },
+      boxShadow: {
+        // Ombres ambient façon lumière naturelle (DESIGN.md §4 : ressenties, pas vues).
+        ambient: "0 40px 60px -20px rgba(25, 28, 29, 0.06)",
+        "ambient-sm": "0 24px 40px -16px rgba(25, 28, 29, 0.05)",
+        // "Jewel" : CTAs primaires, légère empreinte tactile 4px.
+        jewel: "0 4px 0 0 #1b3245",
+      },
+      backdropBlur: {
+        vellum: "20px",
       },
     },
   },