feat: update styles and enhance pet purchase flow in marketplace components

frontend/src/components/shop/ProductCard.vue

@@ -81,13 +81,20 @@
         <span class="price-now">{{ fmt(effectivePrice) }}</span>
         <span class="price-unit">cr</span>
       </div>
-      <!-- Pets: redirige vers Mes Persos au lieu d'acheter -->
-      <button
-        v-if="product.kind === 'pet'"
-        class="buy buy--perso"
-        @click="$emit('goPerso')"
-        type="button"
-      >✨ Mes Persos</button>
+      <!-- Pets: bouton acheter + lien Mes Persos -->
+      <template v-if="product.kind === 'pet'">
+        <button
+          class="buy"
+          :disabled="disabled"
+          @click="onBuy"
+          type="button"
+        >{{ buyLabel }}</button>
+        <button
+          class="buy buy--perso"
+          @click="$emit('goPerso')"
+          type="button"
+        >✨ Mes Persos</button>
+      </template>
       <button
         v-else
         class="buy"
@@ -176,16 +183,14 @@ const ownedAlready = computed(() => {
   return false;
 });
 
-const petFull = computed(() => props.product.kind === 'pet' && props.petCount >= 3);
 const soldOut = computed(() => props.product.stockLimit != null && props.product.stockSold >= props.product.stockLimit);
 
-const disabled = computed(() => props.buying || ownedAlready.value || petFull.value || soldOut.value);
+const disabled = computed(() => props.buying || ownedAlready.value || soldOut.value);
 
 const buyLabel = computed(() => {
   if (props.buying) return '...';
   if (soldOut.value) return 'Épuisé';
   if (ownedAlready.value) return 'Possédé ✓';
-  if (petFull.value) return 'Max 3 pets';
   return props.freeMode ? 'Obtenir (gratuit)' : 'Acheter';
 });
 
@@ -242,7 +247,7 @@ function onBuy(): void {
   letter-spacing: 0.5px;
   padding: 3px 9px;
   border-radius: 8px;
-  box-shadow: 0 0 10px #ff226688;
+  box-shadow: none;
 }
 
 .card-head { display: flex; gap: 12px; align-items: flex-start; }
@@ -256,7 +261,7 @@ function onBuy(): void {
 }
 .prev-ip { font-family: 'Courier New', monospace; font-size: 12px; font-weight: bold; }
 .prev-plain { color: #666688; }
-.prev-gold { color: #ffdd44; text-shadow: 0 0 8px #ffaa00cc; }
+.prev-gold { color: #aa8833; }
 .prev-arrow { color: #444466; }
 
 .opts { display: flex; flex-direction: column; gap: 8px; }
@@ -283,7 +288,7 @@ function onBuy(): void {
   aspect-ratio: 1; background: #0c0c16; border: 1px solid #20203a; border-radius: 6px;
   font-size: 18px; color: #ccccee; cursor: pointer; display: flex; align-items: center; justify-content: center;
 }
-.pet-cell.active { border-color: #ff44cc; box-shadow: 0 0 8px #ff44cc55; }
+.pet-cell.active { border-color: #8844aa; }
 .pet-pos { display: flex; gap: 6px; }
 
 .stock { display: flex; flex-direction: column; gap: 4px; }
@@ -291,18 +296,18 @@ function onBuy(): void {
 .stock-fill { height: 100%; background: linear-gradient(90deg, #ffaa00, #ff4444); }
 .stock-txt { font-size: 10px; color: #886644; }
 
-.card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 6px; }
+.card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
 .price { display: flex; align-items: baseline; gap: 6px; }
 .price-old { font-size: 12px; color: #555; text-decoration: line-through; }
-.price-now { font-size: 20px; font-weight: bold; color: #ffdd66; font-family: 'Courier New', monospace; text-shadow: 0 0 10px #ffaa0044; }
+.price-now { font-size: 20px; font-weight: bold; color: #ccaa44; font-family: 'Courier New', monospace; }
 .price-unit { font-size: 11px; color: #886633; }
 
 .buy {
   background: #004488; border: 1px solid #0066aa; color: #00ddff;
   font-size: 13px; font-weight: bold; padding: 9px 18px; border-radius: 20px; cursor: pointer;
-  box-shadow: 0 0 12px #00448855; transition: background 0.15s, box-shadow 0.15s;
+  transition: background 0.15s;
 }
-.buy:hover:not(:disabled) { background: #005599; box-shadow: 0 0 18px #00ddff55; }
+.buy:hover:not(:disabled) { background: #1a4466; }
 .buy:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
 
 .buy--perso {