feat: marketplace, économie à crédits, perks temps réel & pubs réelles

Transforme XIP en réseau social satirique complet : monnaie fictive,
marketplace, cosmétiques visibles de tous, messages riches sandboxés,
pubs pilotées par les données, et tous les compteurs mock rendus réels.

Backend (Bun + Hono + Prisma + Redis)
- Économie par IP : modèles Wallet/Purchase/Entitlement, lib/wallet.ts
  avec spend() atomique (point unique du paywall) + recharge gratuite.
- isLocalhost() → mode gratuit (README « si localhost: pas de paywall »).
- Marketplace : lib/catalog.ts (achat transactionnel, stock limité,
  limites par IP) + routes/shop.ts ; 10 produits seedés (idempotent).
- Perks : lib/perks.ts (cache Redis busté à l'achat) ; authorPerks
  injecté dans les payloads messages + endpoint batch /api/perks ;
  frame WS « perks » global pour MAJ live des messages déjà affichés.
- Messages riches : Message.richMode/richContent, gating par entitlement.
- Pubs réelles : modèle Ad seedé avec les 4 pubs (ex-hardcodées),
  rotation par API, comptage d'impressions réel + réconciliation.
- WebSocket : IP capturée par connexion → broadcastToIp / broadcast ;
  frames wallet/perks/ads/alert.
- Pièces jointes : lib/storage.ts (UUID, jamais exécuté) + routes/uploads.ts
  (limite 1 Mo sauf déblocage/localhost, Content-Disposition: attachment).
- Alerte audio : routes/alert.ts (cooldown serveur Redis NX, clamp durée).
- Compteur « argent extorqué » réel : impressions×CPM + crédits dépensés.

Frontend (Vue 3 + Vite)
- /shop : ShopPage + ProductCard fidèles aux maquettes ; composables
  useWallet/useShop/usePerks/useAds/useAttachments/useAlert.
- UI de réponse (bannière + sous-threads), solde + lien Shop dans le header.
- Perks rendus : Style Doré (or), Pets autour de l'IP, NoAds masque les pubs.
- RichContent.vue : iframe sandbox verrouillée (htmlcss sans script ;
  js allow-scripts seul, jamais allow-same-origin) + CSP.
- AdBand/InlineCasinoAd pilotés par l'API ; barre de saisie avec 📎,
  compteur de caractères, composer riche et bouton alerte.

Infra
- Migration economy_ads_attachments_rich ; seed idempotent (produits+pubs).
- vite.config : usePolling (HMR fiable sur /mnt/c via WSL).
- backend/.gitignore : uploads/.

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

frontend/src/components/InlineCasinoAd.vue

@@ -1,14 +1,14 @@
-<!-- Pub casino néon : overlay dans le feed (identique à la maquette SVG) -->
+<!-- Pub casino néon : overlay dans le feed, pilotée par l'inventaire de pubs -->
 <template>
-  <div class="casino">
+  <div v-if="ad" class="casino">
     <div class="casino-head">
-      <p class="casino-title">♠ CASINO LUCKY ♠</p>
+      <p class="casino-title">♠ {{ ad.brand }} ♠</p>
       <p class="casino-subtitle">OFFRE EXCLUSIVE</p>
     </div>
 
     <div class="casino-body">
       <p class="bonus">+200%</p>
-      <p class="bonus-sub">sur votre 1er dépôt &bull; 500&euro; max</p>
+      <p class="bonus-sub">{{ ad.subtitle || 'sur votre 1er dépôt • 500€ max' }}</p>
 
       <div class="slots">
         <span class="suit suit--diamond">♦</span>
@@ -18,14 +18,29 @@
         <span class="suit suit--spade">♠</span>
       </div>
 
-      <button class="casino-cta">
-        JOUER MAINTENANT &rarr;
-      </button>
-      <p class="disclaimer">18+ &bull; Jeu responsable &bull; casino-lucky.bet</p>
+      <a class="casino-cta" :href="ad.url || '#'" target="_blank" rel="noopener noreferrer nofollow">
+        {{ ad.cta || 'JOUER MAINTENANT' }} &rarr;
+      </a>
+      <p class="disclaimer">18+ &bull; Jeu responsable &bull; {{ prettyUrl(ad.url) }}</p>
     </div>
   </div>
 </template>
 
+<script setup lang="ts">
+import { computed, onMounted, watch } from 'vue';
+import { useAds } from '@/composables/useAds';
+
+const { ads, fetchAds, reportImpression } = useAds('casino');
+const ad = computed(() => ads.value[0] ?? null);
+
+function prettyUrl(url?: string | null): string {
+  return (url || 'casino-lucky.bet').replace(/^https?:\/\//, '').replace(/\/$/, '');
+}
+
+watch(ad, (a) => { if (a) reportImpression(a.id); });
+onMounted(fetchAds);
+</script>
+
 <style scoped>
 .casino {
   width: 248px;
@@ -107,7 +122,9 @@
 
 /* ── CTA ── */
 .casino-cta {
+  display: block;
   width: 100%;
+  box-sizing: border-box;
   padding: 8px 0;
   background: #220000;
   border: 1.5px solid #ff2200;
@@ -117,6 +134,8 @@
   font-size: 13px;
   font-weight: bold;
   cursor: pointer;
+  text-align: center;
+  text-decoration: none;
   text-shadow: 0 0 6px #ff2200;
   box-shadow: 0 0 8px #ff220044;
   transition: box-shadow 0.15s;