From bd5ed09d5ea2988e35b27233fd7e37e63c9fdbd8 Mon Sep 17 00:00:00 2001
From: valere <dev@valerebron.com>
Date: Tue, 30 Sep 2025 12:37:24 +0200
Subject: [PATCH] add card verso

---
 app/components/molecule/card.vue | 36 ++++++++++++++++++++------------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/app/components/molecule/card.vue b/app/components/molecule/card.vue
index 55c4d10..2713990 100644
--- a/app/components/molecule/card.vue
+++ b/app/components/molecule/card.vue
@@ -1,18 +1,28 @@
 <template>
-  <article
-    class="backdrop-blur-sm -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
-    <!-- Cover -->
-    <figure class="flex-1 overflow-hidden rounded-t-xl">
-      <img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
-    </figure>
+  <article class="relative">
+    <main
+      class="absolute top-0 backdrop-blur-sm z-40 -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
+      <!-- Cover -->
+      <figure class="flex-1 overflow-hidden rounded-t-xl">
+        <img :src="coverUrl" alt="Pochette de l'album" class="w-full h-full object-cover object-center" />
+      </figure>
 
-    <!-- Body -->
-    <div class="p-3 text-center bg-white rounded-b-xl">
-      <h2 class="text-base text-neutral-800 font-bold truncate">{{ props.track.title }}</h2>
-      <p class="text-sm text-neutral-500 truncate">
-        {{ props.track.artist.name }}
-      </p>
-    </div>
+      <!-- Body -->
+      <div class="p-3 text-center bg-white rounded-b-xl">
+        <h2 class="text-base text-neutral-800 font-bold truncate">{{ props.track.title }}</h2>
+        <p class="text-sm text-neutral-500 truncate">
+          {{ props.track.artist.name }}
+        </p>
+      </div>
+    </main>
+
+    <footer
+      class="absolute top-0 ml-32 backdrop-blur-sm -mt-12 z-10 card w-56 h-80 p-3 bg-opacity-10 bg-white rounded-2xl shadow-lg flex flex-col overflow-hidden">
+      <!-- Back -->
+      <div class="h-full flex p-16 text-center bg-slate-800 rounded-xl">
+        <img src="/favicon.svg" />
+      </div>
+    </footer>
   </article>
 
 </template>