refacto card / box / deck ajout du template default

app/pages/box/[id].vue

@@ -1,11 +1,6 @@
 <template>
-  <div class="w-full flex flex-col items-center">
-    <div @click="uiStore.closeBox()" class="cursor-pointer">
-      <logo />
-    </div>
-    <main>
-      <boxes />
-    </main>
+  <div>
+    <boxes />
   </div>
 </template>
 
@@ -14,6 +9,12 @@ import { onMounted } from 'vue'
 import { useRoute } from 'vue-router'
 import { useUiStore } from '~/store/ui'
 import { useDataStore } from '~/store/data'
+import { usePlayerStore } from '~/store/player'
+
+// Configuration du layout
+definePageMeta({
+  layout: 'default'
+})
 
 const uiStore = useUiStore()
 const dataStore = useDataStore()
@@ -24,6 +25,13 @@ onMounted(async () => {
   const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
   if (typeof idParam === 'string' && idParam.length > 0) {
     uiStore.selectBox(idParam)
+    
+    // Lire automatiquement la box si on est sur la page d'une box
+    const box = dataStore.boxes.find(b => b.id === idParam)
+    if (box) {
+      const player = usePlayerStore()
+      player.playBox(box).catch(console.error)
+    }
   }
 })
 </script>