deps: upgrade and remove spotify for now

GUIDE_DEVELOPPEMENT.md

@@ -1,643 +0,0 @@
-# Guide de Développement - Application Binôme (Stack Moderne)
-
-## 🚀 Vue d'Ensemble
-
-L'application **Binôme** est maintenant basée sur une stack moderne Vue 3 + Vite + Pinia, optimisée pour le développement et la performance.
-
-### Stack Technique
-
-- **Frontend** : Vue 3.5.17 + TypeScript
-- **Build Tool** : Vite 7.0.5
-- **State Management** : Pinia 3.0.3 avec persistence
-- **Routing** : Vue Router 4.5.1
-- **Styling** : SCSS avec variables globales
-- **PWA** : vite-plugin-pwa
-- **Package Manager** : pnpm
-- **Node.js** : v20 (LTS)
-
----
-
-## 🛠️ Prérequis et Installation
-
-### Prérequis Système
-
-```bash
-# Node.js version 20 (LTS)
-node --version  # doit afficher v20.x.x
-
-# pnpm installé globalement
-npm install -g pnpm@latest
-```
-
-### Installation du Projet
-
-```bash
-# Cloner le projet
-git clone <repository-url>
-cd binome
-
-# Installer les dépendances
-pnpm install
-
-# Vérifier l'installation
-pnpm dev
-```
-
----
-
-## 📜 Scripts Disponibles
-
-### Scripts de Développement
-
-```bash
-# Démarrer le serveur de développement
-pnpm dev
-# → Lance Vite dev server sur http://localhost:8080
-# → Hot Module Replacement (HMR) activé
-# → Ouverture automatique du navigateur
-
-# Prévisualiser la build de production
-pnpm preview
-# → Sert la version buildée localement
-# → Utile pour tester avant déploiement
-```
-
-### Scripts de Build
-
-```bash
-# Build de production
-pnpm build
-# → Génère le dossier /dist optimisé
-# → Minification et tree-shaking automatiques
-# → Source maps incluses
-
-# Analyser la build
-pnpm build --analyze
-# → Affiche la taille des bundles
-# → Identifie les dépendances lourdes
-```
-
-### Scripts de Qualité
-
-```bash
-# Linter ESLint
-pnpm lint
-# → Vérifie et corrige automatiquement le code
-# → Supporte .vue, .ts, .js files
-# → Configuration dans .eslintrc.js
-
-# Type checking TypeScript
-pnpm type-check
-# → Vérifie les types sans compilation
-# → Utile en CI/CD
-```
-
----
-
-## 🏗️ Architecture du Projet
-
-### Structure des Dossiers
-
-```
-src/
-├── assets/          # Ressources statiques (SVG, images)
-├── components/      # Composants Vue réutilisables
-│   ├── ChilledMusic.vue
-│   ├── DevSession.vue
-│   ├── IntervalInput.vue
-│   ├── SpotifyMusic.vue
-│   ├── SWNewVersion.vue
-│   └── ZoneMusic.vue
-├── hooks/           # Composables Vue 3
-│   ├── useInterval.ts
-│   ├── useMusic.ts
-│   ├── useSpotify.ts
-│   ├── useTimer.ts
-│   └── useWakeLock.ts
-├── lib/             # Bibliothèques externes
-│   └── spotify-player.js  # ⚠️ CRITIQUE - Ne pas modifier
-├── locales/         # Fichiers de traduction i18n
-│   ├── en.json
-│   └── fr.json
-├── router/          # Configuration Vue Router
-│   └── index.ts
-├── store/           # Store Pinia
-│   └── index.ts
-├── styles/          # Styles SCSS globaux
-│   ├── app.scss
-│   ├── plume.scss
-│   └── variables.scss
-├── types/           # Types TypeScript
-│   └── StopwatchState.ts
-├── utils/           # Utilitaires
-│   ├── notification.ts
-│   └── spotify.ts
-├── views/           # Pages/Vues principales
-│   ├── Home.vue
-│   ├── Privacy.vue
-│   └── SpotifyCallback.vue
-├── App.vue          # Composant racine
-├── i18n.ts          # Configuration internationalisation
-└── main.ts          # Point d'entrée de l'application
-```
-
----
-
-## 🎯 Patterns de Développement
-
-### 1. Composants Vue 3
-
-#### Composition API avec `<script setup>`
-
-```vue
-<template>
-  <div class="my-component">
-    <h2>{{ title }}</h2>
-    <button @click="increment">Count: {{ count }}</button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue'
-
-// Props avec TypeScript
-interface Props {
-  title: string
-  initialCount?: number
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  initialCount: 0
-})
-
-// État réactif
-const count = ref(props.initialCount)
-
-// Méthodes
-const increment = () => {
-  count.value++
-}
-
-// Émissions d'événements
-const emit = defineEmits<{
-  countChanged: [value: number]
-}>()
-
-// Watcher
-watch(count, (newValue) => {
-  emit('countChanged', newValue)
-})
-</script>
-
-<style lang="scss" scoped>
-.my-component {
-  padding: 1rem;
-  border: 1px solid $primary-color; // Variable SCSS globale
-}
-</style>
-```
-
-#### Composables (Hooks Personnalisés)
-
-```typescript
-// hooks/useCounter.ts
-import { ref, computed } from 'vue'
-
-export function useCounter(initialValue = 0) {
-  const count = ref(initialValue)
-  
-  const increment = () => count.value++
-  const decrement = () => count.value--
-  const reset = () => count.value = initialValue
-  
-  const isEven = computed(() => count.value % 2 === 0)
-  
-  return {
-    count: readonly(count),
-    increment,
-    decrement,
-    reset,
-    isEven
-  }
-}
-```
-
-### 2. Store Pinia
-
-#### Définition du Store
-
-```typescript
-// store/modules/timer.ts
-import { defineStore } from 'pinia'
-
-interface TimerState {
-  currentTime: number
-  isRunning: boolean
-  interval: number
-}
-
-export const useTimerStore = defineStore('timer', {
-  state: (): TimerState => ({
-    currentTime: 0,
-    isRunning: false,
-    interval: 5
-  }),
-
-  getters: {
-    formattedTime: (state) => {
-      const minutes = Math.floor(state.currentTime / 60)
-      const seconds = state.currentTime % 60
-      return `${minutes}:${seconds.toString().padStart(2, '0')}`
-    }
-  },
-
-  actions: {
-    startTimer() {
-      this.isRunning = true
-    },
-    
-    stopTimer() {
-      this.isRunning = false
-    },
-    
-    resetTimer() {
-      this.currentTime = 0
-      this.isRunning = false
-    }
-  },
-
-  // Persistence automatique
-  persist: {
-    key: 'timer-store',
-    storage: localStorage,
-    paths: ['interval'] // Seuls certains champs
-  }
-})
-```
-
-#### Utilisation dans les Composants
-
-```vue
-<script setup lang="ts">
-import { useTimerStore } from '@/store'
-
-const timerStore = useTimerStore()
-
-// Accès direct aux propriétés réactives
-const { currentTime, isRunning, formattedTime } = storeToRefs(timerStore)
-
-// Accès aux actions
-const { startTimer, stopTimer, resetTimer } = timerStore
-</script>
-```
-
-### 3. Internationalisation (i18n)
-
-#### Utilisation dans les Composants
-
-```vue
-<template>
-  <div>
-    <h1>{{ $t('welcome.title') }}</h1>
-    <p>{{ $t('welcome.message', { name: userName }) }}</p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n'
-
-const { t, locale } = useI18n()
-
-// Changement de langue
-const switchLanguage = (lang: string) => {
-  locale.value = lang
-}
-</script>
-```
-
-#### Ajout de Nouvelles Traductions
-
-```json
-// locales/fr.json
-{
-  "welcome": {
-    "title": "Bienvenue dans Binôme",
-    "message": "Bonjour {name}, prêt pour une session de programmation ?"
-  }
-}
-```
-
----
-
-## 🎨 Styling et Thèmes
-
-### Variables SCSS Globales
-
-```scss
-// styles/variables.scss
-$primary-color: #f8efba;
-$secondary-color: #333;
-$font-family: 'Arial', sans-serif;
-$border-radius: 8px;
-$spacing-unit: 1rem;
-
-// Breakpoints
-$mobile: 768px;
-$tablet: 1024px;
-$desktop: 1200px;
-```
-
-### Utilisation dans les Composants
-
-```vue
-<style lang="scss" scoped>
-.component {
-  background-color: $primary-color;
-  padding: $spacing-unit;
-  border-radius: $border-radius;
-  
-  @media (max-width: $mobile) {
-    padding: $spacing-unit / 2;
-  }
-}
-</style>
-```
-
----
-
-## 🔧 Configuration de Développement
-
-### Vite Configuration ([`vite.config.ts`](vite.config.ts:1))
-
-```typescript
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { VitePWA } from 'vite-plugin-pwa'
-
-export default defineConfig({
-  plugins: [
-    vue(),
-    VitePWA({
-      registerType: 'autoUpdate',
-      workbox: {
-        skipWaiting: true,
-        clientsClaim: true
-      }
-    })
-  ],
-  
-  resolve: {
-    alias: {
-      '@': resolve(__dirname, 'src')
-    }
-  },
-  
-  server: {
-    port: 8080,
-    open: true,
-    hmr: true
-  }
-})
-```
-
-### TypeScript Configuration
-
-```json
-// tsconfig.json
-{
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "moduleResolution": "node",
-    "strict": true,
-    "paths": {
-      "@/*": ["src/*"]
-    }
-  }
-}
-```
-
----
-
-## 🧪 Tests et Qualité
-
-### ESLint Configuration
-
-```javascript
-// .eslintrc.js
-module.exports = {
-  extends: [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/typescript/recommended'
-  ],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
-  }
-}
-```
-
-### Commandes de Vérification
-
-```bash
-# Vérification complète avant commit
-pnpm lint && pnpm type-check && pnpm build
-```
-
----
-
-## 📱 PWA et Service Worker
-
-### Configuration PWA
-
-L'application est configurée comme PWA avec :
-
-- **Manifest** : Icônes, couleurs, mode d'affichage
-- **Service Worker** : Cache automatique, mise à jour en arrière-plan
-- **Raccourcis** : Accès rapide aux fonctionnalités
-
-### Gestion des Mises à Jour
-
-```vue
-<!-- components/SWNewVersion.vue -->
-<template>
-  <div v-if="needRefresh" class="update-banner">
-    <p>{{ $t('notification.update.body') }}</p>
-    <button @click="updateSW">{{ $t('update') }}</button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useRegisterSW } from 'virtual:pwa-register/vue'
-
-const { needRefresh, updateServiceWorker } = useRegisterSW()
-
-const updateSW = async () => {
-  await updateServiceWorker()
-}
-</script>
-```
-
----
-
-## 🎵 Intégration Spotify
-
-### Fichier Critique : [`spotify-player.js`](src/lib/spotify-player.js:1)
-
-⚠️ **ATTENTION** : Ce fichier ne doit JAMAIS être modifié
-
-- Contient le SDK Spotify personnalisé
-- 571 lignes de code critique
-- Toute modification peut casser l'intégration Spotify
-
-### Utilisation du Player Spotify
-
-```typescript
-// hooks/useSpotify.ts
-import { ref } from 'vue'
-
-export function useSpotify() {
-  const player = ref<any>(null)
-  const isReady = ref(false)
-  
-  const initializePlayer = (token: string) => {
-    // Utilisation du spotify-player.js
-    player.value = new window.Spotify.Player({
-      name: 'Binôme Player',
-      getOAuthToken: (cb: (token: string) => void) => {
-        cb(token)
-      }
-    })
-  }
-  
-  return {
-    player,
-    isReady,
-    initializePlayer
-  }
-}
-```
-
----
-
-## 🚀 Déploiement
-
-### Build de Production
-
-```bash
-# Génération des fichiers optimisés
-pnpm build
-
-# Vérification de la build
-pnpm preview
-```
-
-### Netlify (Configuration dans [`netlify.toml`](netlify.toml:1))
-
-```toml
-[build]
-  command = "pnpm build"
-  publish = "dist"
-
-[[redirects]]
-  from = "/*"
-  to = "/index.html"
-  status = 200
-```
-
-### Variables d'Environnement
-
-```bash
-# .env.local (non versionné)
-VITE_SPOTIFY_CLIENT_ID=your_client_id
-VITE_API_BASE_URL=https://api.example.com
-```
-
----
-
-## 🐛 Debugging et Outils
-
-### Vue DevTools
-
-- Extension navigateur pour Vue 3
-- Inspection des composants et du store Pinia
-- Timeline des événements
-
-### Vite DevTools
-
-- HMR (Hot Module Replacement)
-- Source maps automatiques
-- Inspection des modules
-
-### Console de Debug
-
-```typescript
-// Activation du debug en développement
-if (import.meta.env.DEV) {
-  console.log('Mode développement activé')
-  // Exposition du store pour debug
-  window.__PINIA__ = pinia
-}
-```
-
----
-
-## 📚 Ressources et Documentation
-
-### Documentation Officielle
-
-- [Vue 3](https://vuejs.org/)
-- [Vite](https://vitejs.dev/)
-- [Pinia](https://pinia.vuejs.org/)
-- [Vue Router](https://router.vuejs.org/)
-
-### Outils Recommandés
-
-- **IDE** : VS Code avec extensions Vue
-- **Extensions** : Vetur, TypeScript Vue Plugin
-- **Browser** : Chrome/Firefox avec Vue DevTools
-
----
-
-## 🔄 Workflow de Développement
-
-### 1. Démarrage d'une Nouvelle Fonctionnalité
-
-```bash
-# Créer une branche
-git checkout -b feature/nouvelle-fonctionnalite
-
-# Démarrer le serveur de dev
-pnpm dev
-```
-
-### 2. Développement
-
-- Modifier les fichiers dans `src/`
-- Tester en temps réel avec HMR
-- Utiliser Vue DevTools pour debug
-
-### 3. Tests et Validation
-
-```bash
-# Vérification du code
-pnpm lint
-
-# Build de test
-pnpm build && pnpm preview
-```
-
-### 4. Commit et Push
-
-```bash
-# Commit avec message descriptif
-git add .
-git commit -m "feat: ajout de la nouvelle fonctionnalité"
-git push origin feature/nouvelle-fonctionnalite
-```
-
----
-
-**Guide créé le 20 juillet 2025**  
-**Version de l'application** : Stack moderne Vue 3 + Vite + Pinia  
-**Prochaine mise à jour** : Après résolution des problèmes techniques identifiés

pnpm-lock.yaml

@@ -1562,9 +1562,9 @@ packages:
     resolution: {integrity: sha512-YBjSAiTqM04ZVei6sXighu679a3SqWORA3qZTEqZImnlkDIFtKc6pNutpjyZ8RJTjQtuYfeetkxM11GwoYXMIQ==}
     engines: {node: '>= 0.10'}
 
-  browserify-sign@4.2.3:
+  browserify-sign@4.2.5:
-    resolution: {integrity: sha512-JWCZW6SKhfhjJxO8Tyiiy+XYB7cqd2S5/+WeYHsKdNKFlCBhKbblba1A/HN/90YwtxKc8tCErjffZl++UNmGiw==}
+    resolution: {integrity: sha512-C2AUdAJg6rlM2W5QMp2Q4KGQMVBwR1lIimTsUnutJ8bMpW5B52pGpR2gEnNBNwijumDo5FojQ0L9JrXA8m4YEw==}
-    engines: {node: '>= 0.12'}
+    engines: {node: '>= 0.10'}
 
   browserify-zlib@0.2.0:
     resolution: {integrity: sha512-Z942RysHXmJrhqk88FmKBVq/v5tqmSkDz7p54G/MGyjMnCFFnC79XWNbg+Vta8W6Wb2qtSZTSxIGkJrRpCFEiA==}
@@ -1628,8 +1628,8 @@ packages:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
 
-  caniuse-lite@1.0.30001727:
+  caniuse-lite@1.0.30001766:
-    resolution: {integrity: sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==}
+    resolution: {integrity: sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==}
 
   caseless@0.12.0:
     resolution: {integrity: sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==}
@@ -1667,8 +1667,8 @@ packages:
     resolution: {integrity: sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==}
     engines: {node: '>=6.0'}
 
-  cipher-base@1.0.6:
+  cipher-base@1.0.7:
-    resolution: {integrity: sha512-3Ek9H3X6pj5TgenXYtNWdaBon1tgYCaebd+XPg0keyjEbEfkD4KkmAxkQ/i1vYvxdcT5nscLBfq9VJRmCBcFSw==}
+    resolution: {integrity: sha512-Mz9QMT5fJe7bKI7MH31UilT5cEK5EHHRCccw/YRFsRY47AuNgaV6HY3rscp0/I4Q+tTW/5zoqpSeRRI54TkDWA==}
     engines: {node: '>= 0.10'}
 
   class-utils@0.3.6:
@@ -1777,9 +1777,6 @@ packages:
   create-ecdh@4.0.4:
     resolution: {integrity: sha512-mf+TCx8wWc9VpuxfP2ht0iSISLZnt0JgWlrOKZiNqyUZWnjIaCIVNQArMHnCZKfEYRg6IM7A+NeJoN8gf/Ws0A==}
 
-  create-hash@1.1.3:
-    resolution: {integrity: sha512-snRpch/kwQhcdlnZKYanNF1m0RDlrCdSKQaH87w1FCFPVPNCQ/Il9QJKAX2jVBZddRdaHBMC+zXa9Gw9tmkNUA==}
-
   create-hash@1.2.0:
     resolution: {integrity: sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==}
 
@@ -1963,8 +1960,8 @@ packages:
     resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==}
     hasBin: true
 
-  error-ex@1.3.2:
+  error-ex@1.3.4:
-    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
+    resolution: {integrity: sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==}
 
   es-abstract@1.24.0:
     resolution: {integrity: sha512-WSzPgsdLtTcQwm4CROfS5ju2Wa1QQcVeT37jFjYzdFz1r9ahadC8B8/a4qxJxM+09F18iumCdRmlr96ZYkQvEg==}
@@ -2407,13 +2404,14 @@ packages:
     resolution: {integrity: sha512-ODYZC64uqzmtfGMEAX/FvZiRyWLpAC3vYnNunURUnkGVTS+mI0smVsWaPydRBsE3g+ok7h960jChO8mFcWlHaQ==}
     engines: {node: '>=0.10.0'}
 
-  hash-base@2.0.2:
-    resolution: {integrity: sha512-0TROgQ1/SxE6KmxWSvXHvRj90/Xo1JvZShofnYF+f6ZsGtR4eES7WfrQzPalmyagfKZCXpVnitiRebZulWsbiw==}
-
   hash-base@3.0.5:
     resolution: {integrity: sha512-vXm0l45VbcHEVlTCzs8M+s0VeYsB2lnlAaThoLKGXr3bE/VWDOelNUnycUPEhKEaXARL2TEFjBOyUiM6+55KBg==}
     engines: {node: '>= 0.10'}
 
+  hash-base@3.1.2:
+    resolution: {integrity: sha512-Bb33KbowVTIj5s7Ked1OsqHUeCpz//tPwR+E2zJgJKo9Z5XolZ9b6bdUgjmYlwnWhoOQKoTd1TYToZGn5mAYOg==}
+    engines: {node: '>= 0.8'}
+
   hash.js@1.1.7:
     resolution: {integrity: sha512-taOaskGt4z4SOANNseOviYDvjEJinIkRgmp7LbKP2YTTmVxWBl87s/uzK9r+44BclBSp2X7K1hqeNfz9JbBeXA==}
 
@@ -2835,6 +2833,9 @@ packages:
   lodash@4.17.21:
     resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
 
+  lodash@4.17.23:
+    resolution: {integrity: sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==}
+
   loud-rejection@1.6.0:
     resolution: {integrity: sha512-RPNliZOFkqFumDhvYqOaNY4Uz9oJM2K9tC6JWsJJsNdhuONW4LQHRBpb0qf4pJApVffI5N39SwzWZJuEhfd7eQ==}
     engines: {node: '>=0.10.0'}
@@ -2971,8 +2972,8 @@ packages:
   mute-stream@0.0.8:
     resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
 
-  nan@2.23.0:
+  nan@2.24.0:
-    resolution: {integrity: sha512-1UxuyYGdoQHcGg87Lkqm3FzefucTa0NAiOcuRsDmysep3c1LVCRK2krrUDafMWtjSG04htvAmvg96+SDknOmgQ==}
+    resolution: {integrity: sha512-Vpf9qnVW1RaDkoNKFUvfxqAbtI8ncb8OJlqZ9wwpXzWPEsvsB1nvdUi6oYrHIkQ1Y/tMDnr1h4nczS0VB9Xykg==}
 
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
@@ -3118,8 +3119,8 @@ packages:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
     engines: {node: '>=6'}
 
-  parse-asn1@5.1.7:
+  parse-asn1@5.1.9:
-    resolution: {integrity: sha512-CTM5kuWR3sx9IFamcl5ErfPl6ea/N8IYwiJ+vpeB2g+1iknv7zBl5uPwbMbRVznRVbrNY6lGuDoE5b30grmbqg==}
+    resolution: {integrity: sha512-fIYNuZ/HastSb80baGOuPRo1O9cf4baWw5WsAp7dBuUzeTD/BoaG8sVTdlPFksBE2lF21dN+A1AnrpIjSWqHHg==}
     engines: {node: '>= 0.10'}
 
   parse-json@2.2.0:
@@ -3165,9 +3166,9 @@ packages:
   pathe@2.0.3:
     resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}
 
-  pbkdf2@3.1.3:
+  pbkdf2@3.1.5:
-    resolution: {integrity: sha512-wfRLBZ0feWRhCIkoMB6ete7czJcnNnqRpcoWQBLqatqXXmelSRqfdDK4F3u9T2s2cXas/hQJcryI/4lAL+XTlA==}
+    resolution: {integrity: sha512-Q3CG/cYvCO1ye4QKkuH7EXxs3VC/rI1/trd+qX2+PolbaKG0H+bgcZzrTt96mMyRtejk+JMCiLUn3y29W8qmFQ==}
-    engines: {node: '>=0.12'}
+    engines: {node: '>= 0.10'}
 
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
@@ -3315,8 +3316,8 @@ packages:
     resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
     engines: {node: '>=6'}
 
-  qs@6.14.0:
+  qs@6.14.1:
-    resolution: {integrity: sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==}
+    resolution: {integrity: sha512-4EK3+xJl8Ts67nLYNwqw/dsFVnCf+qR7RgXSK9jEEm9unao3njwMDdmsdvoKBKHzxd7tCYz5e5M+SnMjdtXGQQ==}
     engines: {node: '>=0.6'}
 
   qs@6.5.3:
@@ -3451,6 +3452,11 @@ packages:
     engines: {node: '>= 0.4'}
     hasBin: true
 
+  resolve@1.22.11:
+    resolution: {integrity: sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==}
+    engines: {node: '>= 0.4'}
+    hasBin: true
+
   restore-cursor@3.1.0:
     resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
     engines: {node: '>=8'}
@@ -3479,11 +3485,9 @@ packages:
     deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
-  ripemd160@2.0.1:
+  ripemd160@2.0.3:
-    resolution: {integrity: sha512-J7f4wutN8mdbV08MJnXibYpCOPHR+yzy+iQ/AsjMv2j8cLavQ8VGagDFUwwTAdF8FmRKVeNpbTTEwNHCW1g94w==}
+    resolution: {integrity: sha512-5Di9UC0+8h1L6ZD2d7awM7E/T4uA1fJRlx6zk/NvdCCVEoAnFqvHmCuNeIKoCeIixBX/q8uM+6ycDvF8woqosA==}
-
+    engines: {node: '>= 0.8'}
-  ripemd160@2.0.2:
-    resolution: {integrity: sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==}
 
   rollup@2.79.2:
     resolution: {integrity: sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==}
@@ -3720,8 +3724,8 @@ packages:
   spdx-expression-parse@3.0.1:
     resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==}
 
-  spdx-license-ids@3.0.21:
+  spdx-license-ids@3.0.22:
-    resolution: {integrity: sha512-Bvg/8F5XephndSK3JffaRqdT+gyhfqIPwDHpX80tJrF8QQRYMo8sNMeaZ2Dp5+jhwKnUmIOyFFQfHRkjJm5nXg==}
+    resolution: {integrity: sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ==}
 
   speakingurl@14.0.1:
     resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
@@ -3865,7 +3869,7 @@ packages:
 
   tar@2.2.2:
     resolution: {integrity: sha512-FCEhQ/4rE1zYv9rYXJw/msRqsnmlje5jHP6huWeBZ704jUTy02c5AZyWujpMR1ax6mVw9NyJMfuK2CMDWVIfgA==}
-    deprecated: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
+    deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exhorbitant rates) by contacting i@izs.me
 
   temp-dir@2.0.0:
     resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
@@ -3915,8 +3919,8 @@ packages:
   to-arraybuffer@1.0.1:
     resolution: {integrity: sha512-okFlQcoGTi4LQBG/PgSYblw9VOyptsz2KJZqc6qtgGdes8VktzUQkj4BI2blit072iS8VODNcMA+tvnS9dnuMA==}
 
-  to-buffer@1.2.1:
+  to-buffer@1.2.2:
-    resolution: {integrity: sha512-tB82LpAIWjhLYbqjx3X4zEeHN6M8CiuOEy2JY8SEQVdYRe3CCHOFaqrBW1doLDrfpWhplcW7BL+bO3/6S3pcDQ==}
+    resolution: {integrity: sha512-db0E3UJjcFhpDhAF4tLo03oli3pwl3dbnzXOUIlRKrp+ldk/VUxzpWYZENsw2SZiuBjHAk7DfB0VU7NKdpb6sw==}
     engines: {node: '>= 0.4'}
 
   to-object-path@0.3.0:
@@ -5969,7 +5973,7 @@ snapshots:
   browserify-aes@1.2.0:
     dependencies:
       buffer-xor: 1.0.3
-      cipher-base: 1.0.6
+      cipher-base: 1.0.7
       create-hash: 1.2.0
       evp_bytestokey: 1.0.3
       inherits: 2.0.4
@@ -5983,7 +5987,7 @@ snapshots:
 
   browserify-des@1.0.2:
     dependencies:
-      cipher-base: 1.0.6
+      cipher-base: 1.0.7
       des.js: 1.1.0
       inherits: 2.0.4
       safe-buffer: 5.2.1
@@ -5994,16 +5998,15 @@ snapshots:
       randombytes: 2.1.0
       safe-buffer: 5.2.1
 
-  browserify-sign@4.2.3:
+  browserify-sign@4.2.5:
     dependencies:
       bn.js: 5.2.2
       browserify-rsa: 4.1.1
       create-hash: 1.2.0
       create-hmac: 1.1.7
       elliptic: 6.6.1
-      hash-base: 3.0.5
       inherits: 2.0.4
-      parse-asn1: 5.1.7
+      parse-asn1: 5.1.9
       readable-stream: 2.3.8
       safe-buffer: 5.2.1
 
@@ -6018,7 +6021,7 @@ snapshots:
 
   browserslist@4.25.1:
     dependencies:
-      caniuse-lite: 1.0.30001727
+      caniuse-lite: 1.0.30001766
       electron-to-chromium: 1.5.187
       node-releases: 2.0.19
       update-browserslist-db: 1.1.3(browserslist@4.25.1)
@@ -6096,7 +6099,7 @@ snapshots:
   camelcase@5.3.1:
     optional: true
 
-  caniuse-lite@1.0.30001727: {}
+  caniuse-lite@1.0.30001766: {}
 
   caseless@0.12.0:
     optional: true
@@ -6163,10 +6166,11 @@ snapshots:
 
   chrome-trace-event@1.0.4: {}
 
-  cipher-base@1.0.6:
+  cipher-base@1.0.7:
     dependencies:
       inherits: 2.0.4
       safe-buffer: 5.2.1
+      to-buffer: 1.2.2
 
   class-utils@0.3.6:
     dependencies:
@@ -6278,27 +6282,20 @@ snapshots:
       bn.js: 4.12.2
       elliptic: 6.6.1
 
-  create-hash@1.1.3:
-    dependencies:
-      cipher-base: 1.0.6
-      inherits: 2.0.4
-      ripemd160: 2.0.2
-      sha.js: 2.4.12
-
   create-hash@1.2.0:
     dependencies:
-      cipher-base: 1.0.6
+      cipher-base: 1.0.7
       inherits: 2.0.4
       md5.js: 1.3.5
-      ripemd160: 2.0.2
+      ripemd160: 2.0.3
       sha.js: 2.4.12
 
   create-hmac@1.1.7:
     dependencies:
-      cipher-base: 1.0.6
+      cipher-base: 1.0.7
       create-hash: 1.2.0
       inherits: 2.0.4
-      ripemd160: 2.0.2
+      ripemd160: 2.0.3
       safe-buffer: 5.2.1
       sha.js: 2.4.12
 
@@ -6319,14 +6316,14 @@ snapshots:
   crypto-browserify@3.12.1:
     dependencies:
       browserify-cipher: 1.0.1
-      browserify-sign: 4.2.3
+      browserify-sign: 4.2.5
       create-ecdh: 4.0.4
       create-hash: 1.2.0
       create-hmac: 1.1.7
       diffie-hellman: 5.0.3
       hash-base: 3.0.5
       inherits: 2.0.4
-      pbkdf2: 3.1.3
+      pbkdf2: 3.1.5
       public-encrypt: 4.0.3
       randombytes: 2.1.0
       randomfill: 1.0.4
@@ -6498,7 +6495,7 @@ snapshots:
     dependencies:
       prr: 1.0.1
 
-  error-ex@1.3.2:
+  error-ex@1.3.4:
     dependencies:
       is-arrayish: 0.2.1
     optional: true
@@ -6915,7 +6912,7 @@ snapshots:
   fsevents@1.2.13:
     dependencies:
       bindings: 1.5.0
-      nan: 2.23.0
+      nan: 2.24.0
     optional: true
 
   fsevents@2.3.3:
@@ -7017,7 +7014,7 @@ snapshots:
       fs.realpath: 1.0.0
       inflight: 1.0.6
       inherits: 2.0.4
-      minimatch: 3.1.2
+      minimatch: 3.0.8
       once: 1.4.0
       path-is-absolute: 1.0.1
     optional: true
@@ -7043,7 +7040,7 @@ snapshots:
   globule@1.3.4:
     dependencies:
       glob: 7.1.7
-      lodash: 4.17.21
+      lodash: 4.17.23
       minimatch: 3.0.8
     optional: true
 
@@ -7107,15 +7104,18 @@ snapshots:
       is-number: 3.0.0
       kind-of: 4.0.0
 
-  hash-base@2.0.2:
-    dependencies:
-      inherits: 2.0.4
-
   hash-base@3.0.5:
     dependencies:
       inherits: 2.0.4
       safe-buffer: 5.2.1
 
+  hash-base@3.1.2:
+    dependencies:
+      inherits: 2.0.4
+      readable-stream: 2.3.8
+      safe-buffer: 5.2.1
+      to-buffer: 1.2.2
+
   hash.js@1.1.7:
     dependencies:
       inherits: 2.0.4
@@ -7530,6 +7530,9 @@ snapshots:
 
   lodash@4.17.21: {}
 
+  lodash@4.17.23:
+    optional: true
+
   loud-rejection@1.6.0:
     dependencies:
       currently-unhandled: 0.4.1
@@ -7711,7 +7714,7 @@ snapshots:
 
   mute-stream@0.0.8: {}
 
-  nan@2.23.0:
+  nan@2.24.0:
     optional: true
 
   nanoid@3.3.11: {}
@@ -7794,10 +7797,10 @@ snapshots:
       get-stdin: 4.0.1
       glob: 7.2.3
       in-publish: 2.0.1
-      lodash: 4.17.21
+      lodash: 4.17.23
       meow: 3.7.0
       mkdirp: 0.5.6
-      nan: 2.23.0
+      nan: 2.24.0
       node-gyp: 3.8.0
       npmlog: 4.1.2
       request: 2.88.2
@@ -7814,7 +7817,7 @@ snapshots:
   normalize-package-data@2.5.0:
     dependencies:
       hosted-git-info: 2.8.9
-      resolve: 1.22.10
+      resolve: 1.22.11
       semver: 5.7.2
       validate-npm-package-license: 3.0.4
     optional: true
@@ -7928,18 +7931,17 @@ snapshots:
     dependencies:
       callsites: 3.1.0
 
-  parse-asn1@5.1.7:
+  parse-asn1@5.1.9:
     dependencies:
       asn1.js: 4.10.1
       browserify-aes: 1.2.0
       evp_bytestokey: 1.0.3
-      hash-base: 3.0.5
+      pbkdf2: 3.1.5
-      pbkdf2: 3.1.3
       safe-buffer: 5.2.1
 
   parse-json@2.2.0:
     dependencies:
-      error-ex: 1.3.2
+      error-ex: 1.3.4
     optional: true
 
   pascalcase@0.1.1: {}
@@ -7973,14 +7975,14 @@ snapshots:
 
   pathe@2.0.3: {}
 
-  pbkdf2@3.1.3:
+  pbkdf2@3.1.5:
     dependencies:
-      create-hash: 1.1.3
+      create-hash: 1.2.0
       create-hmac: 1.1.7
-      ripemd160: 2.0.1
+      ripemd160: 2.0.3
       safe-buffer: 5.2.1
       sha.js: 2.4.12
-      to-buffer: 1.2.1
+      to-buffer: 1.2.2
 
   perfect-debounce@1.0.0: {}
 
@@ -8086,7 +8088,7 @@ snapshots:
       bn.js: 4.12.2
       browserify-rsa: 4.1.1
       create-hash: 1.2.0
-      parse-asn1: 5.1.7
+      parse-asn1: 5.1.9
       randombytes: 2.1.0
       safe-buffer: 5.2.1
 
@@ -8110,7 +8112,7 @@ snapshots:
 
   punycode@2.3.1: {}
 
-  qs@6.14.0:
+  qs@6.14.1:
     dependencies:
       side-channel: 1.1.0
 
@@ -8283,6 +8285,13 @@ snapshots:
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
 
+  resolve@1.22.11:
+    dependencies:
+      is-core-module: 2.16.1
+      path-parse: 1.0.7
+      supports-preserve-symlinks-flag: 1.0.0
+    optional: true
+
   restore-cursor@3.1.0:
     dependencies:
       onetime: 5.1.2
@@ -8304,14 +8313,9 @@ snapshots:
     dependencies:
       glob: 7.2.3
 
-  ripemd160@2.0.1:
+  ripemd160@2.0.3:
     dependencies:
-      hash-base: 2.0.2
+      hash-base: 3.1.2
-      inherits: 2.0.4
-
-  ripemd160@2.0.2:
-    dependencies:
-      hash-base: 3.0.5
       inherits: 2.0.4
 
   rollup@2.79.2:
@@ -8390,7 +8394,7 @@ snapshots:
   sass-graph@2.2.5:
     dependencies:
       glob: 7.2.3
-      lodash: 4.17.21
+      lodash: 4.17.23
       scss-tokenizer: 0.2.3
       yargs: 13.3.2
     optional: true
@@ -8488,7 +8492,7 @@ snapshots:
     dependencies:
       inherits: 2.0.4
       safe-buffer: 5.2.1
-      to-buffer: 1.2.1
+      to-buffer: 1.2.2
 
   shallow-clone@3.0.1:
     dependencies:
@@ -8600,7 +8604,7 @@ snapshots:
   spdx-correct@3.2.0:
     dependencies:
       spdx-expression-parse: 3.0.1
-      spdx-license-ids: 3.0.21
+      spdx-license-ids: 3.0.22
     optional: true
 
   spdx-exceptions@2.5.0:
@@ -8609,10 +8613,10 @@ snapshots:
   spdx-expression-parse@3.0.1:
     dependencies:
       spdx-exceptions: 2.5.0
-      spdx-license-ids: 3.0.21
+      spdx-license-ids: 3.0.22
     optional: true
 
-  spdx-license-ids@3.0.21:
+  spdx-license-ids@3.0.22:
     optional: true
 
   speakingurl@14.0.1: {}
@@ -8869,7 +8873,7 @@ snapshots:
 
   to-arraybuffer@1.0.1: {}
 
-  to-buffer@1.2.1:
+  to-buffer@1.2.2:
     dependencies:
       isarray: 2.0.5
       safe-buffer: 5.2.1
@@ -9053,7 +9057,7 @@ snapshots:
   url@0.11.4:
     dependencies:
       punycode: 1.4.1
-      qs: 6.14.0
+      qs: 6.14.1
 
   use@3.1.1: {}
 
@@ -9258,7 +9262,7 @@ snapshots:
 
   wide-align@1.1.5:
     dependencies:
-      string-width: 4.2.3
+      string-width: 1.0.2
     optional: true
 
   word-wrap@1.2.5: {}

src/components/ChilledMusic.vue

@@ -1,13 +1,11 @@
 <template>
   <div class="chilled-music">
-    <transition name="fade">
+    <img
-      <img
+      v-show="!ready"
-        v-show="!ready"
+      class="loader"
-        class="loader"
+      src="@/assets/loader.svg"
-        src="@/assets/loader.svg"
+      :alt="$t('music.loading')"
-        :alt="$t('music.loading')"
+    />
-      />
-    </transition>
     <section v-show="false">
       <div
         class="chilled-music plyr__video-embed"

src/components/IntervalInput.vue

@@ -14,9 +14,9 @@
       </transition>
     </div>
     <h3 v-if="isMinuteSession">
-      {{ $t('minuteSession', { interval }, interval) }}
+      {{ $t('interval.minuteSession', { interval }, interval) }}
     </h3>
-    <h3 v-else>{{ $t('secondSession') }}</h3>
+    <h3 v-else>{{ $t('interval.secondSession') }}</h3>
     <div class="button-container plus">
       <transition name="fade" mode="out-in">
         <button v-if="editable" key="plus-button" class="spacer" @click="plus">
@@ -91,16 +91,3 @@ $button-size: 50px;
   }
 }
 </style>
