From cf89535c14c861c57a57ce8419f82765847b731e Mon Sep 17 00:00:00 2001
From: Nyavokevin <42602932+nyavokevin@users.noreply.github.com>
Date: Tue, 23 Sep 2025 18:43:33 +0300
Subject: [PATCH] fix result card

---
 .../js/components/ui/card/CardResult.vue      | 102 ++++++--
 resources/js/layouts/app/LandingLayout.vue    | 146 +++++++----
 resources/js/pages/cards/resultat.vue         | 227 ++++++++++++++----
 3 files changed, 371 insertions(+), 104 deletions(-)

diff --git a/resources/js/components/ui/card/CardResult.vue b/resources/js/components/ui/card/CardResult.vue
index 040bb58..76554d2 100644
--- a/resources/js/components/ui/card/CardResult.vue
+++ b/resources/js/components/ui/card/CardResult.vue
@@ -1,37 +1,72 @@
 <template>
   <div
-    class="border-linen flex flex-col items-center gap-6 md:gap-8 rounded-lg border bg-white p-6 md:p-8 shadow-sm transition-all duration-300 hover:shadow-md md:flex-row"
+    class="flex flex-col items-center gap-6 md:gap-8 rounded-2xl bg-gradient-to-br from-purple-900/40 to-purple-800/30 border border-purple-700/30 p-6 md:p-8 shadow-2xl transition-all duration-500 hover:shadow-3xl md:flex-row backdrop-blur-sm hover:border-purple-600/50 group"
   >
-    <!-- Card Image -->
+    <!-- Card Image Container -->
     <div class="relative">
+      <!-- Card Image with Glow Effect -->
       <div
-        class="h-56 w-36 sm:h-64 sm:w-40 md:h-72 md:w-48 flex-shrink-0 rounded-md bg-cover bg-center bg-no-repeat transition-transform duration-300 hover:scale-105"
+        class="h-56 w-36 sm:h-64 sm:w-40 md:h-72 md:w-48 flex-shrink-0 rounded-xl bg-cover bg-center bg-no-repeat transition-all duration-500 group-hover:scale-105 relative overflow-hidden"
         :style="{
-          'background-image': `url(/cards/${cardNumber + 1}.png)`,
-          'box-shadow': '0 0 15px 5px rgba(215, 186, 141, 0.3)',
+          'background-image': `url(${imageUrl || '/cards/' + (cardNumber + 1) + '.png'})`,
           transform: orientation === 'reversed' ? 'rotate(180deg)' : 'none'
         }"
-      ></div>
+      >
+        <!-- Gradient Overlay -->
+        <div class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-900/10 to-purple-900/20 rounded-xl"></div>
+
+        <!-- Glow Effect -->
+        <div
+          class="absolute inset-0 rounded-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"
+          :style="{
+            'box-shadow': orientation === 'reversed'
+              ? '0 0 30px 10px rgba(239, 68, 68, 0.4)'
+              : '0 0 30px 10px rgba(168, 85, 247, 0.4)'
+          }"
+        ></div>
+      </div>
+
+      <!-- Orientation Badge -->
       <div
         v-if="orientation === 'reversed'"
-        class="absolute top-2 right-2 bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full"
+        class="absolute top-3 right-3 bg-gradient-to-r from-red-600 to-red-700 text-red-100 text-xs font-semibold px-3 py-1.5 rounded-full border border-red-500/30 shadow-lg"
       >
         Inversée
       </div>
+      <div
+        v-else
+        class="absolute top-3 right-3 bg-gradient-to-r from-purple-600 to-purple-700 text-purple-100 text-xs font-semibold px-3 py-1.5 rounded-full border border-purple-500/30 shadow-lg"
+      >
+        Droite
+      </div>
+
+      <!-- Card Number Badge -->
+      <div class="absolute -bottom-2 -left-2 bg-gradient-to-r from-purple-700 to-indigo-700 text-purple-100 text-sm font-bold w-10 h-10 rounded-full flex items-center justify-center border-2 border-purple-900/50 shadow-lg">
+        {{ cardNumber }}
+      </div>
     </div>
 
     <!-- Card Content -->
