refactor(shop): découpe MesPersos en sous-sections + nettoyage ProductCard

- MesPersos.vue (347L) éclaté en 5 sous-composants autonomes sous
  shop/persos/ (BgPrefsSection, SendButtonPrefsSection, SendSkinPrefsSection,
  IpColorPrefsSection, PetsPrefsSection). MesPersos n'est plus qu'un wrapper.
- CSS partagé des sections déplacé en classes globales .pf-* dans style.css
  (plus de duplication entre les sections).
- ProductCard : metaJson typé via parseMeta<ProductMeta>(), suppression des
  casts `any` (find/designs) — comportement identique.
- vue-tsc --noEmit : 0 erreur.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/components/shop/persos/BgPrefsSection.vue

@@ -0,0 +1,55 @@
+<!-- Mes Persos › Fond du chat (image de fond personnalisée, viewer-side) -->
+<template>
+  <section class="pf-section">
+    <h2 class="pf-title">🖼️ Fond du chat</h2>
+    <p class="pf-sub">URL d'une image (jpg, png, gif, webp…) ou laisse vide pour le fond par défaut.</p>
+    <div class="bg-row">
+      <input
+        v-model="bgDraft"
+        class="bg-input"
+        type="text"
+        placeholder="https://example.com/image.jpg"
+        @keydown.enter="applyBg"
+      />
+      <button class="btn-apply" @click="applyBg" type="button">Appliquer</button>
+      <button v-if="prefs.chatBgUrl" class="btn-reset" @click="resetBg" type="button">✕ Retirer</button>
+    </div>
+    <div v-if="prefs.chatBgUrl" class="bg-preview" :style="{ backgroundImage: `url(${prefs.chatBgUrl})` }" />
+  </section>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { useCustomStyles } from '@/composables/useCustomStyles';
+
+const { prefs } = useCustomStyles();
+
+const bgDraft = ref(prefs.chatBgUrl);
+watch(() => prefs.chatBgUrl, (v) => { bgDraft.value = v; });
+
+function applyBg(): void { prefs.chatBgUrl = bgDraft.value.trim(); }
+function resetBg(): void { prefs.chatBgUrl = ''; bgDraft.value = ''; }
+</script>
+
+<style scoped>
+.bg-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
+.bg-input {
+  flex: 1; background: #141420; border: 1px solid #222234; border-radius: 6px;
+  color: #aaaacc; font-family: Arial, sans-serif; font-size: 12px; padding: 8px 12px; outline: none;
+}
+.bg-input:focus { border-color: #333355; }
+.btn-apply {
+  background: #1a2a1a; border: 1px solid #33aa55; color: #44dd77;
+  font-size: 12px; font-weight: bold; padding: 7px 14px; border-radius: 14px; cursor: pointer;
+}
+.btn-apply:hover { background: #234a23; }
+.btn-reset {
+  background: #2a1010; border: 1px solid #882222; color: #ff6655;
+  font-size: 11px; padding: 7px 12px; border-radius: 14px; cursor: pointer;
+}
+.btn-reset:hover { background: #3a1818; }
+.bg-preview {
+  width: 100%; height: 80px; background-size: cover; background-position: center;
+  border-radius: 6px; border: 1px solid #222234;
+}
+</style>