diff --git a/app/components/ContentSectionCompetences.tsx b/app/components/ContentSectionCompetences.tsx index be839c4..1c1980c 100644 --- a/app/components/ContentSectionCompetences.tsx +++ b/app/components/ContentSectionCompetences.tsx @@ -133,7 +133,7 @@ export default function ContentSectionCompetences({ {name} -
+
{contentWithLinks}
{selectedMot && setSelectedMot(null)} />} diff --git a/app/globals.css b/app/globals.css index f991f3d..6ad9f5c 100644 --- a/app/globals.css +++ b/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 name. */ @@ -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%; diff --git a/app/layout.tsx b/app/layout.tsx index 4efe296..ac4bf32 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -108,7 +108,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) {/* Menu desktop */}
)} -
+
{cv}
diff --git a/docs-site-interne/REFONTE-VISUELLE.md b/docs-site-interne/REFONTE-VISUELLE.md index 5ce8386..7145742 100644 --- a/docs-site-interne/REFONTE-VISUELLE.md +++ b/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). diff --git a/docs-site-interne/feuille-de-route.md b/docs-site-interne/feuille-de-route.md index 927ca80..b76755f 100644 --- a/docs-site-interne/feuille-de-route.md +++ b/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`). |