From afb20fe75f66f308a562edbffc82dce54c8a6b9d Mon Sep 17 00:00:00 2001
From: valere <dev@valerebron.com>
Date: Fri, 26 Dec 2025 19:27:33 +0100
Subject: [PATCH] bucket + card sharer

---
 app/app.vue                                   |   4 -
 app/components/Bucket.vue                     |  99 +++---
 app/components/Card.vue                       | 262 ++++++++++------
 app/components/Platine.vue                    | 181 +++--------
 app/components/PlayButton.vue                 |  29 +-
 app/components/deck/Playlist.vue              |  36 ++-
 .../{SearchModal.vue => ui/ModalSearch.vue}   |   0
 app/components/ui/ModalSharer.vue             | 127 ++++++++
 app/layouts/default.vue                       |  18 +-
 app/pages/boxes.vue                           |  27 --
 app/pages/card/[id].vue                       | 202 +++++++++++++
 app/pages/index.vue                           |  27 +-
 app/pages/newsletter.vue                      |  14 -
 app/pages/playground.vue                      | 221 --------------
 app/pages/story/holo.vue                      |   3 +
 app/pages/story/index.vue                     |  46 +++
 app/pages/{ => story}/mix.vue                 |   0
 app/pages/story/test.vue                      |   4 +
 app/plugins/01.atropos.ts                     |   9 -
 app/plugins/body-class.ts                     |  52 ++++
 ....client.ts => keyboard.shortcut.client.ts} |   2 +-
 app/store/card.ts                             |  91 +++++-
 app/store/platine.ts                          | 169 +++++++++++
 app/store/player.ts                           | 285 ++++++++----------
 app/store/ui.ts                               |   7 +-
 server/api/tracks/[id].ts                     |  82 +++++
 26 files changed, 1248 insertions(+), 749 deletions(-)
 rename app/components/{SearchModal.vue => ui/ModalSearch.vue} (100%)
 create mode 100644 app/components/ui/ModalSharer.vue
 delete mode 100644 app/pages/boxes.vue
 create mode 100644 app/pages/card/[id].vue
 delete mode 100644 app/pages/newsletter.vue
 delete mode 100644 app/pages/playground.vue
 create mode 100644 app/pages/story/holo.vue
 create mode 100644 app/pages/story/index.vue
 rename app/pages/{ => story}/mix.vue (100%)
 create mode 100644 app/pages/story/test.vue
 delete mode 100644 app/plugins/01.atropos.ts
 create mode 100644 app/plugins/body-class.ts
 rename app/plugins/{shortcut.client.ts => keyboard.shortcut.client.ts} (98%)
 create mode 100644 app/store/platine.ts
 create mode 100644 server/api/tracks/[id].ts

diff --git a/app/app.vue b/app/app.vue
index 3c83e2c..418da9e 100644
--- a/app/app.vue
+++ b/app/app.vue
@@ -75,10 +75,6 @@ input[type='email'] {
   @apply bg-slate-900 text-esyellow;
 }
 
-* {
-  user-select: none;
-}
-
 img {
   user-drag: none;
   user-select: none;
diff --git a/app/components/Bucket.vue b/app/components/Bucket.vue
index 6a25358..e468658 100644
--- a/app/components/Bucket.vue
+++ b/app/components/Bucket.vue
@@ -4,22 +4,32 @@
     <div v-if="tracks.length === 0" class="bucket-empty">
       Drop cards here
     </div>
-    <draggable v-else v-model="tracks" item-key="id" class="bucket-cards" @start="onDragStart" @end="onDragEnd"
-      :touch-start-threshold="50">
+    <draggable v-else v-model="tracks" item-key="id" class="bucket-cards" @start="handleDragStart" @end="handleDragEnd"
+      :touch-start-threshold="50" :component-data="{
+        tag: 'div',
+        type: 'transition-group',
+        name: 'list'
+      }">
       <template #item="{ element: track }">
-        <card :track="track" tabindex="0" is-face-up class="bucket-card" @click="flipCard(track)" />
+        <div class="bucket-card-wrapper">
+          <card :track="track" tabindex="0" is-face-up class="bucket-card"
+            @card-click="playerStore.playPlaylistTrack(track)" />
+        </div>
       </template>
     </draggable>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, watch, defineEmits, onMounted } from 'vue'
+import { ref, defineEmits, onMounted } from 'vue'
 import draggable from 'vuedraggable'