-
-<i18n>
-{
-  "en": {
-    "minuteSession": "{interval} minute session",
-    "secondSession": "30 second session"
-  },
-  "fr": {
-    "minuteSession": "session de {interval} minute | session de {interval} minutes",
-    "secondSession": "session de 30 secondes"
-  }
-}
-</i18n>

src/components/SpotifyMusic.vue

@@ -1,13 +1,11 @@
 <template>
   <div class="spotify-music">
-    <transition name="fade">
+    <img
-      <img
+      v-show="!ready"
-        v-show="!ready"
+      class="loader"
-        class="loader"
+      src="@/assets/loader.svg"
-        src="@/assets/loader.svg"
+      :alt="$t('music.loading')"
-        :alt="$t('music.loading')"
+    />
-      />
-    </transition>
   </div>
 </template>
 

src/components/ZoneMusic.vue

@@ -5,7 +5,7 @@
         <span
           class="focus"
           :class="{ selected: !hasMusic, disabled: hasMusic }"
-          v-t="'focus'"
+          v-t="'music.focus'"
         ></span>
         <input
           type="checkbox"
@@ -19,7 +19,7 @@
           class="chill"
           :class="{ selected: hasMusic, disabled: !hasMusic }"
         >
-          <span v-t="'chill'"></span>
+          <span v-t="'music.chill'"></span>
           <SpotifyMusic
             v-if="hasSpotify"
             :play="play && hasMusic"
