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>

CONTRIBUTING.md

@@ -47,6 +47,7 @@ Les fichiers YAML sont dans `site/pages/`, organisés en sous-dossiers par secti
 - Défaut : **été** (premier visiteur)
 - Persisté en `localStorage('palette')` pour les visites suivantes
 - CSS : variables `--color-primary`, `--color-accent`, etc. + classe `.palette-light`/`.palette-dark`
+- Mécanique DOM (injection des variables, classes `mood-*`/`palette-*`, `color-scheme`, persistance) déléguée à `useMood` du layer `../yvv-nuxt-base` (`extends` dans `nuxt.config.ts`) — les couleurs restent définies ici. ⚠️ le layer est hors du repo : build Docker/CI cassera tant que la stratégie de distribution n'est pas tranchée (voir README du layer)
 - Overrides light mode dans `main.css` (`.palette-light .text-white` → couleur adaptive)
 - Admin : tous les `color: white` dans les composants admin sont remplacés par `hsl(var(--color-text))` sauf les boutons sur fond `hsl(var(--color-primary))` (`AdminSaveButton`, `.login-btn`)
 

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 {

nuxt.config.ts

@@ -1,5 +1,6 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
+  extends: ['../yvv-nuxt-base'],
   compatibilityDate: '2025-07-15',
 
   devtools: { enabled: true },