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/MesPersos.vue

@@ -1,191 +1,21 @@
-<!-- Mes Personnalisations — visible depuis le shop, onglet "Mes Persos" -->
+<!-- Mes Personnalisations — onglet "Mes Persos" du shop.
+     Assemble les sections de préférences (chacune autonome, lit ses composables). -->
 <template>
   <div class="persos">
-
-    <!-- ── Image de fond du chat ─────────────────────────────────── -->
-    <section class="section">
-      <h2 class="section-title">🖼️ Fond du chat</h2>
-      <p class="section-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>
-
-    <!-- ── Bouton d'envoi ─────────────────────────────────────────── -->
-    <section class="section" :class="{ locked: !myPerks.elementSkin }">
-      <h2 class="section-title">
-        ➤ Bouton d'envoi
-        <span v-if="!myPerks.elementSkin" class="lock-badge">🔒 Skin d'éléments requis</span>
-      </h2>
-      <div class="style-grid">
-        <button
-          v-for="[k, p] in Object.entries(SEND_BUTTON_PRESETS)"
-          :key="k"
-          class="style-tile"
-          :class="{ 'style-tile--active': prefs.sendButton === k }"
-          :disabled="!myPerks.elementSkin"
-          @click="prefs.sendButton = k as SendButtonKey"
-          type="button"
-        >
-          <span class="style-swatch" :style="{ background: p.bg, color: p.color, borderRadius: p.radius }">➤</span>
-          <span class="style-label">{{ p.label }}</span>
-        </button>
-      </div>
-    </section>
-
-    <!-- ── Skin du bouton d'envoi ───────────────────────────────────── -->
-    <section class="section" :class="{ locked: !hasSendSkins }">
-      <h2 class="section-title">
-        🖱️ Skin du bouton d'envoi
-        <span v-if="!hasSendSkins" class="lock-badge">Achetez un skin dans le shop</span>
-      </h2>
-      <template v-if="hasSendSkins">
-        <div class="style-grid">
-          <button
-            class="style-tile"
-            :class="{ 'style-tile--active': prefs.sendSkin === '' }"
-            @click="prefs.sendSkin = ''"
-            type="button"
-          >
-            <span class="style-swatch" style="font-size:14px">►</span>
-            <span class="style-label">Défaut</span>
-          </button>
-          <button
-            v-for="s in myPerks.sendSkins"
-            :key="s.id"
-            class="style-tile"
-            :class="{ 'style-tile--active': prefs.sendSkin === s.id }"
-            @click="prefs.sendSkin = s.id"
-            type="button"
-          >
-            <span class="style-swatch" style="font-size:20px">{{ s.char }}</span>
-            <span class="style-label">{{ s.label ?? s.id.replace('send-skin-', '') }}</span>
-          </button>
-        </div>
-      </template>
-      <p v-else class="section-sub">Aucun skin possédé pour l'instant.</p>
-    </section>
-
-    <!-- ── Couleur de l'IP ─────────────────────────────────────── -->
-    <section class="section" :class="{ locked: !myPerks.ipColors }">
-      <h2 class="section-title">
-        🎨 Couleur de mon IP
-        <span v-if="!myPerks.ipColors" class="lock-badge">🔒 Palette IP requise</span>
-      </h2>
-      <p v-if="myIp" class="section-sub">IP&nbsp;: <code class="code-ip" :style="ipPreviewStyle">{{ myIp }}</code></p>
-      <div class="style-grid">
-        <button
-          v-for="opt in IP_COLOR_OPTIONS"
-          :key="opt.value"
-          class="style-tile"
-          :class="{ 'style-tile--active': currentIpColor === opt.value }"
-          :disabled="!myPerks.ipColors"
-          @click="setIpColor(opt.value)"
-          type="button"
-        >
-          <span v-if="opt.swatch" class="color-dot" :style="{ background: opt.swatch }" />
-          <span v-else class="color-dot color-dot--auto" />
-          <span class="style-label">{{ opt.label }}</span>
-        </button>
-      </div>
-    </section>
-
-    <!-- ── Pets ───────────────────────────────────────────────────── -->
-    <section class="section" :class="{ locked: !hasPets }">
-      <h2 class="section-title">
-        ✨ Mes pets
-        <span v-if="!hasPets" class="lock-badge">Achetez un Pet dans le shop</span>
-      </h2>
-      <template v-if="hasPets">
-        <div class="pet-grid">
-          <button
-            v-for="pet in ownedPets"
-            :key="pet.char"
-            class="pet-cell"
-            :class="{ 'pet-cell--active': activePet === pet.char }"
-            @click="togglePet(pet.char)"
-            type="button"
-          >{{ pet.char }}</button>
-          <button
-            class="pet-cell pet-cell--none"
-            :class="{ 'pet-cell--active': activePet === '' }"
-            @click="togglePet('')"
-            type="button"
-          >✕ Aucun</button>
-        </div>
-        <p class="section-sub" style="margin-top:6px">
-          Actif&nbsp;: <strong>{{ activePet || 'aucun' }}</strong>
-          — s'affiche à gauche de ton IP dans le chat.
-        </p>
-      </template>
-      <p v-else class="section-sub">Aucun pet possédé pour l'instant.</p>
-    </section>
-
+    <BgPrefsSection />
+    <SendButtonPrefsSection />
+    <SendSkinPrefsSection />
+    <IpColorPrefsSection />
+    <PetsPrefsSection />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue';
-import { useCustomStyles, SEND_BUTTON_PRESETS, IP_COLOR_OPTIONS, type SendButtonKey } from '@/composables/useCustomStyles';
-import { useMyPerks } from '@/composables/useMessages';
-import { getIpColorWithPerks, getIpGlow } from '@/composables/ipColor';
-import { useWallet } from '@/composables/useWallet';
-
-const { prefs } = useCustomStyles();
-const { myPerks } = useMyPerks();
-const { ip: myIp } = useWallet();
-
-// ── Background ──────────────────────────────────────────────────────────────
-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 = ''; }
-
-// ── IP color ────────────────────────────────────────────────────────────────
-const currentIpColor = computed(() => prefs.ipColors[myIp.value] ?? 'auto');
-
-function setIpColor(value: string): void {
-  if (!myIp.value) return;
-  prefs.ipColors[myIp.value] = value;
-}
-
-const ipPreviewStyle = computed(() => {
-  if (!myIp.value) return {};
-  const color = currentIpColor.value === 'auto'
-    ? getIpColorWithPerks(myIp.value, myPerks.value)
-    : currentIpColor.value;
-  return { color, textShadow: getIpGlow(color) };
-});
-
-// ── Pets ────────────────────────────────────────────────────────────────────
-const ownedPets = computed(() => {
-  const seen = new Set<string>();
-  return (myPerks.value.pets ?? []).filter((p) => {
-    if (seen.has(p.char)) return false;
-    seen.add(p.char);
-    return true;
-  });
-});
-const hasPets = computed(() => ownedPets.value.length > 0);
-const hasSendSkins = computed(() => (myPerks.value.sendSkins?.length ?? 0) > 0);
-const activePet = computed(() =>
-  myIp.value && myIp.value in prefs.ipPets ? prefs.ipPets[myIp.value] : (ownedPets.value[0]?.char ?? '')
-);
-
-function togglePet(char: string): void {
-  if (!myIp.value) return;
-  prefs.ipPets[myIp.value] = char;
-}
+import BgPrefsSection from './persos/BgPrefsSection.vue';
+import SendButtonPrefsSection from './persos/SendButtonPrefsSection.vue';
+import SendSkinPrefsSection from './persos/SendSkinPrefsSection.vue';
+import IpColorPrefsSection from './persos/IpColorPrefsSection.vue';
+import PetsPrefsSection from './persos/PetsPrefsSection.vue';
 </script>
 
 <style scoped>