-    <div class="flex flex-col gap-3 text-center md:text-left">
-      <p class="text-spiritual-earth text-xs sm:text-sm tracking-widest uppercase font-semibold">
-        Carte {{ cardNumber }}
+    <div class="flex flex-col gap-4 text-center md:text-left flex-1">
+      <!-- Card Number -->
+      <p class="text-purple-300/70 text-xs sm:text-sm tracking-widest uppercase font-semibold">
+        Carte #{{ cardNumber }}
       </p>
-      <h3 class="text-midnight-blue text-xl sm:text-2xl font-bold leading-tight">
+
+      <!-- Card Name -->
+      <h3 class="text-2xl sm:text-3xl font-black bg-gradient-to-r from-purple-200 to-purple-100 bg-clip-text text-transparent leading-tight">
         {{ name }}
       </h3>
-      <div class="text-midnight-blue/80 text-sm sm:text-base leading-relaxed" v-html="description">
 
-      </div>
+      <!-- Description -->
+      <div class="text-purple-300/90 text-base sm:text-lg leading-relaxed font-medium" v-html="description"></div>
+
+      <!-- Decorative Divider -->
+      <div class="w-16 h-0.5 bg-gradient-to-r from-purple-600 to-transparent rounded-full mt-2 mx-auto md:mx-0"></div>
     </div>
+
+    <!-- Hover Effect Background -->
+    <div class="absolute inset-0 bg-gradient-to-r from-transparent via-purple-900/5 to-transparent opacity-0 group-hover:opacity-100 rounded-2xl transition-opacity duration-500 pointer-events-none"></div>
   </div>
 </template>
 
@@ -49,17 +84,50 @@ defineProps<Props>();
 
 <style scoped>
 div {
-  animation: slideUp 0.5s ease-out;
+  animation: cardAppear 0.6s ease-out;
 }
 