-import { useDataStore } from '~/store/data'
+import { useCardStore } from '~/store/card'
+import { usePlayerStore } from '~/store/player'
+
 
 const emit = defineEmits<{
   (e: 'card-dropped', track: any): void
+  (e: 'update:modelValue', value: any[]): void
 }>()
 
 const props = defineProps<{
@@ -27,28 +37,40 @@ const props = defineProps<{
   boxId?: string
 }>()
 
-const dataStore = useDataStore()
+const cardStore = useCardStore()
+const playerStore = usePlayerStore()
 const isDragOver = ref(false)
 const drag = ref(false)
-const tracks = ref<any[]>(props.modelValue || [])
 const bucket = ref()
 
-watch(() => props.modelValue, (newValue) => {
-  if (newValue) {
-    tracks.value = [...newValue]
+// Utilisation du bucket du store comme source de vérité
+const tracks = computed({
+  get: () => cardStore.bucket,
+  set: (value) => {
+    // Update the store when the order changes
+    cardStore.updateBucketOrder(value)
   }
 })
 
-if (props.boxId) {
-  onMounted(async () => {
-    await dataStore.loadData()
-    if (props.boxId) {
-      tracks.value = dataStore.getTracksByboxId(props.boxId)
-    }
-  })
-}
+// Charger les données du localStorage au montage
+onMounted(() => {
+  cardStore.loadBucketFromLocalStorage()
+})
 
 // Gestion du drag and drop desktop
+const handleDragStart = (event: { item: HTMLElement }) => {
+  drag.value = true
+}
+
+const handleDragEnd = (event: { item: HTMLElement; newIndex: number; oldIndex: number }) => {
+  drag.value = false
+  isDragOver.value = false
+  // Update the store with the new order if the position changed
+  if (event.newIndex !== event.oldIndex) {
+    // The store will handle the reordering automatically through the v-model binding
+  }
+}
+
 const onDragEnter = (e: DragEvent) => {
   e.preventDefault()
   isDragOver.value = true
@@ -63,34 +85,19 @@ const onDragLeave = () => {
   isDragOver.value = false
 }
 
-const onDragStart = () => {
-  drag.value = true
-}
-
-const onDragEnd = () => {
-  drag.value = false
-  isDragOver.value = false
-}
-
 const onDrop = (e: DragEvent) => {
   isDragOver.value = false
   const cardData = e.dataTransfer?.getData('application/json')
   if (cardData) {
     try {
       const track = JSON.parse(cardData)
-      if (!tracks.value.some(t => t.id === track.id)) {
-        tracks.value.push(track)
-      }
+      cardStore.addToBucket(track)
     } catch (e) {
       console.error('Erreur lors du traitement de la carte déposée', e)
     }
   }
 }
 
-const flipCard = (track: any) => {
-  track.isFaceUp = !track.isFaceUp
-}
-
 onMounted(() => {
   // Écouter aussi les événements tactiles personnalisés
   bucket.value?.addEventListener('card-dropped-touch', (e: CustomEvent) => {
@@ -99,14 +106,12 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
+<style>
 .bucket {
   min-height: 200px;
-  border: 2px dashed #ccc;
   border-radius: 8px;
   padding: 1rem;
   transition: all 0.3s ease;
-  background-color: rgba(255, 255, 255, 0.1);
   touch-action: none;
 }
 
@@ -125,9 +130,8 @@ onMounted(() => {
 }
 
 .bucket-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-  gap: 1rem;
+  display: flex;
+  justify-content: center;
   width: 100%;
 }
 
@@ -145,4 +149,19 @@ onMounted(() => {
 .bucket-card:active {
   opacity: 0.7;
 }
+
+.bucket-card-wrapper {
+  width: 70px;
+  transition: width 0.3s ease;
+}
+
+.bucket:hover,
+.card-dragging {
+  border: 2px dashed #ccc;
+  background-color: rgba(255, 255, 255, 0.4);
+
+  .bucket-card-wrapper {
+    width: 280px;
+  }
+}
 </style>
diff --git a/app/components/Card.vue b/app/components/Card.vue
index 301ea08..2385265 100644
--- a/app/components/Card.vue
+++ b/app/components/Card.vue
@@ -1,17 +1,19 @@
 <template>
-  <article :role="props.role" @click.stop="cardClick" @keydown.enter.stop="cardClick" draggable="true"
-    @dragstart="dragStart" @dragend="dragEnd" @drag="dragMove" @keydown.space.prevent.stop="cardClick"
-    @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd" class="card" :class="[
-      isFaceUp ? 'face-up' : 'face-down',
-      { 'current-track': playerStore.currentTrack?.id === track.id },
-      { 'is-dragging': isDragging }
-    ]">
+  <article v-bind="attrs" :role="props.role" :draggable="isFaceUp" :class="[
+    'card cursor-pointer',
+    isFaceUp ? 'face-up' : 'face-down',
+    { 'current-track': playerStore.currentTrack?.id === track.id },
+    { 'is-dragging': isDragging }
+  ]" :tabindex="props.tabindex" :aria-disabled="false" @click.stop="handleClick" @keydown.enter.stop="handleClick"
+    @keydown.space.prevent.stop="handleClick" @dragstart="handleDragStart" @dragend="handleDragEnd"
+    @drag="handleDragMove" @touchstart.passive="!isFaceUp" @touchmove.passive="!isFaceUp">
     <div class="flip-inner" ref="cardElement">
       <!-- Face-Up -->
       <main
         class="face-up backdrop-blur-sm border-2 z-10 card w-56 h-80 p-3 hover:shadow-xl hover:scale-110 transition-all rounded-2xl shadow-lg flex flex-col overflow-hidden">
 
-        <div v-if="isPlaylistTrack" class="flex items-center justify-center size-7 absolute top-7 left-7">
+        <div v-if="isPlaylistTrack" class="flex items-center justify-center size-7 absolute top-7 right-7"
+          @click.stop="clickCardSymbol">
           <div class="suit text-7xl absolute"
             :class="[isRedCard ? 'text-red-600' : 'text-slate-800', props.track.card?.suit]">
             <img draggable="false" :src="`/${props.track.card?.suit}.svg`" />
@@ -43,16 +45,20 @@
           <h2 class="select-text text-sm text-neutral-500 first-letter:uppercase truncate">
             {{ props.track.title || 'title' }}
           </h2>
-          <p v-if="isPlaylistTrack" class="select-text text-base text-neutral-800 font-bold capitalize truncate">
-            {{ props.track.artist.name || 'artist' }}
+          <p v-if="isPlaylistTrack && track.artist && typeof track.artist === 'object'"
+            class="select-text text-base text-neutral-800 font-bold capitalize truncate">
+            {{ track.artist.name || 'artist' }}
+          </p>
+          <p v-else-if="isPlaylistTrack" class="select-text text-base text-neutral-800 font-bold capitalize truncate">
+            {{ typeof track.artist === 'string' ? track.artist : 'artist' }}
           </p>
         </div>
       </main>
 
       <!-- Face-Down -->
       <footer
-        class="face-down backdrop-blur-sm z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
-        <figure class="h-full flex text-center rounded-xl justify-center cursor-pointer"
+        class="face-down backdrop-blur-sm z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden select-none">
+        <figure class="h-full flex text-center rounded-xl justify-center items-center"
           :style="{ backgroundColor: cardColor }">
           <playButton :objectToPlay="track" />
           <img draggable="false" src="/face-down.svg" />
@@ -90,26 +96,105 @@
       </div>
     </div>
   </Teleport>
+
+  <!-- Modal de partage -->
+  <ModalSharer v-if="showModalSharer" ref="modalSharer" />
 </template>
 
 <script setup lang="ts">
 import type { Track } from '~~/types/types'
 import { usePlayerStore } from '~/store/player'
-import { useDataStore } from '~/store/data';
+import { useDataStore } from '~/store/data'
+import { useNuxtApp } from '#app'
+import ModalSharer from '~/components/ui/ModalSharer.vue'
 
 const props = withDefaults(defineProps<{
-  track?: Track;
+  track: Track;
   isFaceUp?: boolean;
   role?: string;
+  tabindex?: string | number;
+  'onUpdate:isFaceUp'?: (value: boolean) => void;
 }>(), {
-  track: () => {
-    const dataStore = useDataStore();
-    return dataStore.getRandomPlaylistTrack() || {} as Track;
-  },
   isFaceUp: true,
-  role: 'button'
+  role: 'button',
+  tabindex: '0'
 })
 
+// Use useAttrs to get all other attributes
+const attrs = useAttrs()
+
+const modalSharer = ref<InstanceType<typeof ModalSharer> | null>(null)
+const showModalSharer = ref(false)
+
+const emit = defineEmits<{
+  (e: 'update:isFaceUp', value: boolean): void;
+  (e: 'cardClick', track: Track): void;
+  (e: 'clickCardSymbol', track: Track): void;
+  (e: 'dragstart', event: DragEvent): void;
+  (e: 'dragend', event: DragEvent): void;
+  (e: 'drag', event: DragEvent): void;
+  (e: 'click', event: MouseEvent): void;
+}>()
+
+// Handle click events (mouse and keyboard)
+const handleClick = (event: MouseEvent | KeyboardEvent) => {
+  if (!isDragging.value && !hasMovedDuringPress.value) {
+    emit('cardClick', props.track);
+    emit('click', event as MouseEvent);
+  }
+  hasMovedDuringPress.value = false;
+}
+
+const clickCardSymbol = (event: MouseEvent) => {
+  event.stopPropagation();
+
+  // Afficher la modale
+  showModalSharer.value = true;
+
+  // Donner le focus à la modale après le rendu
+  nextTick(() => {
+    if (modalSharer.value) {
+      modalSharer.value.open(props.track);
+    }
+  });
+
+  emit('clickCardSymbol', props.track);
+}
+
+// Handle drag start with proper event emission
+const handleDragStart = (event: DragEvent) => {
+  if (!props.isFaceUp) {
+    event.preventDefault();
+    return;
+  }
+  const { $bodyClass } = useNuxtApp()
+  $bodyClass.add('card-dragging')
+  dragStart(event);
+  emit('dragstart', event);
+}
+
+// Handle drag end with proper event emission
+const handleDragEnd = (event: DragEvent) => {
+  if (!props.isFaceUp) {
+    event.preventDefault();
+    return;
+  }
+  const { $bodyClass } = useNuxtApp()
+  $bodyClass.remove('card-dragging')
+  dragEnd(event);
+  emit('dragend', event);
+}
+
+// Handle drag move with proper event emission
+const handleDragMove = (event: DragEvent) => {
+  if (!props.isFaceUp) {
+    event.preventDefault();
+    return;
+  }
+  dragMove(event);
+  emit('drag', event);
+}
+
 const playerStore = usePlayerStore()
 const isManifesto = computed(() => props.track.boxId.startsWith('ES00'))
 const isOrder = computed(() => props.track.order && !isManifesto)
@@ -130,13 +215,6 @@ const longPressTimer = ref<number | null>(null)
 const LONG_PRESS_DURATION = 200 // ms
 const hasMovedDuringPress = ref(false)
 
-const cardClick = () => {
-  if (!isDragging.value && !hasMovedDuringPress.value) {
-    console.log('card click')
-    playerStore.playTrack(props.track)
-  }
-  hasMovedDuringPress.value = false
-}
 
 // Drag desktop - utilise maintenant ghostElement
 const dragStart = (event: DragEvent) => {
@@ -184,42 +262,46 @@ const dragEnd = (event: DragEvent) => {
 
 // Touch events
 const touchStart = (event: TouchEvent) => {
-  const touch = event.touches[0]
-  touchStartPos.value = { x: touch.clientX, y: touch.clientY }
-  hasMovedDuringPress.value = false
+  const touch = event.touches[0];
+  if (!touch) return;
+
+  touchStartPos.value = { x: touch.clientX, y: touch.clientY };
+  hasMovedDuringPress.value = false;
 
   // Démarrer un timer pour le long press
   longPressTimer.value = window.setTimeout(() => {
-    startTouchDrag(touch)
-  }, LONG_PRESS_DURATION)
+    startTouchDrag(touch);
+  }, LONG_PRESS_DURATION);
 }
 
 const startTouchDrag = (touch: Touch) => {
-  isDragging.value = true
+  if (!touch) return;
+
+  isDragging.value = true;
   touchClone.value = {
     x: touch.clientX,
     y: touch.clientY
-  }
+  };
 
   // Vibration feedback si disponible
   if (navigator.vibrate) {
-    navigator.vibrate(50)
+    navigator.vibrate(50);
   }
 }
 
 const touchMove = (event: TouchEvent) => {
-  if (longPressTimer.value) {
-    // Annuler le long press si l'utilisateur bouge trop
-    const touch = event.touches[0]
-    const dx = touch.clientX - (touchStartPos.value?.x || 0)
-    const dy = touch.clientY - (touchStartPos.value?.y || 0)
-    const distance = Math.sqrt(dx * dx + dy * dy)
+  const touch = event.touches[0];
+  if (!touch || !longPressTimer.value) return;
 
-    if (distance > 10) {
-      clearTimeout(longPressTimer.value)
-      longPressTimer.value = null
-      hasMovedDuringPress.value = true
-    }
+  // Annuler le long press si l'utilisateur bouge trop
+  const dx = touch.clientX - (touchStartPos.value?.x || 0);
+  const dy = touch.clientY - (touchStartPos.value?.y || 0);
+  const distance = Math.sqrt(dx * dx + dy * dy);
+
+  if (distance > 10) { // Seuil de tolérance pour un tap
+    clearTimeout(longPressTimer.value)
+    longPressTimer.value = null
+    hasMovedDuringPress.value = true
   }
 
   if (isDragging.value && touchClone.value) {
@@ -236,63 +318,51 @@ const touchMove = (event: TouchEvent) => {
 }
 
 const touchEnd = (event: TouchEvent) => {
+  // Annuler le timer de long press
   if (longPressTimer.value) {
-    clearTimeout(longPressTimer.value)
-    longPressTimer.value = null
+    clearTimeout(longPressTimer.value);
+    longPressTimer.value = null;
   }
 
-  if (isDragging.value) {
-    event.preventDefault()
-    const touch = event.changedTouches[0]
+  // Vérifier si c'était un tap simple (pas de déplacement)
+  if (!hasMovedDuringPress.value && touchStartPos.value) {
+    const touch = event.changedTouches[0];
+    if (touch) {
+      const dx = touch.clientX - touchStartPos.value.x;
+      const dy = touch.clientY - touchStartPos.value.y;
+      const distance = Math.sqrt(dx * dx + dy * dy);
 
-    // Trouver l'élément de drop
-    const dropTarget = document.elementFromPoint(touch.clientX, touch.clientY)
-    const bucket = dropTarget?.closest('.bucket')
-
-    // Nettoyer les classes de drop target
-    document.querySelectorAll('.bucket').forEach(b => {
-      b.classList.remove('drop-target-active')
-    })
-
-    if (bucket) {
-      // Émettre un événement personnalisé pour le bucket
-      const dropEvent = new CustomEvent('card-dropped-touch', {
-        detail: props.track,
-        bubbles: true
-      })
-      bucket.dispatchEvent(dropEvent)
-
-      // Vibration de confirmation
-      if (navigator.vibrate) {
-        navigator.vibrate(100)
-      }
-
-      // Supprimer la carte
-      if (instance?.vnode?.el?.parentNode) {
-        instance.vnode.el.parentNode.removeChild(instance.vnode.el);
-        const parent = instance.parent;
-        if (parent?.update) {
-          parent.update();
-        }
+      if (distance < 10) { // Seuil de tolérance pour un tap
+        handleClick(new MouseEvent('click'));
       }
     }
-
-    isDragging.value = false
-    touchClone.value = null
   }
+
+  // Réinitialiser l'état de glisser-déposer
+  if (isDragging.value) {
+    // Vérifier si on est au-dessus d'une cible de dépôt
+    const touch = event.changedTouches[0];
+    if (touch) {
+      checkDropTarget(touch.clientX, touch.clientY);
+    }
+  }
+
+  // Nettoyer
+  isDragging.value = false;
+  touchClone.value = null;
+  touchStartPos.value = null;
+  hasMovedDuringPress.value = false;
 }
 
-const checkDropTarget = (x: number, y: number) => {
-  const element = document.elementFromPoint(x, y)
-  const bucket = element?.closest('.bucket')
-
-  if (bucket) {
-    bucket.classList.add('drop-target-active')
-  } else {
-    document.querySelectorAll('.bucket').forEach(b => {
-      b.classList.remove('drop-target-active')
-    })
+const checkDropTarget = (x: number, y: number): HTMLElement | null => {
+  const element = document.elementFromPoint(x, y);
+  if (element) {
+    const dropZone = element.closest('[data-drop-zone]');
+    if (dropZone) {
+      return dropZone as HTMLElement;
+    }
   }
+  return null;
 }
 
 // Cleanup
@@ -369,9 +439,10 @@ onUnmounted(() => {
     }
   }
 
-  &.current-track,
-  &:focus {
+  &:focus,
+  &.current-track {
     @apply z-50 scale-110;
+    outline: none;
 
     .face-up {
       @apply shadow-2xl;
@@ -379,7 +450,10 @@ onUnmounted(() => {
         box-shadow 0.6s,
         transform 0.6s;
     }
+  }
 
+  &:focus,
+  &.current-track {
     .play-button {
       @apply opacity-100;
     }
diff --git a/app/components/Platine.vue b/app/components/Platine.vue
index 2d1e464..92bb84c 100644
--- a/app/components/Platine.vue
+++ b/app/components/Platine.vue
@@ -1,100 +1,38 @@
 <template>
-  <div class="platine" :class="{ 'drag-over': isDragOver }" @dragenter.prevent="onDragEnter"
+  <div class="platine pointer-events-none" :class="{ 'drag-over': isDragOver }" @dragenter.prevent="onDragEnter"
     @dragover.prevent="onDragOver" @dragleave="onDragLeave" @drop.prevent="onDrop">
-    <card v-if="currentTrack" :track="currentTrack" />
-    <div class="disc fixed" ref="discRef" :style="'background-image: url(/card-dock.svg)'" id="disc">
+    <div class="disc pointer-events-auto fixed" ref="discRef" :style="'background-image: url(/card-dock.svg)'"
+      id="disc">
       <div
-        class="bobine bg-slate-800 bg-opacity-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full"
-        :style="{ height: progressPercentage + '%', width: progressPercentage + '%' }">
-      </div>
+        class="bobine bg-slate-900 bg-opacity-50 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rounded-full"
+        :style="{ height: platineStore.progressPercentage + '%', width: platineStore.progressPercentage + '%' }"></div>
+
       <div class="disc-label rounded-full bg-cover bg-center">
         <img src="/favicon.svg" class="size-1/3">
-        <div v-if="isLoadingTrack" class="loading-indicator">
+        <div v-if="platineStore.isLoadingTrack" class="loading-indicator">
           <div class="spinner"></div>
         </div>
       </div>
-      <div v-if="!isLoadingTrack" class="absolute top-1/2 right-8 size-1/12 rounded-full bg-esyellow">
+      <div class="w-full h-1/5 flex justify-center items-center text-8xl text-white absolute pointer-events-none">
+        {{ platineStore.currentTrack?.title }}
+        <br>
+        {{ platineStore.currentTrack?.artist.name }}
+      </div>
+      <div v-if="!platineStore.isLoadingTrack" class="absolute top-1/2 right-8 size-1/12 rounded-full bg-esyellow">
       </div>
     </div>
-    <button class="rewind absolute left-0 bottom-0" @click="toggleMute">mute</button>
-    <button class="power absolute right-0 bottom-0" :class="{ 'is-active': isPlaying }"
-      @click="togglePlay">power</button>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from 'vue'
-import Disc from '@/platine-tools/disc'
-import Sampler from '@/platine-tools/sampler'
+import { ref, onMounted, onUnmounted, watch } from 'vue'
+import { usePlatineStore } from '~/store/platine'
 import type { Track } from '~~/types/types'
 
-const props = withDefaults(defineProps<{ track?: Track }>(), {})
+const props = defineProps<{ track?: Track }>()
+const platineStore = usePlatineStore()
 const discRef = ref<HTMLElement>()
-const currentTurns = ref(0)
-const totalTurns = ref(0)
-const progressPercentage = ref(0)
-const drag = ref(false)
 const isDragOver = ref(false)
-const isFirstDrag = ref(true)
-const isLoadingTrack = ref(false)
-const isPlaying = ref(false)
-const coverUrl = computed(() => currentTrack.value?.coverId || '/card-dock.svg')
-
-let disc: Disc | null = null
-let sampler: Sampler | null = null
-
-const currentTrack = ref()
-
-const updateTurns = (disc: Disc) => {
-  currentTurns.value = disc.secondsPlayed * 0.75 // 0.75 tours par seconde (RPS)
-  totalTurns.value = (disc as any)._duration * 0.75 // Accès à la propriété _duration privée
-  progressPercentage.value = Math.min(100, (disc.secondsPlayed / (disc as any)._duration) * 100)
-};
-
-const startPlayback = () => {
-  if (!disc || !sampler || !currentTrack.value || isPlaying.value) return
-
-  isPlaying.value = true
-  sampler.play(disc.secondsPlayed)
-  disc.powerOn()
-}
-
-const togglePlay = () => {
-  if (!disc || !sampler || !currentTrack.value) return
-
-  isPlaying.value = !isPlaying.value
-
-  if (isPlaying.value) {
-    startPlayback()
-  } else {
-    disc.powerOff()
-  }
-};
-
-const toggleMute = () => {
-  if (!sampler) return
-
-  sampler.mute()
-}
-
-const loadTrack = async (track: Track) => {
-  if (!sampler || !track) return
-
-  currentTrack.value = track
-  isLoadingTrack.value = true
-  try {
-    await sampler.loadTrack(currentTrack.value.url)
-    if (disc) {
-      disc.setDuration(sampler.duration)
-      updateTurns(disc)
-      sampler.play(0)
-      disc.secondsPlayed = 0
-      disc.powerOn()
-    }
-  } finally {
-    isLoadingTrack.value = false
-  }
-}
 
 // Gestion du drag and drop
 const onDragEnter = (e: DragEvent) => {
@@ -111,80 +49,41 @@ const onDragLeave = () => {
   isDragOver.value = false
 }
 
-const onDragStart = () => {
-  drag.value = true
-}
-
-const onDragEnd = () => {
-  drag.value = false
-  isDragOver.value = false
-}
-
 const onDrop = (e: DragEvent) => {
   isDragOver.value = false
   const cardData = e.dataTransfer?.getData('application/json')
+
   if (cardData) {
     try {
       const newTrack = JSON.parse(cardData)
       if (newTrack && newTrack.url) {
-        loadTrack(newTrack)
-        disc?.powerOn()
+        platineStore.loadTrack(newTrack)
       }
     } catch (error) {
       console.error('Erreur lors du traitement de la carte déposée', error)
     }
   }
 }
-onMounted(async () => {
-  disc = new Disc(discRef.value!)
-  sampler = new Sampler()
 
-  disc.callbacks.onStop = () => {
-    sampler?.pause()
-  }
-
-  disc.callbacks.onDragStart = () => {
-    if (isFirstDrag.value) {
-      isFirstDrag.value = false
-      isPlaying.value = true
-      if (sampler && disc) {
-        sampler.play(disc.secondsPlayed)
-        disc.powerOn()
-      }
-    }
-  }
-
-  disc.callbacks.onDragEnded = () => {
-    if (!isPlaying.value) {
-      return
-    }
-    sampler?.play(disc?.secondsPlayed)
-  }
-
-  disc.callbacks.onLoop = ({ playbackSpeed, isReversed, secondsPlayed }) => {
-    sampler?.updateSpeed(playbackSpeed, isReversed, secondsPlayed);
-    if (disc) {
-      updateTurns(disc);
-    }
-  }
-
-})
-
-watch(() => props.track, (propTrack) => {
-  if (propTrack) {
-    loadTrack(propTrack)
+// Initialisation du lecteur
+onMounted(() => {
+  if (discRef.value) {
+    platineStore.initPlatine(discRef.value)
   }
 })
 
+// Nettoyage
 onUnmounted(() => {
-  if (disc) {
-    disc.stop();
-    disc.powerOff();
+  platineStore.cleanup()
+})
+
+// Surveillance des changements de piste
+watch(() => props.track, (newTrack) => {
+  if (newTrack) {
+    platineStore.loadTrack(newTrack)
   }
-  if (sampler) {
-    sampler.pause();
-  }
-});
+})
+
 </script>
 
 <style lang="scss">
@@ -198,6 +97,7 @@ onUnmounted(() => {
   .card {
     position: absolute !important;
     z-index: 99;
+    top: -20%;
     left: 50%;
     bottom: 0;
     transform: translate(-50%, 50%);
@@ -307,4 +207,17 @@ onUnmounted(() => {
     transform: rotate(360deg);
   }
 }
+
+.bobine {
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    opacity: 0.7;
+  }
+}
 </style>
diff --git a/app/components/PlayButton.vue b/app/components/PlayButton.vue
index f169d6d..db017bb 100644
--- a/app/components/PlayButton.vue
+++ b/app/components/PlayButton.vue
@@ -1,6 +1,6 @@
 <template>
-  <button
-    class="play-button rounded-full size-24 flex items-center justify-center text-esyellow backdrop-blur-sm bg-black/25 transition-all duration-200 ease-in-out transform active:scale-90 scale-110 text-4xl font-bold"
+  <button tabindex="-1"
+    class="play-button pointer-events-none rounded-full size-24 flex items-center justify-center text-esyellow backdrop-blur-sm bg-black/25 transition-all duration-200 ease-in-out transform active:scale-90 scale-110 text-4xl font-bold"
     :class="{ loading: isLoading }" :disabled="isLoading">
     <template v-if="isLoading">
       <img src="/loader.svg" alt="Chargement" class="size-16" />
@@ -12,40 +12,25 @@
 </template>
 
 <script setup lang="ts">
-import { usePlayerStore } from '~/store/player'
+import { usePlatineStore } from '~/store/platine'
 import type { Box, Track } from '~/../types/types'
 
-const playerStore = usePlayerStore()
+const platineStore = usePlatineStore()
 const props = defineProps<{ objectToPlay: Box | Track }>()
 
-const isCurrentBox = computed(() => {
-  if ('activeSide' in props.objectToPlay) {
-    // Vérifier si la piste courante appartient à cette box
-    if (playerStore.currentTrack?.boxId === props.objectToPlay.id) {
-      // Si c'est une compilation, on vérifie le side actif
-      if (props.objectToPlay.type === 'compilation') {
-        return playerStore.currentTrack.side === props.objectToPlay.activeSide
-      }
-      return true
-    }
-    return false
-  }
-  return false
-})
-
 const isCurrentTrack = computed(() => {
   if (!('activeSide' in props.objectToPlay)) {
-    return playerStore.currentTrack?.id === props.objectToPlay.id
+    return platineStore.currentTrack?.id === props.objectToPlay.id
   }
   return false
 })
 
 const isPlaying = computed(() => {
-  return playerStore.isPlaying && (isCurrentTrack.value || isCurrentBox.value)
+  return platineStore.isPlaying && isCurrentTrack.value
 })
 
 const isLoading = computed(() => {
-  return playerStore.isLoading && (isCurrentTrack.value || isCurrentBox.value)
+  return platineStore.isLoadingTrack && isCurrentTrack.value
 })
 </script>
 
diff --git a/app/components/deck/Playlist.vue b/app/components/deck/Playlist.vue
index 178358a..fe1dade 100644
--- a/app/components/deck/Playlist.vue
+++ b/app/components/deck/Playlist.vue
@@ -1,18 +1,19 @@
 <template>
-  <div class="flex flex-col fixed right-0 top-0 z-50">
+  <div class="flex flex-col fixed right-0 top-0 z-50" :class="props.class">
     <button @click="closeDatBox" v-if="uiStore.isBoxSelected"
       class="px-4 py-2 text-black hover:text-black bg-esyellow transition-colors z-50" aria-label="close the box">
       close
     </button>
   </div>
-  <div class="controls flex justify-center z-50 relative">
+  <div class="controls flex justify-center z-50 relative" v-bind="attrs">
     <SearchInput @search="onSearch" />
     <SelectCardRank @change="onRankChange" />
     <SelectCardSuit @change="onSuitChange" />
   </div>
   <div ref="deck" class="deck flex flex-wrap justify-center gap-4" :class="{ 'pb-36': playerStore.currentTrack }">
     <card v-for="(track, i) in filteredTracks" :key="track.id" :track="track" :tabindex="i"
-      :is-face-up="isCardRevealed(track.id)" />
+      @card-click="playerStore.playPlaylistTrack(track)" :is-face-up="isCardRevealed(track.id)"
+      @click-card-symbol="openCardSharer()" />
   </div>
 </template>
 
@@ -27,10 +28,19 @@ import SelectCardSuit from '~/components/ui/SelectCardSuit.vue'
 import SelectCardRank from '~/components/ui/SelectCardRank.vue'
 import SearchInput from '~/components/ui/SearchInput.vue'
 
-const props = defineProps<{
-  box: Box
+// Define the events this component emits
+const emit = defineEmits<{
+  (e: 'click', event: MouseEvent): void;
 }>()
 
+const props = defineProps<{
+  box: Box;
+  class?: string;
+}>()
+
+// Use useAttrs to get all other attributes
+const attrs = useAttrs()
+
 const cardStore = useCardStore()
 const dataStore = useDataStore()
 const playerStore = usePlayerStore()
@@ -47,12 +57,17 @@ const searchQuery = ref('')
 
 const isCardRevealed = (trackId: number) => {
   // Si une recherche est en cours, révéler automatiquement les cartes correspondantes
-  if (searchQuery.value) return true
+  if (searchQuery.value || (selectedRank.value && selectedSuit.value)) return true
   return cardStore.isCardRevealed(trackId)
 }
 
-const closeDatBox = () => {
+const closeDatBox = (event: MouseEvent) => {
   uiStore.closeBox()
+  emit('click', event)
+}
+
+const openCardSharer = () => {
+  uiStore.openCardSharer()
 }
 
 const onSuitChange = (suit: string) => {
@@ -107,9 +122,4 @@ const applyFilters = () => {
 .deck {
   position: relative;
 }
-
-.docked {
-  position: fixed;
-  bottom: 0;
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/app/components/SearchModal.vue b/app/components/ui/ModalSearch.vue
similarity index 100%
rename from app/components/SearchModal.vue
rename to app/components/ui/ModalSearch.vue
diff --git a/app/components/ui/ModalSharer.vue b/app/components/ui/ModalSharer.vue
new file mode 100644
index 0000000..2b4418e
--- /dev/null
+++ b/app/components/ui/ModalSharer.vue
@@ -0,0 +1,127 @@
+<template>
+  <Teleport to="body">
+    <Transition name="fade" mode="out-in">
+      <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
+        @click.self="close">
+        <div class="bg-white rounded-xl shadow-2xl p-6 w-full max-w-md">
+          <div class="flex justify-between items-center mb-4">
+            <h2 class="text-xl font-bold text-gray-900">Partager cette carte</h2>
+            <button @click="close" class="text-gray-400 hover:text-gray-500">
+              <span class="sr-only">Fermer</span>
+              <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          <div v-if="currentTrack" class="space-y-4">
+            <div class="flex items-center space-x-4 p-3 bg-gray-50 rounded-lg">
+              <img :src="currentTrack.coverId || '/card-dock.svg'" :alt="currentTrack.title"
+                class="w-12 h-12 rounded-md object-cover">
+              <div class="min-w-0">
+                <p class="text-sm font-medium text-gray-900 truncate">{{ currentTrack.title }}</p>
+                <p class="text-sm text-gray-500 truncate">{{ typeof currentTrack.artist === 'object' ?
+                  currentTrack.artist?.name : currentTrack.artist || 'Artiste inconnu' }}</p>
+              </div>
+            </div>
+
+            <div class="space-y-2">
+              <label for="share-link" class="block text-sm font-medium text-gray-700">Lien de partage</label>
+              <div class="flex rounded-md shadow-sm">
+                <input type="text" id="share-link" readonly :value="shareLink"
+                  class="flex-1 min-w-0 block w-full px-3 py-2 rounded-l-md border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+                  @focus="selectText">
+                <button @click="copyToClipboard"
+                  class="inline-flex items-center px-3 py-2 border border-l-0 border-gray-300 bg-gray-50 text-gray-700 text-sm font-medium rounded-r-md hover:bg-gray-100 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
+                    stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                      d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                  </svg>
+                </button>
+              </div>
+            </div>
+
+            <div class="flex justify-end space-x-3 pt-2">
+              <button @click="close"
+                class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+                Fermer
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useUiStore } from '~/store/ui'
+import type { Track } from '~~/types/types'
+
+const uiStore = useUiStore()
+const currentTrack = ref<Track | null>(null)
+
+// Utilisation d'une ref locale pour éviter les réactivités inutiles
+const isOpen = ref(false)
+
+// Mise à jour de l'état uniquement quand nécessaire
+watch(() => uiStore.showCardSharer, (newVal) => {
+  isOpen.value = newVal
+})
+
+const shareLink = computed(() => {
+  if (!currentTrack.value) return ''
+  return `${window.location.origin}/track/${currentTrack.value.id}`
+})
+
+const open = (track: Track) => {
+  currentTrack.value = track
+  isOpen.value = true
+  uiStore.openCardSharer()
+}
+
+const close = () => {
+  isOpen.value = false
+  uiStore.showCardSharer = false
+  // Nettoyage différé pour permettre l'animation
+  setTimeout(() => {
+    if (!isOpen.value) {
+      currentTrack.value = null
+    }
+  }, 300)
+}
+
+const copyToClipboard = async () => {
+  try {
+    await navigator.clipboard.writeText(shareLink.value)
+    // Vous pourriez ajouter un toast ou une notification ici
+    console.log('Lien copié dans le presse-papier')
+  } catch (err) {
+    console.error('Erreur lors de la copie :', err)
+  }
+}
+
+const selectText = (event: Event) => {
+  const input = event.target as HTMLInputElement
+  input.select()
+}
+
+defineExpose({
+  open,
+  close
+})
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
\ No newline at end of file
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 6c5738b..a86315d 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,6 +1,6 @@
 <template>
   <slot />
-  <Bucket @card-dropped="onCardDropped" />
+  <Bucket />
   <Platine />
 </template>
 
@@ -22,11 +22,25 @@ const onCardDropped = (card: Track) => {
 
 .bucket {
   z-index: 70;
-  bottom: 0;
+  bottom: -260px;
+  transition: bottom 0.3s ease;
+  width: 100%;
+  overflow-x: scroll;
+
+  &:hover,
+  .card-dragging & {
+    bottom: 0;
+  }
+
+  .bucket-card-wrapper {
+    width: 100%;
+  }
 }
 
 .platine {
   z-index: 60;
   bottom: -70%;
+  transition: bottom 0.3s ease;
+  /* width: 25%; */
 }
 </style>
diff --git a/app/pages/boxes.vue b/app/pages/boxes.vue
deleted file mode 100644
index a094760..0000000
--- a/app/pages/boxes.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <boxes />
-</template>
-
-<script setup>
-import { useUiStore } from '~/store/ui'
-import { useDataStore } from '~/store/data'
-
-// Configuration du layout
-definePageMeta({
-  layout: 'default'
-})
-
-const uiStore = useUiStore()
-
-onMounted(async () => {
-  const dataStore = useDataStore()
-  await dataStore.loadData()
-  uiStore.listBoxes()
-})
-</script>
-
-<style>
-.logo {
-  filter: drop-shadow(3px 3px 0 rgb(0 0 0 / 0.7));
-}
-</style>
diff --git a/app/pages/card/[id].vue b/app/pages/card/[id].vue
new file mode 100644
index 0000000..a6999da
--- /dev/null
+++ b/app/pages/card/[id].vue
@@ -0,0 +1,202 @@
+<template>
+  <div class="card-page">
+    <div v-if="loading" class="loading">
+      <div class="spinner"></div>
+    </div>
+
+    <Transition name="card-fade" mode="out-in">
+      <div v-if="!loading && track" class="card-container" @click="playTrack">
+        <Card :track="track" :is-face-up="true" class="card-item" />
+      </div>
+
+      <div v-else-if="error" class="error-message">
+        {{ error }}
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { useRoute } from 'vue-router'
+import { usePlayerStore } from '~/store/player'
+import { useCardStore } from '~/store/card'
+import { useDataStore } from '~/store/data'
+import type { Track } from '~~/types/types'
+
+const route = useRoute()
+const playerStore = usePlayerStore()
+const cardStore = useCardStore()
+const dataStore = useDataStore()
+
+const track = ref<Track | null>(null)
+const loading = ref(true)
+const error = ref<string | null>(null)
+const hasUserInteracted = ref(false)
+const audioElement = ref<HTMLAudioElement | null>(null)
+
+// Récupérer les données de la piste
+const fetchTrack = async () => {
+  try {
+    loading.value = true
+    error.value = null
+
+    // S'assurer que les données sont chargées
+    if (!dataStore.isLoaded) {
+      await dataStore.loadData()
+    }
+
+    // Récupérer la piste par son ID
+    const trackId = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id || ''
+    const foundTrack = dataStore.getTrackById(trackId)
+
+    if (foundTrack) {
+      track.value = foundTrack
+      // Marquer la carte comme révélée
+      if (foundTrack.id) {
+        cardStore.revealCard(Number(foundTrack.id))
+      }
+    } else {
+      error.value = 'Carte non trouvée'
+    }
+  } catch (err) {
+    console.error('Erreur lors du chargement de la piste:', err)
+    error.value = 'Une erreur est survenue lors du chargement de la piste'
+  } finally {
+    loading.value = false
+  }
+}
+
+// Gérer la première interaction utilisateur
+const handleFirstInteraction = () => {
+  if (!hasUserInteracted.value) {
+    hasUserInteracted.value = true
+    if (track.value) {
+      playerStore.playTrack(track.value)
+    }
+  }
+}
+
+// Configurer les écouteurs d'événements pour la première interaction
+const setupInteractionListeners = () => {
+  const events: (keyof WindowEventMap)[] = ['click', 'touchstart', 'keydown']
+  const handleInteraction = () => {
+    handleFirstInteraction()
+    events.forEach(event => {
+      window.removeEventListener(event, handleInteraction as EventListener)
+    })
+  }
+
+  events.forEach(event => {
+    window.addEventListener(event, handleInteraction as EventListener, { once: true } as AddEventListenerOptions)
+  })
+
+  return () => {
+    events.forEach(event => {
+      window.removeEventListener(event, handleInteraction as EventListener)
+    })
+  }
+}
+
+// Lire la piste
+const playTrack = () => {
+  if (track.value) {
+    playerStore.playTrack(track.value)
+  }
+}
+
+// Charger les données au montage du composant
+onMounted(async () => {
+  await fetchTrack()
+
+  // Configurer les écouteurs d'événements pour la première interaction
+  const cleanup = setupInteractionListeners()
+
+  // Nettoyer les écouteurs lors du démontage du composant
+  onBeforeUnmount(() => {
+    cleanup()
+  })
+})
+</script>
+
+<style scoped>
+.card-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: linear-gradient(135deg, #1a202c 0%, #2d3748 100%);
+}
+
+.loading {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.spinner {
+  width: 40px;
+  height: 40px;
+  border: 4px solid rgba(255, 255, 255, 0.1);
+  border-radius: 50%;
+  border-top-color: #4299e1;
+  animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.card-container {
+  perspective: 1000px;
+  cursor: pointer;
+  transition: transform 0.3s ease;
+}
+
+.card-container:hover {
+  transform: scale(1.02);
+}
+
+.card-item {
+  transform-style: preserve-3d;
+  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  animation: cardAppear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
+  opacity: 0;
+  transform: translateY(20px) rotateY(10deg);
+}
+
+@keyframes cardAppear {
+  0% {
+    opacity: 0;
+    transform: translateY(20px) rotateY(10deg);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0) rotateY(0);
+  }
+}
+
+.error-message {
+  color: #feb2b2;
+  background-color: #742a2a;
+  padding: 1rem 2rem;
+  border-radius: 0.5rem;
+  font-weight: 500;
+}
+
+/* Animation de transition */
+.card-fade-enter-active,
+.card-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.card-fade-enter-from,
+.card-fade-leave-to {
+  opacity: 0;
+}
+</style>
\ No newline at end of file
diff --git a/app/pages/index.vue b/app/pages/index.vue
index a92d3f7..a094760 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -1,4 +1,27 @@
 <template>
-  <card />
-  <card />
+  <boxes />
 </template>
+
+<script setup>
+import { useUiStore } from '~/store/ui'
+import { useDataStore } from '~/store/data'
+
+// Configuration du layout
+definePageMeta({
+  layout: 'default'
+})
+
+const uiStore = useUiStore()
+
+onMounted(async () => {
+  const dataStore = useDataStore()
+  await dataStore.loadData()
+  uiStore.listBoxes()
+})
+</script>
+
+<style>
+.logo {
+  filter: drop-shadow(3px 3px 0 rgb(0 0 0 / 0.7));
+}
+</style>
diff --git a/app/pages/newsletter.vue b/app/pages/newsletter.vue
deleted file mode 100644
index daf2201..0000000
--- a/app/pages/newsletter.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <div class="w-full flex flex-col items-center">
-    <logo />
-    <main>
-      <newsletter />
-    </main>
-  </div>
-</template>
-
-<style>
-.logo {
-  filter: drop-shadow(2px 2px 0 rgb(0 0 0 / 0.8));
-}
-</style>
diff --git a/app/pages/playground.vue b/app/pages/playground.vue
deleted file mode 100644
index 8aad56d..0000000
--- a/app/pages/playground.vue
+++ /dev/null
@@ -1,221 +0,0 @@
-<template>
-  <div class="min-h-screen bg-gradient-to-b from-slate-900 to-slate-800 p-8">
-    <h1 class="text-3xl font-bold text-center text-white mb-8">Card 3D Playground</h1>
-
-    <div class="container mx-auto flex flex-col lg:flex-row gap-8">
-      <!-- Controls Panel -->
-      <div class="w-full lg:w-1/3 bg-slate-800 p-6 rounded-xl shadow-lg">
-        <h2 class="text-xl font-semibold text-white mb-6">3D Controls</h2>
-
-        <div class="space-y-6">
-          <!-- Rotation -->
-          <div>
-            <h3 class="text-white font-medium mb-2">Rotation</h3>
-            <div class="space-y-4">
-              <div>
-                <label class="block text-sm text-gray-300 mb-1">X-Axis (rotateX)</label>
-                <input v-model="rotationX" type="range" min="-180" max="180" class="w-full" @input="updateTransform">
-                <span class="text-xs text-gray-400">{{ rotationX }}°</span>
-              </div>
-
-              <div>
-                <label class="block text-sm text-gray-300 mb-1">Y-Axis (rotateY)</label>
-                <input v-model="rotationY" type="range" min="-180" max="180" class="w-full" @input="updateTransform">
-                <span class="text-xs text-gray-400">{{ rotationY }}°</span>
-              </div>
-
-              <div>
-                <label class="block text-sm text-gray-300 mb-1">Z-Axis (rotateZ)</label>
-                <input v-model="rotationZ" type="range" min="-180" max="180" class="w-full" @input="updateTransform">
-                <span class="text-xs text-gray-400">{{ rotationZ }}°</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- Translation -->
-          <div>
-            <h3 class="text-white font-medium mb-2">Position (px)</h3>
-            <div class="grid grid-cols-3 gap-4">
-              <div>
-                <label class="block text-xs text-gray-300 mb-1">X</label>
-                <input v-model="translateX" type="range" min="-200" max="200" class="w-full" @input="updateTransform">
-                <span class="text-xs text-gray-400">{{ translateX }}px</span>
-              </div>
-              <div>
-                <label class="block text-xs text-gray-300 mb-1">Y</label>
-                <input v-model="translateY" type="range" min="-200" max="200" class="w-full" @input="updateTransform">
-                <span class="text-xs text-gray-400">{{ translateY }}px</span>
-              </div>
-              <div>
-                <label class="block text-xs text-gray-300 mb-1">Z</label>
-                <input v-model="translateZ" type="range" min="-500" max="500" class="w-full" @input="updateTransform">
-                <span class="text-xs text-gray-400">{{ translateZ }}px</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- Scale -->
-          <div>
-            <h3 class="text-white font-medium mb-2">Scale</h3>
-            <div class="grid grid-cols-3 gap-4">
-              <div>
-                <label class="block text-xs text-gray-300 mb-1">X</label>
-                <input v-model="scaleX" type="range" min="0.5" max="2" step="0.1" class="w-full"
-                  @input="updateTransform">
-                <span class="text-xs text-gray-400">{{ scaleX }}x</span>
-              </div>
-              <div>
-                <label class="block text-xs text-gray-300 mb-1">Y</label>
-                <input v-model="scaleY" type="range" min="0.5" max="2" step="0.1" class="w-full"
-                  @input="updateTransform">
-                <span class="text-xs text-gray-400">{{ scaleY }}x</span>
-              </div>
-              <div>
-                <label class="block text-xs text-gray-300 mb-1">Z</label>
-                <input v-model="scaleZ" type="range" min="0.5" max="2" step="0.1" class="w-full"
-                  @input="updateTransform">
-                <span class="text-xs text-gray-400">{{ scaleZ }}x</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- Reset Button -->
-          <button
-            class="w-full mt-6 bg-esyellow hover:bg-yellow-500 text-black font-medium py-2 px-4 rounded-md transition-colors"
-            @click="resetTransforms">
-            Reset to Default
-          </button>
-        </div>
-      </div>
-
-      <!-- Card Preview -->
-      <div class="flex-1 flex items-center justify-center min-h-[60vh] lg:min-h-auto">
-        <div class="relative w-64 h-96 transition-transform duration-300" :style="cardStyle">
-          <div class="w-full h-full" :style="{
-            transform: `
-              perspective(1000px)
-              rotateX(${rotationX}deg)
-              rotateY(${rotationY}deg)
-              rotateZ(${rotationZ}deg)
-              translate3d(${translateX}px, ${translateY}px, ${translateZ}px)
-              scale3d(${scaleX}, ${scaleY}, ${scaleZ})
-            `,
-            transformStyle: 'preserve-3d',
-            transition: 'transform 0.3s ease-out',
-            willChange: 'transform',
-            backfaceVisibility: 'visible'
-          }">
-            <div
-              class="w-full h-full bg-gradient-to-br from-cyan-500 to-blue-600 rounded-xl shadow-2xl flex items-center justify-center p-4">
-              <div class="text-center text-white">
-                <div class="text-6xl mb-2">🃏</div>
-                <h3 class="text-xl font-bold">Card Playground</h3>
-                <p class="text-sm opacity-80">Drag the sliders to transform me!</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-// State for 3D transformations
-import { useDataStore } from '~/store/data'
-
-const rotationX = ref(0)
-const rotationY = ref(0)
-const rotationZ = ref(0)
-const translateX = ref(0)
-const translateY = ref(0)
-const translateZ = ref(0)
-const scaleX = ref(1)
-const scaleY = ref(1)
-const scaleZ = ref(1)
-const dataStore = useDataStore()
-
-// Computed property for the card's transform style
-const cardStyle = computed(() => {
-  return {
-    transform: `
-      perspective(1000px)
-      rotateX(${rotationX.value}deg)
-      rotateY(${rotationY.value}deg)
-      rotateZ(${rotationZ.value}deg)
-      translate3d(${translateX.value}px, ${translateY.value}px, ${translateZ.value}px)
-      scale3d(${scaleX.value}, ${scaleY.value}, ${scaleZ.value})
-    `,
-    transformStyle: 'preserve-3d',
-    transition: 'transform 0.3s ease-out',
-    willChange: 'transform',
-    backfaceVisibility: 'visible'
-  }
-})
-
-// Function to update transform (for immediate feedback)
-const updateTransform = () => {
-  // The computed property will handle the update
-}
-
-// Function to reset all transforms
-const resetTransforms = () => {
-  rotationX.value = 0
-  rotationY.value = 0
-  rotationZ.value = 0
-  translateX.value = 0
-  translateY.value = 0
-  translateZ.value = 0
-  scaleX.value = 1
-  scaleY.value = 1
-  scaleZ.value = 1
-}
-
-dataStore.isLoading.value = false
-
-// Set page metadata
-definePageMeta({
-  layout: 'default'
-})
-</script>
-
-<style scoped>
-/* Add any additional styles here */
-.container {
-  perspective: 1000px;
-}
-
-/* Style range inputs */
-input[type="range"] {
-  -webkit-appearance: none;
-  width: 100%;
-  height: 6px;
-  border-radius: 3px;
-  background: #475569;
-  outline: none;
-}
-
-input[type="range"]::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  appearance: none;
-  width: 16px;
-  height: 16px;
-  border-radius: 50%;
-  background: #f59e0b;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-input[type="range"]::-webkit-slider-thumb:hover {
-  background: #d97706;
-  transform: scale(1.2);
-}
-
-/* Card styling */
-.card-3d {
-  transform-style: preserve-3d;
-  transition: transform 0.3s ease-out;
-  will-change: transform;
-  backface-visibility: visible;
-}
-</style>
diff --git a/app/pages/story/holo.vue b/app/pages/story/holo.vue
new file mode 100644
index 0000000..35fbf35
--- /dev/null
+++ b/app/pages/story/holo.vue
@@ -0,0 +1,3 @@
+<template>
+  holo
+</template>
\ No newline at end of file
diff --git a/app/pages/story/index.vue b/app/pages/story/index.vue
new file mode 100644
index 0000000..6d8a136
--- /dev/null
+++ b/app/pages/story/index.vue
@@ -0,0 +1,46 @@
+<template>
+  <div class="container">
+    <h1>Liste des pages Story</h1>
+    <ul>
+      <li v-for="page in pages" :key="page.name">
+        <NuxtLink :to="`/story/${page.name}`">
+          {{ page.name }}
+        </NuxtLink>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+const pages = [
+  { name: 'holo' },
+  { name: 'mix' },
+  { name: 'test' }
+]
+</script>
+
+<style scoped>
+.container {
+  max-width: 800px;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+li {
+  margin: 0.5rem 0;
+}
+
+a {
+  color: #2563eb;
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+</style>
\ No newline at end of file
diff --git a/app/pages/mix.vue b/app/pages/story/mix.vue
similarity index 100%
rename from app/pages/mix.vue
rename to app/pages/story/mix.vue
diff --git a/app/pages/story/test.vue b/app/pages/story/test.vue
new file mode 100644
index 0000000..a92d3f7
--- /dev/null
+++ b/app/pages/story/test.vue
@@ -0,0 +1,4 @@
+<template>
+  <card />
+  <card />
+</template>
diff --git a/app/plugins/01.atropos.ts b/app/plugins/01.atropos.ts
deleted file mode 100644
index 5a224ec..0000000
--- a/app/plugins/01.atropos.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { defineNuxtPlugin } from '#app'
-
-export default defineNuxtPlugin(() => {
-  if (process.client) {
-    import('atropos/element').then(({ default: AtroposComponent }) => {
-      customElements.define('atropos-component', AtroposComponent)
-    })
-  }
-})
diff --git a/app/plugins/body-class.ts b/app/plugins/body-class.ts
new file mode 100644
index 0000000..8a55392
--- /dev/null
+++ b/app/plugins/body-class.ts
@@ -0,0 +1,52 @@
+import { defineNuxtPlugin } from '#app'
+import { useHead } from '#imports'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  // Fonction pour ajouter une classe au body
+  const addBodyClass = (className: string) => {
+    if (process.client) {
+      document.body.classList.add(className)
+    } else {
+      // Pour le SSR, on utilise useHead
+      useHead({
+        bodyAttrs: {
+          class: className
+        }
+      })
+    }
+  }
+
+  // Fonction pour supprimer une classe du body
+  const removeBodyClass = (className: string) => {
+    if (process.client) {
+      document.body.classList.remove(className)
+    }
+    // Pas besoin de gérer la suppression côté SSR
+  }
+
+  // Fonction pour vérifier si une classe est présente
+  const hasBodyClass = (className: string) => {
+    if (process.client) {
+      return document.body.classList.contains(className)
+    }
+    return false
+  }
+
+  // Exposition des méthodes via le plugin
+  return {
+    provide: {
+      bodyClass: {
+        add: addBodyClass,
+        remove: removeBodyClass,
+        has: hasBodyClass,
+        toggle: (className: string) => {
+          if (hasBodyClass(className)) {
+            removeBodyClass(className)
+          } else {
+            addBodyClass(className)
+          }
+        }
+      }
+    }
+  }
+})
diff --git a/app/plugins/shortcut.client.ts b/app/plugins/keyboard.shortcut.client.ts
similarity index 98%
rename from app/plugins/shortcut.client.ts
rename to app/plugins/keyboard.shortcut.client.ts
index 97e2f47..45d19bf 100644
--- a/app/plugins/shortcut.client.ts
+++ b/app/plugins/keyboard.shortcut.client.ts
@@ -63,7 +63,7 @@ export default defineNuxtPlugin((nuxtApp) => {
         }
         break
 
-      case 'Space':
+      case 'Space': // Espace pour play/pause
         e.preventDefault()
         e.stopPropagation()
 
diff --git a/app/store/card.ts b/app/store/card.ts
index d63b7ef..4263883 100644
--- a/app/store/card.ts
+++ b/app/store/card.ts
@@ -1,12 +1,23 @@
 import { defineStore } from 'pinia'
 import type { Track } from '~~/types/types'
+
 export const useCardStore = defineStore('card', {
   state: () => ({
     // Stocke les IDs des cartes déjà révélées
-    revealedCards: new Set<number>()
+    revealedCards: new Set<number>(),
+    // Stocke les pistes dans le panier
+    bucket: [] as Track[],
+    // Stocke l'état d'ouverture du panier
+    isBucketOpen: false
   }),
 
   actions: {
+    // Mettre à jour l'ordre des pistes dans le panier
+    updateBucketOrder(newOrder: Track[]) {
+      this.bucket = [...newOrder]
+      this.saveBucketToLocalStorage()
+    },
+
     // Marquer une carte comme révélée
     revealCard(trackId: number) {
       this.revealedCards.add(trackId)
@@ -18,9 +29,12 @@ export const useCardStore = defineStore('card', {
       this.saveToLocalStorage()
     },
 
-    // Vérifier si une carte est révélée
-    isCardRevealed(trackId: number): boolean {
-      return this.revealedCards.has(trackId)
+    flipCard(track: any) {
+      if (this.isRevealed(track.id)) {
+        this.hideCard(track.id)
+      } else {
+        this.revealCard(track.id)
+      }
     },
 
     // Basculer l'état de révélation de toutes les cartes
@@ -76,6 +90,64 @@ export const useCardStore = defineStore('card', {
     // Initialiser le store
     initialize() {
       this.loadFromLocalStorage()
+    },
+
+    // Gestion du panier
+    addToBucket(track: Track) {
+      // Vérifie si la piste n'est pas déjà dans le panier
+      if (!this.bucket.some((item) => item.id === track.id)) {
+        this.bucket.push(track)
+        this.saveBucketToLocalStorage()
+      }
+    },
+
+    removeFromBucket(trackId: number) {
+      const index = this.bucket.findIndex((item) => item.id === trackId)
+      if (index !== -1) {
+        this.bucket.splice(index, 1)
+        this.saveBucketToLocalStorage()
+      }
+    },
+
+    clearBucket() {
+      this.bucket = []
+      this.saveBucketToLocalStorage()
+    },
+
+    toggleBucket() {
+      this.isBucketOpen = !this.isBucketOpen
+    },
+
+    // Sauvegarder le panier dans le localStorage
+    saveBucketToLocalStorage() {
+      if (typeof window !== 'undefined') {
+        try {
+          localStorage.setItem('cardStoreBucket', JSON.stringify(this.bucket))
+        } catch (e) {
+          console.error('Failed to save bucket to localStorage', e)
+        }
+      }
+    },
+
+    // Charger le panier depuis le localStorage
+    loadBucketFromLocalStorage() {
+      if (typeof window !== 'undefined') {
+        try {
+          const saved = localStorage.getItem('cardStoreBucket')
+          if (saved) {
+            const bucket = JSON.parse(saved)
+            if (Array.isArray(bucket)) {
+              this.bucket = bucket
+            }
+          }
+        } catch (e) {
+          console.error('Failed to load bucket from localStorage', e)
+        }
+      }
+    },
+    // Vérifier si une carte est révélée
+    isCardRevealed(trackId: number): boolean {
+      return this.revealedCards.has(trackId)
     }
   },
 
@@ -83,6 +155,17 @@ export const useCardStore = defineStore('card', {
     // Getter pour la réactivité dans les templates
     isRevealed: (state) => (trackId: number) => {
       return state.revealedCards.has(trackId)
+    },
+
+    // Getters pour le panier
+    bucketCount: (state) => state.bucket.length,
+
+    isInBucket: (state) => (trackId: number) => {
+      return state.bucket.some((track) => track.id === trackId)
+    },
+
+    bucketTotalDuration: (state) => {
+      return state.bucket.reduce((total, track) => total + ((track as any).duration || 0), 0)
     }
   }
 })
diff --git a/app/store/platine.ts b/app/store/platine.ts
new file mode 100644
index 0000000..f520dd5
--- /dev/null
+++ b/app/store/platine.ts
@@ -0,0 +1,169 @@
+import { defineStore } from 'pinia'
+import type { Track } from '~~/types/types'
+import Disc from '~/platine-tools/disc'
+import Sampler from '~/platine-tools/sampler'
+import { useCardStore } from '~/store/card'
+
+export const usePlatineStore = defineStore('platine', () => {
+  // State
+  const currentTrack = ref<Track | null>(null)
+  const isPlaying = ref(false)
+  const isLoadingTrack = ref(false)
+  const isFirstDrag = ref(true)
+  const progressPercentage = ref(0)
+  const currentTurns = ref(0)
+  const totalTurns = ref(0)
+  const isMuted = ref(false)
+
+  // Refs pour les instances
+  const disc = ref<Disc | null>(null)
+  const sampler = ref<Sampler | null>(null)
+  const discRef = ref<HTMLElement>()
+
+  // Actions
+  const initPlatine = (element: HTMLElement) => {
+    discRef.value = element
+    disc.value = new Disc(element)
+    sampler.value = new Sampler()
+
+    // Configurer les callbacks du disque
+    if (disc.value) {
+      disc.value.callbacks.onStop = () => {
+        sampler.value?.pause()
+      }
+
+      disc.value.callbacks.onDragStart = () => {
+        if (isFirstDrag.value) {
+          isFirstDrag.value = false
+          togglePlay()
+          if (sampler.value && disc.value) {
+            sampler.value.play(disc.value.secondsPlayed)
+            disc.value.powerOn()
+          }
+        }
+      }
+
+      disc.value.callbacks.onDragEnded = () => {
+        if (!isPlaying.value) return
+        sampler.value?.play(disc.value?.secondsPlayed || 0)
+      }
+
+      disc.value.callbacks.onLoop = ({ playbackSpeed, isReversed, secondsPlayed }) => {
+        sampler.value?.updateSpeed(playbackSpeed, isReversed, secondsPlayed)
+        updateTurns()
+      }
+    }
+  }
+
+  const updateTurns = () => {
+    if (!disc.value) return
+
+    currentTurns.value = disc.value.secondsPlayed * 0.75
+    totalTurns.value = (disc.value as any)._duration * 0.75
+    progressPercentage.value = Math.min(
+      100,
+      (disc.value.secondsPlayed / (disc.value as any)._duration) * 100
+    )
+  }
+
+  const loadTrack = async (track: Track) => {
+    const cardStore = useCardStore()
+    if (!sampler.value || !track) return
+
+    currentTrack.value = track
+    isLoadingTrack.value = true
+
+    try {
+      await sampler.value.loadTrack(track.url)
+      if (disc.value) {
+        disc.value.setDuration(sampler.value.duration)
+        updateTurns()
+        play()
+      }
+    } finally {
+      isLoadingTrack.value = false
+      cardStore.revealCard(track.id)
+    }
+  }
+
+  const play = (position = 0) => {
+    if (!disc.value || !sampler.value || !currentTrack.value) return
+
+    isPlaying.value = true
+    sampler.value.play(position)
+    disc.value.powerOn()
+  }
+
+  const pause = () => {
+    if (!disc.value || !sampler.value) return
+
+    isPlaying.value = false
+    sampler.value.pause()
+    disc.value.powerOff()
+  }
+
+  const togglePlay = () => {
+    if (isPlaying.value) {
+      pause()
+    } else {
+      play()
+    }
+  }
+
+  const toggleMute = () => {
+    if (!sampler.value) return
+
+    isMuted.value = !isMuted.value
+    if (isMuted.value) {
+      sampler.value.mute()
+    } else {
+      sampler.value.unmute()
+    }
+  }
+
+  const seek = (position: number) => {
+    if (!disc.value) return
+
+    disc.value.secondsPlayed = position
+    if (sampler.value) {
+      sampler.value.play(position)
+    }
+  }
+
+  // Nettoyage
+  const cleanup = () => {
+    if (disc.value) {
+      disc.value.stop()
+      disc.value.powerOff()
+    }
+    if (sampler.value) {
+      sampler.value.pause()
+    }
+  }
+
+  return {
+    // State
+    currentTrack,
+    isPlaying,
+    isLoadingTrack,
+    progressPercentage,
+    currentTurns,
+    totalTurns,
+    isMuted,
+
+    // Getters
+    coverUrl: computed(() => currentTrack.value?.coverId || '/card-dock.svg'),
+
+    // Actions
+    initPlatine,
+    loadTrack,
+    play,
+    pause,
+    togglePlay,
+    toggleMute,
+    seek,
+    cleanup
+  }
+})
+
+export default usePlatineStore
diff --git a/app/store/player.ts b/app/store/player.ts
index 51f1d4b..98e0422 100644
--- a/app/store/player.ts
+++ b/app/store/player.ts
@@ -3,62 +3,65 @@ import { defineStore } from 'pinia'
 import type { Track, Box } from '~/../types/types'
 import { useDataStore } from '~/store/data'
 import { useCardStore } from '~/store/card'
+import { usePlatineStore } from '~/store/platine'
 
 export const usePlayerStore = defineStore('player', {
   state: () => ({
     currentTrack: null as Track | null,
     position: 0,
-    audio: null as HTMLAudioElement | null,
     progressionLast: 0,
-    isPlaying: false,
     isLoading: false,
     history: [] as string[]
   }),
 
   actions: {
-    attachAudio(el: HTMLAudioElement) {
-      this.audio = el
-      // attach listeners if not already attached (idempotent enough for our use)
-      this.audio.addEventListener('play', () => {
-        this.isPlaying = true
-        // Révéler la carte quand la lecture commence
-        if (this.currentTrack) {
-          const cardStore = useCardStore()
-          if (!cardStore.isCardRevealed(this.currentTrack.id)) {
-            requestAnimationFrame(() => {
-              cardStore.revealCard(this.currentTrack!.id)
-            })
+    attachAudio() {
+      const platineStore = usePlatineStore()
+
+      // Écouter les changements de piste dans le platineStore
+      watch(
+        () => platineStore.currentTrack,
+        (newTrack) => {
+          if (newTrack) {
+            this.currentTrack = newTrack
+            // Révéler la carte quand la lecture commence
+            const cardStore = useCardStore()
+            if (!cardStore.isCardRevealed(newTrack.id)) {
+              requestAnimationFrame(() => {
+                cardStore.revealCard(newTrack.id)
+              })
+            }
+          } else {
+            this.currentTrack = null
           }
         }
-      })
-      this.audio.addEventListener('playing', () => {})
-      this.audio.addEventListener('pause', () => {
-        this.isPlaying = false
-      })
-      this.audio.addEventListener('ended', async () => {
-        const track = this.currentTrack
-        if (!track) return
+      )
 
-        const dataStore = useDataStore()
-        // Comportement par défaut pour les playlists standards
-        if (track.type === 'playlist') {
-          const next = dataStore.getNextPlaylistTrack(track)
-          if (next && next.boxId === track.boxId) {
-            await this.playTrack(next)
-            return
+      // Écouter les changements d'état de lecture
+      watch(
+        () => platineStore.isPlaying,
+        (isPlaying) => {
+          if (isPlaying) {
+            // Gérer la logique de lecture suivante quand la lecture se termine
+            if (platineStore.currentTrack?.type === 'playlist') {
+              const dataStore = useDataStore()
+              const nextTrack = dataStore.getNextPlaylistTrack(platineStore.currentTrack)
+              if (nextTrack) {
+                platineStore.loadTrack(nextTrack)
+                platineStore.play()
+              }
+            }
           }
         }
-
-        // Si on arrive ici, c'est qu'il n'y a pas de piste suivante
-        this.currentTrack = null
-        this.isPlaying = false
-      })
+      )
     },
 
     async playBox(box: Box) {
+      const platineStore = usePlatineStore()
+
       // Si c'est la même box, on toggle simplement la lecture
       if (this.currentTrack?.boxId === box.id && this.currentTrack?.side === box.activeSide) {
-        this.togglePlay()
+        platineStore.togglePlay()
         return
       }
 
@@ -67,7 +70,9 @@ export const usePlayerStore = defineStore('player', {
         const dataStore = useDataStore()
         const firstTrack = dataStore.getFirstTrackOfBox(box)
         if (firstTrack) {
-          await this.playTrack(firstTrack)
+          this.currentTrack = firstTrack
+          await platineStore.loadTrack(firstTrack)
+          await platineStore.play()
         }
       } catch (error) {
         console.error('Error playing box:', error)
@@ -75,121 +80,77 @@ export const usePlayerStore = defineStore('player', {
     },
 
     async playTrack(track: Track) {
-      // Pour les autres types de pistes, on utilise la logique existante
-      this.isCompilationTrack(track)
-        ? await this.playCompilationTrack(track)
-        : await this.playPlaylistTrack(track)
-    },
-
-    async playCompilationTrack(track: Track) {
+      const platineStore = usePlatineStore()
       // Si c'est la même piste, on toggle simplement la lecture
       if (this.currentTrack?.id === track.id) {
-        // Si la lecture est en cours, on met en pause
-        if (this.isPlaying) {
-          this.togglePlay()
-          return
-        }
-
-        // Si c'est une compilation, on vérifie si on est dans la plage de la piste
-        if (track.type === 'compilation' && track.start !== undefined) {
-          const dataStore = useDataStore()
-          const nextTrack = dataStore.getNextTrack(track)
-
-          // Si on a une piste suivante et qu'on est dans la plage de la piste courante
-          if (nextTrack?.start && this.position >= track.start && this.position < nextTrack.start) {
-            this.togglePlay()
-            return
-          }
-          // Si c'est la dernière piste de la compilation
-          else if (!nextTrack && this.position >= track.start) {
-            this.togglePlay()
-            return
-          }
-        }
-      }
-
-      // Sinon, on charge et on lit la piste
-      this.currentTrack = track
-      await this.loadAndPlayTrack(track)
-    },
-
-    async playPlaylistTrack(track: Track) {
-      // Toggle simple si c'est la même piste
-      if (this.currentTrack?.id === track.id) {
-        this.togglePlay()
+        platineStore.togglePlay()
         return
       }
 
       // Sinon, on charge et on lit la piste
       this.currentTrack = track
-      await this.loadAndPlayTrack(track)
+      await platineStore.loadTrack(track)
+      platineStore.play()
+    },
+
+    async playCompilationTrack(track: Track) {
+      const platineStore = usePlatineStore()
+
+      // Si c'est la même piste, on toggle simplement la lecture
+      if (this.currentTrack?.id === track.id) {
+        platineStore.togglePlay()
+        return
+      }
+
+      // Pour les compilations, on charge la piste avec le point de départ
+      this.currentTrack = track
+      await platineStore.loadTrack(track)
+
+      // Si c'est une compilation, on définit la position de départ
+      if (track.type === 'compilation' && track.start !== undefined) {
+        platineStore.seek(track.start)
+      }
+
+      platineStore.play()
+    },
+
+    async playPlaylistTrack(track: Track) {
+      const platineStore = usePlatineStore()
+
+      // Toggle simple si c'est la même piste
+      if (this.currentTrack?.id === track.id) {
+        platineStore.togglePlay()
+        return
+      }
+
+      // Sinon, on charge et on lit la piste
+      this.currentTrack = track
+      await platineStore.loadTrack(track)
+      platineStore.play()
     },
 
     async loadTrack(track: Track) {
-      if (!this.audio) return
-
-      return new Promise<void>((resolve) => {
-        this.currentTrack = track
-        const audio = this.audio as HTMLAudioElement
-
-        // Si c'est la même source, on ne fait rien
-        if (audio.src === track.url) {
-          resolve()
-          return
-        }
-
-        // Nouvelle source
-        audio.src = track.url
-
-        // Une fois que suffisamment de données sont chargées
-        const onCanPlay = () => {
-          audio.removeEventListener('canplay', onCanPlay)
-          resolve()
-        }
-        audio.addEventListener('canplay', onCanPlay)
-
-        // Timeout de sécurité
-        setTimeout(resolve, 1000)
-      })
+      const platineStore = usePlatineStore()
+      await platineStore.loadTrack(track)
     },
 
     async loadAndPlayTrack(track: Track) {
-      if (!this.audio) {
-        const newAudio = new Audio()
-        this.attachAudio(newAudio)
-      }
-
-      const audio = this.audio as HTMLAudioElement
+      const platineStore = usePlatineStore()
 
       try {
         this.isLoading = true
-        // Mettre en pause
-        audio.pause()
 
-        // Pour les compilations, on utilise l'URL de la piste avec le point de départ
+        // Charger la piste
+        await platineStore.loadTrack(track)
+
+        // Pour les compilations, on définit la position de départ
         if (track.type === 'compilation' && track.start !== undefined) {
-          audio.src = track.url
-          audio.currentTime = track.start
-        } else {
-          // Pour les playlists, on charge la piste individuelle
-          audio.currentTime = 0
-          await this.loadTrack(track)
+          platineStore.seek(track.start)
         }
 
-        // Attendre que les métadonnées soient chargées
-        await new Promise<void>((resolve) => {
-          const onCanPlay = () => {
-            audio.removeEventListener('canplay', onCanPlay)
-            resolve()
-          }
-          audio.addEventListener('canplay', onCanPlay)
-          // Timeout de sécurité
-          setTimeout(resolve, 1000)
-        })
-
         // Lancer la lecture
-        await audio.play()
-        this.history.push(this.currentTrack?.id)
+        await platineStore.play()
+        this.history.push(track.id.toString()) // S'assurer que l'ID est une chaîne
         this.isLoading = false
       } catch (error) {
         console.error('Error loading/playing track:', error)
@@ -197,33 +158,30 @@ export const usePlayerStore = defineStore('player', {
       }
     },
 
-    async togglePlay() {
-      if (!this.audio) return
-      try {
-        if (this.audio.paused) {
-          await this.audio.play()
-        } else {
-          this.audio.pause()
-        }
-      } catch (error) {
-        console.error('Error toggling play state:', error)
-      }
+    togglePlay() {
+      const platineStore = usePlatineStore()
+      platineStore.togglePlay()
     },
 
     updateTime() {
-      const audio = this.audio
-      if (!audio) return
+      const platineStore = usePlatineStore()
 
-      // update current position
-      this.position = audio.currentTime
+      // Mettre à jour la position actuelle
+      if (platineStore.currentTrack) {
+        this.position = platineStore.currentTurns / 0.75 // Convertir les tours en secondes
 
-      // compute and cache a stable progression value
-      const duration = audio.duration
-      const progression = (this.position / duration) * 100
-      if (!isNaN(progression)) {
-        this.progressionLast = progression
+        // Calculer et mettre en cache la progression
+        const duration = platineStore.totalTurns / 0.75 // Durée totale en secondes
+        const progression = (this.position / duration) * 100
+        if (!isNaN(progression) && isFinite(progression)) {
+          this.progressionLast = progression
+        }
       }
-      // update current track when changing time in compilation
+    },
+
+    // update current track when changing time in compilation
+    async updateCurrentTrack() {
+      const platineStore = usePlatineStore()
       const currentTrack = this.currentTrack
       if (currentTrack && currentTrack.type === 'compilation') {
         const dataStore = useDataStore()
@@ -234,7 +192,7 @@ export const usePlayerStore = defineStore('player', {
           .sort((a, b) => (a.start ?? 0) - (b.start ?? 0))
 
         if (tracks.length > 0) {
-          const now = audio.currentTime
+          const now = platineStore.currentTurns / 0.75
           // find the last track whose start <= now (fallback to first track)
           let nextTrack = tracks[0]
           for (const t of tracks) {
@@ -254,7 +212,7 @@ export const usePlayerStore = defineStore('player', {
             if (nextTrack.id && !cardStore.isCardRevealed(nextTrack.id)) {
               // Utiliser requestAnimationFrame pour une meilleure synchronisation avec le rendu
               requestAnimationFrame(() => {
-                cardStore.revealCard(nextTrack.id!)
+                cardStore.revealCard(nextTrack.id)
               })
             }
           }
@@ -290,21 +248,26 @@ export const usePlayerStore = defineStore('player', {
       }
     },
 
-    isPaused: (state) => {
-      return state.audio?.paused ?? true
+    isPaused() {
+      const platineStore = usePlatineStore()
+      return !platineStore.isPlaying
     },
 
     getCurrentTrack: (state) => state.currentTrack,
 
     getCurrentBox: (state) => {
-      return state.currentTrack ? state.currentTrack.url : null
+      return state.currentTrack ? state.currentTrack.boxId : null
     },
 
-    getCurrentProgression(state) {
-      if (!state.audio) return 0
-      const duration = state.audio.duration
-      const progression = (state.position / duration) * 100
-      return isNaN(progression) ? state.progressionLast : progression
+    getCurrentProgression() {
+      const platineStore = usePlatineStore()
+      if (!platineStore.currentTrack) return 0
+
+      // Calculer la progression en fonction des tours actuels et totaux
+      if (platineStore.totalTurns > 0) {
+        return (platineStore.currentTurns / platineStore.totalTurns) * 100
+      }
+      return 0
     },
 
     getCurrentCoverUrl(state) {
diff --git a/app/store/ui.ts b/app/store/ui.ts
index 0b9eb78..1e8b9dc 100644
--- a/app/store/ui.ts
+++ b/app/store/ui.ts
@@ -6,7 +6,8 @@ export const useUiStore = defineStore('ui', {
   state: () => ({
     // UI-only state can live here later
     showSearch: false,
-    searchQuery: ''
+    searchQuery: '',
+    showCardSharer: false
   }),
 
   actions: {
@@ -48,6 +49,10 @@ export const useUiStore = defineStore('ui', {
       })
     },
 
+    openCardSharer() {
+      this.showCardSharer = true
+    },
+
     scrollToBox(box: Box) {
       if (box) {
         const boxElement = document.getElementById(box.id)
diff --git a/server/api/tracks/[id].ts b/server/api/tracks/[id].ts
new file mode 100644
index 0000000..6f9dbd5
--- /dev/null
+++ b/server/api/tracks/[id].ts
@@ -0,0 +1,82 @@
+import fs from 'fs'
+import path from 'path'
+import { eventHandler } from 'h3'
+import { getCardFromDate } from '../../../utils/cards'
+
+export default eventHandler(async (event) => {
+  const dirPath = path.join(process.cwd(), '/mnt/media/files/music')
+  const urlPrefix = `https://files.erudi.fr/music`
+
+  try {
+    let allTracks: any[] = []
+
+    let files = await fs.promises.readdir(dirPath)
+    files = files.filter((f) => !f.startsWith('.') && !f.endsWith('.jpg'))
+
+    const tracks = files.map((file, index) => {
+      const EXT_RE = /\.(mp3|flac|wav|opus)$/i
+      const nameWithoutExt = file.replace(EXT_RE, '')
+
+      // On split sur __
+      const parts = nameWithoutExt.split('__')
+      let stamp = parts[0] || ''
+      let artist = parts[1] || ''
+      let title = parts[2] || ''
+
+      title = title.replaceAll('_', ' ')
+      artist = artist.replaceAll('_', ' ')
+
+      // Parser la date depuis le stamp
+      let year = 2020,
+        month = 1,
+        day = 1,
+        hour = 0
+      if (stamp.length === 10) {
+        year = Number(stamp.slice(0, 4))
+        month = Number(stamp.slice(4, 6))
+        day = Number(stamp.slice(6, 8))
+        hour = Number(stamp.slice(8, 10))
+      }
+
+      const date = new Date(year, month - 1, day, hour)
+      const card = getCardFromDate(date)
+      const url = `${urlPrefix}/${encodeURIComponent(file)}`
+      const coverId = `${urlPrefix}/cover/${encodeURIComponent(file).replace(EXT_RE, '.jpg')}`
+
+      return {
+        id: Number(`${year}${index + 1}`),
+        boxId: `ESPLAYLIST`,
+        year,
+        date,
+        title: title.trim(),
+        artist: artist.trim(),
+        url,
+        coverId,
+        card,
+        order: 0,
+        type: 'playlist'
+      }
+    })
+
+    tracks.sort((a, b) => b.date.getTime() - a.date.getTime())
+    // assign a stable order after sort (1..N)
+    tracks.forEach((t, i) => (t.order = i + 1))
+    allTracks.push(...tracks)
+
+    // Récupérer l'ID depuis les paramètres de la requête
+    const trackId = event.context.params?.id
+
+    // Si un ID est fourni dans l'URL, filtrer pour ne retourner que ce morceau
+    if (trackId) {
+      const track = allTracks.find((track) => track.id === Number(trackId))
+      return track || { error: 'Track not found' }
+    }
+
+    return allTracks
+  } catch (error) {
+    return {
+      success: false,
+      error: (error as Error).message
+    }
+  }
+})