@@ -196,152 +26,4 @@ function togglePet(char: string): void {
   padding: 4px 0;
   max-width: 640px;
 }
-
-.section {
-  background: #101018;
-  border: 1px solid #20203a;
-  border-radius: 10px;
-  padding: 18px 20px;
-}
-.section.locked {
-  opacity: 0.6;
-}
-
-.section-title {
-  font-size: 14px;
-  font-weight: bold;
-  color: #ccccee;
-  margin: 0 0 6px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.section-sub {
-  font-size: 11px;
-  color: #5a5a80;
-  margin: 0 0 12px;
-}
-
-.lock-badge {
-  font-size: 10px;
-  font-weight: normal;
-  color: #886644;
-  background: #1a1408;
-  border: 1px solid #44330066;
-  border-radius: 8px;
-  padding: 2px 8px;
-}
-
-/* Background */
-.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 tiles */
-.style-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-}
-.style-tile {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 6px;
-  background: #141420;
-  border: 1px solid #222234;
-  border-radius: 8px;
-  padding: 10px 14px;
-  cursor: pointer;
-  transition: border-color 0.1s, background 0.1s;
-}
-.style-tile:hover:not(:disabled) { background: #1a1a2e; border-color: #333355; }
-.style-tile--active { border-color: #00ddff; background: #0a1a20; }
-.style-tile:disabled { cursor: not-allowed; opacity: 0.5; }
-
-.style-swatch {
-  width: 34px; height: 34px;
-  border-radius: inherit;
-  display: flex; align-items: center; justify-content: center;
-  font-size: 14px; font-weight: bold;
-  border: 1px solid #ffffff10;
-}
-.style-label {
-  font-size: 10px;
-  color: #8888aa;
-  white-space: nowrap;
-}
-.style-tile--active .style-label { color: #00ddff; }
-
-/* Color dots */
-.color-dot {
-  width: 20px; height: 20px;
-  border-radius: 50%;
-  border: 1px solid #ffffff22;
-}
-.color-dot--auto {
-  background: conic-gradient(#00ddff, #ff00cc, #00ee77, #ffdd44, #00ddff);
-}
-
-/* IP code */
-.code-ip {
-  font-family: 'Courier New', monospace;
-  font-size: 12px;
-  font-weight: bold;
-}
-
-/* Pet grid */
-.pet-grid {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-.pet-cell {
-  width: 42px; height: 42px;
-  background: #141420;
-  border: 1px solid #222234;
-  border-radius: 8px;
-  font-size: 20px;
-  cursor: pointer;
-  transition: border-color 0.1s, background 0.1s;
-  display: flex; align-items: center; justify-content: center;
-}
-.pet-cell:hover { background: #1a1a2e; border-color: #333355; }
-.pet-cell--active { border-color: #00ddff; background: #0a1a20; }
-.pet-cell--none { font-size: 11px; color: #666; width: auto; padding: 0 10px; }
-.pet-cell--none.pet-cell--active { color: #00ddff; }
 </style>