-@keyframes slideUp {
+@keyframes cardAppear {
   from {
     opacity: 0;
-    transform: translateY(15px);
+    transform: translateY(20px) scale(0.95);
   }
   to {
     opacity: 1;
-    transform: translateY(0);
+    transform: translateY(0) scale(1);
   }
 }
+
+/* Custom shadow for hover effect */
+.shadow-3xl {
+  box-shadow:
+    0 25px 50px -12px rgba(0, 0, 0, 0.5),
+    0 0 30px rgba(168, 85, 247, 0.3);
+}
+
+/* Smooth transitions for all interactive elements */
+* {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 300ms;
+}
+
+/* Custom scrollbar for description */
+.text-base::-webkit-scrollbar {
+  width: 4px;
+}
+
+.text-base::-webkit-scrollbar-track {
+  background: rgba(168, 85, 247, 0.1);
+  border-radius: 2px;
+}
+
+.text-base::-webkit-scrollbar-thumb {
+  background: rgba(168, 85, 247, 0.4);
+  border-radius: 2px;
+}
+
+.text-base::-webkit-scrollbar-thumb:hover {
+  background: rgba(168, 85, 247, 0.6);
+}
 </style>
diff --git a/resources/js/layouts/app/LandingLayout.vue b/resources/js/layouts/app/LandingLayout.vue
index 2065a3d..3ee16d0 100644
--- a/resources/js/layouts/app/LandingLayout.vue
+++ b/resources/js/layouts/app/LandingLayout.vue
@@ -31,14 +31,18 @@ onMounted(() => {
                 class="fixed top-0 z-50 w-full transition-all duration-300"
                 :class="isScrolled ? 'bg-black/90 py-2 shadow-xl backdrop-blur-md' : 'bg-transparent py-4'"
             >
-                <div class="container mx-auto px-4">
-                    <div class="flex items-center justify-between px-6 py-2 whitespace-nowrap">
+                <div class="container mx-auto px-4 sm:px-6">
+                    <div class="flex items-center justify-between px-2 py-2 whitespace-nowrap sm:px-6">
                         <div class="flex items-center gap-3">
-                            <img src="/logo-success.webp" alt="Logo" class="h-12 w-30 transition-transform duration-300 hover:scale-105" />
+                            <img
+                                src="/logo-success.webp"
+                                alt="Logo"
+                                class="h-10 w-24 transition-transform duration-300 hover:scale-105 sm:h-12 sm:w-30"
+                            />
                         </div>
-                        <nav class="hidden items-center gap-8 md:flex">
+                        <nav class="hidden items-center gap-4 md:flex lg:gap-8">
                             <Link
-                                class="group/nav-link relative text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
+                                class="group/nav-link relative px-2 py-1 text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
                                 href="/"
                             >
                                 Accueil
@@ -47,7 +51,7 @@ onMounted(() => {
                                 ></span>
                             </Link>
                             <Link
-                                class="group/nav-link relative text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
+                                class="group/nav-link relative px-2 py-1 text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
                                 href="/tirage"
                             >
                                 Tirages
@@ -56,7 +60,7 @@ onMounted(() => {
                                 ></span>
                             </Link>
                             <Link
-                                class="group/nav-link relative text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
+                                class="group/nav-link relative px-2 py-1 text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
                                 href="/"
                             >
                                 Témoignages
@@ -65,17 +69,17 @@ onMounted(() => {
                                 ></span>
                             </Link>
                         </nav>
-                        <div class="flex items-center gap-4">
+                        <div class="flex items-center gap-2 sm:gap-4">
                             <button
-                                class="mystic-btn mystic-btn-primary group relative inline-flex h-10 min-w-[160px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-6 text-sm font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5"
+                                class="mystic-btn mystic-btn-primary group relative hidden h-10 min-w-[160px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-4 text-sm font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5 sm:inline-flex sm:px-6"
                                 @click="goToBooking"
                             >
-                                <span class="relative z-10 truncate">Réserver une Session</span>
+                                <span class="relative z-10 truncate">Réserver</span>
                                 <span
                                     class="pointer-events-none absolute inset-0 translate-x-[-120%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[120%]"
                                 ></span>
                             </button>
-                            <button class="text-white transition-colors hover:text-[var(--c-gold)] md:hidden" @click="toggleMobileMenu">
+                            <button class="p-2 text-white transition-colors hover:text-[var(--c-gold)] md:hidden" @click="toggleMobileMenu">
                                 <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                                 </svg>
@@ -88,80 +92,80 @@ onMounted(() => {
             <!-- Enhanced Mobile Menu -->
             <div v-if="isMobileMenuOpen" class="fixed inset-0 z-40 bg-black/80 backdrop-blur-sm md:hidden" @click="toggleMobileMenu">
                 <div
-                    class="absolute top-0 right-0 h-full w-3/4 bg-gradient-to-b from-[var(--c-purple)] to-[var(--c-deep-navy)] p-6 shadow-2xl"
+                    class="absolute top-0 right-0 h-full w-full max-w-sm bg-gradient-to-b from-[var(--c-purple)] to-[var(--c-deep-navy)] p-6 shadow-2xl"
                     @click.stop
                 >
                     <div class="mb-8 flex items-center justify-between">
                         <img src="/logo-success.webp" alt="Logo" class="h-10 w-24" />
-                        <button @click="toggleMobileMenu" class="text-white">
+                        <button @click="toggleMobileMenu" class="p-2 text-white">
                             <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                             </svg>
                         </button>
                     </div>
-                    <nav class="flex flex-col gap-6">
+                    <nav class="flex flex-col gap-4">
                         <Link
-                            class="border-b border-white/10 py-2 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
+                            class="border-b border-white/10 py-4 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
                             href="/"
                             @click="toggleMobileMenu"
                             >Accueil</Link
                         >
                         <Link
-                            class="border-b border-white/10 py-2 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
+                            class="border-b border-white/10 py-4 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
                             href="/tirage"
                             @click="toggleMobileMenu"
                             >Tirages</Link
                         >
                         <Link
-                            class="border-b border-white/10 py-2 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
+                            class="border-b border-white/10 py-4 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
                             href="/"
                             @click="toggleMobileMenu"
                             >Témoignages</Link
                         >
                         <button
-                            class="mystic-btn mystic-btn-primary group relative mt-4 inline-flex h-12 w-full items-center justify-center overflow-hidden rounded-full px-6 text-sm font-bold text-white shadow-lg transition-all duration-300"
+                            class="mystic-btn mystic-btn-primary group relative mt-8 inline-flex h-12 w-full items-center justify-center overflow-hidden rounded-full px-6 text-base font-bold text-white shadow-lg transition-all duration-300"
                             @click="
-                                goToBooking;
+                                goToBooking();
                                 toggleMobileMenu();
                             "
                         >
-                            <span class="relative z-10 truncate">Réserver une Session</span>
+                            <span class="relative z-10">Réserver une Session</span>
                         </button>
                     </nav>
                 </div>
             </div>
 
-            <main class="relative flex min-h-screen w-full flex-col items-center pt-20">
+            <main class="relative flex min-h-screen w-full flex-col items-center pt-16 sm:pt-20">
                 <slot />
             </main>
 
             <!-- Enhanced Footer -->
             <footer class="relative border-t border-white/10 bg-gradient-to-t from-black to-[var(--c-deep-navy)] text-white">
                 <div class="absolute inset-x-0 top-0 h-0.5 bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"></div>
-                <div class="mx-auto max-w-7xl px-6 py-14">
-                    <div class="grid gap-10 md:grid-cols-3">
+                <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-14">
+                    <div class="grid gap-8 md:grid-cols-3 lg:gap-10">
                         <!-- Brand + tagline -->
-                        <div>
+                        <div class="md:col-span-1">
                             <div class="flex items-center gap-3">
-                                <img src="/logo-success.webp" alt="Logo" class="h-12 w-30" />
+                                <img src="/logo-success.webp" alt="Logo" class="h-10 w-24 sm:h-12 sm:w-30" />
                             </div>
-                            <p class="mt-4 max-w-sm text-sm text-white/70">
+                            <p class="mt-4 max-w-sm text-sm leading-relaxed text-white/70">
                                 Guidance et clarté à travers des tirages inspirés et un accompagnement personnalisé.
                             </p>
-                            <div class="mt-6 flex gap-4">
+                            <div class="mt-6 flex gap-3">
                                 <a class="social-icon group" href="#" aria-label="Instagram">
-                                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
+                                    <svg class="h-5 w-5 sm:h-6 sm:w-6" fill="currentColor" viewBox="0 0 256 256">
                                         <rect x="32" y="32" width="192" height="192" rx="48"></rect>
                                         <circle cx="128" cy="128" r="40" fill="black"></circle>
                                     </svg>
                                 </a>
                                 <a class="social-icon group" href="#" aria-label="Facebook">
-                                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
+                                    <svg class="h-5 w-5 sm:h-6 sm:w-6" fill="currentColor" viewBox="0 0 256 256">
                                         <path d="M176 24h-32a56 56 0 0 0-56 56v24H64v32h24v96h32v-96h32l8-32h-40V80a16 16 0 0 1 16-16h32Z"></path>
                                     </svg>
                                 </a>
                                 <a class="social-icon group" href="#" aria-label="X">
-                                    <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
+                                    <svg class="h-5 w-5 sm:h-6 sm:w-6" fill="currentColor" viewBox="0 0 256 256">
                                         <path
                                             d="M152.23,116.19l62.51-78.85H184.2l-38.79,49-30.06-49H80.2l43.9,70.44L60.44,218.66H99l42.31-53.56,32.63,53.56h35.09Z"
                                         ></path>
@@ -171,10 +175,10 @@ onMounted(() => {
                         </div>
 
                         <!-- Quick links -->
-                        <div class="grid grid-cols-2 gap-8 md:grid-cols-2">
+                        <div class="grid grid-cols-2 gap-6 sm:gap-8 md:col-span-1 md:grid-cols-2">
                             <div>
-                                <h4 class="mb-4 text-lg font-bold tracking-wider text-white">Navigation</h4>
-                                <ul class="space-y-3 text-sm">
+                                <h4 class="mb-4 text-base font-bold tracking-wider text-white sm:text-lg">Navigation</h4>
+                                <ul class="space-y-2 text-sm sm:space-y-3">
                                     <li>
                                         <Link class="footer-link group" href="/">Accueil</Link>
                                     </li>
@@ -190,23 +194,27 @@ onMounted(() => {
                                 </ul>
                             </div>
                             <div>
-                                <h4 class="mb-4 text-lg font-bold tracking-wider text-white">Légal</h4>
-                                <ul class="space-y-3 text-sm">
+                                <h4 class="mb-4 text-base font-bold tracking-wider text-white sm:text-lg">Légal</h4>
+                                <ul class="space-y-2 text-sm sm:space-y-3">
                                     <li>
-                                        <Link class="footer-link group" href="/politique-confidalite">Politique de Confidentialité</Link>
+                                        <Link class="footer-link group" href="/politique-confidalite">Confidentialité</Link>
                                     </li>
                                     <li>
-                                        <Link class="footer-link group" href="/term-condition">Conditions d'Utilisation</Link>
+                                        <Link class="footer-link group" href="/term-condition">Conditions</Link>
                                     </li>
                                 </ul>
                             </div>
                         </div>
 
                         <!-- Newsletter -->
-                        <div>
-                            <h4 class="mb-4 text-lg font-bold tracking-wider text-white">Newsletter</h4>
-                            <p class="mb-4 text-sm text-white/70">Recevez des inspirations et offres directement dans votre boîte mail.</p>
-                            <form class="mt-2 flex max-w-md overflow-hidden rounded-full border border-white/20 bg-white/5 backdrop-blur-sm">
+                        <div class="md:col-span-1 lg:col-span-1">
+                            <h4 class="mb-4 text-base font-bold tracking-wider text-white sm:text-lg">Newsletter</h4>
+                            <p class="mb-4 text-sm leading-relaxed text-white/70">
+                                Recevez des inspirations et offres directement dans votre boîte mail.
+                            </p>
+                            <form
+                                class="mt-2 flex max-w-md flex-col gap-2 overflow-hidden rounded-full border border-white/20 bg-white/5 backdrop-blur-sm sm:flex-row"
+                            >
                                 <input
                                     type="email"
                                     placeholder="Votre e-mail"
@@ -214,7 +222,7 @@ onMounted(() => {
                                 />
                                 <button
                                     type="button"
-                                    class="mystic-btn mystic-btn-secondary px-4 text-sm font-bold whitespace-nowrap text-white transition-all"
+                                    class="mystic-btn mystic-btn-secondary min-w-[120px] px-4 py-3 text-sm font-bold whitespace-nowrap text-white transition-all"
                                 >
                                     S'abonner
                                 </button>
@@ -222,7 +230,7 @@ onMounted(() => {
                         </div>
                     </div>
 
-                    <div class="mt-12 border-t border-white/10 pt-6 text-center text-xs text-white/60 sm:text-sm">
+                    <div class="mt-8 border-t border-white/10 pt-6 text-center text-xs text-white/60 sm:mt-12 sm:text-sm">
                         © 2024 Kris Saint Ange. Tous droits réservés.
                     </div>
                 </div>
@@ -283,8 +291,8 @@ onMounted(() => {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
@@ -301,11 +309,13 @@ onMounted(() => {
     position: relative;
     color: rgba(255, 255, 255, 0.7);
     transition: all 0.3s ease;
+    display: inline-block;
+    padding: 4px 0;
 }
 
 .footer-link:hover {
     color: #ffd700;
-    padding-left: 8px;
+    padding-left: 12px;
 }
 
 .footer-link::before {
@@ -367,4 +377,48 @@ header {
 input:focus {
     box-shadow: 0 0 0 2px rgba(125, 91, 166, 0.5);
 }
+
+/* Responsive improvements */
+@media (max-width: 768px) {
+    .container {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
+
+    /* Better touch targets for mobile */
+    button,
+    a {
+        min-height: 44px;
+        min-width: 44px;
+    }
+
+    /* Improve mobile menu spacing */
+    .fixed .absolute {
+        width: 85%;
+        max-width: 320px;
+    }
+}
+
+@media (max-width: 640px) {
+    /* Stack footer columns on very small screens */
+    footer .grid {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+
+    /* Center align footer content on mobile */
+    footer .md\\:col-span-1 {
+        text-align: center;
+    }
+
+    footer .flex {
+        justify-content: center;
+    }
+}
+
+/* Prevent horizontal scroll */
+html,
+body {
+    overflow-x: hidden;
+}
 </style>
diff --git a/resources/js/pages/cards/resultat.vue b/resources/js/pages/cards/resultat.vue
index 362a71c..b0ed6d0 100644
--- a/resources/js/pages/cards/resultat.vue
+++ b/resources/js/pages/cards/resultat.vue
@@ -44,65 +44,152 @@ onMounted(async () => {
 
 <template>
     <LandingLayout>
-        <main class="flex flex-1 justify-center px-4 py-8 sm:px-6 sm:py-12 md:py-16 lg:px-8">
-            <div class="layout-content-container flex w-full max-w-4xl flex-col">
+        <main class="min-h-screen bg-gradient-to-br py-8">
+            <div class="container mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
                 <!-- Header Section -->
-                <div class="mb-8 text-center md:mb-12">
-                    <h1 class="text-midnight-blue mb-2 text-3xl font-bold sm:text-4xl md:text-5xl">Votre Lecture</h1>
-                    <p class="text-spiritual-earth mx-auto max-w-2xl text-base sm:text-lg">
-                        Voici une analyse détaillée de votre lecture choisie. Veuillez vérifier avant de procéder au paiement.
+                <div class="mt-10 mb-12 text-center md:mb-16">
+                    <h1
+                        class="mb-4 bg-gradient-to-r from-purple-300 via-purple-200 to-purple-100 bg-clip-text text-4xl font-black text-transparent md:text-5xl lg:text-6xl"
+                    >
+                        Votre Lecture Spirituelle
+                    </h1>
+                    <p class="mx-auto max-w-3xl text-lg leading-relaxed text-purple-300/80 md:text-xl">
+                        Découvrez les messages que l'univers a préparés pour vous. Cette analyse détaillée vous guidera sur votre chemin.
                     </p>
                 </div>
 
                 <!-- Loading State -->
-                <div v-if="loading" class="flex items-center justify-center py-16">
-                    <div class="h-12 w-12 animate-spin rounded-full border-t-2 border-b-2 border-[var(--subtle-gold)]"></div>
+                <div v-if="loading" class="flex flex-col items-center justify-center py-20">
+                    <div class="relative">
+                        <div class="h-16 w-16 animate-spin rounded-full border-4 border-purple-700/30"></div>
+                        <div
+                            class="absolute top-1/2 left-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform animate-pulse rounded-full bg-gradient-to-r from-purple-400 to-purple-300"
+                        ></div>
+                    </div>
+                    <p class="mt-6 font-medium text-purple-300/80">Chargement de votre lecture...</p>
                 </div>
 
                 <!-- Error State -->
-                <div v-else-if="error" class="mb-8 rounded-lg bg-red-50 p-6 text-center">
-                    <div class="mb-2 font-medium text-red-700">Erreur</div>
-                    <p class="text-red-600">{{ error }}</p>
-                    <button @click="$router.back()" class="mt-4 rounded-md bg-red-600 px-4 py-2 text-white transition-colors hover:bg-red-700">
-                        Retour
-                    </button>
+                <div v-else-if="error" class="mx-auto mb-12 max-w-2xl">
+                    <div
+                        class="rounded-2xl border border-red-700/30 bg-gradient-to-br from-red-900/30 to-purple-900/40 p-8 text-center shadow-2xl backdrop-blur-sm"
+                    >
+                        <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full border border-red-700/20 bg-red-900/40">
+                            <div class="text-2xl text-red-300">⚠️</div>
+                        </div>
+                        <h3 class="mb-2 text-xl font-bold text-red-200">Une erreur est survenue</h3>
+                        <p class="mb-6 text-red-300/90">{{ error }}</p>
+                        <button
+                            @click="$router.back()"
+                            class="transform rounded-full border border-red-500/20 bg-gradient-to-r from-red-600 to-purple-700 px-6 py-3 font-semibold text-white transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
+                        >
+                            Retour à la page précédente
+                        </button>
+                    </div>
                 </div>
 
                 <!-- Empty State -->
-                <div v-else-if="!hasCards" class="rounded-lg bg-gray-50 p-8 text-center">
-                    <p class="text-gray-600">Aucune carte n'a été trouvée pour votre session.</p>
+                <div v-else-if="!hasCards" class="mx-auto max-w-2xl">
+                    <div
+                        class="rounded-2xl border border-purple-700/30 bg-gradient-to-br from-purple-900/40 to-indigo-900/30 p-12 text-center shadow-2xl backdrop-blur-sm"
+                    >
+                        <div
+                            class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full border border-purple-600/20 bg-purple-800/30"
+                        >
+                            <div class="text-3xl text-purple-300">🔮</div>
+                        </div>
+                        <h3 class="mb-3 text-2xl font-bold text-purple-200">Aucune carte trouvée</h3>
+                        <p class="mb-6 text-purple-300/80">Votre session n'a pas généré de lecture. Veuillez réessayer ou contacter le support.</p>
+                        <button
+                            @click="$router.back()"
+                            class="rounded-full border border-purple-500/20 bg-gradient-to-r from-purple-600 to-indigo-700 px-6 py-3 font-semibold text-white transition-all duration-300 hover:shadow-lg"
+                        >
+                            Nouvelle tentative
+                        </button>
+                    </div>
                 </div>
 
                 <!-- Cards Results -->
-                <div v-else class="mb-8 md:mb-12">
-                    <div class="space-y-6 md:space-y-8">
-                        <card-result
+                <div v-else class="mb-12 md:mb-16">
+                    <div class="grid gap-8 md:gap-10">
+                        <div
                             v-for="(card, index) in cards"
                             :key="card.id || index"
-                            :card-number="card.id"
-                            :name="card.name"
-                            :image-url="card.image_url"
-                            :orientation="card.orientation"
-                            :description="card.description"
-                        />
+                            class="transform transition-all duration-500 hover:scale-[1.02]"
+                            :style="{ animationDelay: `${index * 100}ms` }"
+                        >
+                            <card-result
+                                :card-number="card.id"
+                                :name="card.name"
+                                :image-url="card.image_url"
+                                :orientation="card.orientation"
+                                :description="card.description"
+                            />
+                        </div>
                     </div>
                 </div>
 
                 <!-- Consultation CTA -->
                 <div
-                    v-if="!loading && !error"
-                    class="border-linen rounded-lg border bg-white p-6 text-center shadow-sm transition-all duration-300 hover:shadow-md md:p-8 lg:p-12"
+                    v-if="!loading && !error && hasCards"
+                    class="relative mx-auto max-w-4xl overflow-hidden rounded-2xl border border-purple-700/30 bg-gradient-to-br from-purple-900/40 to-purple-800/30 p-8 shadow-2xl backdrop-blur-sm md:p-12"
                 >
-                    <div class="bg-subtle-gold mx-auto mb-6 h-1 w-16 rounded-full"></div>
-                    <p class="text-midnight-blue/80 mx-auto mb-6 max-w-2xl text-base leading-relaxed md:mb-8 md:text-lg">
-                        Pour une guidance plus approfondie, réservez une consultation personnalisée avec Kris Saint Ange.
-                    </p>
-                    <button
-                        @click="goToBooking"
-                        class="hover:bg-opacity-90 focus:ring-opacity-50 mt-4 inline-flex h-12 min-w-[160px] items-center justify-center rounded-full bg-[var(--subtle-gold)] px-6 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)] focus:outline-none md:mt-6 md:px-8"
-                    >
-                        Réserver une Consultation
-                    </button>
+                    <!-- Background decoration -->
+                    <div
+                        class="absolute top-0 right-0 h-32 w-32 translate-x-16 -translate-y-16 rounded-full bg-gradient-to-br from-purple-700/20 to-purple-600/10"
+                    ></div>
+                    <div
+                        class="absolute bottom-0 left-0 h-24 w-24 -translate-x-12 translate-y-12 rounded-full bg-gradient-to-tr from-purple-700/20 to-purple-600/10"
+                    ></div>
+                    <div class="absolute inset-0 bg-gradient-to-r from-transparent via-purple-900/5 to-transparent"></div>
+
+                    <div class="relative z-10 text-center">
+                        <div
+                            class="mb-6 inline-flex h-16 w-16 items-center justify-center rounded-full border border-purple-400/30 bg-gradient-to-br from-purple-500 to-purple-400"
+                        >
+                            <div class="text-2xl text-purple-950">🌟</div>
+                        </div>
+                        <h3 class="mb-4 bg-gradient-to-r from-purple-300 to-purple-200 bg-clip-text text-2xl font-black text-transparent md:text-3xl">
+                            Approfondissez Votre Voyage
+                        </h3>
+                        <p class="mx-auto mb-8 max-w-2xl text-lg leading-relaxed text-purple-300/80">
+                            Pour une guidance personnalisée et une compréhension plus profonde de votre chemin de vie, réservez une consultation
+                            privée avec Kris Saint Ange.
+                        </p>
+                        <button
+                            @click="goToBooking"
+                            class="group relative transform rounded-full border border-purple-400/30 bg-gradient-to-r from-purple-500 to-purple-400 px-8 py-4 text-lg font-bold tracking-wide text-purple-950 shadow-lg transition-all duration-300 hover:-translate-y-1 hover:from-purple-400 hover:to-purple-300 hover:shadow-xl"
+                        >
+                            <span class="relative z-10 flex items-center justify-center">
+                                Réserver une Consultation
+                                <svg
+                                    class="ml-2 h-5 w-5 transform transition-transform group-hover:translate-x-1"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    viewBox="0 0 24 24"
+                                >
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6" />
+                                </svg>
+                            </span>
+                            <div
+                                class="absolute inset-0 rounded-full bg-gradient-to-r from-purple-400 to-purple-300 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+                            ></div>
+                        </button>
+                        <p class="mt-4 text-sm text-purple-400/70">Séances limitées disponibles</p>
+                    </div>
+                </div>
+
+                <!-- Success Message -->
+                <div
+                    v-if="!loading && !error && hasCards"
+                    class="mx-auto mt-8 max-w-2xl rounded-2xl border border-green-700/30 bg-gradient-to-r from-green-900/30 to-emerald-900/20 p-6 text-center backdrop-blur-sm"
+                >
+                    <div class="flex items-center justify-center space-x-3">
+                        <div class="flex h-8 w-8 items-center justify-center rounded-full border border-green-600/20 bg-green-800/40">
+                            <div class="text-green-300">✓</div>
+                        </div>
+                        <p class="font-medium text-green-200">Votre lecture a été générée avec succès !</p>
+                    </div>
                 </div>
             </div>
         </main>
@@ -110,18 +197,76 @@ onMounted(async () => {
 </template>
 
 <style scoped>
-.layout-content-container {
-    animation: fadeIn 0.6s ease-out;
+.container {
+    animation: fadeInUp 0.8s ease-out;
 }
 
-@keyframes fadeIn {
+@keyframes fadeInUp {
     from {
         opacity: 0;
-        transform: translateY(10px);
+        transform: translateY(30px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
+
+/* Staggered animation for cards */
+.grid > * {
+    animation: slideInLeft 0.6s ease-out both;
+}
+
+@keyframes slideInLeft {
+    from {
+        opacity: 0;
+        transform: translateX(-30px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/* Custom scrollbar for dark theme */
+::-webkit-scrollbar {
+    width: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--muted);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--primary);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--accent);
+}
+
+/* Glow effects for interactive elements */
+button {
+    box-shadow: 0 4px 15px rgba(128, 90, 213, 0.3);
+}
+
+button:hover {
+    box-shadow: 0 8px 25px rgba(128, 90, 213, 0.5);
+}
+
+/* Subtle background pattern */
+main::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image:
+        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 80% 20%, rgba(199, 120, 221, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 40% 40%, rgba(128, 90, 213, 0.05) 0%, transparent 50%);
+    pointer-events: none;
+}
 </style>