@@ -149,7 +149,7 @@ label[data-pm-holder] {
   margin-bottom: 0;
 }
 .disabled {
-  color: desaturate($color, 70%);
+  color: $color-desaturated;
 }
 
 p {
@@ -173,16 +173,3 @@ button {
   font-style: italic;
 }
 </style>
-
-<i18n>
-{
-  "en": {
-    "focus": "focus",
-    "chill": "chill"
-  },
-  "fr": {
-    "focus": "concentré",
-    "chill": "détendu"
-  }
-}
-</i18n>

src/locales/en.json

@@ -13,6 +13,14 @@
     "loading": "loading...",
     "useSpotify": "For a pure experience, connect to",
     "nowPlaying": "Now playing:",
-    "codeAndChill": "Code and chill, chill and code..."
+    "codeAndChill": "Code and chill, chill and code...",
+    "focus": "Focus",
+    "chill": "Chill"
+  },
+  "interval": {
+    "minuteSession": "{interval} minute|{interval} minutes",
+    "secondSession": "30 seconds",
+    "plus": "Plus",
+    "minus": "Minus"
   }
 }

src/locales/fr.json

@@ -13,6 +13,14 @@
     "loading": "loading...",
     "useSpotify": "Pour une meilleure expérience, utilisez",
     "nowPlaying": "Lecture en cours :",
