feat(b3): M0 — tokens @transformer/ui + thème aep, --nav-* en alias des rôles DS

- package.json : dépendance @transformer/ui (git+https design-system.git)
- nuxt.config.ts : css tokens.css + theme/aep.css chargés avant main.css
- assets/css/main.css : --nav-bg/-bg-alt/-surface/-primary/-accent/-text/
  -text-muted/-font deviennent des alias var(--role) DS ; focus ring sur
  var(--focus-ring). --nav-primary-raw, --nav-primary-solid, --nav-accent-soft
  et --nav-text-on-primary restent des valeurs propres à nav-carte (pas
  d'équivalent DS fiable en sombre — --nav-text-on-primary sert de contraste
  à la fois sur --nav-primary translucide et --nav-primary-solid opaque, deux
  fonds dont la légèreté s'inverse en sombre ; aliaser sur --on-primary DS
  cassait le contraste du logo AEP et de ~10 boutons en sombre, testé au
  pixel et reverti)
- tailwind.config.js : couleurs nav.* pointent vers les variables --nav-*
  (pas de darkMode:'class' ajouté — aucune classe dark: Tailwind en usage)

Vérifié : npm run build OK, diff pixel avant/après < 0.5% sur home + agences
en clair/sombre (bruit = badge Nuxt Devtools, pas les tokens).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

assets/css/main.css

@@ -3,28 +3,44 @@
 @tailwind utilities;
 
 /* ── Palette NAV V2 — Sobre institutionnel ─────────────────────────────── */
