style(manga-grid): cards sans arrondis, overlay actions au survol, grille plus dense

- Supprime rounded-lg et hover:scale-105 sur MangaCard
- Ajoute overlay gradient + 3 boutons (éditer, sources, rafraîchir) visibles au survol en bas à gauche de la cover
- MangaCard émet les événements edit/sources/refresh vers MangaGrid
- MangaGrid gère les modales et composables (edit, preferredSources, refresh)
- Grille plus dense : cols-3/4/5/7/8 selon breakpoint, gap-2

assets/vue/app/domain/manga/presentation/components/MangaCard.vue

@@ -1,27 +1,59 @@
 <template>
-    <RouterLink
-        :to="{ name: 'manga-details', params: { id: manga.id } }"
-        class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden cursor-pointer transition-transform hover:scale-105 block">
-        <div class="relative pb-[130%]">
-            <img
-                :src="manga.thumbnailUrl || 'https://via.placeholder.com/300x400'"
-                :alt="manga.title"
-                class="absolute inset-0 w-full h-full object-cover bg-gray-100" />
-        </div>
-        <div class="p-2">
-            <h3 class="text-sm font-medium text-gray-800 dark:text-gray-100 mb-1 truncate">{{ manga.title }}</h3>
-            <div class="flex items-center">
-                <span class="text-xs text-gray-500 dark:text-gray-400">{{ manga.publicationYear }}</span>
+    <div class="group relative bg-white dark:bg-gray-800 overflow-hidden shadow-sm">
+        <!-- Cover avec overlay -->
+        <div class="relative pb-[140%]">
+            <RouterLink
+                :to="{ name: 'manga-details', params: { id: manga.id } }"
+                class="absolute inset-0">
+                <img
+                    :src="manga.thumbnailUrl || 'https://via.placeholder.com/300x400'"
+                    :alt="manga.title"
+                    class="w-full h-full object-cover bg-gray-100" />
+            </RouterLink>
+
+            <!-- Gradient + actions au survol -->
+            <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
+            <div class="absolute bottom-2 left-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                <button
+                    class="p-1.5 bg-black/60 hover:bg-black/80 text-white rounded transition-colors"
+                    title="Éditer"
+                    @click="$emit('edit', manga)">
+                    <PencilIcon class="w-3.5 h-3.5" />
+                </button>
+                <button
+                    class="p-1.5 bg-black/60 hover:bg-black/80 text-white rounded transition-colors"
+                    title="Sources préférées"
+                    @click="$emit('sources', manga)">
+                    <Cog6ToothIcon class="w-3.5 h-3.5" />
+                </button>
+                <button
+                    class="p-1.5 bg-black/60 hover:bg-black/80 text-white rounded transition-colors"
+                    title="Rafraîchir"
+                    @click="$emit('refresh', manga)">
+                    <ArrowPathIcon class="w-3.5 h-3.5" />
+                </button>
             </div>
         </div>
-    </RouterLink>
+
+        <!-- Titre -->
+        <RouterLink
+            :to="{ name: 'manga-details', params: { id: manga.id } }"
+            class="block p-2">
+            <h3 class="text-xs font-medium text-gray-800 dark:text-gray-100 truncate">{{ manga.title }}</h3>
+        </RouterLink>
+    </div>
 </template>
 
 <script setup>
-    defineProps({
-        manga: {
-            type: Object,
-            required: true
-        }
-    });
+import { ArrowPathIcon, Cog6ToothIcon, PencilIcon } from '@heroicons/vue/24/outline';
+import { RouterLink } from 'vue-router';
+
+defineProps({
+    manga: {
+        type: Object,
+        required: true
+    }
+});
+
+defineEmits(['edit', 'sources', 'refresh']);
 </script>