etape1et2refonte2

app/components/ContentSectionCompetences.tsx

@@ -133,7 +133,7 @@ export default function ContentSectionCompetences({
         {name}
       </h1>
       <CarouselCompetences images={images} className="w-full h-64" />
-      <div className={contentClass || "bg-white/70 rounded-md p-4 mt-6 text-lg font-headline font-bold text-black-700"}>
+      <div className={contentClass || "bg-white/70 rounded-md p-4 mt-6 text-lg font-headline font-bold text-gray-700"}>
         <ReactMarkdown rehypePlugins={[rehypeRaw]}>{contentWithLinks}</ReactMarkdown>
       </div>
       {selectedMot && <ModalGlossaire mot={selectedMot} onClose={() => setSelectedMot(null)} />}

app/globals.css

@@ -8,9 +8,13 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Site en "light-only" (arbitrage validé dans REFONTE-VISUELLE.md).
+   Le bloc @media (prefers-color-scheme: dark) hérité du template Next a été retiré
+   le 2026-04-22 : il rendait la couleur du texte dépendante du thème système du
+   device, provoquant un rendu différent entre desktop clair et mobile sombre. */
 :root {
   --background: #ffffff;
-  --foreground: #171717;
+  --foreground: #191c1d; /* on-surface Stitch : jamais #000 pur */
 }
 
 /* Icônes Material Symbols : utilitaire <span class="material-symbols-outlined">name</span>. */
@@ -28,20 +32,14 @@
   -webkit-font-smoothing: antialiased;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
-}
-
 html {
   overflow-x: hidden;
   max-width: 100%;
 }
 
 body {
-  color: var(--foreground);
+  /* Couleur texte et fond fixés en clair, pas de dépendance au thème système. */
+  color: #191c1d;
   background: var(--background);
   font-family: Arial, Helvetica, sans-serif;
   max-width: 100%;

app/layout.tsx

@@ -108,7 +108,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
               {/* Menu desktop */}
               <nav className="hidden md:flex">
-                <ul className="flex gap-x-4 text-black-500 font-headline font-bold">
+                <ul className="flex gap-x-4 text-gray-700 font-headline font-bold">
                   <li><NavLink text="Accueil" path="/" /></li>
                   <li><NavLink text="Portfolio" path="/portfolio" /></li>
                   <li><NavLink text="Compétences" path="/competences" /></li>

app/page.tsx

@@ -91,7 +91,7 @@ export default function HomePage() {
         </div>
       )}
 
-      <div className="mt-6 w-full min-w-0 max-w-2xl px-4 text-center text-lg font-headline font-bold text-black-700 sm:px-6">
+      <div className="mt-6 w-full min-w-0 max-w-2xl px-4 text-center text-lg font-headline font-bold text-gray-700 sm:px-6">
         <ReactMarkdown>{cv}</ReactMarkdown>
       </div>
     </main>

docs-site-interne/REFONTE-VISUELLE.md

@@ -63,6 +63,21 @@ Chaque étape = un lot cohérent + éventuelle mise à jour de `captures/AUDIT-V
 | 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 |
 
+## 4 bis. Correctif post-étape 3 (2026-04-22) — cohérence desktop/mobile
+
+Après l'étape 3, retour utilisateur : **couleurs de texte différentes** entre desktop et mobile.
+
+**Cause** : le template Next de base définissait dans `globals.css` un bloc `@media (prefers-color-scheme: dark)` qui basculait `--foreground` à `#ededed` (texte clair) selon le **thème système** de chaque appareil. Avant l'étape 3, les classes `.font-orbitron-*` forçaient `color: #333333` partout et masquaient ce mode sombre. En les retirant, la variable `--foreground` a pris effet et le rendu est devenu dépendant du thème OS (Windows clair → texte foncé ; mobile sombre → texte clair quasi invisible sur wallpaper clair).
+
+**Fix** :
+
+- Retrait du bloc `@media (prefers-color-scheme: dark)` dans `app/globals.css` (incohérent avec l'arbitrage "light-only").
+- `--foreground` figé à `#191c1d` (= `on-surface` Stitch, jamais `#000`).
+- `body.color` fixé à `#191c1d` en dur pour ne plus dépendre d'aucune variable conditionnelle.
+- Classes Tailwind invalides `text-black-500` / `text-black-700` (qui n'existent pas et ne rendaient donc aucune couleur) remplacées par `text-gray-700` dans `app/layout.tsx`, `app/page.tsx`, `app/components/ContentSectionCompetences.tsx`.
+
+**Leçon retenue (à appliquer aux étapes suivantes)** : quand on supprime un "masque" CSS (comme la couleur forcée d'Orbitron), toujours vérifier que la valeur qui va ré-émerger par héritage est bien la valeur attendue, pas une variable dépendante du contexte d'exécution.
+
 ## 5. Checklist relecture (à passer à la fin de chaque étape)
 
 - [ ] Aucune colonne unique globale `max-w-xl` (c'est le format newsletter).

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

@@ -39,3 +39,4 @@ Document vivant : ajuster les statuts et dates au fil du travail.
 | 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)). |
 | 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`). |