-    "codeAndChill": "Codez, zen..."
+    "codeAndChill": "Codez, zen...",
+    "focus": "Concentration",
+    "chill": "Détente"
+  },
+  "interval": {
+    "minuteSession": "{interval} minute|{interval} minutes",
+    "secondSession": "30 secondes",
+    "plus": "Plus",
+    "minus": "Moins"
   }
 }

src/styles/app.scss

@@ -1,24 +1,25 @@
-@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Major+Mono+Display&display=swap');
+@use './variables' as vars;
+@use './plume';
+@use 'sass:color';
 
-@import './variables';
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond&family=Major+Mono+Display&display=swap');
-@import './plume';
 
 body {
   text-align: center;
-  font-family: $font-family;
+  font-family: vars.$font-family;
   background-color: #2c3a47;
-  color: $color;
+  color: vars.$color;
   margin: 0;
   user-select: none;
 }
 
 button {
-  font-family: $font-family;
+  font-family: vars.$font-family;
   border: none;
   padding: 1rem;
   text-decoration: none;
-  background: $color;
+  background: vars.$color;
-  color: $bgcolor;
+  color: vars.$bgcolor;
   cursor: pointer;
   transition: background 250ms ease-in-out, transform 150ms ease;
   border-radius: 0.5rem;
@@ -26,7 +27,7 @@ button {
 
 button:hover,
 button:focus {
-  background: darken($color, 15);
+  background: color.adjust(vars.$color, $lightness: -15%);
 }
 
 button:active {
@@ -56,6 +57,7 @@ a {
 .fade-leave-active {
   transition: opacity 0.25s ease-out;
 }
+
 .fade-enter,
 .fade-leave-to {
   opacity: 0;
@@ -65,6 +67,7 @@ a {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }

src/styles/variables.scss

@@ -1,8 +1,13 @@
+@use 'sass:color';
+
 $color: #f8efba;
 $bgcolor: #2c3a47;
 $font-family: 'Major Mono Display', monospace;
 $serif-font-family: 'Cormorant Garamond', serif;
 
+// Fonction utilitaire pour remplacer desaturate()
+$color-desaturated: color.adjust($color, $saturation: -70%);
+
 :root {
   --pm-app-surface-color: #{#2c3a47};
   --pm-primary-color: #{$color};

src/views/Home.vue

@@ -41,12 +41,12 @@
         <img src="@/assets/stop.svg" alt="stop" width="50px" height="50px" />
       </button>
     </div>
-    <ZoneMusic
+    <!-- <ZoneMusic
       class="music"
       :play="timeState === 'started'"
       @play="start"
       @pause="pause"
-    />
+    /> -->
     <footer v-if="false">
       Made by
       <a