feat: enhance customization options with new 'Mes Persos' panel and improved context menus

frontend/src/components/shop/ProductCard.vue

@@ -81,7 +81,15 @@
         <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>
+      <button
+        v-else
         class="buy"
         :disabled="disabled"
         @click="onBuy"
@@ -103,7 +111,10 @@ const props = defineProps<{
   freeMode: boolean;
 }>();
 
-const emit = defineEmits<{ buy: [productId: string, options: PurchaseOptions] }>();
+const emit = defineEmits<{
+  buy: [productId: string, options: PurchaseOptions];
+  goPerso: [];
+}>();
 
 const meta = computed<any>(() => {
   try { return props.product.metaJson ? JSON.parse(props.product.metaJson) : {}; }
@@ -293,4 +304,11 @@ function onBuy(): void {
 }
 .buy:hover:not(:disabled) { background: #005599; box-shadow: 0 0 18px #00ddff55; }
 .buy:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
+
+.buy--perso {
+  background: #1a1030; border: 1px solid #8844cc; color: #cc88ff;
+  font-size: 13px; font-weight: bold; padding: 9px 18px; border-radius: 20px; cursor: pointer;
+  transition: background 0.15s;
+}
+.buy--perso:hover { background: #261844; }
 </style>