refactor(moods): adopte le layer @yvv/nuxt-base pour le mécanisme d'ambiances

- nuxt.config: extends ['../../yvv-nuxt-base']
- useMood.ts: délègue à useMood(moods) du layer, exporté useLibreMood
  (évite la collision avec l'auto-import du layer)
- MoodSwitcher.vue + app.vue: appellent useLibreMood()
- moods.css inchangé (couleurs = identité projet)

Mécanisme partagé (application DOM, persistance, sync color-mode) mutualisé
sans toucher le contrat CSS. Vérifié headless (Playwright) : 4 moods × light/dark
× desktop/mobile OK, persistance au reload OK, zéro erreur JS, zéro régression.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/app/app.vue

@@ -6,7 +6,7 @@ const decisionsStore = useDecisionsStore()
 const protocolsStore = useProtocolsStore()
 const mandatesStore = useMandatesStore()
 const route = useRoute()
-const { initMood } = useMood()
+const { initMood } = useLibreMood()
 
 const navigationItems = [
   {

frontend/app/components/common/MoodSwitcher.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const { currentMood, moods, setMood } = useMood()
+const { currentMood, moods, setMood } = useLibreMood()
 </script>
 
 <template>

frontend/app/composables/useMood.ts

@@ -1,4 +1,7 @@
-import type { Ref } from 'vue'
+// Ambiances libreDecision — délègue le mécanisme au layer @yvv/nuxt-base.
+// Les couleurs (identité du projet) restent dans assets/css/moods.css (classes .mood-*).
+// Le layer fournit l'auto-import `useMood(moods, options)` ; on l'enveloppe ici
+// sous le nom `useLibreMood` pour éviter la collision avec ce composable auto-importé.
 
 export interface Mood {
   id: string
@@ -9,8 +12,6 @@ export interface Mood {
   isDark: boolean
 }
 
-const STORAGE_KEY = 'libredecision_mood'
-
 const moods: Mood[] = [
   { id: 'peps', label: 'Peps', description: 'Chaud et tonique', icon: 'i-lucide-sun', color: '#d44a10', isDark: false },
   { id: 'zen', label: 'Zen', description: 'Nature vivante', icon: 'i-lucide-leaf', color: '#2e8b48', isDark: false },
@@ -18,49 +19,6 @@ const moods: Mood[] = [
   { id: 'grave', label: 'Grave', description: 'Ambre mineral', icon: 'i-lucide-shield', color: '#d8a030', isDark: true },
 ]
 
-const currentMood: Ref<string> = ref('peps')
+export function useLibreMood() {
-
+  return useMood(moods, { storageKey: 'libredecision_mood', defaultId: 'peps' })
-function applyMood(moodId: string) {
-  if (import.meta.server) return
-
-  const mood = moods.find(m => m.id === moodId)
-  if (!mood) return
-
-  const html = document.documentElement
-
-  // Remove all existing mood classes
-  moods.forEach(m => html.classList.remove(`mood-${m.id}`))
-
-  // Add the new mood class
-  html.classList.add(`mood-${moodId}`)
-
-  // Sync color-mode (light/dark) via Nuxt's useColorMode
-  const colorMode = useColorMode()
-  colorMode.preference = mood.isDark ? 'dark' : 'light'
-
-  // Persist choice
-  localStorage.setItem(STORAGE_KEY, moodId)
-
-  currentMood.value = moodId
-}
-
-function setMood(moodId: string) {
-  applyMood(moodId)
-}
-
-function initMood() {
-  if (import.meta.server) return
-
-  const saved = localStorage.getItem(STORAGE_KEY)
-  const moodId = saved && moods.some(m => m.id === saved) ? saved : 'peps'
-  applyMood(moodId)
-}
-
-export function useMood() {
-  return {
-    currentMood: readonly(currentMood),
-    moods,
-    setMood,
-    initMood,
-  }
 }

frontend/nuxt.config.ts

@@ -1,4 +1,5 @@
 export default defineNuxtConfig({
+  extends: ['../../yvv-nuxt-base'],
   compatibilityDate: '2025-07-15',
   ssr: false,
   devtools: { enabled: false },