+/* --nav-* sont désormais des ALIAS vers les rôles @transformer/ui (tokens.css
+   + theme/aep.css, chargés avant ce fichier dans nuxt.config.ts).
+   --nav-primary-raw, --nav-primary-solid et --nav-text-on-primary restent des
+   valeurs PROPRES à nav-carte (non aliasées) :
+   - le DS n'a pas de triplet RGB (--nav-primary-raw) ;
+   - le --text du DS en sombre (#e8ecf5) ne correspond pas à la teinte bleu
+     nuit voulue ici pour --nav-primary-solid (#c8d2f0) ;
+   - --nav-text-on-primary sert de texte de contraste à la fois sur
+     --nav-primary (translucide, alias DS) ET sur --nav-primary-solid (opaque,
+     propre à nav-carte) — deux fonds dont la légèreté s'inverse en sombre
+     (translucide ≈ fond sombre, solid = lavande claire). Le rôle --on-primary
+     du DS ne colle qu'au premier cas ; l'aliaser cassait le contraste du AEP
+     logo, des boutons trouver-du-taf, BandeauBas, SimulateurFeature,
+     FicheDetail (texte clair sur --primary-solid clair en sombre — testé au
+     pixel le 25/09, illisible). Gardé littéral = identique à la prod avant B3.
+   Idem --nav-accent-soft, sans équivalent DS. (B3-M0, 2026-09-25) */
 :root {
   /* Fonds */
-  --nav-bg:          #f8f6f1;
+  --nav-bg:          var(--bg);
-  --nav-bg-alt:      #eee9df;
+  --nav-bg-alt:      var(--bg-alt);
-  --nav-surface:     #ffffff;
+  --nav-surface:     var(--surface);
 
   /* Bleu nuit — 60% d'opacité sur les surfaces */
   --nav-primary-raw: 26, 34, 56;
-  --nav-primary:     rgba(26, 34, 56, 0.6);
+  --nav-primary:     var(--primary);
   --nav-primary-solid: #1a2238;
 
   /* Accent safran */
-  --nav-accent:      #f5b342;
+  --nav-accent:      var(--accent);
   --nav-accent-soft: rgba(245, 179, 66, 0.85);
 
   /* Texte */
-  --nav-text:        #1a2238;
+  --nav-text:        var(--text);
-  --nav-text-muted:  rgba(26, 34, 56, 0.55);
+  --nav-text-muted:  var(--text-muted);
   --nav-text-on-primary: #f8f6f1;
 
   /* Typographie */
-  --nav-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --nav-font: var(--font-body);
 }
 
 @layer base {
@@ -58,25 +74,25 @@
 
 /* Focus ring accessibilité */
 *:focus-visible {
-  outline: 2px solid var(--nav-accent);
+  outline: 2px solid var(--focus-ring);
   outline-offset: 2px;
 }
 
 /* ── Dark mode ──────────────────────────────────────────────────────────── */
 .dark {
-  --nav-bg:          #111520;
+  --nav-bg:          var(--bg);
-  --nav-bg-alt:      #1e2538;
+  --nav-bg-alt:      var(--bg-alt);
-  --nav-surface:     #1a2238;
+  --nav-surface:     var(--surface);
 
   --nav-primary-raw: 200, 210, 240;
-  --nav-primary:     rgba(200, 210, 240, 0.15);
+  --nav-primary:     var(--primary);
   --nav-primary-solid: #c8d2f0;
 
-  --nav-accent:      #f5b342;
+  --nav-accent:      var(--accent);
   --nav-accent-soft: rgba(245, 179, 66, 0.85);
 
-  --nav-text:        #e8ecf5;
+  --nav-text:        var(--text);
-  --nav-text-muted:  rgba(200, 210, 240, 0.55);
+  --nav-text-muted:  var(--text-muted);
   --nav-text-on-primary: #111520;
 }
 

nuxt.config.ts

@@ -1,6 +1,8 @@
 export default defineNuxtConfig({
   modules: ['@nuxtjs/tailwindcss'],
   css: [
+    '@transformer/ui/tokens.css',
+    '@transformer/ui/theme/aep.css',
     '~/assets/css/main.css',
     'leaflet/dist/leaflet.css',
     'leaflet.markercluster/dist/MarkerCluster.css',

package-lock.json

@@ -8,6 +8,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@headlessui/vue": "^1.7.23",
+        "@transformer/ui": "git+https://git.trans-former.fr/jules/design-system.git",
         "@types/leaflet": "^1.9.21",
         "@types/leaflet.markercluster": "^1.5.6",
         "d3": "^7.9.0",
@@ -3625,6 +3626,11 @@
         "vue": "^2.7.0 || ^3.0.0"
       }
     },
+    "node_modules/@transformer/ui": {
+      "version": "0.1.0",
+      "resolved": "git+https://git.trans-former.fr/jules/design-system.git#057de406c804315e09d28fb26f10941d61e461b1",
+      "license": "UNLICENSED"
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.1.tgz",

package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@headlessui/vue": "^1.7.23",
+    "@transformer/ui": "git+https://git.trans-former.fr/jules/design-system.git",
     "@types/leaflet": "^1.9.21",
     "@types/leaflet.markercluster": "^1.5.6",
     "d3": "^7.9.0",

tailwind.config.js

@@ -11,16 +11,18 @@ export default {
     extend: {
       colors: {
         /* Palette NAV V2 — Sobre institutionnel */
+        /* Pointent vers les variables CSS --nav-* (alias des rôles @transformer/ui,
+           voir assets/css/main.css) pour rester cohérentes clair/sombre. (B3-M0) */
         nav: {
-          bg:      '#f8f6f1',
+          bg:      'var(--nav-bg)',
-          'bg-alt':'#eee9df',
+          'bg-alt':'var(--nav-bg-alt)',
-          surface: '#ffffff',
+          surface: 'var(--nav-surface)',
-          primary: 'rgba(26, 34, 56, 0.6)',
+          primary: 'var(--nav-primary)',
-          'primary-solid': '#1a2238',
+          'primary-solid': 'var(--nav-primary-solid)',
-          accent:  '#f5b342',
+          accent:  'var(--nav-accent)',
-          text:    '#1a2238',
+          text:    'var(--nav-text)',
-          'text-muted': 'rgba(26, 34, 56, 0.55)',
+          'text-muted': 'var(--nav-text-muted)',
-          'text-on-primary': '#f8f6f1',
+          'text-on-primary': 'var(--nav-text-on-primary)',
         },
         /* Héritage V1 — gardé pour composants existants */
         sage: {