feat: adoption layer yvv-nuxt-base — palette.ts délègue à useMood

- extends ../yvv-nuxt-base dans nuxt.config.ts
- application DOM (vars --color-*, palette-light/dark, color-scheme) via useMood(vars) + lightDarkClasses
- storageKey 'palette' et défaut 'ete' conservés — zéro migration utilisateur
- couleurs et API du store inchangées (currentPalette, colors, setPalette, applyToDOM)
- vérifié Playwright : 4 palettes × desktop/mobile au reload + switch à chaud via PaletteSelector, zéro erreur console, prod :3099 → 200
- CONTRIBUTING.md : mécanique déléguée documentée + blocant distribution layer

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

app/stores/palette.ts

@@ -75,36 +75,44 @@ const palettes: Record<PaletteName, PaletteColors> = {
   },
 }
 
-export const usePaletteStore = defineStore('palette', () => {
-  const currentPalette = ref<PaletteName>(
-    (import.meta.client && localStorage.getItem('palette') as PaletteName) || 'ete',
-  )
+// Chaque palette devient un "mood" du layer @yvv/nuxt-base : les couleurs
+// (identité du projet) sont injectées en variables CSS --color-*, et les classes
+// .palette-light / .palette-dark + color-scheme sont gérées par le mécanisme partagé.
+const paletteMoods = (Object.entries(palettes) as [PaletteName, PaletteColors][]).map(
+  ([id, c]) => ({
+    id,
+    isDark: !c.isLight,
+    vars: {
+      '--color-primary': c.primary,
+      '--color-accent': c.accent,
+      '--color-surface': c.surface,
+      '--color-bg': c.bg,
+      '--color-surface-light': c.surfaceLight,
+      '--color-text': c.text,
+      '--color-text-muted': c.textMuted,
+    },
+  }),
+)
 
+export const usePaletteStore = defineStore('palette', () => {
+  // Application DOM + persistance + light/dark déléguées au layer partagé.
+  // storageKey 'palette' conservé pour ne pas perdre les préférences existantes.
+  const { currentMood, setMood, initMood } = useMood(paletteMoods, {
+    storageKey: 'palette',
+    defaultId: 'ete',
+    syncColorMode: false, // librodrome n'utilise pas @nuxtjs/color-mode
+    lightDarkClasses: true,
+  })
+
+  const currentPalette = computed<PaletteName>(() => (currentMood.value as PaletteName) || 'ete')
   const colors = computed(() => palettes[currentPalette.value])
   const isLight = computed(() => colors.value.isLight)
 
-  function applyToDOM() {
-    if (!import.meta.client) return
-    const c = colors.value
-    const root = document.documentElement
-    const s = root.style
-    s.setProperty('--color-primary', c.primary)
-    s.setProperty('--color-accent', c.accent)
-    s.setProperty('--color-surface', c.surface)
-    s.setProperty('--color-bg', c.bg)
-    s.setProperty('--color-surface-light', c.surfaceLight)
-    s.setProperty('--color-text', c.text)
-    s.setProperty('--color-text-muted', c.textMuted)
-    // Toggle light/dark class for CSS overrides
-    root.classList.toggle('palette-light', c.isLight)
-    root.classList.toggle('palette-dark', !c.isLight)
-    s.setProperty('color-scheme', c.isLight ? 'light' : 'dark')
-  }
+  // Init depuis localStorage (SSR-safe : no-op côté serveur).
+  const applyToDOM = () => initMood()
 
   function setPalette(name: PaletteName) {
-    currentPalette.value = name
-    if (import.meta.client) localStorage.setItem('palette', name)
-    applyToDOM()
+    setMood(name)
   }
 
   return {